Расскажу о ключевых особенностях продукта: о какой изоморфности идёт речь, как мы управляем состоянием SinglePage-приложения и какой профит для SEO извлекли, с примерами кода. Посмотрим как быстро начать свой проект на Slot.

1. Фреймворк Slot
Good Parts
Александр Бирюков, Руководитель группы разработки ПО, 2GIS

2. Александр Бирюков
Руководитель группы разработки ПО
Организатор FrontEnd-секции
Люблю JavaScript
2

5. JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.

7. Изоморфность
• isomorphic.net
• Изоморфный JavaScript — будущее веб-приложений
• Изоморфные JavaScript-приложения с Catberry.js
7

9. App

10. Жизненный цикл при запуске
10

11. App
require '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

12. ServerApp
var createApp = require('./app')();
app.init(initData, function(err, mainModule) {
var html = mainModule.render();
response.send(html);
});
01.
02.
03.
04.
05.
06.
12

13. ClientApp
var createApp = require('./app')();
app.init(initData, function(err) {
// Рендерить не надо, т.к. уже есть html
app.bind();
});
01.
02.03.
04.
05.
06.
13

14. JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.

15. Module

17. Модули
• Организуются в определённую структуру
• Общаются по строгим правилам
• Имеют визуальное представление
17

18. Дерево модулей
18

19. Строгое общение
19

20. vs

21. Визуальное представление
21

22. Интерфейс модуля
var module = {
init: function(data, callback) {...}, // Изоморфный
clientInit: function() {...},
...
};
01.
02.
03.
04.
05.
22

23. Интерфейс модуля
var module = {
...
viewContext: function() {}, // Изоморфный
render: function(data) {...},
bind: function() {...},
...
};
01.
02.
03.
04.
05.
06.
07.
23

24. Интерфейс модуля
var module = {
...
elements: {
remove: {
click: function(e) {...},
//submit: function(e) {...}
}
}
...
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
24

25. Интерфейс модуля
var module = {
...
dispatcher: {
'fromModule:action': function(data) {...},
},
interface: {
doSomething: function(data) {...},
}
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
25

26. Slot = Sandbox

28. Slot
module.exports = function(slot) {
var module = {
// Код модуля
}
return module;
};
01.
02.
03.
04.
05.
06.
28

29. Slot
slot.init({
type: 'article',
data: {
author: 'Axel Rauschmayer',
content: 'Lorem ipsum ...'
}
});
01.
02.
03.
04.
05.
06.
07.
29

30. Slot
// Будет вызван 'methodName' в дочернем модуле,
// найденном по 'moduleSelector'
slot.broadcast('<moduleSelector>:methodName', msg)
// Будет обработан 'someAction' в dispatcher модуля-родителя
slot.notify('someAction'[, data ...])
slot.rerender()
01.
02.
03.
04.
05.
06.
30

31. JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.

32. AppState

34. State
State = {
zoom: 12,
lon: 82.73,
lat: 55.03,
search: 'Пиво',
...
};
01.
02.
03.
04.
05.
06.
07.
34

35. State
35

36. State
36

37. State
• Пользовательское действие
• Переходы по истории в браузере
• переход по прямой ссылке
37

38. State
38

39. State to URL
AppState.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

40. URL to State
var 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

41. URL → State + Изоморфность =

42. JavaScript-фреймворк,
позволяющий быстро и просто создавать
модульные изоморфные приложения.

43. Быстрый старт
Установите глобально gulp и slot:
$ npm install -g gulp
$ npm install -g slot
Создайте директорию для приложения:
$ mkdir myapp && cd myapp
01.
02.
03.
01.
02.
43

44. Быстрый старт
Разверните базовую структуру приложения:
$ slot init
$ npm install
Соберите и запустите приложение:
$ gulp dev
Приложение доступно по адресу: http://localhost:3000
01.
02.
03.
01.
02.
44

45. TodoMVC

46. Подробнее о фреймворке
• 2gis.github.io/slot
• Концепция
• Быстрый обзор
• Документация по CLI
46

47. a.biryukov@2gis.ru
@illbullet
https://github.com/2gis/slot
Спасибо! Вопросы?
Александр Бирюков