Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

  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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.