как написать масштабируемую баннерокрутилку. денис бирюков, артем гавриченков. зал 3
Фреймворк Slot, Good Parts, Александр Бирюков
49
Фреймворк Slot Good Parts Александр Бирюков, Руководитель группы разработки ПО, 2GIS
Transcript of Фреймворк Slot, Good Parts, Александр Бирюков
Александр БирюковРуководитель группы разработки ПО
Организатор FrontEnd-секции
Люблю JavaScript
2
JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.
Изоморфность• isomorphic.net
• Изоморфный JavaScript — будущее веб-приложений
• Изоморфные JavaScript-приложения с Catberry.js
7
App
Жизненный цикл при запуске
10
Apprequire 'slot/env' 'slot/app' 'slot/app/clientApp'
module.exports = function() {
var Application = env.isServer ? serverApp : clientApp;
var app = new Application();
app.on('initStart', function() { ... }
app.on('initEnd', function() { ... }
return app;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
11
ServerAppvar createApp = require('./app')();
app.init(initData, function(err, mainModule) {
var html = mainModule.render();
response.send(html);
});
01.
02.
03.
04.
05.
06.
12
ClientAppvar createApp = require('./app')();
app.init(initData, function(err) {
// Рендерить не надо, т.к. уже есть html
app.bind();
});
01.
02.03.
04.
05.
06.
13
JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.
Module
Модули• Организуются в определённую структуру
• Общаются по строгим правилам
• Имеют визуальное представление
17
Дерево модулей
18
Строгое общение
19
vs
Визуальное представление
21
Интерфейс модуляvar module = {
init: function(data, callback) {...}, // Изоморфный
clientInit: function() {...},
...
};
01.
02.
03.
04.
05.
22
Интерфейс модуляvar module = {
...
viewContext: function() {}, // Изоморфный
render: function(data) {...},
bind: function() {...},
...
};
01.
02.
03.
04.
05.
06.
07.
23
Интерфейс модуляvar module = {
...
elements: {
remove: {
click: function(e) {...},
//submit: function(e) {...}
}
}
...
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
24
Интерфейс модуляvar module = {
...
dispatcher: {
'fromModule:action': function(data) {...},
},
interface: {
doSomething: function(data) {...},
}
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
25
Slot = Sandbox
Slotmodule.exports = function(slot) {
var module = {
// Код модуля
}
return module;
};
01.
02.
03.
04.
05.
06.
28
Slotslot.init({
type: 'article',
data: {
author: 'Axel Rauschmayer',
content: 'Lorem ipsum ...'
}
});
01.
02.
03.
04.
05.
06.
07.
29
Slot// Будет вызван 'methodName' в дочернем модуле,
// найденном по 'moduleSelector'
slot.broadcast('<moduleSelector>:methodName', msg)
// Будет обработан 'someAction' в dispatcher модуля-родителя
slot.notify('someAction'[, data ...])
slot.rerender()
01.
02.
03.
04.
05.
06.
30
JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.
AppState
StateState = {
zoom: 12,
lon: 82.73,
lat: 55.03,
search: 'Пиво',
...
};
01.
02.
03.
04.
05.
06.
07.
34
State
35
State
36
State• Пользовательское действие
• Переходы по истории в браузере
• переход по прямой ссылке
37
State
38
State to URLAppState.getShareState(State) // {Object}
UriResolver.resolve(shareState) // {String) Url
// AppState/config.js
var urls = {
'search/:query': inArray(‘panels’),
'zoom/:zoomLevel': inject
};
01.
02.
03.
04.
05.
06.
07.
08.
39
URL to Statevar p = UriPattern('search/:query');
p.match('search/пиво');
// {slug: 'search', params: {query: 'пиво'}}
'zoom/:level': inject,
// {zoom: {level: 11}}
‘search/:query’: inArray(‘panels’)
// {panels: [ { type: 'search', query: 'пиво'} ]}
01.
02.
03.
04.
05.
06.
07.
08.
40
URL → State + Изоморфность =
JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.
Быстрый стартУстановите глобально gulp и slot:
$ npm install -g gulp
$ npm install -g slot
Создайте директорию для приложения:
$ mkdir myapp && cd myapp
01.
02.
03.
01.
02.
43
Быстрый стартРазверните базовую структуру приложения:
$ slot init
$ npm install
Соберите и запустите приложение:
$ gulp dev
Приложение доступно по адресу: http://localhost:3000
01.
02.
03.
01.
02.
44
TodoMVC
Подробнее о фреймворке• 2gis.github.io/slot
• Концепция
• Быстрый обзор
• Документация по CLI
46
@illbullet
https://github.com/2gis/slot
Спасибо! Вопросы?Александр Бирюков
