"Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева, Марат Дулин, Сергей Бережной, Сергей Максимов, Яндекс
•
0 gostou•4,305 visualizações
Больше десяти лет Яндекс делает разные интернет-сервисы: Карты, Почту, Директ, Музыку, Авто и так далее. В процессе их разработки был приобретён опыт, который может быть полезен другим веб-разработчикам. В докладе мы расскажем несколько историй на примере некоторых сервисов Яндекса и общей библиотеки блоков. В контексте поисковых сервисов, речь пойдёт об использовании полного стека БЭМ-технологий, о переходе к серверному JavaScript и автоматизации разработки. Мы опишем опыт Яндекс.Директа, фронтенд которого переписывается без остановки основной разработки. А также расскажем про реализацию MVC-паттерна (bem-mvc) и преобразование данных в удобный для представления вид. На примере Яндекс.Карт и их API будет показано, как можно гибко адаптировать БЭМ-методологию, учитывая особые нужды конкретного проекта. Мы также расскажем, зачем мы пошли в опенсорс и чему научились. Обещаем много интересных подробностей.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a "Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева, Марат Дулин, Сергей Бережной, Сергей Максимов, Яндекс
Semelhante a "Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева, Марат Дулин, Сергей Бережной, Сергей Максимов, Яндекс (20)
Mais de Yandex
Mais de Yandex (20)
Último
Último (9)
"Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева, Марат Дулин, Сергей Бережной, Сергей Максимов, Яндекс
- 2. Фронтенд в Яндексе: сложные сервисы, непростые решения Сергей Бережной, Сергей Максимов, Марат Дулин и Елена Джетпыспаева
- 3. Обо мне veged@yandex-team.ru @veged github.com/veged в Яндексе восемь лет руководитель отдела разработки поисковых интерфейсов соавтор БЭМ 3
- 6. yandex.ru/all — больше 40 сервисов api.yandex.ru — больше 25 API на самом деле 180 сервисов более 250 разработчиков интерфейсов 3 страны 6 городов кодовая база 001011000100100001111000110 6
- 8. 8
- 12. TT2: Плюсы совместим с Perl простой достаточно быстрый 12
- 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
- 24. 24
- 30. Распределённость Команды в разных городах
- 31. Команды в разных городах больше суммарный рынок труда специальные процессы по объединению команды 31
- 32. Яндекс.Поиск: когда команда распределена по «островам» bit.ly/yasubbotnik-kiev-2013-serp bit.ly/yasubbotnik-spb-2013-serp 32
- 33. Команды в разных городах более 20 человек 4 города + ещё 2 33
- 35. Код и технологии более 80 независимых библиотек блоков БЭМ-методология инструменты 35
- 38. Острова распределяемся дальше используем опыт полного переписывания 38
- 39. Гуртом і батька легше бити. украинская пословица 39
- 40. 40 veged@yandex-team.ru @veged veged Сергей Бережной Руководитель отдела разработки поисковых интерфейсов
- 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. Вперед! Все на БЭМ!
- 51. Будем переходить поэтапно Отселились в отдельное место Настроили инфраструктуру Наметили постраничный план переезда 51
- 52. Перевод страницы Переключаем шаблонизатор Реализуем блоки (или используем имеющиеся) Выполняем минимальный рефакторинг Тестируем Запускаем 52
- 53. Планирование Для начала, для страниц посчитали посещаемость дали коэффициент важности составили таблицу Выбираем смотрим важность смотрим трудоемкость количество общих блоков 53
- 54. Переводи и поддерживай Постепенно обновляем проект Не останавливаем разработку в основном коде 54
- 56. Как мы генерируем интерфейсы 56
- 57. У нас есть данные 0000 0010 1001 1010 57
- 60. Напишем шаблон
- 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
- 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 Сергей Максимов Руководитель группы интерфейсов Справочника и Директа
- 71. Обо мне mdevils@yandex-team.ru @mdevils github.com/mdevils В Яндексе с 2008 года Техлид в Яндекс.Картах 71
- 72. Сервис, который отвечает на два вопроса: где и как добраться? Посещаемость более 3 млн. в день. 72
- 73. Продукты Сервис maps.yandex.ru – Публичный сервис API Яндекс Карт – Публичное API 73
- 74. Общие требования Единый стиль для API и Карт. Лего позволяет придерживаться единого стиля, использовать одну и ту же верстку. 74
- 77. Проблемы Лего Нет обратной совместимости Трудоемкое обновление Нужно просить помощи у команды Лего 77
- 78. Требования к удобной библиотеке 78 Полная обратная совместимость Быстрое обновление Легкость расширения библиотеки
- 79. Реализация удобной библиотеки Строгое API 79
- 80. 80 BEViS
- 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
- 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
- 104. 103 «Когда я спросил Харисова на Я.Субботнике в 2009 (я тогда в Яндексе не работал), почему они бесплатно рассказывают и выкладывают наработки, он ответил: „Когда делаешь что-то долго и хорошо, со временем появляется желание поделиться“», — из разговора с одним неизвестным Лего-разработчиком
- 105. БЭМ — первый технологический продукт Яндекса 104
- 107. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает
- 108. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь
- 109. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код
- 110. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код Хотим расти, но сложно интегрировать людей
- 111. Зачем нам опенсорс? 105 Закрытая разработка рано или поздно умирает Нужна новая кровь Хотим аутсорс, но сложно интегрировать код Хотим расти, но сложно интегрировать людей Хотим делиться, потому что вместе веселей
- 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
- 117. 107
- 118. Чему мы научились?
- 119. 1. Не переставать говорить! 109
- 120. 2. Стабильность — это хорошо 110
- 121. 3. Не только писать, но и употреблять :) 111
- 122. 4. Лидерство — хорошо, контроль — плохо 112
- 124. 6. Дай! Дай! Дай! 114
- 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 Александр Баумгертнер — Плюсы использования БЭМ для небольших проектов и компаний