Больше десяти лет Яндекс делает разные интернет-сервисы: Карты, Почту, Директ, Музыку, Авто и так далее. В процессе их разработки был приобретён опыт, который может быть полезен другим веб-разработчикам. В докладе мы расскажем несколько историй на примере некоторых сервисов Яндекса и общей библиотеки блоков. В контексте поисковых сервисов, речь пойдёт об использовании полного стека БЭМ-технологий, о переходе к серверному JavaScript и автоматизации разработки. Мы опишем опыт Яндекс.Директа, фронтенд которого переписывается без остановки основной разработки. А также расскажем про реализацию MVC-паттерна (bem-mvc) и преобразование данных в удобный для представления вид. На примере Яндекс.Карт и их API будет показано, как можно гибко адаптировать БЭМ-методологию, учитывая особые нужды конкретного проекта. Мы также расскажем, зачем мы пошли в опенсорс и чему научились. Обещаем много интересных подробностей.
2. [email protected] @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 [email protected] @veged veged 31. 32.
[email protected] @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& x& 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 [email protected] @dosyara dosyara 58. 59.
[email protected] @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 : BEViS: 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 [email protected] @mdevils
mdevils 82. ! ? 83. [email protected] @mursya_ru ., , YaC...
Developer Relations & BEM 96 84. ___ = 97 85. 98 [email protected]
@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_rst_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. Ofine 106 101. ! Online vs. Ofine vs. 106 102. ! Online
vs. Ofine vs. vs. 106 103. ! Online vs. Ofine 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 [email protected] @mursya_ru mursya
BEM Developer Relations 118. 12122
