Преимущества
разработки средствами
BEM + Python + node.js
Алексей Спиридонов
Евгений Генералов
Процесс разработки
Общее время разработки
Процесс разработки (реальный)
Общее время разработки
Мы решили все поменять
● Технологии развивались
● Сроки затягивались
● Простои учащались
● Масштабируемость отсутствовала
Постановка
и анализ
Дизайн
Верстка
Программирование
Тестирование
Новый процесс разработки
Общее время разработкиОбщее время разработки
Что мы получили
● Снижение количества коллизий
● Сокращение сроков разработки
● Уменьшение времени простоев
● Масштабируемость
● Увеличение точности оценок
А как это все реализовать?
И причем тут bem, node.js и python
Презентационная логика в Django
mytardis.readthedocs.org/en/latest/architecture.html
Для верстки «по живым
данным» необходима
работоспособность
всего стека
компонентов Django
— Общая логика обработки запроса
Middleware
— Представление ресурсов
URL Mapper, View
— Предметная область
Model, Business Logic
— Готовые решения Auth, Migrations,
Logger, Cache, Geodata, …
Специализация Django
БЭМ — верстка, которую легко
поддерживать и развивать
● Методология http://ru.bem.info/
● Node.JS https://github.com/joyent/node/wiki/
Installing-Node.js-via-package-manager
● БЭМ https://github.com/bem/project-stub
БЭМ
— Единая предметная область:
Блок, Элемент, Модификатор
— Библиотеки bem-bl, bem-controls, ...
— Шаблонизатор на JavaScript bemhtml
— Сервер для разработки bem server
— Сборщик ресурсов borschik
— Менеджер зависимостей bem make
— Возможности для кастомизации node.js
Интерфейс стека технологий БЭМ
БЭМ
bemjson
HTML
CSS
JS
Images
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)
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)
}
Просто 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
priv.js — преобразование данных
из формата приложения в bemjson
БЭМ
Application
Data
HTML
CSS
JS
Images
"priv.js"
bemjson
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)
PyV8
python-bem — удобная поддержка
Django
bemhtml.js
View
"priv.js"
BEMJSON
RequestContext
HTML
Что из это вышло
● Параллельность и асинхронность
● Сроки
● Качество
● Масштабируемость
Алексей Спиридонов spiridon@jetstyle.ru
Евгений Генералов lucky@jetstyle.ru
JetStyle http://jetstyle.ru
http://github.com/jetstyle/
ppa:jetstyle/pyv8
Вопросы...
— Кто делает так же?
— Как сделать ещё лучше?
— Как вы боретесь со сложностью?

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

  • 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 Вопросы... — Кто делает так же? — Как сделать ещё лучше? — Как вы боретесь со сложностью?