- PVSM.RU - https://www.pvsm.ru -
Знакомая многим фронтендщикам боль. Появление новых элементов, дублирующих старый функционал. Слегка изменённый внешний вид радио-кнопок, новый цвет ссылок, изменение отступов на каждой новой странице. Обычно эта проблема усугубляется с приходом новых дизайнеров, со сменой главного дизайнера, или при отсутствии дизайнера вовсе.
Как следствие проблемы: на создание новых страниц тратится неоправданно много времени. Теряется целостность сайта. Растёт файл стилей и код.
Обычно такие проблемы возникают в тот переходный период, когда проект уже достаточно большой, но отдел дизайна еще не сформирован.
Будучи прагматичным фронтенд разработчиком, ваша прямая обязанность сохранить целостность продукта и не допустить появление избыточности. Ведь от этого выигрывают все:
Подобная синергия достигается следованию трём принципам, приведенным ниже.
1. Покажите всё что есть
Чаще всего дизайнер просто не знает о том, что подобная кнопка уже есть на странице подтверждения адреса электронной почты из-за её труднодоступности. Хорошо бы было представить имеющиеся функциональные элементы сайта где-то в одном месте. Да так чтоб поддерживать эту коллекцию в актуальном состоянии было как можно легче. И тут на сцену выходит библиотека компонентов. Так же известная как “styleguide” или “pattern library”. На данный момент существует огромный выбор [1] средств генерации стайлгайдов и написано немало [2] статей на эту тему.
Пользователь Гитхаба и по совместительству автор Jekyll Styleguide [3] Дэвид Ханд постарался классифицировать существующие генераторы библиотек компонентов. На этой странице [4] можно ознакомиться со списком имеющихся инструментов.
2. Поддерживайте библиотеку компонентов в актуальном состоянии
Каждый элемент библиотеки компонентов, — это еще один вариант использования кода, требующий усилий по поддержанию его в актуальном состоянии. Соблазн обновить компоненты вашего стайлгайда уже после релиза весьма велик. Но лучше относиться к библиотеки компонентов как к документации, — неотъемлемой части релиз-процесса.
По способу хранения компонентов в стайлгайде, можно выделить два типа генераторов:
1. Компоненты представляются в файле стилей
+ Легче поддерживать: поменял стили, в том же файле изменил комментарий с примером, вуаля!
— Неудобно на больших примерах, в том числе ввиду отсутствия подсветки и поддержки IDE
Вот [5] достаточно большой список имеющихся генераторов подобного типа.
2. Элементы хранятся в отдельных файлах
+ Все прелести IDE, больше свободы в добавлении и хранении примеров
— Еще один файл, нуждающийся в поддержке
Примеры библиотек: Fractal [6], Pattern Lab on Node [7], Fabricator [8].
3. Предпочитайте улучшение текущих компонентов внедрению новых
Вы, как кто-то потративший больше всего времени на оживление имеющихся компонентов, обычно знаете их список, возможности и недостатки. Работайте вместе с дизайнером над улучшением имеющегося функционала. Пример диалога с дизайнером:
— Привет, посмотри, у нас уже есть подобный радио-элемент. Вот он: хттп://адрес-стайлгайда/навороченный-радио-бокс.хтмл
— Да, я знаю, но он не подходит для новой страницы, потому что у него нет теней и пояснительного текста
— Значит текущий элемент недостаточно хорош. Почему бы нам не улучшить его, добавив тени и опциональный пояснительный текст?
— Действительно, давай так и сделаем
Я бы хотел поделиться своей наработкой, появившейся как результат нескольких лет использования стайлгайдов: Component Library [9]. Вот пример её использования на основе компонентов Хабра [10].
Несмотря на огромный выбор библиотек компонентов, Component Library объединила в себе преимущества многих инструментов:
Автор: search
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/253431
Ссылки в тексте:
[1] огромный выбор: http://styleguides.io/tools
[2] немало: http://styleguides.io/articles
[3] Jekyll Styleguide: https://github.com/davidhund/jekyll-styleguide
[4] этой странице: https://github.com/davidhund/styleguide-generators
[5] Вот: https://github.com/davidhund/styleguide-generators#css-parsing-css-source
[6] Fractal: http://fractal.build/guide/getting-started
[7] Pattern Lab on Node: https://github.com/pattern-lab/patternlab-node
[8] Fabricator: https://github.com/fbrctr/fabricator
[9] Component Library: https://github.com/sneas/component-library
[10] пример её использования на основе компонентов Хабра: https://sneas.github.io/habrahabr/index.html
[11] Источник: https://habrahabr.ru/post/326472/
Нажмите здесь для печати.