Download to read offline
More Related Content
Similar to TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.
- 1. Impact Mapping: планирование разработкипродукта с учетом бизнес целей Александр Бындю (byndusoft.com) Организация разработки Front-End Виталий Слободин, (CTO, Elonsoft)
- 2. Кто я? • Работалс множеством технологий (.NET, NodeJS, Ruby on Rails) • Был по обе стороны: Front-end и Back-end • Прошел весь путь от джуниора до джедая • люблю Open Source: PhantomJS, QtWebKit • Горец на Open Source проекте PhantomJS
- 3.
- 4. Цели • Как соединитьразработку Front-end и Back-end • Как научить разработчиков работать вместе • Что ждет на Front-end? • Инструменты для помощи в организации • Плюсы и минусы нашей схемы
- 5.
- 6. Типичная команда Back-endFront-endДизайнИсследование Фокус натехнологию Фокус на людей
- 7. Типичный Back-end • Фокусируетсяна серверной части • Хранение и обработка данных • Архитектура • Безотказность и доступность • “А это вообще работает?”
- 8. Типичный Design • Фокусируетсяна UI/UX • Данные особо не важны • “А это нормально вообще?”
- 9. Типичный Front-end • Фокусируетсяна клиенте (браузере) • Нужны только данные и схема • Креативность и понимание дизайна • “А как это выглядит вообще?”
- 10.
- 11. Объединяем • Больше знаем- лучше делаем • Вовлекайте в обсуждение всех • Все имеют право на идею
- 12. Выжимаем • Верстка за1.92 секунды • Минимум времени на сборку проекта • Пишем чаще - обновляем реже • Изоляция от Backend • Тестирование • Профилирование • Обратная связь • Обсуждение
- 13. Верстка за 1.92секунды • Emmet • CSS Hat • Sketch • Avocode, Zeppelin, Protein • Методология верстки • Препроцессоры • Постпроцессоры
- 14. Сборка проекта • WebPack •В мире есть не только WebPack: • Grunt/Gulp • Brunch • RollupJS
- 15. Пишем чаще -обновляем реже • Watcher • LiveReload • HMR (Hot Module Replacement)
- 16. Изоляция от Backend •Пишем код, когда Backend не готов (лузеры :)) • www.mockapi.io • Interfake
- 17.
- 18. Тестирование • Зачем? • ИзменениеCSS • Изменение JS • Производительность
- 19. Тестирование • Функциональное тестирование(CasperJS, NightmareJS) • Тестирование производительности (PageSpeed) • Регрессионное тестирование (Wraith) • Автоматическое тестирование (GhostInspector)
- 20.
- 21. Профилирование • Всегда измеряйтепроизводительность в процессе! • Developer Tools • http://jonyablonski.com/designers-wpo-checklist/
- 22. –Ilya Grigorik “Performance isnot a checklist, it’s a continuous process”
- 23. Обратная связь • Доступность(WEB Accessibility) • Интернациолизация • Критика
- 24.
- 25. Обсуждение • Затворничество ведетк проблемам • Обсуждайте догадки и идеи • Изучайте новое • Будьте частью социума и сообщества
- 26.
- 27. Резюмируем • Frontend огромен!Будьте в тренде! • Вы одни не справитесь • Изучайте ваши инструменты • Изучите работу браузера • Будьте членом команды, а не му**ком. • Взболтать, но не смешивать
- 28. А как жеFull Stack? • Frontend => Backend - сложно! • Backend => Frontend - легче…
- 29.
- 30.
- 31.
- 32. Спасибо! • http://vk.com/vitallium • @vitalliumm •http://gihub.com/vitallium