Приложение Render Backbone.js на сервере И клиент

Question

Предполагается, что у меня есть веб-приложение, которое построено с использованием Backbone.js и Handlebars. В качестве сервера я использую Node.js. Теперь я хочу сделать рендеринг с обоих концов, то есть на сервере и клиенте.

Когда маршрут запрашивается в первый раз, сервер выполняет рендеринг (главным образом, из-за соображений производительности). После этого все последующие действия приведут к рендерингу на стороне клиента.

Это означает, что я должен иметь возможность отображать любую страницу на клиенте и на сервере, оба раза совершенно одинаково. Оба конца должны поддерживать одни и те же маршруты.

Как я мог выполнить эту задачу?

На данный момент я рассмотрел проект AirBnb rendr, но это определенно связывает меня с Backbone.js (я не уверен, хочу ли я придерживаться Backbone.js на все времена), и, похоже, быть не совсем законченным. По крайней мере, AirBnb пока не рекомендует его использовать.

Любые другие идеи о том, как это сделать?

В качестве дополнительного вопроса я также могу спросить: какой предпочтительный способ обмена кодом JavaScript между сервером и клиентом? Для этого я также знаю piler, но я мог представить, что могут быть лучшие решения.

Любые подсказки?

Answer 1

Ну, я создаю приложение, которое делает это. Если вы не хотите использовать rendr, вам придется закодировать свои версии некоторых вещей, о которых они заботятся. AFAIK в настоящий момент, когда вы выбираете rendr или доморощенные. Вот несколько советов.

• Мы используем cheerio для серверной стороны DOM операций, поэтому, когда взгляды оказывают на сервере, this.$el является экземпляром здор`ово элемента. В браузере это jQuery.
• Вам не нужно делегировать события и привязывать их на стороне сервера. Наш код технически делает это на данный момент, но это бессмысленно, и более чистое решение позволит избежать его на сервере.
• После того, как вы сделали HTML-версию сервера в браузере, вам нужен способ подключить большое вложенное дерево экземпляров просмотра к их соответствующим элементам в большом вложенном дереве DOM. Для этого у нас есть самодельное решение, но Backbone.View.setElement - это ядро, и вам нужно будет написать код, чтобы это произошло.
• Мы пересматриваем браузер в настоящий момент, хотя, вероятно, есть более легкий способ принять экземпляр представления, дайте ему некоторые параметры в конструкторе, включая предварительно обработанный узел DOM, и получите правильную проводку вещей без повторной рендеринга. Это упражнение для читателя. :-)
• Мы также отправляем необработанные данные, которые нам нужны в качестве JSON, в теге <script>, поэтому у нас есть как обработанный сервером HTML (для воспринимаемой производительности), так и необработанные данные, доступные как JSON, чтобы мы могли получить наши базовые модели и представления инстанцируется и работает. Опять же, вам придется придумать какой-то код для управления этой ситуацией.
• Мы используем browserify для связывания и совместного использования кода между сервером и браузером. Весь наш JavaScript кодируется как модули CommonJS.
• У нас есть базовая функция isBrowser() в нашем классе родительских представлений, поэтому мы знаем, когда код браузера должен запускаться для привязок событий и т. Д.

В любом случае, для чего это стоит, после долгих месяцев работы в этом направлении, я не думаю, что магистраль хорошо работает с этой парадигмой. Многие из основных понятий из магистрали в порядке, но они не поддаются сопоставлению экземпляров представления с предварительно обработанными узлами DOM. Модели самообучения и коллекции от JSON проще, но для уровня представления, вероятно, необходима значительная вилка, чтобы работать в этом стиле.