Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save iAdramelk/2623f2313c960a338bd4 to your computer and use it in GitHub Desktop.
Save iAdramelk/2623f2313c960a338bd4 to your computer and use it in GitHub Desktop.

Revisions

  1. Alexey Ivanov created this gist Mar 25, 2016.
    67 changes: 67 additions & 0 deletions Шаблоны в Ноде на сервере.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    Ок. У нас сегодня последняя большая тема, в выходные будет формат полегче. Перед тем как к ней переходить несколько тезисов из прошлых дней:

    1. Я считаю что модель верстки компонентами для любого крупного проекта подходит лучше, чем любай другая.
    2. Компонент включает HTML, CSS, JS, тесты, локализации, мануал и т. д. Эти файлы проще всего хранить и использовать вместе.
    3. Браузер это ассемблер которому мы кормим оптимизированный машинный код в разных форматах.
    4. CSS, JS и HTML должны знать структуру друг друга, это позволяет гораздо эффективнее их сокращать, пожимать и оптимизировать.

    Использование в последние годы штук вроде Webpack, React и CSS Modules меня лично убедило что при таком подходе к коду жить проще и приятнее.

    Это все хорошо пока ты делаешь SPA, но есть проекты которым противопаказано быть SPA, а пользы от компонентов и оптимизаций было бы много.

    Это сайты магазинов (Amazon), новостные сайты (NY Times), справочники организаций и многие другие.

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

    Мне кажется что сейчас у активного переноса таких подходов на сервер есть два препятствия:

    1) В серверной верстке шаблоны до сих пор пишутся, обрабатываются и рендерятся отдельно от CSS и JS, хотя сборка ассетов и переехала в ноду.
    2) Завязанность большинства современных компонентных решения на SPA и VirtualDOM.

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

    Итак, главный мой сегодняшний тезис: Я считаю что в ближайшие годы, в крупных проектах шаблонизаторы вслед за ассетами тоже переедут в ноду.

    Тут сразу появляется вопрос – как? Собрать ассеты можно один раз и больше не трогать, а вот шаблон нужно рендерить при каждом запросе.

    Как – возможны варианты. :) Про те что я знаю, я расскажу примерно через час и тогда же обсудим ваши предложения и вариты тоже.

    ----

    @harisov ну БЭМ же! ;)

    Да-да, БЭМ я помню. И меня очень печалит что для описанного мной юзкейса больше ничего и нет.

    Поэтому я вот и пытаюсь привлечь внимание к проблеме 4-й день уже! :)

    ----

    А вот если серьезно, БЭМ – это технология авторы которой лучше всего понимают те задачи и проблемы которые надо решать для крупных проектов.

    И ЧСХ они их даже решают как-то, но вот способы которыми они в итоге их решают как правило заставляют шевелиться волосы у меня на голове.

    Мне кажется можно как-то проще всегда.

    Но тем не менее шаблонизатор БЭМ'а работает как раз на Ноде и как раз его пользователи смогут нам накидать больше всего примеров интерграции.

    Вот как раз Ваня Воищев во вторник прсылал такую ссылку: https://t.co/GPMpI3RpuR Тут описаны основные варианты интерграции.

    Я в своей практике пробовал только варианты 1 и 2 оттуда правда.

    Вариант 1 – когда вы поднимаете Экспресс, делаете свой роутер, котроллеры и проч., а бэкенд только как API для используете.

    Он хорош когда вы на одних данных хотите сделать несколько представлений: сайт, iOS, Android, в остальных случаях старайтесь избегать его.

    Избегать – потому что вам придется потворять самим кучу того что Rails, Django, Laravel и проч. умеют делать из коробки и лучше.

    Вариант 2 – когда Rails, Django, Laravel делают свю работу, но на выходе из условного контроллера вместо шаблона отправляют JSON в Ноду.

    Нода возвращает им HTML и дальше как обычно.

    Мы делали вариацию второго подхода году в 2013-м, когда в JetStyle разрабатывали для Яндекса проект на Django, BEM и LEGO.

    В Django Templates мы генерировали BEMJSON для страницы, отправляли его в ноду и получали назад уже HTML. Было довольно удобно.

    Про третий пусть расскажут те кто пробовал. Ну и вобоще поделитесь опытом если кто делал себе что-то такое? :)

    Вот пример интеграции Django и React по похожей модели: https://t.co/Msqz61vxjw на вход – имя шаблона и JSON, на – выход HTML.