Разработка универсальных библиотек компонентов для платформы по созданию сайтов

Многие компании, которые занимаются проектной разработкой, рано или поздно сталкиваются с необходимостью создания общих баз frontend-компонентов, которые можно многократно использовать на разных проектах. Это не только экономит время, но и позволяет разрабатывать проекты с меньшим количеством багов.

В своем докладе я бы хотел рассказать о том, как наша компания внедрила у себя этот подход, с какими трудностями мы при этом столкнулись и каких принципов мы придерживались.

Transcript

1. Разработка универсальных библиотек компонентов для платформы по созданию сайтов
2. • Игорь Лесневский ! • 29 лет • Teamlead команды frontend-разработчиков в Kodix Automotive # 2 КТО Я?
3. • Как мы внедрили у себя компонентный подход • С какими трудностями мы столкнулись • Каких принципов мы при этом придерживались 3 О ЧЕМ ДОКЛАД? %
4. Платформа DWS 4
5. ИМПОРТЕР (БРЕНД) 5 • Имеет стилевые гайды • Карает дилеров за плохие сайты • Имеет моно-сайты и экосистему сервисов
6. ДИЛЕР 6 • Хочет иметь сайт, за который не карают • Можно тиражировать • Зависит от SEO
7. • Тиражируемое решение в рамках одного бренда • 6 разных брендов = 6 разных продуктов • В общей сложности около 600 разрозненных площадок 7 ПЛАТФОРМА DWS
8. Старый подход 8
9. ПЛАТФОРМА DWS 9 Структура компонента
10. 10 Шаблон компонента ПЛАТФОРМА DWS
11. Вывод компонента 11 ПЛАТФОРМА DWS
12. • Нет единого стандарта разработки • Тяжело поддерживать и масштабировать • Темизация отсутствует • Время разработки нового продукта - 3-6 месяцев 12 БОЛИ
13. Переосмысление подхода 13
14. • Единая сквозная база компонентов для всех проектов • Масштабирование путем разделения компонентов на библиотеки с единым интерфейсом подключения • Три уровня абстракции для гибкой настройки компонента 14 ТРИ ПРИНЦИПА
15. ЕДИНАЯ БАЗА КОМПОНЕНТОВ ” Components v.1 Components v.2 Components v.3 Project 1 Project 2 Project 3 Components Project 1 Project 2 Project 3 15
16. МАСШТАБИРОВАНИЕ ЧЕРЕЗ БИБЛИОТЕКИ ✌ 16
17. 17 Варианты МАСШТАБИРОВАНИЕ ЧЕРЕЗ БИБЛИОТЕКИ ✌
18. 18 Варианты МАСШТАБИРОВАНИЕ ЧЕРЕЗ БИБЛИОТЕКИ ✌
19. 19 Варианты МАСШТАБИРОВАНИЕ ЧЕРЕЗ БИБЛИОТЕКИ ✌
20. • Центральная конфигурация • Тематическая конфигурация • Пользовательская конфигурация 20 ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
21. • Типографика • Настройки сетки • Цветовая палитра 21 Центральная конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
22. 22 Центральная конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
23. 23 Центральная конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
24. 24 Тематическая конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
25. 25 Тематическая конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
26. 26 Пользовательская конфигурация ТРИ УРОВНЯ АБСТРАКЦИИ ДЛЯ ГИБКОЙ НАСТРОЙКИ
27. Плюсы и минусы 27
28. • Сквозные обновляемые компоненты • Версионирование библиотек • Высокая масштабируемость • Быстро и просто 28 ПЛЮСЫ
29. • Добавление новых цветовых параметров в компонент вынуждает обновлять все центральные конфигурации • Тонкая грань между кастомизируемым и перегруженным компонентом • Ограничения для дизайнера 29 МИНУСЫ
30. А можно посмотреть? 30
31. ДЕМО BMW https://sibcarbm.client.bmw.kodixauto.ru/ NISSAN https://kmotors.client.nissan.kodixauto.ru/ 31
32. СПАСИБО ЗА ВНИМАНИЕ Связаться со мной: • https://ilesnevskiy.dev • li@kodix.ru Ссылка на презентацию: 32