1.
Фронтенд в Яндексе:
сложные сервисы,
непростые решения
Сергей Бережной, Сергей Максимов,
Марат Дулин и Елена Джетпыспаева

2.
Обо мне
veged@yandex-team.ru
@veged
github.com/veged
в Яндексе восемь лет
руководитель отдела
разработки поисковых интерфейсов
соавтор БЭМ
3

3.
Фронтенд в Яндексе

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

5.
yandex.ru/all — больше 40 сервисов
api.yandex.ru — больше 25 API
на самом деле 180 сервисов
более 250 разработчиков интерфейсов
3 страны
6 городов
кодовая база 001011000100100001111000110
6

6.
Поиск
Сергей Бережной

7.
8

8.
Поиск
TT2 -> JS

9.
TT2: Плюсы
совместим с Perl
простой
достаточно быстрый
12

10.
TT2: Минусы
Perl
невыразительный
достаточно медленный
13

11.
JavaScript: Плюсы
JavaScript
выразительный
достаточно быстрый
15

12.
БЭМ: Плюсы
больше порядка в коде
общепортальная библиотека
инструменты
17

13.
SERP-4695:
Переверстать Cерп с TT2 на JS
18

14.
Переписывание: Стратегия
без остановки основного производства
параллельно держим две версии
19

15.
Переписывание: Технологии
Perl + JavaScript::V8
github.com/ezhi/javascript-v8
search.cpan.org/dist/JavaScript-V8
JavaScript + BEMHTML
bit.ly/yac2011-bemhtml
20

16.
Переписывание: Этапы
первый прототип 20%
полностью переписанный сервис 50%
полный релиз и отказ от TT2 30%
21

17.
Переписывание: Итого
получили плюсы от JavaScript и БЭМ
опыт полного переписывания
22

18.
Поиск
Распределённость

19.
24

20.
Распределённость
Команды в разных городах

21.
Команды в разных городах
больше суммарный рынок труда
специальные процессы по объединению команды
31

22.
Яндекс.Поиск: когда команда
распределена по «островам»
bit.ly/yasubbotnik-kiev-2013-serp
bit.ly/yasubbotnik-spb-2013-serp
32

23.
Команды в разных городах
более 20 человек
4 города + ещё 2
33

24.
Распределённость
Код и технологии

25.
Код и технологии
более 80 независимых библиотек блоков
БЭМ-методология
инструменты
35

26.
Распределённость
Острова

27.
Острова
islands.yandex.ru
37

28.
Острова
распределяемся дальше
используем опыт полного переписывания
38

29.
Гуртом і батька легше бити.
украинская пословица
39

30.
40
veged@yandex-team.ru
@veged
veged
Сергей Бережной
Руководитель отдела
разработки поисковых интерфейсов

31.
Директ
Сергей Максимов

32.
Обо мне
ddos@yandex-team.ru
@dosyara
github.com/dosyara
в Яндексе около трех лет
разрабатывал околопоисковые интерфейсы
руководитель группы интерфейсов
Справочника и Директа
42

33.
Яндекс.Директ
43
Сервис для размещения поисковой
и тематической контекстной
рекламы.
Проект с 12-ти летней историей,
сложносочиненным интерфейсом,
большой кодовой базой.

34.
Архитектура
46

35.
Насущные проблемы
скорость генерации (шаблонизация)
версии библиотек
клиентская скорость
поддерживаемость
47

36.
Выбрали технологический стек
BEMTREE.XJST + BEMHTML
i-bem + bem-mvc
48

37.
Вперед! Все на БЭМ!

38.
Железный занавес устоял

39.
Будем переходить поэтапно
Отселились в отдельное место
Настроили инфраструктуру
Наметили постраничный план переезда
51

40.
Перевод страницы
Переключаем шаблонизатор
Реализуем блоки (или используем имеющиеся)
Выполняем минимальный рефакторинг
Тестируем
Запускаем
52

41.
Планирование
Для начала, для страниц
посчитали посещаемость
дали коэффициент важности
составили таблицу
Выбираем
смотрим важность
смотрим трудоемкость
количество общих блоков
53

42.
Переводи и поддерживай
Постепенно обновляем проект
Не останавливаем разработку в основном коде
54

43.
Часть вторая
причинно-следственная

44.
Как мы генерируем интерфейсы
56

45.
У нас есть данные
0000 0010 1001 1010
57

46.
Много данных
11.0010010000111111011010101000100010000101101000110000100011010011000100110001100110001010001011100000001101110000011
1001101000100101001000000100100111000001000100010100110011111001100011101000000001000001011101111101010011000111011000
1001110011011001000100101000101001010000010000111100110001110001101000000010011011101111011111001010100011001101100111
1001101001110100100001100011011001100000010101100001010011011011111001001011111000101000011011101001111111000010011010
1011011010110110101010001110000100100010111100100100001011011010101110110011000100101111001111110110001101111010001001
1000100001011101001101001100011011111101101011010110000101111111111010111001011011011110100000001101011011111101101111
0111000111000011010111111101101011010100010011001111110100101101011101001111100100100000100010111110001001011000111111
1100110010010010010100001100110010100011110110011100100010110110011110111000010000000000111110010111000101000010110001
1101111110000010110011000110110100100100000110110000111000101010111010011100110100110100100010110001111111010100011111
1010010010011001111010111111000001101100101010111010010001111011100101000111010110110010110000111000110001011110011010
1011000100000100001010101001010111011100111101101010100101001000001110111000010010110100101100110110101100111000011000
0110101010011100100101010111100100110000000010011110001011101000110110000001000110010100001100000100001011111000011001
0100100000101111001000110001011100011011011001110001110111110001110011110011101110010110000011000000011101000011000000
0111001101100100111100000111010001011101100000001111010001010001111101101011100010101011101111100000110111101001100010
1001011001001110111100010101111001011111101101001010101011000000101110001100000111001100101010100100101111100111010101
0010101011010101110010100010101110100100010011000011000100110001111101000000101000100000001010101110010100011100101101
0100010101010101011000100001011011010110100110011000101110000110100000100010100000111101000110011101010000101010100100
0011010101111011111000111001011101001100100111011001111101110000101000001000101100011011011111011110000101010001010111
0101001110001010101110101110100000110000011000111110110110011100101110000111110000101101001101110000111100100110001111
0101011111101011010111010001100110110110000100100110011110101110001111010001100100101001110000001001010001001010110000
1100111011100111011100011110100100010011000011010110100101110111001101011111100010010111111111010000001101101100110001
0100000100001100100110110000111011000000010011100110011111011001000011010100110010001010010000111110010101100011000000
1011101111011001000000000110010111011111000010001011101010111011110100110000101011101011011000111011100001001100010001
1000000101110101101100101000110111000100000100011100010010011111010000001110100111001011010101100110001010000111101101
1010110111111110011100000111111010001000010001110010010111000001011010001001000001010100100100001000010000000000100011
0100111001000111100000100101010011110000111111001101101011110001000011100011001101000010000101111011011101001011011001
58

47.
Которые нужно отобразить

48.
Напишем шаблон

49.
Разобьем на части

50.
Шаблонизируем в два этапа
62
view%
ctx%
data%
ctx%
view%
BEMTREE.XJST% BEMHTML%

51.
BEMTREE.XJST – технология генерации БЭМ-дерева
github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.js
Подробнее на BEMup
63

52.
Как мы управляем интерфейсом
64

53.
У нас есть баннер
65

54.
66
getData&
setData&
onChange&
getField&
setField&
fix&
rollback&
clear&
validate&

55.
bem-mvc – реализация MVC паттерна осуществляющего
провязку с DOM-ом в БЭМ-терминах
http://github.com/bem/bem-mvc
Подробнее на BEMup
67

56.
Кроме того
68
Ввели обязательное code review
Синтаксический анализ (jshint, jscs)
Пишем json-схемы на данные json-schema.org
Валидируем данные по этим схемам
Исследуем скорость интерфейса

57.
69
ddos@yandex-team.ru
@dosyara
dosyara
Сергей Максимов
Руководитель группы
интерфейсов Справочника и Директа

58.
Карты
Марат Дулин

59.
Обо мне
mdevils@yandex-team.ru
@mdevils
github.com/mdevils
В Яндексе с 2008 года
Техлид в Яндекс.Картах
71

60.
Сервис, который отвечает
на два вопроса: где и как добраться?
Посещаемость более 3 млн. в день.
72

61.
Продукты
Сервис maps.yandex.ru
– Публичный сервис
API Яндекс Карт
– Публичное API
73

62.
Общие требования
Единый стиль для API и Карт.
Лего позволяет придерживаться единого стиля, использовать одну и ту же
верстку.
74

63.
75
Карты
API
Лего Прочие сервисы

64.
7625
Карты
API
Лего 2.8
Лего 2.6

65.
Проблемы Лего
Нет обратной совместимости
Трудоемкое обновление
Нужно просить помощи у команды Лего
77

66.
Требования к удобной библиотеке
78
Полная обратная совместимость
Быстрое обновление
Легкость расширения библиотеки

67.
Реализация удобной библиотеки
Строгое API
79

68.
80
BEViS

69.
Block
Element
View
State
81
Beavis and Butt-head
Mike Judge

70.
Обратная совместимость
API — зафиксированный набор интерфейсов
Вместо доопределений — параметры блока
Нет модификаторов
Отображение блока отделено от поведения
82

71.
Наши технологии
BTJSON — диалект BEMJSON
83

72.
BTJSON
{
block: "button",
view: "red",
autoInit: true,
text: "Press me",
icon: {block: "icon", view: "close"}
}
84

73.
Наши технологии
BTJSON — диалект BEMJSON
BT — шаблонизатор
85

74.
BT
Шаблонизатор для BTJSON.
Не поддерживает доопределение, переопределение.
Работает очень быстро за счет своей простоты.
github.com/enb-make/bt
86

75.
HTML
Лего:
<button class="button button_theme_big button_disabled_yes"
onclick="return {button:{}}">
BEViS:
<button class="button_big _disabled"
data-block="button">
87

76.
Наши технологии
BTJSON — диалект BEMJSON
BT — шаблонизатор
YBlock — базовый визуальный блок
88

77.
YBlock
// i-bem
BEM.DOM.decl("button", { ... });
var button = BEM.DOM.init(
$(BEMHTML.apply({block: "button"}))
).bem("button");
// YBlock
var Button = inherit(YBlock, { ... });
var button = new Button();
89

78.
YBlock
Ориентирован на проекты с упором на JS
Полное разграничение публичного и приватного API
Связан с BT
Чистое наследование, совместимое с различными библиотеками
90

79.
Наши технологии
BTJSON — диалект BEMJSON
BT — шаблонизатор
YBlock — базовый визуальный блок
ENB — сборщик. Подробнее на BEMup.
91

80.
Будущее
Использовать BEViS вместе с командой API.
Выйти в OpenSource?
93
Futurama
Matt Groening

81.
94
mdevils@yandex-team.ru
@mdevils
mdevils
Дулин Марат
Технический лидер
группы интерфейсов геопоиска

82.
Айда на гитхаб!
или зачем БЭМу все это?

83.
Обо мне
mursya@yandex-team.ru
@mursya_ru
Мурся
третий год в Яндексе
Я.Субботники, группа собственных
мероприятий, YaC...
теперь — Developer Relations & BEM
96

84.
Блок__Элемент_Модификатор = БЭМ
97

85.
98
info@bem.info
@bem_ru @bem_en #b_
clubs.ya.ru/bem
БЭМ
Блок__Элемент_Модификатор
groups/bem.info
bem

86.
БЭМ — способ разработки сайтов,
позволяющий писать код, который легко
поддерживать и развивать
99

87.
А точнее?
100

88.
А точнее?
bem.info БЭМ-методология bem-core БЭМ-технологии
bem-tools Москва bem-history СНГbem-mvc РИТ++ Киев bem-bl
Я.Субботники i-bem.js YaC Симферополь twitter Web Standards
Days Клуб БЭМ в Я.Ру borschik in English facebook по-русски
WebConf ЕвропаМинск bemhtml Санкт-Петербург
~30 докладов в год
100

89.
http://images2.wikia.nocookie.net/__cb20100219193952/marvel_dc/images/3/3f/Legion_of_Super-Heroes_001.jpg

90.
http://fc04.deviantart.net/fs71/i/2011/131/a/0/love_at_first_sight_by_metadragonart-d3g4i2h.jpg

91.
103
«Когда я спросил Харисова на Я.Субботнике в
2009 (я тогда в Яндексе не работал), почему они
бесплатно рассказывают и выкладывают
наработки, он ответил: „Когда делаешь что-то
долго и хорошо, со временем появляется желание
поделиться“»,
— из разговора с одним
неизвестным Лего-разработчиком

92.
БЭМ — первый технологический
продукт Яндекса
104

93.
Зачем нам опенсорс?
105

94.
Зачем нам опенсорс?
105
Закрытая разработка рано или поздно умирает

95.
Зачем нам опенсорс?
105
Закрытая разработка рано или поздно умирает
Нужна новая кровь

96.
Зачем нам опенсорс?
105
Закрытая разработка рано или поздно умирает
Нужна новая кровь
Хотим аутсорс, но сложно интегрировать код

97.
Зачем нам опенсорс?
105
Закрытая разработка рано или поздно умирает
Нужна новая кровь
Хотим аутсорс, но сложно интегрировать код
Хотим расти, но сложно интегрировать людей

98.
Зачем нам опенсорс?
105
Закрытая разработка рано или поздно умирает
Нужна новая кровь
Хотим аутсорс, но сложно интегрировать код
Хотим расти, но сложно интегрировать людей
Хотим делиться, потому что вместе веселей

99.
Приоритезируй это!
106

100.
Приоритезируй это!
Online vs. Offline
106

101.
Приоритезируй это!
Online vs. Offline
Внедрение vs. Распространение знания
106

102.
Приоритезируй это!
Online vs. Offline
Внедрение vs. Распространение знания
Написание кода vs. Знание методологии
106

103.
Приоритезируй это!
Online vs. Offline
Внедрение vs. Распространение знания
Написание кода vs. Знание методологии
Наше коммьюнити vs. Какие-то конференции
106

104.
107

105.
Чему мы научились?

106.
1. Не переставать говорить!
109

107.
2. Стабильность — это хорошо
110

108.
3. Не только писать, но и употреблять :)
111

109.
4. Лидерство — хорошо,
контроль — плохо
112

110.
5. Никаких рок-звезд!
113

111.
6. Дай! Дай! Дай!
114

112.
7. Сообщество равных
115

113.
8, 9, 10... 100500
116

114.
by Jaison Justus, India

115.
«Не бойтесь быть первопроходцами.
Худшее, что может случиться, — вы опозоритесь и все!»
— Дима Барановский, Adobe на YaC 2012
118

116.
Stay BEMed & Приходи на BEMup!
119
15:00 Дмитрий Барановский — topcoat — открытый проект от Адобе для
быстрой и удобной разработки веб- приложений
15:30 Антон Виноградов — БЭМ on Rails
16:00 Марат Дулин — ENB — сборщик проектов на БЭМ
16:20 Сергей Татаринцев — bem-tools 1.0.0
16:40 Сергей Бережной — bem-core
17:20 Сергей Максимов — BEMTREE.XJST – генерируй дерево
17:40 Владимир Варанкин — Сервер-сайд в БЭМ- терминах (Node.js)
18:00 Сергей Пузанков — Новый Поиск по Блогам на bem- node
18:20 Сергей Максимов — bem-mvc, или как клеить моделей
18:40 Владимир Довыденко — БЭМ в ТКС
19:00 Антон Кузнецов — БЭМ в Битриксе
19:20 Александр Баумгертнер — Плюсы использования БЭМ для небольших
проектов и компаний

117.
120
mursya@yandex-team.ru
@mursya_ru
mursya
Елена Джетпыспаева
BEM Developer Relations

118.
12122
Спасибо за внимание