1. - ,

2. 2dmtry@yandex-team.ru@dabelitskygithub.com/dab 3. 33sipayrt@yandex-team.ru@sipayrtgithub.com/sipayrt 4. ? JavaScript + BEM -4 5. ? bem.info bit.ly/1hMHNB2 - bit.ly/1hMCKk55 6. bem.info bit.ly/1eAsQBo bit.ly/1m8ijzQ6 7. BEMJSONbit.ly/bemjson 8. BEMHTML 9. 9 10. 9 { } 11. 9 { }.island__header { display: inline-block; } 12. 9 { }.island__header { display: inline-block; }block('island').elem('header')(tag()('a')) 13. BEMJSON 10 14. BEMHTML 11 15. HTML12 16. BEMHTML. 13 17. BEMHTML. 14 18. BEMHTML. 14default 19. BEMHTML. 14default tag HTML 20. BEMHTML. 14default tag HTML js js 21. BEMHTML. 14default tag HTML js js bem - 22. BEMHTML. 14default tag HTML js js bem -cls 23. BEMHTML. 14default tag HTML js js bem -cls mix - DOM- 24. BEMHTML. 14default tag HTML js js bem -cls mix - DOM-jsAttrs HTML- js 25. BEMHTML. 14default tag HTML js js bem -cls mix - DOM-jsAttrs HTML- jsattrs HTML- 26. BEMHTML. 14default tag HTML js js bem -cls mix - DOM-jsAttrs HTML- jsattrs HTML-content HTML- 27. -15 28. -15{ block: 'b-menu' } 29. -15{ block: 'b-menu' }{ elem: 'item' } 30. -15{ block: 'b-menu' }{ elem: 'item' }{block: 'b-link',mods: { pseudo: 'yes', color: 'green' }} 31. -15{ block: 'b-menu' }{ elem: 'item' }{block: 'b-link',mods: { pseudo: 'yes', color: 'green' }}{elem: 'item',elemMods: { selected: 'yes' }} 32. -15{ block: 'b-menu' }{ elem: 'item' }{block: 'b-link',mods: { pseudo: 'yes', color: 'green' }}{elem: 'item',elemMods: { selected: 'yes' }}{block: 'b-link',mix: [ { block: 'b-serp-item', elem: 'link' } ]} 33. HTML16 34. HTML16{ block: 'my-block', tag: 'img' } 35. HTML16{ block: 'my-block', tag: 'img' }{ block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }} 36. HTML16{ block: 'my-block', tag: 'img' }{ block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }}{ block: 'my-block', cls: 'additional-class' } 37. HTML16{ block: 'my-block', tag: 'img' }{ block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }}{ block: 'my-block', cls: 'additional-class' }{ block: page', tag: html', bem: false } 38. HTML16{ block: 'my-block', tag: 'img' }{ block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }}{ block: 'my-block', cls: 'additional-class' }{ block: page', tag: html', bem: false }{ block: my-block', js: true } 39. BEMHTML 17 40. BEMHTML 17 bit.ly/bemhtmlref 41. 42. data view HTML 43. data - HTML 44. data + BEMTREE BEMJSON!BEMJSON + BEMHTML HTML 45. BEMTREE + BEMHTML 46. 47. BEMTREE + BEMHTML24 48. BEMTREE + BEMHTML24 49. BEMTREE + BEMHTML24 50. BEMTREE + BEMHTML24 51. BEMTREE + BEMHTML24 52. JavaScript, BEMTREE BEMHTML25 53. JavaScript, BEMTREE BEMHTML25 DSL, JavaScript 54. JavaScript, BEMTREE BEMHTML25 DSL, JavaScript JavaScript 55. JavaScript, BEMTREE BEMHTML25 DSL, JavaScript JavaScript JavaScript 56. JavaScript, BEMTREE BEMHTML25 DSL, JavaScript JavaScript JavaScript 57. 26 58. bem-core27 59. bem-core27bit.ly/bemcoretpl 60. 28 61. 28 BEMJSON 62. 28 BEMJSON 63. 28 BEMJSON () 64. 28 BEMJSON () this.ctx - 65. BEMTREE. 29 66. BEMTREE. 29 , 67. BEMTREE. 29 , default 68. BEMTREE. 29 , default content - 69. BEMTREE. 29 , default content - , - 70. BEMTREE 30 71. BEMTREE 30bit.ly/bemtreeref 72. BEMHTML BEMTREE31BEMTREE BEMHTML - HTML default, content, BEMTREE + HTML(tag, js, cls, bem ..) Vow-promise - 73. . 32 74. . 32match(1, 2, 3)(); 75. . 32match(1, 2, 3)();match( 1).match( 2)(1);match( 1).match( 3)(2) 76. . 32match(1, 2, 3)();match( 1).match( 2)(1);match( 1).match( 3)(2)match(1)(match(2)(1),match(3)(2)) 77. . 33 78. . 33match(this.block === 'link',function() { return this.ctx.icon; }).content()(function() {return [{elem: 'icon'}, this.ctx.content];}); 79. . 33match(this.block === 'link',function() { return this.ctx.icon; }).content()(function() {return [{elem: 'icon'}, this.ctx.content];});block('link').elem('icon').content()(function() {return {block: 'icon'};}); 80. Lets codeBEMHTML 81. API - ( ) - bemjson - html35 82. BEMTREE 83. JavaScript + 84. 38 modules.define('i-bem', ['inherit'], function(provide, inherit) {var BEM = inherit(/* */)provide(BEM)}) 85. 39 modules.require(['i-bem', 'jquery'], function(BEM, $) {/* , i-bem jquery */}) 86. i-bem.js 87. i-bem.js41 88. i-bem.js41, 89. i-bem.js41, i-bem JavaScript 90. i-bem.js41, i-bem JavaScriptjQuery API 91. i-bem.js42 92. i-bem.js42 93. i-bem.js42 94. i-bem.js42 95. JS- 96. 44 js-{!!!!!block: 'form'!} 97. 45 js-{!!!!!block: 'form',!!!!!js: true!} 98. 46 js-{!!!!!block: 'form',!!!!!js: { p1: 'v1', p2: 'v2', }!} 99. 47 js-

100. 48 js-

101. 49 js-

102. 50 js-

103. - 104. 52 BEMDOM.decl('form', {!/* */}, {!/* */}); 105. 53 BEMDOM.decl('form', {!/* */}, {!/* */});!!.form {!display: flex;!} 106. 54BEMDOM.decl('form', {myMethod: function() {// this// this.__self// this.__self.myStaticMethod()// super-callthis.__base()}}); 107. 55BEMDOM.decl('form', { /* */ }, {myStaticMethod: function() {// this// super-callthis.__base()}}); 108. 56 .form{display: flex;}!.form_disabled{opacity: .5;} 109. 57 BEMDOM.decl('form', {!onSetMod: {!!!!! disabled: {!!!!!!!!!!!!'true': function() {!!!!!!!!!!!!!!!!...!!!!!!!!!!!!},!!!!!!!!!!!!'': function() {!!!!!!!!!!!!!!!!...!!!!!!!!!!!!}!!!!! }!!!!!}!}); 110. 58 BEMDOM.decl('form', {!onSetMod: {!!!!! disabled: function(modName, modVal) {!!/* */!!!!! }!!!!!}!}); 111. 59BEMDOM.decl({!block: 'dialog', !baseBlock: 'form'!}, {!/* */}, {!/* */}); 112. 113. 61

114.

62 115. 63BEMDOM.decl('form', {!onSetMod: {!!!!! js: {!inited: function() {!/* */}!!!!! }!!!!!}!}); 116. 117. 65 118. 65 119. 65 120. 65 121. 65 DOM- 122. 66// this.findBlockInside('button')this.findBlockOutside('page')this.findBlockOn('dialog') 123. 67// this.findBlockInside('button')this.findBlockOutside('page')this.findBlockOn('dialog')!// this.findElem('control')this.elem('control') 124. 68// this.findBlockInside('button')this.findBlockOutside('page')this.findBlockOn('dialog')!// this.findElem('control')this.elem('control')!// this.setMod('status', 'loading')this.hasMod('status', 'loading')this.getMod('status')this.delMod('status') 125. 69 126. 69DOM- 127. 69DOM-BEM- 128. 69DOM-BEM- 129. 70 // DOM-this.bindTo('submit', function() { /**/ })this.unbindFrom('submit') 130. 71 // DOM-this.bindTo('submit', function() { /**/ })this.unbindFrom('submit')!// BEM-this.on('update', function() { /**/ })this.un('update', function() { /**/ })this.emit('update') 131. !72 132. !72 DOM- 133. !72 DOM- 134. !72 DOM- 135. !72 DOM- 136. !!ym github.com/ymaps/modules ru.bem.info/tools/bem/bem-stub i-bem.js ru.bem.info/tutorials/bem-js-tutorial , ru.bem.info/talks/bemup-moscow-2014! clck.ru/9FST573