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
Добавим немного редизайна
style.css
a {
new-style.css
.newpage a {
color: blue !important;
text-decoration: none !important;
}
color: #369;
outline: none;
text-decoration: underline;
}

Решение
Верстка абсолютно независимыми
блоками
Основные принципы подхода:
• для описания элемента используется только классы;
• в таблице стилей нет классов вне блоков;
• минимальное количество каскадов.
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
Разбиение на
компоненты и их
семантическое
версионирование

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
Дмитрий Поляков
разработчик
интерфейсов
Яндекс.Маркета
dima@my-html.ru
" polyakovdima
" @dpolyakov
" @marketverstka

WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического завода - Дмитрий Поляков

Recommended

Recommended

More Related Content

Similar to WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического завода - Дмитрий Поляков

Similar to WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического завода - Дмитрий Поляков (20)

More from GeeksLab Odessa

More from GeeksLab Odessa (20)

WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического завода - Дмитрий Поляков