Докла с EkbJS 2 в Екатеринбурге

1. Будущее
шаблонизаторов
Алексей Иванов, Злые Марсиане
1

2. 2

3. План выступления
1. Я сею хаос и смуту, погружаю всех в депрессию.
2. Я добиваюсь осознания несовершенства мира.
3. ???
4. Кто‑то пишет новые инструменты которые решают мои проблемы.
3

4. Условия в которых появлялись
инструменты для разработки
сайтов
— Маленький объем проекта – 5-10 типовых страниц.
— Мало реиспользуемых элементов и они простые.
— Пишется одним разработчиком за пару дней.
— Сдается один раз и не дорабатываются в будущем.
Такому проекту не нужно ни инструментов, ни методологий
4

5. Что изменилось сейчас
— Количество страниц увеличивается до 30–40–50.
— Состоит из большого набора повторяющихся, реиспользуемых
элементов.
— Над проектом работает несколько разработчиков.
— Проект делается и поддерживается годами.
Без инструментов и методологий вы сойдете с ума
5

6. Иструменты разработки
— CSS-методологии: БЭМ, OOCSS, SMACSS.
— Пре- и постпроцессоры: SASS, Less, Stylus, PostCSS.
— Диалекты JS: CoffeeScript, TypeScript, ES6.
— Модульные системы: CommonJS, RequireJS.
— Минификаторы: UglifyJS, clean-css.
— Системы сборки: Grunt, Gulp, Webpack.
6

7. Две основных линии развития
проектов
— SPA (Single Page Application) приложения.
— Крупные интернет‑магазины, каталоги и сайты СМИ.
7

8. Чем они отличаются
SPA Не-SPA
Индексация поисковиками Не нужна Нужна
Количество страниц Среднее Большое
Динамические элементы Много Мало
8

9. SPA развиваются дальше
— Полноценные компонтенты (React).
— Полная изоляция стилей + автоматическое удаление
неиспользуемых и объединение по содержимому (CSS Modules,
Free Style).
— Hot reload всего и вся (WebPack + React HotReload + Redux).
— Собрка по бандлам (WebPack).
9

10. Обычные сайты – нет
— Для каждого языка программирования свой набор
шаблонизаторов.
— Если какие‑то шаблоны надо использовать на клиенте – самый
простой способ копипаст.
— Шаблонизаторы никак не связаны со стилями и логикой.
— Подключение и сборка всех видов ресурсов идет отдельно
из без возможности автоматического удаления неиспольземого
кода.
— Никакого hot reload для страниц и автоматических бандлов.10

11. Гипотеза
Вслед за сборкой ассетов, которые полностью ушли в Node.js,
шаблонизаторы для больших проектов тоже уйдут туда.
Что с этим делать?
11

12. Почему Node.js?
— В большинстве больших проектов уже и так есть Node.js
для сборки ассетов.
— Не надо учить новый язык.
— Шаблоны можно использовать и на сервере и клиенте.
— Достаточно сделать и поддерживать одну реализацию
шаблонизатора под все бэкенд‑платформы и языки.
— HTML/JS/CSS должны обрабатываться в одном месте, чтобы можно
было делать полноценные компоненты.
12

13. Чего не хватает сейчас
для полного счастья?
1. Интеграции с бэкендом.
2. Компонентного шаблонизатора который умеет хорошо работать
с сервером.
13

14. Стандартный бэкенд
14

15. Интеграция с бэкендом
1. Express-сервер и API.
2. Стандартный шаблонизатор в Ruby/Python/PHP делает структуру
страницы.
3. Ruby/Python/PHP отправляют json с данными в Node.js
приложение.
15

16. Express-сервер и API
Интеграция с бэкендом
16

17. Ruby/Python/PHP делает структуру,
Node.js рендерит
Интеграция с бэкендом
17

18. Ruby/Python/PHP отправляют json
с данными в Node.js
Интеграция с бэкендом
18

19. Почему не стандартный React?
— Куча неиспользуемого js (надо тащить с собой все шаблоны, чтобы
работали события).
— Большой overhead в html из‑за кучи реактовых аттрибутов.
Серверный шаблонизатор
19

20. React 0.14 и вынесенные отдельно
рэндеры
— В React 0.14 часть отвечающая за рэндер в HTML/ObjectiveC
вынесено отдельно от части отвечающей за описание
компонентов.
— Можно написать свой рендер‑движок, который будет добавлять
react-attribute'ы только к тем элементам (и их детям) у которых есть
динамическое поведение.
— Можно делать js-бандл только из отобранных по такому принципу
компонентов.
Серверный шаблонизатор
20

21. Заключение
— Будущее за переездом шаблонов в Node.js и компонентными
шаблонизаторами.
— Для того чтобы переход состоялся нужно два недостающих куска
технологий.
— Каждый из них отделим и самоценен.
— Надо писать.
21

22. Контакты
Github: github.com/iadramelk
Twitter: @iadramelk
evilmartians.com / @evilmartians