Сергей Бережной "Внедрение БЭМ в существующие...

Я.Субботник, Москва, 8 сентября 2012 года

Сергей Бережнойруководитель отделаразработки поисковых интерфейсов

Внедрение БЭМв существующие системы

иливнедрение БЭМ

в существующие системы

Существующие системы

4

Существующие системыКакой язык? И другие подробности

6

Внедрение БЭМ

Внедрение БЭМ

7

— использование bem-tools для сборки и разработки

Внедрение БЭМ

8

— использование bem-tools для сборки и разработки

— клиентский JavaScript с помощью i-bem

Внедрение БЭМ

9

— использование bem-tools для сборки и разработки

— клиентский JavaScript с помощью i-bem

— BEMHTML-шаблоны

bem-tools для сборки и разработкиВнедрение БЭМ

10

bem-tools для сборки и разработкиВнедрение БЭМ

11

— Зачем?

bem-tools для сборки и разработкиВнедрение БЭМ

12

— Зачем?

— поддержание файловой структуры

bem-tools для сборки и разработкиВнедрение БЭМ

13

— Зачем?

— поддержание файловой структуры

— шаблоны для новых файлов

bem-tools для сборки и разработкиВнедрение БЭМ

14

— Зачем?

— поддержание файловой структуры

— шаблоны для новых файлов

— сборка

bem-tools для сборки и разработкиВнедрение БЭМ

15

— Зачем?

— поддержание файловой структуры

— шаблоны для новых файлов

— сборка

— сервер

bem-tools для сборки и разработкиВнедрение БЭМ

17

— файловая структура

bem-tools для сборки и разработкиВнедрение БЭМ

18

— файловая структура

— .bem/level.js

bem-tools для сборки и разработкиВнедрение БЭМ

19

— файловая структура

— .bem/level.js

— bem-tools/lib/levels/simple.js

bem-tools для сборки и разработкиВнедрение БЭМ

20

— файловая структура

— всё "старое" — один блок

bem-tools для сборки и разработкиВнедрение БЭМ

21

— файловая структура

— всё "старое" — один блок

— i-old

bem-tools для сборки и разработкиВнедрение БЭМ

22

— файловая структура

— всё "старое" — один блок

— i-old

— ./styles.css ⇒ i-old/i-old.css

bem-tools для сборки и разработкиВнедрение БЭМ

23

— файловая структура

— всё "старое" — один блок

— i-old

— ./styles.css ⇒ i-old/i-old.css

— ./scripts.js ⇒ i-old/i-old.js

bem-tools для сборки и разработкиВнедрение БЭМ

24

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

bem-tools для сборки и разработкиВнедрение БЭМ

25

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— ./blocks-css/

— ./blocks-js/

— ./blocks-img/

bem-tools для сборки и разработкиВнедрение БЭМ

26

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— ./css/

— ./js/

— ./img/

bem-tools для сборки и разработкиВнедрение БЭМ

27

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— bem create level css js img --force

bem-tools для сборки и разработкиВнедрение БЭМ

28

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— сборка

bem-tools для сборки и разработкиВнедрение БЭМ

29

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— сборка

— свои технологии

bem-tools для сборки и разработкиВнедрение БЭМ

30

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— сборка

— свои технологии

— совсем произвольные команды

bem-tools для сборки и разработкиВнедрение БЭМ

31

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— сборка

— bem-tools/README.ru.md

bem-tools для сборки и разработкиВнедрение БЭМ

32

— файловая структура

— всё "старое" — один блок

— можно сохранить разделение технологий по разным папкам

— сборка

— bem-tools/README.ru.md

— bem-tools/issues/213

клиентский JS с помощью i-bemВнедрение БЭМ

33

клиентский JS с помощью i-bemВнедрение БЭМ

34

— Зачем?

клиентский JS с помощью i-bemВнедрение БЭМ

35

— Зачем?

— удобный способ писать клиентский JavaScript

клиентский JS с помощью i-bemВнедрение БЭМ

36

— Зачем?

— удобный способ писать клиентский JavaScript

– даже безотносительно БЭМ:events.yandex.ru/talks/272/

клиентский JS с помощью i-bemВнедрение БЭМ

37

— не i-bem.js скриптыможно подключать вместе с i-bem.js

клиентский JS с помощью i-bemВнедрение БЭМ

39

— не i-bem.js скриптыможно подключать вместе с i-bem.js

— jQuery-плагины ⇒ i-bem.js блоки

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

$.fn.myPlugin = function() { // code};

$('.myPlugin').myPlugin();

Внедрение БЭМ

40

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

$.fn.myPlugin = function() { // code};

$('.myPlugin').myPlugin();

Внедрение БЭМ

41

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})

Внедрение БЭМ

42

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})

Внедрение БЭМ

43

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

BEM.DOM.decl('myPlugin', { onSetMod: { js: function() { (function() { // code }).call(this.domElem) } }})

Внедрение БЭМ

44

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">

Внедрение БЭМ

45

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">

Внедрение БЭМ

46

— jQuery-плагины ⇒ i-bem.js блоки

клиентский JS с помощью i-bem

<div class="myPlugin i-bem" onclick="return { myPlugin: {} }">

Внедрение БЭМ

47

клиентский JS с помощью i-bemВнедрение БЭМ

48

— не i-bem.js скриптыможно подключать вместе с i-bem.js

— jQuery-плагины ⇒ i-bem.js блоки

— зависимость от jQuery

BEMHTML-шаблоныВнедрение БЭМ

49

BEMHTML-шаблоныВнедрение БЭМ

50

— Зачем?

BEMHTML-шаблоныВнедрение БЭМ

51

— Зачем?

— разделение HTML и логики представления

BEMHTML-шаблоныВнедрение БЭМ

52

— Зачем?

— разделение HTML и логики представления

— гибкая библиотека блоков

BEMHTML-шаблоныВнедрение БЭМ

53

— Зачем?

— разделение HTML и логики представления

— гибкая библиотека блоков

— БЭМ

BEMHTML-шаблоныВнедрение БЭМ

55

— js-биндинги

BEMHTML-шаблоныВнедрение БЭМ

56

— js-биндинги

— pyv8

— therubyracer

— perl-v8

— javascriptdotnet

— php-v8

BEMHTML-шаблоныВнедрение БЭМ

57

— js-биндинги

— разделение HTML и логики представления

BEMHTML-шаблоныВнедрение БЭМ

58

— js-биндинги

— разделение HTML и логики представления

— data ⇒ html

BEMHTML-шаблоныВнедрение БЭМ

59

— js-биндинги

— разделение HTML и логики представления

— data ⇒ view ⇒ html

BEMHTML-шаблоныВнедрение БЭМ

60

— js-биндинги

— разделение HTML и логики представления

— data ⤙old↣ BEMJSON ⤙BEMHTML↣ HTML

BEMHTML-шаблоныВнедрение БЭМ

61

— js-биндинги

— разделение HTML и логики представления

— data ⤙old↣ BEMJSON ⤙BEMHTML↣ HTML

— data ⤙JS↣ BEMJSON ⤙BEMHTML↣ HTML

BEMHTML-шаблоныВнедрение БЭМ

62

— js-биндинги

— разделение HTML и логики представления

— постраничная и поблочная миграция

Внедрение БЭМ

63

— использование bem-tools для сборки и разработки

— клиентский JavaScript с помощью i-bem

— BEMHTML-шаблоны

Сергей Бережнойруководитель отделаразработки поисковых интерфейсовveged@yandex-team.ru

@vegedgithub.com/veged