react & webpackс помощью кирки, лома и какой-то матери

Дмитрий Филипенко

Дмитрий Смолин

Пару слов о нас

•  Чем занимаемся?

•  Задачи которые решаем

2

ФаннелМаркетинг:

•  формирует впечатление

•  рассказывает о продукте

•  продает

Технически:

•  набор статических страниц

6

История

•  django и java (2008-2014)

•  шаблоны в jinja и javamarkup

•  jQuery + mootools

•  vue.js (2014-2015)

•  полностью клиентский

•  стили stylus

•  vue.js + flux

8

Однообразие

•  Хотелось больше однообразия не хотелось зоопарка технологий

•  Использовать знакомые технологии html, css, js

9

Простой инструмент

Мы хотели простой инструмент, который мог бы:

•  дев сервер

•  деплой на AmazonS3

•  minify/uglify/concatenate/preprocessing

•  запускаться одной командой

10

Пергамент

•   Assets pipeline → JS Assets pipline

•   Stylus

•   Сборка

•   Деплой

Оставшиеся вопросы

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

13

В поиске

•  Angular – слишком много java на клиенете;

•  Ember – странный какой-то;

•  Backbone, Knockout – нет;

Хотелось меньше вкладываться во фреймворк, а больше в сам

продукт

15

•  Эстетичность

•  Непринужденность

•  Легкость в использование

Vue.JS

http://vuejs.org/guide/faq.html

16

Получилось

•  Меньше панка, больше правильной структуры

•  Простое добавление новых компонентов

•  Легкость в разработке

17

Почему react?

•  простота “Пишешь одну функцию render и это все!”

•  (state, props) → view

•  недостающая деталь браузера

•  будущее

•  react native, etc.

20

« Removing User Interface Complexity,or Why React is Awesome »

article by James Long

goo.gl/9Rorzf

Почему webpack?

•  следующий шаг после browserify

•  ресурсы – тоже модули! (стили, шрифты, картинки, etc.)

•  элегантное деление на чанки

•  горячее обновление кода

•  плагины (unix-подход работает плохо)

22

« How Instagram.com Works »speech by Pete Hunt

goo.gl/ovF9LO

Боль перехода

•  webpack все еще ужасен

•  что-то всегда идет не так (баги, незрелый дизайн)

•  разработчики хотят возможностей, а не головной боли

•  копипаст

•  большой страшный конфиг

•  скрипты сборки, запуска сервера, etc.

•  прочие батарейки

24

Boilerplate?

•  как обновлять?

•  кишки повсюду! и они шевелятся! :-O

•  низкое качество кода

•  в угоду компактности

•  без мыслей о расширяемости

25

Библиотека!

•  просто как npm install

•  легко обновлять

•  прозрачна в использовании

•  качественный код

26

wap•  библиотека-фреймворк

•  для создания веб-приложений

•  с использованием react & webpack

wap

•  разумные настройки по умолчанию

•  сборщик для dev и prod окружения

•  dev сервер с горячей заменой кода

•  сервер

•  генератор страниц

•  прочие батарейки:

•  маршрутизация и навигация, обрамление страницы, babel, etc.

28

webpack – конфигурация

•  родная – набор шестеренок

•  три места куда нужно воткнуть лом, чтобы включить hot reload

•  каждую точку входа нужно тюкнуть киркой чтобы получить dev, etc.

•  а хочется пульт управления

•  программируемая конфигурация

•  опирается на более высокоуровневые настройки

•  класс, можно унаследоваться и что-то перекрыть

30

webpack – карта точек входа

•  хотим хэши в именах файлов ( e.g. a1ff706364/main.js )

•  как сервер найдет эти файлы?

•  stats → entries_mapping.json

•  только нужное в удобном формате

•  используются сервером и генератором страниц

31

webpack – загрузчики

•   import fontStyles from './font.styl'

•  добавит js модуль, подключащий стили из font.styl

•  можно превратить в классический css (по желанию)

•   import logo from './logo.png'

•  добавит js модуль, возвращающий url картинки

•  сложит картинку куда нужно с нужным именем (хэши!)

•  можно создавать свои!

32

webpack – загрузчики

•  а как же серверная сторона?

•  – собираем клиентский код и для нее

•  webpack к этому не готов!

•  – берем в руки лом =^_^=

webpack – пакуем для сервера

•  другие точки входа (нужно только приложение, используем *.web.js)

•  единственный чанк на точку входа (убираем лишние)

•  отделяем не-клиентский код (выбор точки подключения, externals)

•  вырезаем стили (null-loader)

•  чиним асинхронную загрузку (неприятный хак)

•  source maps

•  обоженуещеточто?!?!?!111

34

dev сервер

•  хотим перегружать при изменениях

•  nodemon? – увы! (нужен шаг пересборки)

•  делаем руками (gulp.watch(), process.spawn(), run-sequence, etc.)

•  не забываем опцию cache для webpack

•  делаем отключаемой (фронтенду удобнее перегружать явно)

35

react – обрамление

•  react плохо работает вне body

•  нам нужна страница целиком! (для сервера и генератора страниц)

•  шаблонизатор? – нет, снова react

•  обрамление ← renderToStaticMarkup() (содержит placeholder)

•  страница приложения ← renderToString()

•  обрамление.replace(placeholder, страница)

36

« React: CSS in JS »slides by Christopher "vjeux" Chedeau

goo.gl/QVqwZp

react – css in js

•  а как же hover, after, media types, etc?

•  css in js, но вычленять в css? – сложно и ненадежно

•  гибридный подход

•  легко сделать в js? → css in js

•  проще в css? → stylus

•  покомпонентные стили

•  держим рядом с компонентом

38

react – css in js?

•  гибридный подход вернулись к stylus

•  проще переносить существующий код

•  css in js – много вопросов

•  как перекрыть inline? (important)

•  через js местами костыльно (media)

•  нет/мало готовых инструментов

•  боимся нарваться

•  генерируем уникальные имена классов (загрузчик)

39

react – данные

•  flux? reflux? fluxor? … – история их рассудит

•  EventEmitter (и немного дисциплины)

•  хотим данных? – подписались на сервис

•  хотим действие? – вызвали метод сервиса

•  помним про CQRS (Command Query Responsibility Segregation)

40

CQRS

babel

•  ES6-счастье! (умеет jsx, experimental=true)

•  медленный?

•  исключаем node_modules… (и ряд других каталогов)

•  учим wap собирать саму себя (и любые другие либы тоже)

•  source maps?

42

« Lint Like It’s 2015 »article by Dan Abramov

goo.gl/BPvSVY

wap

•  скоро будет в open source

•  ориентирована на наши задачи

•  все еще есть большие пробелы

•  сборник проблем, решений и ответов на вопросы

•  см. напр. default_settings*.js

44

We are hiring!Text engine developer Google docs text engine

Interface developer UI/UX, React, ES6

kigorw@grammarly.com

react & webpackс помощью кирки, лома и какой-то матери

Вопросы?

Дмитрий Смолин & Дмитрий Филипенко, Grammarlydimsmol@gmail.com, wind.fd@gmail.com