Порядок для скорости. Система структурирования фронтендовой части веб-приложений / Сергей Гущин (Superjob.ru)

Порядок для скорости
Система структурирования
фронтендовой части веб-приложений
Сергей Гущин,
веб-технолог

более 250 000вакансий
около 17 000 000резюме

Нужна главная страница
для незарегистрированного пользователя

Для зарегистрированных
работодателя:
соискателя:

Дизайнеры всегда переосмысливают

Аналитики что-то ищут

Какие проблемы мы выявили:
Сложно было найти какой-то компонент на сайте
Компоненты постоянно изменялись и эти изменения не учитывались
в дальнейшем при создании похожих копонентов
Огромное количество компонентов
Сложно было отследить некоторые параметры компонента
(такие как аналитика, принадлежность к аб-тестам и тд)
Существовало большое количество поколений дизайна,
которые нигде неучтены
Чтобы узнать что-то о компоненте необходимо было задействовать большое
количество РАЗРАБОТЧИКОВ
1
2
3
4
5
6

Откуда взялись
эти проблемы?

<HTML>
{CSS}
(JS)
MODULES
COMPONENT 1
<HTML>
{CSS}
(JS)
MODULES
COMPONENT 2
<HTML>
{CSS}
(JS)
MODULES
COMPONENT 3
PHP CONTROLLER
PHP VIEW MODEL
SuperJob CSS COREJS APPJS LIBS
C 1 C 2 C 3
Компоненты PHP (BLITZ)
Старая схема

Как это всё выглядит в проекте:
supervisorclientcard
supportresumesuggestcatalog
tariffrestrictioninfo
tariffspromotab
tariffsgrid
SupervisorClientCard.html.blitz
TariffsGrid.html.blitz
SupervisorClientCard.html.blitz.css
TariffsGrid.html.blitz.css
SupervisorClientCard.html.blitz.js
TariffsGrid.html.blitz.js
SupervisorClientCard.html.blitz.modules
TariffsGrid.html.blitz.modules

Как это всё выглядит в проекте:

newregistrationform
registrationsecondpivot
registrationformvarianta
reghrnewdesign
registersteptwo
Карл!

Чем нас не устраивал такой подход
к архитектуре компонентов:
Нет никакой документации к компонентам
Компоненты разбросаны по проекту бессистемно
Разработчикам сложно понять где и как искать компонент
Неизвестна ни одна дополнительная метрика компонента
(к какому дизайну относится, какие события аналитики есть
в компоненте, версия аб-теста и тд)
Компоненты могут создаваться бездумно, не учитывая —
был такой компонент создан для этого или нет
1
2
3
4
5

Компоненты PHP (BLITZ)
Новая схема
JSON
PHP CONTROLLER
PHP VIEW MODEL
CSS CORE
JS APPJS LIBS
COMPONENT
SuperJob
<HTML>
{CSS}
(JS) JSON
MODULES
VERSION 1
H
C
J JSON
V 2
M
H
C
J JSON
V 3
M
V 1
V 2
V 3

Как это сейчас выглядит в проекте:
registration-form-hr
single-step
short
mobile
two-steps
layout.html
style.css
script.js
modules.blitz
info.json
info.json

Вот всё, что мы раньше
знали о компоненте:

Что мы знаем о компоненте
сейчас:
{
«name»: «registration-form»,
«title»: «Форма Регистрации»,
«descriptionId»: «33718355»,
«tags»: «регистрация, форма регистрации, работодатель»
}

Что мы знаем о версии компонента
сейчас:
{
«name»: «single-step»,
«title»: «Одношаговая регистрация»,
«descriptionId»: «33718334»,
«ownerId»: «2345»,
«design»: «3»,
«ab»: «single-step-test»,
«tags»: «регистрация, форма регистрации, работодатель»
«analitycs»: {«group»: «registrations», «events»: [«success, cancel, away»], «agregators»: [«yam», «vertica»]},
«task»: «EMP-156»,
«branches»: [«EMP-156», «registration-form», hr-registration]
}

Панель компонентов

Мы идем к менеджерам, аналитикам,
дизайнерам
За описанием компонентов
Узнать поколение дизайна для каждого компонента
За заказчиком
За информацией об А/Б тестах
1
2
3
4

Мы идём к бэкенду

Мы идем к бэкенду
Объединить все логически похожие компоненты
Реорганизовать архитектуру
Возможность постепенного обновления архитектуры компонентов
Шаблоны, стили и js-скрипты должны остаться без изменений
Возможность связать компоненты с: JIRA, Confluence, Bitbucket
Требования к новой
архитектуре компонентов:
1
2
3
4
5

Около 1000 компонентов
за месяц были переведены
на новую архитектуру

Как-то надо объяснить
руководству — зачем всё это?

Мы идем к руководителю
Знание информации о компонентах, без обращения к разработчикам
Снижение порога вхождения в проект новых разработчиков
Устранение дублирующихся или неиспользуемых компонентов
Возможность быстрой смены одного компонента на другой
Увеличение скорости разработки
Зачем все это?
1
2
3
4
5

Что было сделано за один месяц
3продакт-менеджера и 1аналитик описали около 500компонентов
2дизайнера опознали для этих компонентов одно из четырех поколений дизайна
3бэк-ендера полностью реорганизовали структуру для более чем 1000компонентов,
добавили связи с JIRA, Confluence, Bitbucket
2фронт-ендера выяснили какие компоненты пушат события в аналитику и какие
это события, а также сделали панель компонентов

Консистентность — насколько
однороден дизайн сайта
первое поколение
второе поколение
третье поколение
четвертое поколение

О планах
Все то же самое сделать
и для js-компонетов
Сделать поиск
по компонентам
Возможность
просмотра компонента
без окружения
Быстрое создание
компонентов
Сделать компоненты
самособирающимися
в коллекцию
1 2 3
54

О чём я?
Не бойтесь находить
проблемы
Говорите начальству
о том, что вас беспокоит,
и тогда ресурсы
найдутся сами собой
Решайте их,
привлекайте своих
коллег и другие
команды
Делайте, пробуйте,
творите
Делайте жизнь лучше
не только себе,
но и другим

Порядок для скорости. Система структурирования фронтендовой части веб-приложений / Сергей Гущин (Superjob.ru)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Порядок для скорости. Система структурирования фронтендовой части веб-приложений / Сергей Гущин (Superjob.ru)

Similar to Порядок для скорости. Система структурирования фронтендовой части веб-приложений / Сергей Гущин (Superjob.ru) (20)

More from Ontico

More from Ontico (20)

Порядок для скорости. Система структурирования фронтендовой части веб-приложений / Сергей Гущин (Superjob.ru)