Евгений Филатов "Одностраничные приложения на БЭМ и...

42
Филатов Евгений Разработчик интерфейсов Одностраничное приложение на БЭМ Node.js Я.Субботник в Киеве, 27 апреля 2013 года

description

Рассказ о том, как мы пишем одностраничные сервис-ориентированные приложения на Node.js в терминах БЭМ, с общим для клиента и сервера JavaScript-кодом.

Transcript of Евгений Филатов "Одностраничные приложения на БЭМ и...

Page 1: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Филатов Евгений Разработчик интерфейсов

Одностраничное приложение на БЭМ Node.js

Я.Субботник в Киеве, 27 апреля 2013 года

Page 2: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Наш фронтенд

•  css + js • Рендер шаблонов на сервере • Получаем данные через АПИ

Page 3: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Наш фронтенд

•  css + js • Рендер шаблонов на сервере • Получаем данные через АПИ

Page 4: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Одностраничное приложение

• Скорость • Трафик • Нагрузка

Page 5: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Одностраничное приложение

• Прыгает верстка • Нет индексации

Page 6: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Page 7: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Что хотим?

• При прямом переходе создаем все на сервере • Потом все на клиенте

Page 8: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Код должен выполнятся и на клиенте и на сервере!

Page 9: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Node.js и браузер — не одно и то же

Page 10: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Page 11: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Помогает БЭМ

bem.info/method

Page 12: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

На файловой системе

папки blocks ├── i-router ├── i-api-request └── i-page и файлы i-router ├── i-router.js ├── i-router.priv.js └── i-router.common.js

Page 13: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

На файловой системе

папки blocks ├── i-router ├── i-api-request └── i-page и файлы i-router ├── i-router.js ├── i-router.priv.js └── i-router.common.js

браузер    сервер  

общий  код  

Page 14: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

bem.info/tools/bem

bem-tools

Page 15: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Сборка

Page 16: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Сборка

Общий  код  

Page 17: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Пример

i-cookie.priv.js: function setCookie(key, val) { res.writeHead(200, { 'Set-Cookie': cookieStr(key, val) }); }

i-cookie.js: function setCookie(key, val) { document.cookie = cookieStr(key, val); }

i-cookie.common.js: function cookieStr(key, val) { return key + '=' + val; }

Общий  код  

Page 18: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

bit.ly/bem-ru

i-bem

Page 19: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

i-bem i-cookie.js: BEM.decl('i-cookie', null, { setCookie: function (key, val) { document.cookie = this.cookieStr(key, val); } }) i-cookie.common.js: BEM.decl('i-cookie', null, { queryStr: function (key, val) { return key + '=' + val; } })

BEM.blocks['i-cookie'].setCookie('my', 'test');

Page 20: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Страницы

Page 21: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Страница (сервер)

Page 22: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

СтранСтраница (клиент) ица (сервер)

Page 23: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

github.com/delfrrr/bem-json

Шаблонизация

Page 24: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Шаблонизация

• На чистом js • Шаблоны в терминах БЭМ • Асинхронная шаблонизация

Page 25: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

{ channel: { id: 42, name: 'СТБ' } }

{ block: 'b-channel', tag: 'a', atts: { href: '/channels/42' }, content: 'СТБ' }

<a href="/channels/42" class="b-channels">СТБ</a>

Шаблоны

bemhtml

Данные

bemjson

html

Page 26: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

{ channel: { id: 42, name: 'СТБ' } }

{ block: 'b-channel', tag: 'a', atts: { href: '/channels/42' }, content: 'СТБ' }

<a href="/channels/42" class="b-channels">СТБ</a>

Шаблоны

bemhtml

Данные

bemjson

html

data view bemjson

Page 27: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Шаблоны общие для клиента и сервера

Page 28: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Простой шаблон BEM.JSON.decl('b-channel', { onBlock: function(ctx) { var params = ctx.params(); ctx .tag('a') .attrs({ href: '/channels/' + params.id }) .content(params.name) } });

Page 29: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Не хватает данных BEM.JSON.decl('b-channel', { onBlock: function(ctx) { var params = ctx.params(); ctx .tag('a') .attrs({ href: '/channels/' + params.id }) .content(params.name) } });

Page 30: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Получаем данные в шаблонах

Page 31: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Асинхронность = промисы

Page 32: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Асинхронный шаблон! BEM.JSON.decl('b-channel'}, { onBlock: function(ctx) { var params = ctx.params(); ctx .tag('a') .attrs({ href: '/channels/' + params.id }) .defer( BEM.blocks['i-api-request'] .get('/channel-name', {params: params}) .then(function (result) { ctx.content(result.name); }) ); } });

Page 33: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

MVC?

Page 34: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

MVC?

Page 35: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Но почему не MVC?

• Логика шаблонов в шаблонах • Блоки переносимы • Все консистентно

Page 36: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

А  если  блокам  нужны  одинаковые  данные?  

b-­‐program  

b-­‐channel  

i-­‐api-­‐request  

кеш  

Page 37: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

…похожие?  

b-­‐channel   b-­‐channel   b-­‐channel  

b-­‐channel   b-­‐channel   b-­‐channel  

i-­‐api-­‐request  

групировка  

Page 38: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Профит

54%  

10%  

36%  

Строчек  кода  на  проекте  

common.js  priv.js  js  

Page 39: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Используйте  прямо  сейчас  

Page 40: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Где взять?

bem-node •  github.com/wtfil/bem-node •  github.com/wtfil/bem-node-test (пример)

Шаблонизатор

•  github.com/delfrrr/bem-json

Page 41: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Комьюнити

•  @bem_ru

•  facebook.com/groups/bem.info/

•  github.com/bem

Page 42: Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

Евгений Филатов

Разработчик интерфейсов @wtfil

github.com/wtfil