jslab. Дмитрий Смолин, Дмитрий Филипенко. "react и webpack с...
TRANSCRIPT
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
react & webpackс помощью кирки, лома и какой-то матери
Вопросы?
Дмитрий Смолин & Дмитрий Филипенко, [email protected], [email protected]