webcamp: developer day: Разработка фронтенда: от кузницы до...

2

Разработка фронтенда От кузницы до металлургического завода

Дмитрий Поляков разработчик интерфейсов Яндекс.Маркета

3

Устройство проекта и методология верстки

4

А помнишь как все начиналось?

Большинство маленьких проектов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.0.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head>

5

А помнишь как все начиналось?

Добавим немного редизайна:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN”> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/new-style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.0.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/new-script.js"></script> </head>

6

Добавим немного редизайна

new-style.css

.newpage a { color: blue !important; text-decoration: none !important;

}

a { color: #369; outline: none; text-decoration: underline;

}

style.css

8

Решение

Верстка абсолютно независимыми блоками

Основные принципы подхода: •  для описания элемента используется только классы;

•  в таблице стилей нет классов вне блоков;

•  минимальное количество каскадов.

9

Методология верстки


•  Статья Виталия Харисова bit.ly/harisov

12




•  Методология BЕМ bit.ly/bem-info

13




•  Методология BEM bit.ly/bem-info

•  MCSS bit.ly/mcss-info

14


Выбор Маркета:

BEM

15

Архитектура фронтенда Маркета

Бекенды Фронтенд Клиентсайд

19

Сборка проекта

21

Инструменты для сборки

•  bem-tools bit.ly/bemtools-info

22



•  ENB bit.ly/enb-info

23




•  Grunt bit.ly/grunt-info

24




•  Grunt bit.ly/grunt-info

•  Gulp bit.ly/gulp-info

25


Выбор Маркета:

ENB

26


Выбор Маркета — ENB.

•  быстрый

27




•  ориентирован на BEM-методологию

28




•  ориентирован на BЕМ-методологию

•  гибкая система технологий сборки

29

Работа в команде

31

Новая рабочая копия

•  shell-скрипт или Make-файл

32



•  Vagrant vagrantup.com

33



•  Vagrant vagrantup.com

•  Своё решение

34


Выбор Маркета: Своё решение

36

Общие компоненты

•  Берем последнюю версию из мастера

37



•  Фриз на конкретном коммите

38



•  Фриз на конкретном коммите

•  Семантическое версионирование

•  Разбиение на отдельные компоненты

39


Выбор Маркета: Разбиение на компоненты и их семантическое версионирование

40

Готовим релиз

41


•  Фриз статики

42


•  Фриз статики

•  Выкладка на продакшн-сервер

43

Фриз статики

•  Самописный скрипт

44


•  Самописный скрипт

•  Grunt/Gulp

45


Выбор Маркета: Своё решение

46

Варианты деплоя

•  Копирование по (S)FTP

47



•  Pull из системы контроля версий

48



•  Pull из системы контроля версий

•  deb-пакет

49


Выбор Маркета: deb-пакеты

50

Подробнее о deb-пакетах

•  Лекция «Развёртывание вёрстки»

в ШРИ от Павла Пушкарёва bit.ly/deb-‐shri

51




•  Документация bit.ly/deb-info

52




•  Документация bit.ly/deb-info

•  Как собрать бинарный deb пакет: подробное

HowTo bit.ly/deb-habr

55

Спасибо за внимание!

56

Дмитрий Поляков

разработчик интерфейсов Яндекс.Маркета

[email protected]

" polyakovdima

" @dpolyakov

" @marketverstka

webcamp: developer day: Разработка фронтенда: от кузницы до...

Technology