Download to read offline
Uploaded byDevOWL Meetup
Что такое современная Frontend разработка
Документ описывает эволюцию фронтенд-проекта в компании Evolution Gaming с 2015 по 2017 год, включая переход от старых технологий к современным инструментам, таким как React и TypeScript. Автор анализирует сложности и преимущества различных технологий сборки, таких как Gulp и Webpack, а также детали миграции на новые инструменты. В конце документа подводятся итоги по эффективности используемых технологий и делается акцент на важности качественного тулинга.
More Related Content
Similar to Что такое современная Frontend разработка
Что такое современная Frontend разработка
- 1.
- 2. Эволюция одного фронтенд проекта ПавелБирюков Джаваскрипт разработчик «Эволюшн Гейминг», Рига
- 3.
- 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.
- 12. WebPack • 4 человека/месяца •Большинство боится заглядывать в webpack.config.js (я тоже) • Высокие шансы регрессии (как у всякого билд тула)
- 13.
- 14.
- 15.
- 16. CoffeeScript 👎 • Отступы •Отладка • Дополнительный этап сборки • Большинство его ненавидит
- 17.
- 18.
- 19. TypeScript 🤘 • Немодно • Есть типы • Есть автокомплит • Хороший тулинг (tsserver, tslint, vs code)
- 20.
- 21. TypeScript 👎 • Порогвхождения • Плохой компилятор (все равно нужен Babel 😭) • Фейсбук придумал Флоу 😱 • Фейсбук сынтегрировал Flow в Babel 💩
- 22. React • Модно • ОЧЕНЬМОДНО • Там же FP • У всех уже давно реакт
- 23.
- 24. React • Мигрируем досих пор • Да, тут FP • Да, тут есть проблемы
- 25. Jest • Модный • Автомоки •Сделано в Фейсбуке • У вас Карма? У всех уже давно Джест!
- 26.
- 27. Jest • Быстрый (потомучто избавились от Фантома) • Работает coverage (в основном) • Становится лучше
- 28. NPM • Умеренно модный •Удобно разделять код • Удобно управлять зависимостями
- 29.
- 30. NPM • Неудобно разделятькод • Неудобно управлять зависимостями
- 31.
- 32. Выводы • React медленнееBackbone * • React быстрее Backbone * • WebPack хуже RequireJS * • WebPack лучше RequireJS * * 💩
- 33. Выводы • TypeScript лучшеJavaScript * • TypeScript хуже JavaScript * * 💩
- 34.
- 35. WebPack ❤ • Мощный •Расширяемый • Да, сложный
- 36.
- 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.
- 44.