TК°Conf. Организация разработки Frontend. Виталий Слободин

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