Расскажу об организации процесса разработки Frontend в единый конвейер, чтобы увеличить скорость и минимизировать затраты с рисками. Как организовать верстку макета по фантастичному макету дизайнера при этом не вогнав в когнитивный диссонанс результатом на Bootstrap. Каким образом объединить воинствующие стороны: Frontend, Backend и дизайнеров.

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 is not a checklist, it’s a
continuous process”

23. Обратная связь
• Доступность (WEB Accessibility)
• Интернациолизация
• Критика

24. Обсуждение

25. Обсуждение
• Затворничество ведет к проблемам
• Обсуждайте догадки и идеи
• Изучайте новое
• Будьте частью социума и сообщества

26. Резюмируем

27. Резюмируем
• Frontend огромен! Будьте в тренде!
• Вы одни не справитесь
• Изучайте ваши инструменты
• Изучите работу браузера
• Будьте членом команды, а не му**ком.
• Взболтать, но не смешивать

28. А как же Full Stack?
• Frontend => Backend - сложно!
• Backend => Frontend - легче…

29. Вы рыцарь-джедай

30. Q&A

31. Спасибо!

32. Спасибо!
• http://vk.com/vitallium
• @vitalliumm
• http://gihub.com/vitallium