Документирование вёрстки по-взрослому

Роберт Харитонов, Одноклассники

Web Standards Days, Санкт-Петербург, 2013

РИТ ++, Москва, 2013

Документирование вёрстки
по-взрослому

Боль

Обама стреляет себе в ногу

Боль

Internet Explorer

Боль

Internet Explorer

Рутина

Повторная вёрстка

  • Лишняя работа
  • Плохое качество

Backend-разработчики

Качество клиентского кода

Дизайнеры

Вечный редизайн

Команда

Проблемы взаимодействия

Что делать?

Программы и сервисы решаюшие перечисленные проблемы

Source

Source

Решает проблемы с

Открыто!

github.com/sourcejs

Документация

Библиотека

Документация

Для
  • Продукта
  • Верстальщиков
  • Команды (дизайнеры, программисты...)

Масштаб

  • 6 верстальщиков, 9 UI дизайнеров, ≈50 разработчиков
  • 35 модулей в 1 слое по rhr.me/MCSS
  • 54 модулея в 2 слое + смежные

≈650 кб
сжатого CSS

Проблемы

Для верстальщиков

  • Обмен кодом
  • Поддержка чужого кода

Хаос

Велосипеды

Решение

Документация в CSS

		.cb { /* complex block */
		    overflow: hidden;  /* have floats inside */
		    position: relative;  /* have p:abs inside */
		    width: 100%;
		    /* .cb-head height + .cf-footer / 20 + 17 */
		    min-height: 37px;
		}
	

Документация в CSS

		.cb { /* complex block */
		    overflow: hidden;  /* have floats inside */
		    position: relative;  /* have p:abs inside */
		    width: 100%;
		    /* .cb-head height + .cf-footer / 20 + 17 */
		    min-height: 37px;
		}
	
Страница документации
Страница документации

Для команды

Команда Одноклассников

Программисты
верстали...

Навигация

Общение

Документация проектов

На живую?

Отличия от продуктовой среды
  • Гибкость
  • Скорость имплементации
  • Быстрое тестирование

Инструменты

Разработка кода вчера

Обычный процесс
Редактор
Статика
Конечный продукт

Сегодня

Улучшенный
Редактор
Среда разработки
и тестирования
Конечный продукт

Завтра

Новый инструмент
Редактор
Source
Конечный продукт

Новый
процесс

Новый процесс с Source

Разрабатываем прямо в документации
Дизайн
Документированная
библиотека блоков
Внедрение

Плагины

Дебаг-режим

Тестирование

Дизайнеры

Не разделяйте сущности,
дизайн и вёрстка — одно целое.
Две сложеные половинки яблока

Котики

Кот хипстер

Интерактивные документации

Стили

  • Цвета, размеры, шрифты
  • Удобно и настраиваемо

Графика

  • Фильтры
  • Загрузка
  • Автоматизация

Source!

sourcejs.com

Решенные проблемы

Архитектура

Технологии

Будущее

Спасибо!

Роберт Харитонов

Source!

sourcejs.com