JavaScript: лучшие практики для DOM-зависимого кода, выполняемого как на сервере, так и на стороне клиента?

Question

фон

Начиная чуть более 2 лет назад (с Batman.js & node.js) Я начал экспериментировать с того, один и тот же код DOM выполняется на сервере и на клиенте. Это желательно иметь SPA (одностраничные приложения), которые можно визуализировать с помощью pushState, и их можно получить на маршрутах со страницей, уже предоставленной для SEO, и для превосходного пользовательского опыта (ни одна из страниц «вспышка», связанная с элементами рендеринга SPA, после страницы нагрузки). Обычно это включает в себя обертывающие модули в операциях if, которые проверяют, выполняется ли модуль в window или требуется с использованием require.js или в качестве модуля в node.js и др.

Текущие Реализации Клиент + Сервер ООТ

Rendr & Ezel как попытка помочь принести клиенту + обмена код сервера и DOM рендеринга функциональность Backbone ООТ. Ezel имеет магию с моделями/коллекциями Backbone, но представления отображаются с использованием Express + Jade на сервере при использовании Backbone.View + Jade на клиенте. Это означает, что с использованием чего-то вроде Rivets в расширенном Backbone.View не приведет к тому, что HTML ударит клиента, предварительно обработанного Rivets. Я хотел бы создать несколько лучших практик и методов для рендеринга на стороне сервера DOM, чтобы держать вещи в явном виде (редактировать код вида в одном месте) и гибко (иметь возможность добавлять дополнительные модули управления DOM, которые в настоящее время не поддерживает Ezel).

желаемого результата

Я хотел бы использовать что-то вроде Rivets вводить данные модели в поле зрения, прежде чем страница подается в браузер от Express когда маршрут хит для полной загрузки страницы с помощью HTTP-запрос, а также будет обязан реагировать на изменения через pushState на клиенте. Каковы требования к среде в узле, чтобы я мог использовать Rivets для изменения HTML-кода на сервере до его подачи и пребывания на клиенте? Как мне лучше всего привести jQuery, Backbone, Rivets и т. Д. В node.js, запустите их на DOM шаблона HTML, а затем выполните предварительные визуализации результатов (при сохранении нормального поведения JS на клиенте после этого)?

Связанные модули

Sharify & Browserify являются инструментами, которые также могут помочь с кодом обмена между сторонами. Rivets, Backbone & jQuery все имеют узлы.js-совместимые дистрибутивы.

Текущая работа

Я начал работу по добавлению функциональности к Ezel через fork on Github.

Answer 1

Я смог добиться наличия почти чистого изоморфного приложения JavaScript, построив поверх Ezel с помощью jsdom. jsdom наносит удар производительности, поэтому я кэшировал результат запуска заклепок на сервере, когда это возможно.

Я взял несколько реплик от https://github.com/adjohnson916/rivets-server. Мне не удалось использовать этот модуль оптом, потому что он топает по некоторым параметрам конфигурации, которые мне нужно отправить на заклепки (заклепки-сервер использует вилку заклепок).

Одна из ловушек, которые я изначально ударил, была связана с использованием Sharify & Заклепки в то же время. Sharify вставляет скрипт на вашу веб-страницу, содержащую функцию, и которая запускает заклепки, потому что она использует {} для шаблонов. Изменив templateDelimiters на двойные фигурные скобки, я обошел проблему.

Основных компонентов изоморфного приложение JavaScript является:

• Модуля, Проставок в Node.js элементов среды для браузера, в то числе require (например Browserify)
• Способности использовать первый запуск вашей библиотеки привязки данных на сервере (например, заклепки jsdom running). Использование этого метода вместо использования Ezel для использования node-jadeify (что я вносил) превосходит Ezel, где рендеринг должен происходить по-разному в двух разных файлах.
• Модуль, который абстрагирует различия в HTTP запросы клиента ст. Сервер (например, магистральная-супер-синхронизации)
• Модуль, который позволяет обмениваться данными конфигурации между клиентом & сервера (например, Sharify)