![Page 1: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/1.jpg)
Continuous Integration, или как мы подружили
Front-end и Back-end
![Page 2: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/2.jpg)
![Page 3: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/3.jpg)
Почему?
![Page 4: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/4.jpg)
Типовой процесс разработкиПроектирование
Front-end
Back-end
Продукт
Дизайн
![Page 5: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/5.jpg)
Типовой процесс разработкиПроектирование
Дизайн
Front-end
Back-end
Продукт
.PSD
.html .css .js
Прототип
![Page 6: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/6.jpg)
Что в этом плохого?— Экспоненциально растущие риски— Необходимость килограммового ТЗ— Невозможность применять Agile
![Page 7: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/7.jpg)
Типовые проблемы с “версткой”— Не все макеты— Логика ломается из-за скорости работы back-end — Верстка расползается на реальных данных
![Page 8: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/8.jpg)
Кто виноват?Никто
— Спроектировали то что знали— Нарисовали то что спроектировали— Сверстали все макеты— Интегрировали все что было
![Page 9: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/9.jpg)
Что делать?— Возврат к этапу с ошибкой и правят — На текущем этапе “колхозят” как умеют— Full-stack разработчик— Работать сразу над конечным продуктом, избегая промежуточных артефактов
![Page 10: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/10.jpg)
Возврат на предыдущие этапыМинусы— Колоссальные затраты— Недоступность исполнителей
Плюсы— Можно освоить гигантские бюджеты
![Page 11: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/11.jpg)
“Колхоз”Минусы— Требуется доп.квалификация сотрудника— Низкое качество конечного продукта
Плюсы— Дешево
![Page 12: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/12.jpg)
Full-stack разработчикМинусы— Таких не существует— Низкое качество проектов— Высокие риски связанные с исполнителемПлюсы— Очень просто для менеджера
![Page 13: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/13.jpg)
Отказ от артефактов — тренды
— Дизайн в браузере— Continuous Integration
![Page 14: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/14.jpg)
“Непрерывная интеграция (CI, англ. Continuous Integration) — это практика разработки программного обеспечения, которая заключается в выполнении частых автоматизированных сборок проекта для скорейшего выявления и решения интеграционных проблем”.
© Википедия
![Page 15: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/15.jpg)
Что значит CI для Front-end разработчика?
— Применять автоматизацию сборки— Верстать сразу на CMS/Framework
![Page 16: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/16.jpg)
Как это внедрить в 1C-Bitrix— Применять шаблонизатор (Twig)— Готовить back-end и данные ДО front-end
![Page 17: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/17.jpg)
Front-end CI для 1С-Bitrix — MVC
M C VМодуль Компонент Шаблон
![Page 18: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/18.jpg)
Front-end CI для 1С-Bitrix — Шаблоны
![Page 19: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/19.jpg)
Структура— Исходники front-end в том же .git репозитории, что и сборка Bitrix— Все “исходники” вне публичной папки— Grunt собирает assets сразу в шаблона Bitrix
![Page 20: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/20.jpg)
Фактические изменения дляFront-end разработчика— Нужен локальный web-сервер для работы— Работа с Twig вместо HTML— Grunt/Gulp собирает сразу “внутрь” Bitrix— Тесная работа с back-end разработчиком
![Page 21: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/21.jpg)
Что это дает?— Улучшение качества продукта— Командная работа— Уменьшение сроков разработки— Возможность гибко реагировать на изменяющиеся требования (Agile)— Continuous Deployment
![Page 22: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/22.jpg)
Уменьшение сроков — как было
Дизайн
Интеграция+ Back-end
Front-end
Прототип
QA
![Page 23: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/23.jpg)
Уменьшение сроков — получше
Дизайн
Front-end
Прототип
Back-end
QA
![Page 24: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/24.jpg)
Уменьшение сроков — идеально
Дизайн
Front-end
Прототип
Back-end
QAQA
![Page 25: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/25.jpg)
Гибкие методологии — Agile
Дизайн
Front-end
Прототип
Back-end
QAQA
x N = Agile
![Page 26: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/26.jpg)
Так зачем нам все это?
Чтобы делатьболее крутые проектыс меньшими усилиями
![Page 27: Continuous integration, или как мы подружили front end и back-end](https://reader034.vdocuments.net/reader034/viewer/2022051503/586f8fc71a28ab54768b773b/html5/thumbnails/27.jpg)
Спасибо за вниманиеПодрубный Константин
email: [email protected]: http://fb.com/podrubnyweb: http://wlbl.ru/