continuous integration, или как мы подружили front end и back-end

Continuous Integration, или как мы подружили

Front-end и Back-end

Почему?

Типовой процесс разработкиПроектирование

Front-end

Back-end

Продукт

Дизайн

Типовой процесс разработкиПроектирование

Дизайн

Front-end

Back-end

Продукт

.PSD

.html .css .js

Прототип

Что в этом плохого?— Экспоненциально растущие риски— Необходимость килограммового ТЗ— Невозможность применять Agile

Типовые проблемы с “версткой”— Не все макеты— Логика ломается из-за скорости работы back-end — Верстка расползается на реальных данных

Кто виноват?Никто

— Спроектировали то что знали— Нарисовали то что спроектировали— Сверстали все макеты— Интегрировали все что было

Что делать?— Возврат к этапу с ошибкой и правят — На текущем этапе “колхозят” как умеют— Full-stack разработчик— Работать сразу над конечным продуктом, избегая промежуточных артефактов

Возврат на предыдущие этапыМинусы— Колоссальные затраты— Недоступность исполнителей

Плюсы— Можно освоить гигантские бюджеты

“Колхоз”Минусы— Требуется доп.квалификация сотрудника— Низкое качество конечного продукта

Плюсы— Дешево

Full-stack разработчикМинусы— Таких не существует— Низкое качество проектов— Высокие риски связанные с исполнителемПлюсы— Очень просто для менеджера

Отказ от артефактов — тренды

— Дизайн в браузере— Continuous Integration

“Непрерывная интеграция (CI, англ. Continuous Integration) — это практика разработки программного обеспечения, которая заключается в выполнении частых автоматизированных сборок проекта для скорейшего выявления и решения интеграционных проблем”.

© Википедия

Что значит CI для Front-end разработчика?

— Применять автоматизацию сборки— Верстать сразу на CMS/Framework

Как это внедрить в 1C-Bitrix— Применять шаблонизатор (Twig)— Готовить back-end и данные ДО front-end

Front-end CI для 1С-Bitrix — MVC

M C VМодуль Компонент Шаблон

Front-end CI для 1С-Bitrix — Шаблоны

Структура— Исходники front-end в том же .git репозитории, что и сборка Bitrix— Все “исходники” вне публичной папки— Grunt собирает assets сразу в шаблона Bitrix

Фактические изменения дляFront-end разработчика— Нужен локальный web-сервер для работы— Работа с Twig вместо HTML— Grunt/Gulp собирает сразу “внутрь” Bitrix— Тесная работа с back-end разработчиком

Что это дает?— Улучшение качества продукта— Командная работа— Уменьшение сроков разработки— Возможность гибко реагировать на изменяющиеся требования (Agile)— Continuous Deployment

Уменьшение сроков — как было

Дизайн

Интеграция+ Back-end

Front-end

Прототип

QA

Уменьшение сроков — получше

Дизайн

Front-end

Прототип

Back-end

QA

Уменьшение сроков — идеально

Дизайн

Front-end

Прототип

Back-end

QAQA

Гибкие методологии — Agile

Дизайн

Front-end

Прототип

Back-end

QAQA

x N = Agile

Так зачем нам все это?

Чтобы делатьболее крутые проектыс меньшими усилиями

Спасибо за вниманиеПодрубный Константин

email: support@wlbl.rufb: http://fb.com/podrubnyweb: http://wlbl.ru/