Yandex.Frontend: complex services, complex solutions

Talk (in Russian) for Yet another Conference 2013, October 2d, Moscow

Abstract

More than 10 years Yandex launches various Internet services such as Maps, Mail, Disk, Music, Auto. During this long period of time we have got a lot of experience that could be useful for other web developers.

In this talk we will share several stories about several services of Yandex and our common library of blocks. In the context of search services we will talk about full stack of BEM technologies, server JavaScript and automatised web development.

We will describe an experience of Yandex.Direct which has a non-stop frontend development and refactoring workflow. We also tell about MVC-pattern (bem-mvc) realisation and converting data in comfortable data view format.

Using Yandex.Maps and its API example we will show how you can adapt BEM flexibly taking into consideration special project's needs.

We also talk about open source and why we went there and what we have learned. Promise you, it will have a lot of interesting details.

Video (Russian) https://events.yandex.ru/lib/talks/1108/

Transcript

2. Фронтенд в Яндексе: сложные сервисы, непростые решения Сергей Бережной, Сергей Максимов, Марат Дулин и Елена Джетпыспаева
3. Обо мне veged@yandex-team.ru @veged github.com/veged в Яндексе восемь лет руководитель отдела разработки поисковых интерфейсов соавтор БЭМ 3
4. Фронтенд в Яндексе
5. Разработка интерфейсов в Яндексе
6. yandex.ru/all — больше 40 сервисов api.yandex.ru — больше 25 API на самом деле 180 сервисов более 250 разработчиков интерфейсов 3 страны 6 городов кодовая база 001011000100100001111000110 6
7. Поиск Сергей Бережной
9. Поиск TT2 -> JS
12. TT2: Плюсы совместим с Perl простой достаточно быстрый 12
13. TT2: Минусы Perl невыразительный достаточно медленный 13
15. JavaScript: Плюсы JavaScript выразительный достаточно быстрый 15
17. БЭМ: Плюсы больше порядка в коде общепортальная библиотека инструменты 17
18. SERP-4695: Переверстать Cерп с TT2 на JS 18
19. Переписывание: Стратегия без остановки основного производства параллельно держим две версии 19
20. Переписывание: Технологии Perl + JavaScript::V8 github.com/ezhi/javascript-v8 search.cpan.org/dist/JavaScript-V8 JavaScript + BEMHTML bit.ly/yac2011-bemhtml 20
21. Переписывание: Этапы первый прототип 20% полностью переписанный сервис 50% полный релиз и отказ от TT2 30% 21
22. Переписывание: Итого получили плюсы от JavaScript и БЭМ опыт полного переписывания 22
23. Поиск Распределённость
30. Распределённость Команды в разных городах
31. Команды в разных городах больше суммарный рынок труда специальные процессы по объединению команды 31
32. Яндекс.Поиск: когда команда распределена по «островам» bit.ly/yasubbotnik-kiev-2013-serp bit.ly/yasubbotnik-spb-2013-serp 32
33. Команды в разных городах более 20 человек 4 города + ещё 2 33
34. Распределённость Код и технологии
35. Код и технологии более 80 независимых библиотек блоков БЭМ-методология инструменты 35
36. Распределённость Острова
37. Острова islands.yandex.ru 37
38. Острова распределяемся дальше используем опыт полного переписывания 38
39. Гуртом і батька легше бити. украинская пословица 39
40. 40 veged@yandex-team.ru @veged veged Сергей Бережной Руководитель отдела разработки поисковых интерфейсов
41. Директ Сергей Максимов
42. Обо мне ddos@yandex-team.ru @dosyara github.com/dosyara в Яндексе около трех лет разрабатывал околопоисковые интерфейсы руководитель группы интерфейсов Справочника и Директа 42
43. Яндекс.Директ 43 Сервис для размещения поисковой и тематической контекстной рекламы. Проект с 12-ти летней историей, сложносочиненным интерфейсом, большой кодовой базой.
46. Архитектура 46
47. Насущные проблемы скорость генерации (шаблонизация) версии библиотек клиентская скорость поддерживаемость 47
48. Выбрали технологический стек BEMTREE.XJST + BEMHTML i-bem + bem-mvc 48
49. Вперед! Все на БЭМ!
50. Железный занавес устоял
51. Будем переходить поэтапно Отселились в отдельное место Настроили инфраструктуру Наметили постраничный план переезда 51
52. Перевод страницы Переключаем шаблонизатор Реализуем блоки (или используем имеющиеся) Выполняем минимальный рефакторинг Тестируем Запускаем 52
53. Планирование Для начала, для страниц посчитали посещаемость дали коэффициент важности составили таблицу Выбираем смотрим важность смотрим трудоемкость количество общих блоков 53
54. Переводи и поддерживай Постепенно обновляем проект Не останавливаем разработку в основном коде 54
55. Часть вторая причинно-следственная
56. Как мы генерируем интерфейсы 56
57. У нас есть данные 0000 0010 1001 1010 57
58. Много данных 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
59. Которые нужно отобразить
60. Напишем шаблон
61. Разобьем на части
62. Шаблонизируем в два этапа 62 view% ctx% data% ctx% view% BEMTREE.XJST% BEMHTML%
63. BEMTREE.XJST – технология генерации БЭМ-дерева github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.js Подробнее на BEMup 63
64. Как мы управляем интерфейсом 64
65. У нас есть баннер 65
66. 66 getData& setData& onChange& getField& setField& fix& rollback& clear& validate&
67. bem-mvc – реализация MVC паттерна осуществляющего провязку с DOM-ом в БЭМ-терминах http://github.com/bem/bem-mvc Подробнее на BEMup 67
68. Кроме того 68 Ввели обязательное code review Синтаксический анализ (jshint, jscs) Пишем json-схемы на данные json-schema.org Валидируем данные по этим схемам Исследуем скорость интерфейса
69. 69 ddos@yandex-team.ru @dosyara dosyara Сергей Максимов Руководитель группы интерфейсов Справочника и Директа
70. Карты Марат Дулин
71. Обо мне mdevils@yandex-team.ru @mdevils github.com/mdevils В Яндексе с 2008 года Техлид в Яндекс.Картах 71
72. Сервис, который отвечает на два вопроса: где и как добраться? Посещаемость более 3 млн. в день. 72
73. Продукты Сервис maps.yandex.ru – Публичный сервис API Яндекс Карт – Публичное API 73
74. Общие требования Единый стиль для API и Карт. Лего позволяет придерживаться единого стиля, использовать одну и ту же верстку. 74
75. 75 Карты API Лего Прочие сервисы
76. 76 25 Карты API Лего 2.8 Лего 2.6
77. Проблемы Лего Нет обратной совместимости Трудоемкое обновление Нужно просить помощи у команды Лего 77
78. Требования к удобной библиотеке 78 Полная обратная совместимость Быстрое обновление Легкость расширения библиотеки
79. Реализация удобной библиотеки Строгое API 79
80. 80 BEViS
81. Block Element View State 81 Beavis and Butt-head Mike Judge
82. Обратная совместимость API — зафиксированный набор интерфейсов Вместо доопределений — параметры блока Нет модификаторов Отображение блока отделено от поведения 82
83. Наши технологии BTJSON — диалект BEMJSON 83
84. BTJSON { block: "button", view: "red", autoInit: true, text: "Press me", icon: {block: "icon", view: "close"} } 84
85. Наши технологии BTJSON — диалект BEMJSON BT — шаблонизатор 85
86. BT Шаблонизатор для BTJSON. Не поддерживает доопределение, переопределение. Работает очень быстро за счет своей простоты. github.com/enb-make/bt 86
87. HTML Лего: <button class="button button_theme_big button_disabled_yes" onclick="return {button:{}}"> BEViS: <button class="button_big _disabled" data-block="button"> 87
88. Наши технологии BTJSON — диалект BEMJSON BT — шаблонизатор YBlock — базовый визуальный блок 88
89. 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
90. YBlock Ориентирован на проекты с упором на JS Полное разграничение публичного и приватного API Связан с BT Чистое наследование, совместимое с различными библиотеками 90
91. Наши технологии BTJSON — диалект BEMJSON BT — шаблонизатор YBlock — базовый визуальный блок ENB — сборщик. Подробнее на BEMup. 91
93. Будущее Использовать BEViS вместе с командой API. Выйти в OpenSource? 93 Futurama Matt Groening
94. 94 mdevils@yandex-team.ru @mdevils mdevils Дулин Марат Технический лидер группы интерфейсов геопоиска
95. Айда на гитхаб! или зачем БЭМу все это?
96. Обо мне mursya@yandex-team.ru @mursya_ru Мурся третий год в Яндексе Я.Субботники, группа собственных мероприятий, YaC... теперь — Developer Relations & BEM 96
97. Блок__Элемент_Модификатор = БЭМ 97
98. 98 info@bem.info @bem_ru @bem_en #b_ clubs.ya.ru/bem БЭМ Блок__Элемент_Модификатор groups/bem.info bem
99. БЭМ — способ разработки сайтов, позволяющий писать код, который легко поддерживать и развивать 99
100. А точнее? 100
101. А точнее? 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
102. http://images2.wikia.nocookie.net/__cb20100219193952/marvel_dc/images/3/3f/Legion_of_Super-Heroes_001.jpg
103. http://fc04.deviantart.net/fs71/i/2011/131/a/0/love_at_first_sight_by_metadragonart-d3g4i2h.jpg
104. 103 «Когда я спросил Харисова на Я.Субботнике в 2009 (я тогда в Яндексе не работал), почему они бесплатно рассказывают и выкладывают наработки, он ответил: „Когда делаешь что-то долго и хорошо, со временем появляется желание поделиться“», — из разговора с одним неизвестным Лего-разработчиком
105. БЭМ — первый технологический продукт Яндекса 104
106. Зачем нам опенсорс? 105
107. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает
108. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь
109. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код
110. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код Хотим расти, но сложно интегрировать людей
111. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код Хотим расти, но сложно интегрировать людей Хотим делиться, потому что вместе веселей
112. Приоритезируй это! 106
113. Приоритезируй это! Online vs. Offline 106
114. Приоритезируй это! Online vs. Offline Внедрение vs. Распространение знания 106
115. Приоритезируй это! Online vs. Offline Внедрение vs. Распространение знания Написание кода vs. Знание методологии 106
116. Приоритезируй это! Online vs. Offline Внедрение vs. Распространение знания Написание кода vs. Знание методологии Наше коммьюнити vs. Какие-то конференции 106
118. Чему мы научились?
119. 1. Не переставать говорить! 109
120. 2. Стабильность — это хорошо 110
121. 3. Не только писать, но и употреблять :) 111
122. 4. Лидерство — хорошо, контроль — плохо 112
123. 5. Никаких рок-звезд! 113
124. 6. Дай! Дай! Дай! 114
125. 7. Сообщество равных 115
126. 8, 9, 10... 100500 116
127. by Jaison Justus, India
128. «Не бойтесь быть первопроходцами. Худшее, что может случиться, — вы опозоритесь и все!» — Дима Барановский, Adobe на YaC 2012 118
129. 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 Александр Баумгертнер — Плюсы использования БЭМ для небольших проектов и компаний
130. 120 mursya@yandex-team.ru @mursya_ru mursya Елена Джетпыспаева BEM Developer Relations
131. 121 22 Спасибо за внимание