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

Фреймворк Slot, Good Parts, Александр Бирюков

  • Upload
    devday

  • View
    200

  • Download
    3

Embed Size (px)

Citation preview

Фреймворк SlotGood Parts

Александр Бирюков, Руководитель группы разработки ПО, 2GIS

Александр БирюковРуководитель группы разработки ПО

Организатор 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

[email protected]

@illbullet

https://github.com/2gis/slot

Спасибо! Вопросы?Александр Бирюков