28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, лома и какой-то матери" "Предистория: – jQuery → VueJS как замена Angular → React – assets pipeline & pergament → webpack, gulp & boojum История: – Gulp: импорт задач и нетривиальная пересборка – Babel: будущее уже наступило – Webpack: программируем конфигурацию, сборка клиента для сервера, дев окружение и горячая замена кода – React: компоненты, гибридный подход к стилям, сервисы, сервер-сайд рендеринг и пререндеринг – Boojum: собираем все вместе" Подробнее: http://geekslab.co/ https://www.facebook.com/GeeksLab.co https://www.youtube.com/user/GeeksLabVideo

1. react & webpack
с помощью кирки, лома и какой-то матери
Дмитрий Филипенко
Дмитрий Смолин

2. Пару слов о нас
• Чем занимаемся?
• Задачи которые решаем
2

6. Фаннел
Маркетинг:
• формирует впечатление
• рассказывает о продукте
• продает
Технически:
• набор статических страниц
6

8. История
• django и java (2008-2014)
• шаблоны в jinja и javamarkup
• jQuery + mootools
• vue.js (2014-2015)
• полностью клиентский
• стили stylus
• vue.js + flux
8

9. Однообразие
• Хотелось больше однообразия не хотелось зоопарка технологий
• Использовать знакомые технологии html, css, js
9

10. Простой инструмент
Мы хотели простой инструмент, который мог бы:
• дев сервер
• деплой на AmazonS3
• minify/uglify/concatenate/preprocessing
• запускаться одной командой
10

12. Пергамент
• Assets pipeline → JS Assets pipline
• Stylus
• Сборка
• Деплой

13. Оставшиеся вопросы
• Выбор фреймворка для большей компонентности
13

15. В поиске
• Angular – слишком много java на клиенете;
• Ember – странный какой-то;
• Backbone, Knockout – нет;
Хотелось меньше вкладываться во фреймворк, а больше в сам
продукт
15

16. • Эстетичность
• Непринужденность
• Легкость в использование
Vue.JS
http://vuejs.org/guide/faq.html
16

17. Получилось
• Меньше панка, больше правильной структуры
• Простое добавление новых компонентов
• Легкость в разработке
17

20. Почему react?
• простота “Пишешь одну функцию render и это все!”
• (state, props) → view
• недостающая деталь браузера
• будущее
• react native, etc.
20

21. « Removing User Interface Complexity,
or Why React is Awesome »
article by James Long
goo.gl/9Rorzf

22. Почему webpack?
• следующий шаг после browserify
• ресурсы – тоже модули! (стили, шрифты, картинки, etc.)
• элегантное деление на чанки
• горячее обновление кода
• плагины (unix-подход работает плохо)
22

23. « How Instagram.com Works »
speech by Pete Hunt
goo.gl/ovF9LO

24. Боль перехода
• webpack все еще ужасен
• что-то всегда идет не так (баги, незрелый дизайн)
• разработчики хотят возможностей, а не головной боли
• копипаст
• большой страшный конфиг
• скрипты сборки, запуска сервера, etc.
• прочие батарейки
24

25. Boilerplate?
• как обновлять?
• кишки повсюду! и они шевелятся! :-O
• низкое качество кода
• в угоду компактности
• без мыслей о расширяемости
25

26. Библиотека!
• просто как npm install
• легко обновлять
• прозрачна в использовании
• качественный код
26

27. wap
• библиотека-фреймворк
• для создания веб-приложений
• с использованием react & webpack

28. wap
• разумные настройки по умолчанию
• сборщик для dev и prod окружения
• dev сервер с горячей заменой кода
• сервер
• генератор страниц
• прочие батарейки:
• маршрутизация и навигация, обрамление страницы, babel, etc.
28

30. webpack – конфигурация
• родная – набор шестеренок
• три места куда нужно воткнуть лом, чтобы включить hot reload
• каждую точку входа нужно тюкнуть киркой чтобы получить dev, etc.
• а хочется пульт управления
• программируемая конфигурация
• опирается на более высокоуровневые настройки
• класс, можно унаследоваться и что-то перекрыть
30

31. webpack – карта точек входа
• хотим хэши в именах файлов ( e.g. a1ff706364/main.js )
• как сервер найдет эти файлы?
• stats → entries_mapping.json
• только нужное в удобном формате
• используются сервером и генератором страниц
31

32. webpack – загрузчики
• import fontStyles from './font.styl'
• добавит js модуль, подключащий стили из font.styl
• можно превратить в классический css (по желанию)
• import logo from './logo.png'
• добавит js модуль, возвращающий url картинки
• сложит картинку куда нужно с нужным именем (хэши!)
• можно создавать свои!
32

33. webpack – загрузчики
• а как же серверная сторона?
• – собираем клиентский код и для нее
• webpack к этому не готов!
• – берем в руки лом =^_^=

34. webpack – пакуем для сервера
• другие точки входа (нужно только приложение, используем *.web.js)
• единственный чанк на точку входа (убираем лишние)
• отделяем не-клиентский код (выбор точки подключения, externals)
• вырезаем стили (null-loader)
• чиним асинхронную загрузку (неприятный хак)
• source maps
• обоженуещеточто?!?!?!111
34

35. dev сервер
• хотим перегружать при изменениях
• nodemon? – увы! (нужен шаг пересборки)
• делаем руками (gulp.watch(), process.spawn(), run-sequence, etc.)
• не забываем опцию cache для webpack
• делаем отключаемой (фронтенду удобнее перегружать явно)
35

36. react – обрамление
• react плохо работает вне body
• нам нужна страница целиком! (для сервера и генератора страниц)
• шаблонизатор? – нет, снова react
• обрамление ← renderToStaticMarkup() (содержит placeholder)
• страница приложения ← renderToString()
• обрамление.replace(placeholder, страница)
36

37. « React: CSS in JS »
slides by Christopher "vjeux" Chedeau
goo.gl/QVqwZp

38. react – css in js
• а как же hover, after, media types, etc?
• css in js, но вычленять в css? – сложно и ненадежно
• гибридный подход
• легко сделать в js? → css in js
• проще в css? → stylus
• покомпонентные стили
• держим рядом с компонентом
38

39. react – css in js?
• гибридный подход вернулись к stylus
• проще переносить существующий код
• css in js – много вопросов
• как перекрыть inline? (important)
• через js местами костыльно (media)
• нет/мало готовых инструментов
• боимся нарваться
• генерируем уникальные имена классов (загрузчик)
39

40. react – данные
• flux? reflux? fluxor? … – история их рассудит
• EventEmitter (и немного дисциплины)
• хотим данных? – подписались на сервис
• хотим действие? – вызвали метод сервиса
• помним про CQRS (Command Query Responsibility Segregation)
40

41. CQRS

42. babel
• ES6-счастье! (умеет jsx, experimental=true)
• медленный?
• исключаем node_modules… (и ряд других каталогов)
• учим wap собирать саму себя (и любые другие либы тоже)
• source maps?
42

43. « Lint Like It’s 2015 »
article by Dan Abramov
goo.gl/BPvSVY

44. wap
• скоро будет в open source
• ориентирована на наши задачи
• все еще есть большие пробелы
• сборник проблем, решений и ответов на вопросы
• см. напр. default_settings*.js
44

45. We are hiring!
Text engine developer Google docs text engine
Interface developer UI/UX, React, ES6
kigorw@grammarly.com

46. react & webpack
с помощью кирки, лома и какой-то матери
Вопросы?
Дмитрий Смолин & Дмитрий Филипенко, Grammarly
dimsmol@gmail.com, wind.fd@gmail.com