Жизненный доклад о фронтенде, тулинге и бесконечном технологическом прогрессе.

1. ReMeetup
2017

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

3. Evolution Gaming

4. Как мы росли
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…

5. Dependency injection
~270 файлов
Смигрировали на RequireJS

6. Build Tools
• Maven
• Ant
• Why? 😱

7. Gulp
• Модно
• Более модно, чем Grunt
• У всех уже давно Gulp

8. Ant → Gulp
Ура, переписываем! 🎉

9. Ant → Gulp
• Заняло 1 человеко/месяц
• Смогли включить автопрефиксер для stylus
• Стало невозможно читать gulpfile
• Больно работать с файлами (но он же для работы
с файлами)

10. WebPack
• Модно
• Гибко
• Сложно
• У всех уже давно вебпак

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

12. WebPack
• 4 человека/месяца
• Большинство боится заглядывать в
webpack.config.js (я тоже)
• Высокие шансы регрессии (как у всякого
билд тула)

13. CoffeeScript
2010🐣…Date.now()☠

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

15. CoffeeScript
Кофескрипт
ВремяНет
Чуть-чуть есть
Много

16. CoffeeScript 👎
• Отступы
• Отладка
• Дополнительный этап сборки
• Большинство его ненавидит

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

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

19. TypeScript 🤘
• Не модно
• Есть типы
• Есть автокомплит
• Хороший тулинг (tsserver, tslint, vs code)

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

21. TypeScript 👎
• Порог вхождения
• Плохой компилятор (все равно нужен Babel 😭)
• Фейсбук придумал Флоу 😱
• Фейсбук сынтегрировал Flow в Babel 💩

22. React
• Модно
• ОЧЕНЬ МОДНО
• Там же FP
• У всех уже давно реакт

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

24. React
• Мигрируем до сих пор
• Да, тут FP
• Да, тут есть проблемы

25. Jest
• Модный
• Автомоки
• Сделано в Фейсбуке
• У вас Карма? У всех уже давно Джест!

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

27. Jest
• Быстрый (потому что избавились от Фантома)
• Работает coverage (в основном)
• Становится лучше

28. NPM
• Умеренно модный
• Удобно разделять код
• Удобно управлять зависимостями

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

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

31. NPM

32. Выводы
• React медленнее Backbone *
• React быстрее Backbone *
• WebPack хуже RequireJS *
• WebPack лучше RequireJS *
* 💩

33. Выводы
• TypeScript лучше JavaScript *
• TypeScript хуже JavaScript *
* 💩

34. Фронтенд

35. WebPack ❤
• Мощный
• Расширяемый
• Да, сложный

36. React Lifecycle ❤

37. React Lifecycle ❤
• Хорошо отражают происходящее
• Альтернативы с тем же API (Preact, React-Lite)

38. TypeScript ❤
• Тулинг решает
• 2.0 🎉
• 2.1 ❤
• 2.2 😘
• 2.3 😍

39. Redux’ Data Flow ❤
• Однонаправленный (простой)
• Сериализуется (time travel)

40. Тулинг ❤
• Скорость загрузки приложения
• В нормальной сети
• В медленной сети с потерей пакетов
• Производительность
• Тесты на девайсах

41. Тулинг ❤
• Автоматический репорт ошибок (Sentry)
• Размер бандла
• При каждом релизе
• Размеры зависимостей

42. Фронтенд
• Видел архитектуру, когда читал книгу по джаве 😎
• Можно быть глупым 🐓
• Платят как умному 🍻
• Мы нанимаем 🎉
( → Интернет → «evolution gaming» → vacancies)

43. FIN

44. Q&A
🍻
🍺
🍷
🍺
🍺
🍺
🍷
🍷
🍷 🍷
🍻
🍻
🍻