Что такое современная Frontend разработка
0 likes192 views
Жизненный доклад о фронтенде, тулинге и бесконечном технологическом прогрессе.
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Что такое современная Frontend разработка (20)
More from DevOWL Meetup (14)
Что такое современная Frontend разработка
- 2. Эволюция одного фронтенд проекта Павел Бирюков Джаваскрипт разработчик «Эволюшн Гейминг», Рига
- 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 • Модно • Гибко • Сложно • У всех уже давно вебпак
- 12. WebPack • 4 человека/месяца • Большинство боится заглядывать в webpack.config.js (я тоже) • Высокие шансы регрессии (как у всякого билд тула)
- 16. CoffeeScript 👎 • Отступы • Отладка • Дополнительный этап сборки • Большинство его ненавидит
- 19. TypeScript 🤘 • Не модно • Есть типы • Есть автокомплит • Хороший тулинг (tsserver, tslint, vs code)
- 21. TypeScript 👎 • Порог вхождения • Плохой компилятор (все равно нужен Babel 😭) • Фейсбук придумал Флоу 😱 • Фейсбук сынтегрировал Flow в Babel 💩
- 22. React • Модно • ОЧЕНЬ МОДНО • Там же FP • У всех уже давно реакт
- 24. React • Мигрируем до сих пор • Да, тут FP • Да, тут есть проблемы
- 25. Jest • Модный • Автомоки • Сделано в Фейсбуке • У вас Карма? У всех уже давно Джест!
- 27. Jest • Быстрый (потому что избавились от Фантома) • Работает coverage (в основном) • Становится лучше
- 28. NPM • Умеренно модный • Удобно разделять код • Удобно управлять зависимостями
- 30. NPM • Неудобно разделять код • Неудобно управлять зависимостями
- 31. NPM
- 32. Выводы • React медленнее Backbone * • React быстрее Backbone * • WebPack хуже RequireJS * • WebPack лучше RequireJS * * 💩
- 33. Выводы • TypeScript лучше JavaScript * • TypeScript хуже JavaScript * * 💩
- 34. Фронтенд
- 35. WebPack ❤ • Мощный • Расширяемый • Да, сложный
- 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