Серверный и клиентский JavaScript

Мне очень трудно выбрать, какие рамки использовать для приложения, которое вот-вот вступит в разработку. Я сторонний парень, и мой друг делает фокус.

Скажем, я разрабатывал простое приложение списка дел. У меня есть шаблон для каждого элемента в списке задач. В идеале я бы хотел, чтобы серверный JavaScript использовал этот шаблон, а также клиентский JavaScript.

Таким образом, при загрузке страницы, если в базе данных уже имеется 5 todos, HTML будет скомпилирован на сервере. Если я затем добавлю новый элемент todo в список, клиентская JS скомпилирует HTML с использованием того же шаблона.

Я слышал много шума о Node.js, Backbone.js и т.д. Это совершенно потрясающе, сколько вариантов для такого рода вещей. Может ли кто-нибудь дать мне примеры использования этих технологий вместе?

Ответы

Ответ 1

Node.js - это JavaScript на стороне сервера, в то время как Backbone.js используется для структурирования вашего внешнего интерфейса элегантно, используя коллекции, модели и представления.

Каждый из них имеет свою собственную роль. Для лучшего сравнения между внешними фреймами вы можете проверить список Addy Osmany TODO, написанный в LOT из них: https://github.com/addyosmani/todomvc

Есть несколько хороших учебников по сети на Backbone:
 - http://dailyjs.com/2011/04/04/node-tutorial-19/
 - http://backbonetutorials.com/
 - http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

Здесь приложение, которое объединяет Node.js на сервере с Backbone на клиенте:

http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/

Магистраль (например, Node.js) действительно популярна, поэтому вы можете получить много помощи/ресурсов в Интернете.

Ответ 2

Конечно. Проверьте TodoMVC, чтобы лучше понять различные альтернативы.

Ответ 3

Вставьте файл шаблона в нижней части страницы. Таким образом, ваш клиентский код может легко его использовать без обращения к шаблону.

Пример использования JQuery при вызове вашего шаблона будет

<div style="display:none" id="sample_jquery_template">
  Hello ${name}
</div>

в вашем JavaScript-стороне на стороне клиента

..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );

Ответ 4

Существует достаточно решений для шаблонов, например mustache.js, работающих на обоих концах.
Но для работы с шаблонами на стороне клиента полезно иметь предоставленные данные.
Henrik Joreteg написал хорошую статью о повторном использовании ваших базовых моделей и синхронизации их между клиентом и сервером.

Ответ 5

Dav Glass из Yahoo дал хороший , показывающий, как он запускал YUI3 на клиенте и сервере с помощью node.js.

Вот его github примеров из видео:

Вам также может быть интересно проверить jsdom

Я только начал изучать node, и это видео действительно помогло мне понять, как экспериментировать на сервере и клиенте с помощью node. Вы увидите, что он отключил javascript, и календарь все еще работает - это было круто.

И вот хороший backbone ресурс:

Ответ 6

Вы можете взглянуть на http://derbyjs.com/#why_not_use_rails_and_backbone

Они пытаются добиться следующего при открытии webapp:

  • Передача полностью отображаемой страницы по первому запросу.
  • С этого момента все изменения должны производиться непосредственно на стороне клиента и синхронизироваться с сервером через ajax.

Таким образом, обычно первый запрос, который пользователь делает на сайт с "толстым" клиентом, довольно болезнен:

  • Данные приложения должны быть переданы и инициализированы
  • Данные должны быть загружены клиентом
  • Отображаются данные

Это поведение, как правило, медленнее, чем передача страницы oldschool, подобной серверной стороне. Gmail или iCloud, например, нужно некоторое время для загрузки, потому что они делают это следующим образом.