Сначала стайлгайд

Varya Stepanova, SC5 Online

Сначала стайлгайд

или

как перейти на компонентный подход

Brought to you by Varya Stepanova and generated by Jekyller

Варя Степанова

Разработчик интерфейсов
SC5 Online, Хельсинки

Долгоживущие проекты, библиотеки компонентов, style-guide-driven development

Прогресс

Проблема

Метод старой школы

макет

вёрстка

продукт

Процесс с потерями

Должно быть так

макет
вёрстка
интеграция

Метод старой школы

  • Интерфейс неоднородный
  • Запутанный код
  • Маленькие изменения на самом деле большие
  • Занимает много времени
  • Сложно поддерживать

Решение

Websites are systems

Сайты — это системы, а не страницы. И чем скорее мы перестанем считать их страницами, тем лучше.

Анна Дебенхэм

Модульный CSS

  • OOCSS
  • SMACSS
  • BEM
  • Atomic design

или любое другое решение

Процесс разрабоки с модульным CSS

Выход из зоны комфорта

Живой стайлгайд

Живой стайлгайд — это сайт с документацией, на котором компоненты отрисованы при помощи того же CSS, что используется в рабочем проекте.

Например,

Разработка при помощи стайлгайда

Стайлгайд можно нужно вписать в процесс разработки.

Сначала стайлгайд: разрабатываем и фиксим в живом стайлгайде, а потом переносим в продукт.

Инструмент

styleguide.sc5.io

Легко сделать стайлгайд

  • npm install sc5-styleguide
  • CSS, SCSS, SASS, LESS
  • Совместимо с Gulp и Grunt
  • Живой стайлгайд
  • Документация в коде, KSS-синтаксис
  • Шаблоны (AngularJS директивы)

Можно использовать для разработки

  • Следит за изменениями и обновляется
  • Показывает переменные компонента
  • Показывает компоненты переменных
  • Быстрое редактирование

На большом проекте

Наш опыт: библиотека компонент

Визуальные юнит тесты

Было:

Стало:

Видно на тесте:

Автоматизировано

  • gulp test:visual:update — обновляет базу скриншотов
  • gulp test:visual — сравнивает локальную копию с базой

Можно использовать для continuous integration!

Стайл гайд бибилиотеки блоков

  • Живая документация компонентов
  • Быстрое тестирование
  • Юнит тесты для интерфейса
  • Быстрая разработка новых страниц
  • Консистентный дизайн
  • Улучшает понимание в команде
  • Хорошо для удаленной работы
  • Делаем одно дело
  • Разработка “сначала стайлгайд”

На маленьком проекте

Стайлгайд странички кота

bit.ly/small-styleguide

  • Видно, чего не хватает
  • Всё надо переделать
  • Дальше будет только лучше

Итак,

Изменения сознания

До

Какой CSS и JS нужен?

После

Какие модули нужны для этой страницы? Нужно ли сделать новые компоненты?
Новые компоненты разрабатываются в стайлгайде.

Спасибо!

Варя Степанова, SC5 Online

varya.me/func-2015