1. Преимущества
разработки средствами
BEM + Python + node.js
Алексей Спиридонов
Евгений Генералов

2. Процесс разработки
Общее время разработки

3. Процесс разработки (реальный)
Общее время разработки

4. Мы решили все поменять
• Технологии развивались
• Сроки затягивались
• Простои учащались
• Масштабируемость отсутствовала

5. Постановка
и анализ
Дизайн
Верстка
Программирование
Тестирование
Новый процесс разработки
Общее время разработкиОбщее время разработки

6. Что мы получили
• Снижение количества коллизий
• Сокращение сроков разработки
• Уменьшение времени простоев
• Масштабируемость
• Увеличение точности оценок

7. А как это все реализовать?
И причем тут bem, node.js и python

8. Презентационная логика в Django
mytardis.readthedocs.org/en/latest/architecture.html
Для верстки «по живым
данным» необходима
работоспособность
всего стека
компонентов Django

9. — Общая логика обработки запроса
Middleware
— Представление ресурсов
URL Mapper, View
— Предметная область
Model, Business Logic
— Готовые решения Auth, Migrations,
Logger, Cache, Geodata, …
Специализация Django

10. БЭМ — верстка, которую легко
поддерживать и развивать
• Методология http://ru.bem.info/
• Node.JS https://github.com/joyent/node/wiki/
Installing-Node.js-via-package-manager
• БЭМ https://github.com/bem/project-stub

11. БЭМ
— Единая предметная область:
Блок, Элемент, Модификатор
— Библиотеки bem-bl, bem-controls, ...
— Шаблонизатор на JavaScript bemhtml
— Сервер для разработки bem server
— Сборщик ресурсов borschik
— Менеджер зависимостей bem make
— Возможности для кастомизации node.js

12. Интерфейс стека технологий БЭМ
БЭМ
bemjson
HTML
CSS
JS
Images

13. Django как сервис JSON API
def view(request):
data = json.dumps({'title', 'Hello, Dump!'})
return HttpResponse(data,
content_type='application/json')
Backend
(django)
Frontend
(node.js)
JSON API
Frontend
(node.js)
Frontend
(node.js)

14. bem-express — интеграция с BEM
для node.js
var express = require('express')
, app = express();
app.configure(function(){
app.engine('.bemhtml.js', require('bem-express').__express);
app.set('view engine', 'bemhtml.js');
...
app.get('/', function(req, res) {
httpclient.get('http://django-server.local/index/').then(function(data) {
res.render('index', {
data: JSON.parse(data)
}

15. Просто PyV8
bemjson = json.dumps({
'block': 'b-page', 'content': 'Hello, DUMP!',
})
bemhtml = readfile(
'./desktop.bundles/index/_index.bemhtml.js')
with PyV8.JSContext() as jsctx:
jsctx.eval(bemhtml)
jsctx.locals.bemjson = bemjson
html = jsctx.eval(
'BEMHTML.apply(JSON.parse(bemjson))')
HTML
bemjson
bemhtml

16. priv.js — преобразование данных
из формата приложения в bemjson
БЭМ
Application
Data
HTML
CSS
JS
Images
"priv.js
"
bemjson

17. python-bem
# settings.py
BEM_ROOT = '/path/www/'
# views.py
from pybem.shortcuts import render
def view(request):
data = {'title': 'Hello, DUMP!'}
return render(request, 'index', data)

18. PyV8
python-bem — удобная поддержка
Django
bemhtml.js
View
"priv.js"
BEMJSON
RequestContext
HTML

19. Что из это вышло
• Параллельность и асинхронность
• Сроки
• Качество
• Масштабируемость

20. Алексей Спиридонов spiridon@jetstyle.ru
Евгений Генералов lucky@jetstyle.ru
JetStyle http://jetstyle.ru
http://github.com/jetstyle/
ppa:jetstyle/pyv8
Вопросы...
— Кто делает так же?
— Как сделать ещё лучше?
— Как вы боретесь со сложностью?