Yandex.Frontend: complex services, complex solutions
•
0 gostou•190 visualizações
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/
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Yandex.Frontend: complex services, complex solutions
Semelhante a Yandex.Frontend: complex services, complex solutions (20)
Mais de Yelena Jetpyspayeva
Mais de Yelena Jetpyspayeva (12)
Yandex.Frontend: complex services, complex solutions
- 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 Александр Баумгертнер — Плюсы использования БЭМ для небольших проектов и компаний