Download to read offline
Uploaded byYandex
Библиотека bem-components
Документ описывает библиотеку bem-components, разработанную Владимиром Гриненко в Яндексе, и ее преимущества в разработке интерфейсов. Он охватывает методологии BEM, включая структуру и принцип работы библиотеки, а также инструменты, которые помогают упростить разработку и улучшить качество кода. В документе также присутствует информация о сообществе BEM и способах начать разработку с использованием данной библиотеки.
Библиотека bem-components
- 2. Библиотека bem-components ВладимирГриненко, Яндекс
- 3.
- 4. О себе 〉4года в Яндексе 3
- 5. О себе 〉4года в Яндексе 〉руковожу службой разработки БЭМ 3
- 6. О себе 〉4года в Яндексе 〉руковожу службой разработки БЭМ 〉i@tadatuta.com 3
- 7. О себе 〉4года в Яндексе 〉руковожу службой разработки БЭМ 〉i@tadatuta.com 〉@tadatuta 3
- 8. О себе 〉4года в Яндексе 〉руковожу службой разработки БЭМ 〉i@tadatuta.com 〉@tadatuta 〉github.com/tadatuta 3
- 9.
- 10. Обсудим 〉История БЭМ:от методологии до платформы 4
- 11. Обсудим 〉История БЭМ:от методологии до платформы 〉bem-components — готовая библиотека для ваших проектов 4
- 12. Обсудим 〉История БЭМ:от методологии до платформы 〉bem-components — готовая библиотека для ваших проектов 〉Сообщество БЭМ 4
- 13. БЭМ — очем это вообще
- 14. БЭМ — очем это вообще 6
- 15. БЭМ — очем это вообще 〉БЭМ — это разделение интерфейса на блоки 6
- 16. БЭМ — очем это вообще 〉БЭМ — это разделение интерфейса на блоки 〉ООП в полный рост 6
- 17. БЭМ — очем это вообще 〉БЭМ — это разделение интерфейса на блоки 〉ООП в полный рост 〉Единая предметная область 6
- 18.
- 19. БЭМ позволяет 〉инкапсулироватьреализацию блока 7
- 20.
- 21.
- 22. БЭМ позволяет 〉инкапсулироватьреализацию блока 9
- 23. БЭМ позволяет 〉инкапсулироватьреализацию блока 〉наследовать блоки друг от друга 9
- 24. БЭМ позволяет 〉инкапсулироватьреализацию блока 〉наследовать блоки друг от друга 〉полиморфизм в терминах модификаторов 9
- 27. 3 источника, 3составные части 12
- 28. 3 источника, 3составные части 〉Методология 12
- 29. 3 источника, 3составные части 〉Методология 〉Инструменты 12
- 30. 3 источника, 3составные части 〉Методология 〉Инструменты 〉Библиотеки готовых блоков 12
- 31.
- 32.
- 33. Преимущества 〉Уменьшение сложностикода 〉Упрощение коммуникации 13
- 34. Преимущества 〉Уменьшение сложностикода 〉Упрощение коммуникации 〉Реиспользование кода 13
- 35. Преимущества 〉Уменьшение сложностикода 〉Упрощение коммуникации 〉Реиспользование кода 〉Ускорение разработки 13
- 36. Как меняется процесс разработки
- 37.
- 38. Отличия БЭМ 〉Абстракциянад DOM — мыслим в терминах блоков 15
- 39. BEMJSON 16 { block: 'button', mods: { theme: 'promo' }, content: 'Разместить рекламу' }
- 40. Отличия БЭМ 〉Абстракциянад DOM — мыслим в терминах блоков 17
- 41. Отличия БЭМ 〉Абстракциянад DOM — мыслим в терминах блоков 〉Разделение на блоки отражено и на файловой системе 17
- 42. Файловая система 18 prj/ blocks/ header/ header.css header.js header.tmpl header.svg header.md
- 43. Файловая система 19 prj/ blocks/ header/ _theme/ header_theme_simple.css header_theme_full.css __logo/ header__logo.css
- 44. Отличия БЭМ 〉Абстракциянад DOM — мыслим в терминах блоков 〉Разделение на блоки отражено и на файловой системе 20
- 45. Отличия БЭМ 〉Абстракциянад DOM — мыслим в терминах блоков 〉Разделение на блоки отражено и на файловой системе 〉Декларативность во всем 20
- 46. BEMHTML 21 blockbutton { tag: 'input', attrs: { type: 'button' } }
- 47.
- 48.
- 49.
- 50. История 〉в Яндексе 〉под названием АНБ 23
- 51. История 〉в Яндексе 〉под названием АНБ 〉Виталя Харисов и Серега veged Бережной 23
- 52. История 〉в Яндексе 〉под названием АНБ 〉Виталя Харисов и Серега veged Бережной 〉bem-method, bem-bl и bem-tools 23
- 53. История 〉в Яндексе 〉под названием АНБ 〉Виталя Харисов и Серега veged Бережной 〉bem-method, bem-bl и bem-tools 〉bem-core и bem-components 23
- 54. История 〉в Яндексе 〉под названием АНБ 〉Виталя Харисов и Серега veged Бережной 〉bem-method, bem-bl и bem-tools 〉bem-core и bem-components 〉c 2006 и по сей день 23
- 55. bem-components — готоваябиблиотека для ваших проектов
- 56.
- 57. bem-components 〉Компонентный веб— будущее уже наступило! 25
- 58. bem-components 〉Компонентный веб— будущее уже наступило! 〉20 блоков и это не предел 25
- 59. bem-components 〉Компонентный веб— будущее уже наступило! 〉20 блоков и это не предел 〉Тестируем все и вся 25
- 60. bem-components 〉Компонентный веб— будущее уже наступило! 〉20 блоков и это не предел 〉Тестируем все и вся 〉OpenSourced, scaled, delivered — it's yours! 25
- 61.
- 62. bem-components / состав 〉link 26
- 63. bem-components / состав 〉link 〉button 26
- 64. bem-components / состав 〉link 〉button 〉input 26
- 65. bem-components / состав 〉link 〉button 〉input 〉attach 26
- 66. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 26
- 67. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 26
- 68. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26
- 69. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup
- 70. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown
- 71. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown 〉icon
- 72. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown 〉icon 〉image
- 73. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown 〉icon 〉image 〉spin
- 74. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown 〉icon 〉image 〉spin 〉select
- 75. bem-components / состав 〉link 〉button 〉input 〉attach 〉checkbox-group 〉radio-group 〉menu 26 〉popup 〉dropdown 〉icon 〉image 〉spin 〉select 〉modal
- 77. bem-components / втренде 28
- 78. bem-components / втренде 〉компонентный подход 28
- 79. bem-components / втренде 〉компонентный подход 〉CSS-препроцессор 28
- 80. bem-components / втренде 〉компонентный подход 〉CSS-препроцессор 〉автопрефиксер 28
- 81. bem-components / обгоняятренды 29
- 82. bem-components / обгоняятренды 〉в браузерах еще вчера 29
- 83. bem-components / обгоняятренды 〉в браузерах еще вчера 〉уровни переопределения 29
- 84. bem-components / обгоняятренды 〉в браузерах еще вчера 〉уровни переопределения 〉сборка 29
- 85. bem-components / обгоняятренды 〉в браузерах еще вчера 〉уровни переопределения 〉сборка 〉декларативность 29
- 86. bem-components / обгоняятренды 〉в браузерах еще вчера 〉уровни переопределения 〉сборка 〉декларативность 〉дизайн опционально 29
- 87.
- 88. bem-components / качество 〉ручное 30
- 89. bem-components / качество 〉ручное 〉unit-тесты для JS 30
- 90. bem-components / качество 〉ручное 〉unit-тесты для JS 〉тесты на шаблоны 30
- 91. bem-components / качество 〉ручное 〉unit-тесты для JS 〉тесты на шаблоны 〉тесты на верстку (gemini) 30
- 92. bem-components / качество 〉ручное 〉unit-тесты для JS 〉тесты на шаблоны 〉тесты на верстку (gemini) 〉проверка кодстайла 30
- 93. bem-components / качество 〉ручное 〉unit-тесты для JS 〉тесты на шаблоны 〉тесты на верстку (gemini) 〉проверка кодстайла 〉CI 30
- 94.
- 99. Как быстро начать разрабатывать на БЭМ
- 100.
- 101.
- 102. Quick start 〉bem.info 〉git clone https://github.com/bem/project-stub.git 37
- 103. Quick start 〉bem.info 〉git clone https://github.com/bem/project-stub.git 〉npm i 37
- 104. Quick start 〉bem.info 〉git clone https://github.com/bem/project-stub.git 〉npm i 〉./node_modules/.bin/bem server 37
- 105.
- 106. 39 Контакты ВладимирГриненко Руководитель службы разработки БЭМ @tadatuta i.tadatuta +7 (978) 096 88 87 tadatuta@yandex-team.ru