В докладе я расскажу о том, как разрабатывали новый Поиск по блогам Яндекса. О том, как выбирали фреймворк для этого проекта, и почему в конечном итоге остановились на bem-node. Поговорим о сильных сторонах bem-node, которые позволили запустить новый интерфейс в сжатые сроки и с улучшенной производительностью.

1. Новый Поиск по
блогам на bem-node
Сергей Пузанков
BEMup врамках YaC 2013, Москва

2. Задача

6. Язык

9. Платформа

10. Платформа
10

11. Платформа
11

12. Framework

13. Framework
bem-yana
bem-node
13

14. bem-node
github.com/wtfil/bem-node
bit.ly/bem-node
14

15. Структура проекта
common.blocks
data.blocks
desktop.blocks
desktop.pages
node_modules
libs
configs
debian
15

16. Структура проекта
common.blocks
header
news
post
...
data.blocks
desktop.blocks
desktop.pages
node_modules
libs
configs
debian
16

17. Структура проекта
common.blocks
data.blocks
desktop.blocks
desktop.pages
node_modules
libs
configs
debian
17

18. Структура проекта
common.blocks
data.blocks
desktop.blocks
desktop.pages
node_modules
libs
configs
debian
18

19. Структура проекта
common.blocks
data.blocks
desktop.blocks
desktop.pages
main-page
node_modules
libs
configs
debian
19

20. Структура проекта
data.blocks
common.blocks
desktop.blocks
desktop.pages
node_modules
bem-node
...
libs
configs
debian
20

21. Структура проекта
data.blocks
common.blocks
desktop.blocks
desktop.pages
node_modules
libs
bem-bl
bem-controls
islands
...
configs
debian
21

22. Структура проекта
data.blocks
common.blocks
desktop.blocks
desktop.pages
node_modules
libs
configs
development
testing
production
current -> production
debian
22

23. Шаблонизация
BEM.JSON
bit.ly/bem-json
BEMHTML
bit.ly/github-bemhtml
23

24. BEM.JSON
BEM.JSON.decl('b-block', {
onBlock: function (ctx) {
ctx.content({elem: 'item'});
},
onElem: {
'item': function (ctx) {
ctx.content('Hello world');
}
}
});
24

25. Плюшки

26. Шаблоны одни и те же
.common.js
.priv.js
.js
.bemhtml
26

27. Склеивает однотипные запросы
block block
block block block
request
API
response
block block
block block block
27

28. Склеивает однотипные запросы
block block
block block block
склеили
request
API
раслеили
block block
response
block block block
28

29. i-router
Все роуты описываются в файле страницы
Можно натсроить когда пергружать страницу
Можно не пергружать страницу, а только блок
Автоматически роутит /ajax/ запросы с клиента
29

30. Отказоустойчивость
30

31. Кеширование
Кеширует ответы от API
Кеширует готовый HTML
31

32. Время ответа
Было 250-300мс
Стало 120-130мс (полная загрузка)
Стало 40-50мс (ajax)
32

33. Нагрузка
Держит 300rps одной машиной
Было 17 машин в кластере
Решили оставить 4 в разных ДЦ
33

34. github.com/wtfil/bem-node-test
bit.ly/bem-node-hw
34

35. bit.ly/new-ppb
35

36. Спасибо!

37. Сергей Пузанков
Руководитель группы разработки
интерфейсов Поиска
@puzankovcom
puzankov@yandex-team.ru
37