Upload
devday
View
202
Download
3
Embed Size (px)
Citation preview
Изоморфность• isomorphic.net
• Изоморфный JavaScript — будущее веб-приложений
• Изоморфные JavaScript-приложения с Catberry.js
7
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
Модули• Организуются в определённую структуру
• Общаются по строгим правилам
• Имеют визуальное представление
17
Интерфейс модуля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
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
StateState = {
zoom: 12,
lon: 82.73,
lat: 55.03,
search: 'Пиво',
...
};
01.
02.
03.
04.
05.
06.
07.
34
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
Быстрый стартУстановите глобально 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
Подробнее о фреймворке• 2gis.github.io/slot
• Концепция
• Быстрый обзор
• Документация по CLI
46
@illbullet
https://github.com/2gis/slot
Спасибо! Вопросы?Александр Бирюков