Upload
geekslab
View
149
Download
1
Embed Size (px)
DESCRIPTION
Разработка фронтенда: от кузницы до металлургического завода Дмитрий Поляков разработчик команды Яндекс.Маркета Первые версии фронденда Маркета далали всего несколько человек. Сегодня нас больше 20, а за это время сам Маркет технологически вырос из кузницы с ручным трудом до маленького html-завода, где многое за разработчика делают скрипты. В докладе я расскажу особенности разработки фронтенда Маркета: — создание рабочей копии для разработчика "в один клик"; — файловая структура шаблонов и их сборка; — фриз статики; — выкладка в продакшн: как обновить верстку на десятке серверов; — общие компоненты между проектами: как избавиться от копипаста и ничего не сломать новой фичей.
Citation preview
1
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
7
8
Решение
Верстка абсолютно независимыми блоками
Основные принципы подхода: • для описания элемента используется только классы;
• в таблице стилей нет классов вне блоков;
• минимальное количество каскадов.
9
Методология верстки
Верстка абсолютно независимыми блоками
• Статья Виталия Харисова bit.ly/harisov
10
11
12
Методология верстки
Верстка абсолютно независимыми блоками
• Статья Виталия Харисова bit.ly/harisov
• Методология BЕМ bit.ly/bem-info
13
Методология верстки
Верстка абсолютно независимыми блоками
• Статья Виталия Харисова bit.ly/harisov
• Методология BEM bit.ly/bem-info
• MCSS bit.ly/mcss-info
14
Методология верстки
Выбор Маркета:
BEM
15
Архитектура фронтенда Маркета
Бекенды Фронтенд Клиентсайд
16
17
18
19
Сборка проекта
20
21
Инструменты для сборки
• bem-tools bit.ly/bemtools-info
22
Инструменты для сборки
• bem-tools bit.ly/bemtools-info
• ENB bit.ly/enb-info
23
Инструменты для сборки
• bem-tools bit.ly/bemtools-info
• ENB bit.ly/enb-info
• Grunt bit.ly/grunt-info
24
Инструменты для сборки
• bem-tools bit.ly/bemtools-info
• ENB bit.ly/enb-info
• Grunt bit.ly/grunt-info
• Gulp bit.ly/gulp-info
25
Инструменты для сборки
Выбор Маркета:
ENB
26
Инструменты для сборки
Выбор Маркета — ENB.
• быстрый
27
Инструменты для сборки
Выбор Маркета — ENB.
• быстрый
• ориентирован на BEM-методологию
28
Инструменты для сборки
Выбор Маркета — ENB.
• быстрый
• ориентирован на BЕМ-методологию
• гибкая система технологий сборки
29
Работа в команде
30
31
Новая рабочая копия
• shell-скрипт или Make-файл
32
Новая рабочая копия
• shell-скрипт или Make-файл
• Vagrant vagrantup.com
33
Новая рабочая копия
• shell-скрипт или Make-файл
• Vagrant vagrantup.com
• Своё решение
34
Новая рабочая копия
Выбор Маркета: Своё решение
35
36
Общие компоненты
• Берем последнюю версию из мастера
37
Общие компоненты
• Берем последнюю версию из мастера
• Фриз на конкретном коммите
38
Общие компоненты
• Берем последнюю версию из мастера
• Фриз на конкретном коммите
• Семантическое версионирование
• Разбиение на отдельные компоненты
39
Общие компоненты
Выбор Маркета: Разбиение на компоненты и их семантическое версионирование
40
Готовим релиз
41
Готовим релиз
• Фриз статики
42
Готовим релиз
• Фриз статики
• Выкладка на продакшн-сервер
43
Фриз статики
• Самописный скрипт
44
Фриз статики
• Самописный скрипт
• Grunt/Gulp
45
Фриз статики
Выбор Маркета: Своё решение
46
Варианты деплоя
• Копирование по (S)FTP
47
Варианты деплоя
• Копирование по (S)FTP
• Pull из системы контроля версий
48
Варианты деплоя
• Копирование по (S)FTP
• Pull из системы контроля версий
• deb-пакет
49
Варианты деплоя
Выбор Маркета: deb-пакеты
50
Подробнее о deb-пакетах
• Лекция «Развёртывание вёрстки»
в ШРИ от Павла Пушкарёва bit.ly/deb-‐shri
51
Подробнее о deb-пакетах
• Лекция «Развёртывание вёрстки»
в ШРИ от Павла Пушкарёва bit.ly/deb-‐shri
• Документация bit.ly/deb-info
52
Подробнее о deb-пакетах
• Лекция «Развёртывание вёрстки»
в ШРИ от Павла Пушкарёва bit.ly/deb-‐shri
• Документация bit.ly/deb-info
• Как собрать бинарный deb пакет: подробное
HowTo bit.ly/deb-habr
53
54
55
Спасибо за внимание!
56
Дмитрий Поляков
разработчик интерфейсов Яндекс.Маркета
" polyakovdima
" @dpolyakov
" @marketverstka