Upload
tkconf
View
60
Download
6
Embed Size (px)
Citation preview
Impact Mapping: планирование разработки продукта с учетом бизнес целейАлександр Бындю (byndusoft.com)
Организация разработки Front-EndВиталий Слободин, (CTO, Elonsoft)
Кто я?• Работал с множеством технологий (.NET,
NodeJS, Ruby on Rails)
• Был по обе стороны: Front-end и Back-end
• Прошел весь путь от джуниора до джедая
• люблю Open Source: PhantomJS, QtWebKit
• Горец на Open Source проекте PhantomJS
Цели
Цели
• Как соединить разработку Front-end и Back-end
• Как научить разработчиков работать вместе
• Что ждет на Front-end?
• Инструменты для помощи в организации
• Плюсы и минусы нашей схемы
Типичная команда
Типичная команда
Back-endFront-endДизайнИсследование
Фокус на технологию
Фокус на людей
Типичный Back-end
• Фокусируется на серверной части
• Хранение и обработка данных
• Архитектура
• Безотказность и доступность
• “А это вообще работает?”
Типичный Design
• Фокусируется на UI/UX
• Данные особо не важны
• “А это нормально вообще?”
Типичный Front-end
• Фокусируется на клиенте (браузере)
• Нужны только данные и схема
• Креативность и понимание дизайна
• “А как это выглядит вообще?”
Объединяем
Объединяем
• Больше знаем - лучше делаем
• Вовлекайте в обсуждение всех
• Все имеют право на идею
Выжимаем• Верстка за 1.92 секунды
• Минимум времени на сборку проекта
• Пишем чаще - обновляем реже
• Изоляция от Backend
• Тестирование
• Профилирование
• Обратная связь
• Обсуждение
Верстка за 1.92 секунды• Emmet
• CSS Hat
• Sketch
• Avocode, Zeppelin, Protein
• Методология верстки
• Препроцессоры
• Постпроцессоры
Сборка проекта
• WebPack
• В мире есть не только WebPack:
• Grunt/Gulp
• Brunch
• RollupJS
Пишем чаще - обновляем реже
• Watcher
• LiveReload
• HMR (Hot Module Replacement)
Изоляция от Backend
• Пишем код, когда Backend не готов (лузеры :))
• www.mockapi.io
• Interfake
Тестирование
Тестирование
• Зачем?
• Изменение CSS
• Изменение JS
• Производительность
Тестирование
• Функциональное тестирование (CasperJS, NightmareJS)
• Тестирование производительности (PageSpeed)
• Регрессионное тестирование (Wraith)
• Автоматическое тестирование (GhostInspector)
Профилирование
Профилирование
• Всегда измеряйте производительность в процессе!
• Developer Tools
• http://jonyablonski.com/designers-wpo-checklist/
–Ilya Grigorik
“Performance is not a checklist, it’s a continuous process”
Обратная связь
• Доступность (WEB Accessibility)
• Интернациолизация
• Критика
Обсуждение
Обсуждение
• Затворничество ведет к проблемам
• Обсуждайте догадки и идеи
• Изучайте новое
• Будьте частью социума и сообщества
Резюмируем
Резюмируем• Frontend огромен! Будьте в тренде!
• Вы одни не справитесь
• Изучайте ваши инструменты
• Изучите работу браузера
• Будьте членом команды, а не му**ком.
• Взболтать, но не смешивать
А как же Full Stack?
• Frontend => Backend - сложно!
• Backend => Frontend - легче…
Вы рыцарь-джедай
Q&A
Спасибо!
Спасибо!
• http://vk.com/vitallium
• @vitalliumm
• http://gihub.com/vitallium