ReMeetup2017

Эволюция одного фронтенд проекта

Павел Бирюков Джаваскрипт разработчик «Эволюшн Гейминг», Рига

Evolution Gaming

Как мы росли2015…2017

10 👬 … 45 👬 300 000 LOC … 450 000 LOC

3700 Files … 9000 Files 4 Games … 7 Games

Monorepo … 14 Repos . …..Backbone … React, Redux

2012… 0…

0 LOC… 0 Files…

0 Games… Nonrepo… Vanillajs…

Dependency injection

~270 файлов

Смигрировали на RequireJS

Build Tools

• Maven

• Ant

• Why? 😱

Gulp

• Модно

• Более модно, чем Grunt

• У всех уже давно Gulp

Ant → Gulp

Ура, переписываем! 🎉

Ant → Gulp

• Заняло 1 человеко/месяц

• Смогли включить автопрефиксер для stylus

• Стало невозможно читать gulpfile

• Больно работать с файлами (но он же для работы с файлами)

WebPack

• Модно

• Гибко

• Сложно

• У всех уже давно вебпак

WebPack

Ура, переписываем! 🎉

WebPack

• 4 человека/месяца

• Большинство боится заглядывать в webpack.config.js (я тоже)

• Высокие шансы регрессии (как у всякого билд тула)

CoffeeScript2010🐣…Date.now()☠

CoffeeScript

Ура, переписываем! 🎉

CoffeeScriptКофескрипт

ВремяНет

Чуть-чуть есть

Много

CoffeeScript 👎

• Отступы

• Отладка

• Дополнительный этап сборки

• Большинство его ненавидит

Эволюция нормального человека

Эволюция фронтенда

TypeScript 🤘

• Не модно

• Есть типы

• Есть автокомплит

• Хороший тулинг (tsserver, tslint, vs code)

TypeScript

Ура, переписываем! 🎉

TypeScript 👎

• Порог вхождения

• Плохой компилятор (все равно нужен Babel 😭)

• Фейсбук придумал Флоу 😱

• Фейсбук сынтегрировал Flow в Babel 💩

React

• Модно

• ОЧЕНЬ МОДНО

• Там же FP

• У всех уже давно реакт

React

Ура, переписываем! 🎉

React

• Мигрируем до сих пор

• Да, тут FP

• Да, тут есть проблемы

Jest

• Модный

• Автомоки

• Сделано в Фейсбуке

• У вас Карма? У всех уже давно Джест!

Jest

Ура, переписываем! 🎉

Jest

• Быстрый (потому что избавились от Фантома)

• Работает coverage (в основном)

• Становится лучше

NPM

• Умеренно модный

• Удобно разделять код

• Удобно управлять зависимостями

NPM

Ура, переписываем! 🎉

NPM

• Неудобно разделять код

• Неудобно управлять зависимостями

NPM

Выводы

• React медленнее Backbone *

• React быстрее Backbone *

• WebPack хуже RequireJS *

• WebPack лучше RequireJS *

* 💩

Выводы• TypeScript лучше JavaScript *

• TypeScript хуже JavaScript *

* 💩

Фронтенд

WebPack ❤

• Мощный

• Расширяемый

• Да, сложный

React Lifecycle ❤

React Lifecycle ❤

• Хорошо отражают происходящее

• Альтернативы с тем же API (Preact, React-Lite)

TypeScript ❤• Тулинг решает

• 2.0 🎉

• 2.1 ❤

• 2.2 😘

• 2.3 😍

Redux’ Data Flow ❤• Однонаправленный (простой)

• Сериализуется (time travel)

Тулинг ❤• Скорость загрузки приложения

• В нормальной сети

• В медленной сети с потерей пакетов

• Производительность

• Тесты на девайсах

Тулинг ❤• Автоматический репорт ошибок (Sentry)

• Размер бандла

• При каждом релизе

• Размеры зависимостей

Фронтенд

• Видел архитектуру, когда читал книгу по джаве 😎

• Можно быть глупым 🐓

• Платят как умному 🍻

• Мы нанимаем 🎉( → Интернет → «evolution gaming» → vacancies)

FIN

Q&A

🍻

🍺

🍷

🍺🍺

🍺

🍷

🍷

🍷 🍷🍻

🍻

🍻