![Slot
// Будет вызван 'methodName' в дочернем модуле,
// найденном по 'moduleSelector'
slot.broadcast('<moduleSelector>:methodName', msg)
// Будет обработан 'someAction' в dispatcher модуля-родителя
slot.notify('someAction'[, data ...])
slot.rerender()
01.
02.
03.
04.
05.
06.
30](https://image.slidesharecdn.com/slot-150727134244-lva1-app6891/85/Slot-Good-Parts-30-320.jpg)
![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](https://image.slidesharecdn.com/slot-150727134244-lva1-app6891/85/Slot-Good-Parts-40-320.jpg)
Фреймворк Slot, Good Parts, Александр Бирюков
- 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
- 20. vs
- 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