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

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, что используется в рабочем проекте.

Разработка при помощи стайлгайда style-guide-driven development

style-guide-driven development

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

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

Инструмент

styleguide.sc5.io

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

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

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

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

Наш опыт

библиотека компонентов

Что нам дал SC5 Style Guide

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

Изменения в мозгу

До

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

После

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

Спасибо!

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

varya.me/wsd-2015