Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Scalable
Application rchitecture
github.com/mgechev
twitter.com/mgechev
blog.mgechev.com
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
STANG2
50% off
Slide 6
Slide 6 text
Agenda
Slide 7
Slide 7 text
– Martin Fowler
“…decisions that are hard to
change…”
Architecture
Slide 8
Slide 8 text
Story Time
Slide 9
Slide 9 text
Dynamic
Requirements
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Scalable
communication layer
Slide 12
Slide 12 text
Communication layer
• RESTful API
• WebSocket application service
• WebRTC data-channel
Slide 13
Slide 13 text
Various
package formats
Slide 14
Slide 14 text
Package formats
• RESTful API
• JSON commands
• WebSocket application service
• JSON-RPC
• WebRTC data-channel
• BERT-RPC
Slide 15
Slide 15 text
Multiple state mutation
sources
Slide 16
Slide 16 text
Scalable
team
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Lazy-loading
Slide 19
Slide 19 text
Dynamic Requirements
Scalable Communication Layer
Various package formats
Multiple state mutation sources
Scalable team
Lazy-loading
Slide 20
Slide 20 text
Dynamic Requirements
Scalable Communication Layer
Various package formats
Multiple state mutation sources
Scalable team
Lazy-loading
Slide 21
Slide 21 text
abstraction |əbˈstrakʃ(ə)n|
noun [ mass noun ]
…
4 the process of considering something
independently of its associations or attributes: the
question cannot be considered in abstraction from
the historical context in which it was raised.
Slide 22
Slide 22 text
WebRTC
Gateway
WebSocket
Gateway
Slide 23
Slide 23 text
Gateway
WebRTC
Gateway
WebSocket
Gateway
Slide 24
Slide 24 text
Dynamic Requirements
Scalable Communication Layer
Various package formats
Multiple state mutation sources
Scalable team
Lazy-loading
Slide 25
Slide 25 text
redux
Slide 26
Slide 26 text
Dynamic Requirements
Scalable Communication Layer
Various package formats
Multiple state mutation sources
Scalable team
Lazy-loading
Slide 27
Slide 27 text
Modular
Slide 28
Slide 28 text
.
ʦʒʒ src
ʮʒʒ multi-player
ʔ ʮʒʒ commands
ʔ ʮʒʒ components
ʔ ʦʒʒ gateways
ʮʒʒ single-player
ʔ ʦʒʒ components
ʮʒʒ home
ʔ ʦʒʒ components
ʦʒʒ shared
Slide 29
Slide 29 text
.
ʦʒʒ src
ʮʒʒ multi-player
ʔ ʮʒʒ commands
ʔ ʮʒʒ components
ʔ ʦʒʒ gateways
ʮʒʒ single-player
ʔ ʦʒʒ components
ʮʒʒ home
ʔ ʦʒʒ components
ʦʒʒ shared
/home
Slide 30
Slide 30 text
.
ʦʒʒ src
ʮʒʒ multi-player
ʔ ʮʒʒ commands
ʔ ʮʒʒ components
ʔ ʦʒʒ gateways
ʮʒʒ single-player
ʔ ʦʒʒ components
ʮʒʒ home
ʔ ʦʒʒ components
ʦʒʒ shared
/single-player
Slide 31
Slide 31 text
.
ʦʒʒ src
ʮʒʒ multi-player
ʔ ʮʒʒ commands
ʔ ʮʒʒ components
ʔ ʦʒʒ gateways
ʮʒʒ single-player
ʔ ʦʒʒ components
ʮʒʒ home
ʔ ʦʒʒ components
ʦʒʒ shared
/multi-player
Slide 32
Slide 32 text
Sample Tech Stack
• Angular 2
• RxJS
• ngrx
• TypeScript
• ImmutableJS
Slide 33
Slide 33 text
RxJS
in 2 slides
Slide 34
Slide 34 text
[1, 2, 3]
.map(n => n * 2)
.filter(n => n > 2);
higher-order-functions.ts
Slide 35
Slide 35 text
let obs = Rx.Observable.create(observer => {
let counter = 0;
setInterval(() => observer.next(counter++), 1000);
});
obs
.map(n => n * 2)
.filter(n => n > 2)
.subscribe(n => console.log(n));
rx.ts
Slide 36
Slide 36 text
let obs = Rx.Observable.create(observer => {
let counter = 0;
setInterval(() => observer.next(counter++), 1000);
});
obs
.map(n => n * 2)
.filter(n => n > 2)
.subscribe(n => console.log(n));
rx.ts
Slide 37
Slide 37 text
Sample application
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
High-level
Architecture
Slide 41
Slide 41 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 42
Slide 42 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 43
Slide 43 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 44
Slide 44 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 45
Slide 45 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 46
Slide 46 text
UI components
Slide 47
Slide 47 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 48
Slide 48 text
export class GameComponent implements AfterViewInit {
@Input() text: string;
@Output() change: EventEmitter …
constructor(private _model: GameModel …) {}
changeHandler(data: string) {
this._model.onProgress(data);
}
get invalid() {
return this._model.game$
.scan((accum: boolean, current: any) => {
return (current && current.get(‘invalid’)
|| accum;
}, false);
}
}
game.component.ts
Slide 49
Slide 49 text
export class GameComponent implements AfterViewInit {
@Input() text: string;
@Output() change: EventEmitter …
constructor(private _model: GameModel …) {}
changeHandler(data: string) {
this._model.onProgress(data);
}
get invalid() {
return this._model.game$
.scan((accum: boolean, current: any) => {
return (current && current.get(‘invalid’)
|| accum;
}, false);
}
}
game.component.ts
Slide 50
Slide 50 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 51
Slide 51 text
game.model.ts
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
Slide 52
Slide 52 text
game.model.ts
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
Slide 53
Slide 53 text
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
game.model.ts
Slide 54
Slide 54 text
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
game.model.ts
Slide 55
Slide 55 text
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
game.model.ts
Slide 56
Slide 56 text
@Injectable()
export class GameModel extends Model {
game$: Observable;
constructor(protected _store: Store,
@Inject(AsyncService) _services) {
super(_services || []);
this.game$ = this._store.select('game');
}
...
completeGame(time: number, text: string) {
const action = GameActions.completeGame(time, text);
this._store.dispatch(action);
this.performAsyncAction(action)
.subscribe(() => console.log('Done!'));
}
}
game.model.ts
Slide 57
Slide 57 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 58
Slide 58 text
Component
Model
Store
Dispatcher
startGame()
dispatch(action)
applyReducers(action, store)
next(state)
Slide 59
Slide 59 text
Component
Model
Store
Dispatcher
startGame()
dispatch(action)
applyReducers(action, store)
next(state)
Slide 60
Slide 60 text
game.reducer.ts
export const gameReducer =
(state: any = initialState.get(‘game'),
action: Action) => {
switch (action.type) {
case START_GAME:
state = fromJS({});
break;
case INVALID_GAME:
state = state.set('invalid', true);
break;
case GAME_PROGRESS:
state = state.set(‘currentText',
action.payload.text);
break;
}
return state;
};
Slide 61
Slide 61 text
game.reducer.ts
export const gameReducer =
(state: any = initialState.get(‘game'),
action: Action) => {
switch (action.type) {
case START_GAME:
state = fromJS({});
break;
case INVALID_GAME:
state = state.set('invalid', true);
break;
case GAME_PROGRESS:
state = state.set(‘currentText',
action.payload.text);
break;
}
return state;
};
Slide 62
Slide 62 text
game.reducer.ts
export const gameReducer =
(state: any = initialState.get(‘game'),
action: Action) => {
switch (action.type) {
case START_GAME:
state = fromJS({});
break;
case INVALID_GAME:
state = state.set('invalid', true);
break;
case GAME_PROGRESS:
state = state.set(‘currentText',
action.payload.text);
break;
}
return state;
};
Slide 63
Slide 63 text
game.reducer.ts
export const gameReducer =
(state: any = initialState.get(‘game'),
action: Action) => {
switch (action.type) {
case START_GAME:
state = fromJS({});
break;
case INVALID_GAME:
state = state.set('invalid', true);
break;
case GAME_PROGRESS:
state = state.set(‘currentText',
action.payload.text);
break;
}
return state;
};
Slide 64
Slide 64 text
Component
Model
Store
Dispatcher
startGame()
dispatch(action)
applyReducers(action, store)
next(state)
Slide 65
Slide 65 text
game.component.ts
…
get invalid() {
return this._model.game$
.scan((accum: boolean, current: any) => {
return current.get('invalid') || accum;
}, false);
}
…
Slide 66
Slide 66 text
game.component.ts
…
get invalid() {
return this._model.game$
.scan((accum: boolean, current: any) => {
return current.get('invalid') || accum;
}, false);
}
…
Slide 67
Slide 67 text
game.component.ts
…
get invalid() {
return this._model.game$
.scan((accum: boolean, current: any) => {
return current.get('invalid') || accum;
}, false);
}
…
Slide 68
Slide 68 text
game.component.html
…
…
The game is invalid...
Slide 69
Slide 69 text
game.component.html
…
…
The game is invalid...
Slide 70
Slide 70 text
Async Services
Slide 71
Slide 71 text
UI components
Façade
(provides simplified interface to the components)
State management Async services
Gateways
(HTTP, WS, WebRTC)
Commands
(RESTful, RPC)
Payloads
(BERT, JSON)
Store Reducers
Slide 72
Slide 72 text
Remote
Service
App
Slide 73
Slide 73 text
Remote
Service
App
Slide 74
Slide 74 text
export abstract class AsyncService {
abstract process(data: Action): Observable;
}
base.async-service.ts
Slide 75
Slide 75 text
export class GameP2PService extends AsyncService {
constructor(private _rtcGateway: WebRTCGateway, private _store: Store) {
_rtcGateway.dataStream
.map((data: any) => JSON.parse(data.toString()))
.subscribe((command: any) => {
switch (command.method) {
case PROGRESS:
_store.dispatch(P2PActions.progress(command.payload.text));
break;
}
});
}
process(action: Action) {
const commandBuilder = buildP2PCommand(action);
if (!commandBuilder) {
console.warn('This command is not supported');
return Observable.create((obs: Observer) => obs.complete());
} else
return commandBuilder(baseCommand).invoke();
}
}
game-p2p.async-service.ts
Slide 76
Slide 76 text
export class GameP2PService extends AsyncService {
constructor(private _rtcGateway: WebRTCGateway, private _store: Store) {
_rtcGateway.dataStream
.map((data: any) => JSON.parse(data.toString()))
.subscribe((command: any) => {
switch (command.method) {
case PROGRESS:
_store.dispatch(P2PActions.progress(command.payload.text));
break;
}
});
}
process(action: Action) {
const commandBuilder = buildP2PCommand(action);
if (!commandBuilder) {
console.warn('This command is not supported');
return Observable.create((obs: Observer) => obs.complete());
} else
return commandBuilder(baseCommand).invoke();
}
}
game-p2p.async-service.ts
Slide 77
Slide 77 text
export class GameP2PService extends AsyncService {
constructor(private _rtcGateway: WebRTCGateway, private _store: Store) {
_rtcGateway.dataStream
.map((data: any) => JSON.parse(data.toString()))
.subscribe((command: any) => {
switch (command.method) {
case PROGRESS:
_store.dispatch(P2PActions.progress(command.payload.text));
break;
}
});
}
process(action: Action) {
const commandBuilder = buildP2PCommand(action);
if (!commandBuilder) {
console.warn('This command is not supported');
return Observable.create((obs: Observer) => obs.complete());
} else
return commandBuilder(baseCommand).invoke();
}
}
game-p2p.async-service.ts
Slide 78
Slide 78 text
But what if…
Slide 79
Slide 79 text
Model
S1 S2
Slide 80
Slide 80 text
Model
S1 S2
A
Slide 81
Slide 81 text
Model
S1 S2
A
Slide 82
Slide 82 text
Model
S1 S2
A
Slide 83
Slide 83 text
Model
S1 S2
A
Slide 84
Slide 84 text
Model
S1 S2
A
Slide 85
Slide 85 text
Model
S1 S2
A
Slide 86
Slide 86 text
Immutability
Slide 87
Slide 87 text
let user = new Map();
user = user.set('name', 'Joe');
// { name: 'Joe' }
console.log(user.toJS());
immutable.js
Slide 88
Slide 88 text
No
static typing
Slide 89
Slide 89 text
Immutability or Static Typing
Slide 90
Slide 90 text
Why not
Both?
Slide 91
Slide 91 text
export interface IUser {
id?: number;
gender?: number;
email?: string;
}
const userRecord = Immutable.Record({
id: 0,
gender: 0,
email: null
});
export class User extends userRecord implements IUser {
id: number;
gender: number;
email: string;
constructor(config: IUser) {
super(config);
}
}
immutable-records.ts
Slide 92
Slide 92 text
export interface IUser {
id?: number;
gender?: number;
email?: string;
}
const userRecord = Immutable.Record({
id: 0,
gender: 0,
email: null
});
export class User extends userRecord implements IUser {
id: number;
gender: number;
email: string;
constructor(config: IUser) {
super(config);
}
}
immutable-records.ts
Slide 93
Slide 93 text
export interface IUser {
id?: number;
gender?: number;
email?: string;
}
const userRecord = Immutable.Record({
id: 0,
gender: 0,
email: null
});
export class User extends userRecord implements IUser {
id: number;
gender: number;
email: string;
constructor(config: IUser) {
super(config);
}
}
immutable-records.ts
Slide 94
Slide 94 text
export interface IUser {
id?: number;
gender?: number;
email?: string;
}
const userRecord = Immutable.Record({
id: 0,
gender: 0,
email: null
});
export class User extends userRecord implements IUser {
id: number;
gender: number;
email: string;
constructor(config: IUser) {
super(config);
}
}
immutable-records.ts
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Recap
Slide 97
Slide 97 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
signup(data)
signup(data)
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
Slide 98
Slide 98 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
signup(data)
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
Slide 99
Slide 99 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 100
Slide 100 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 101
Slide 101 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 102
Slide 102 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 103
Slide 103 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 104
Slide 104 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 105
Slide 105 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
signup(data)
Slide 106
Slide 106 text
Async services
Business facade
Business logic
Communication logic
Immutable app state
Component tree
root cmp
sign-up form
user
UserModel
User Action
Creator
signup(data)
RESTful Async
Service
process(action)
userReducer
register()
RESTful
CommandBuilder
build(action)
Restful
Command
Restful Gateway
invoke()
send()
creates()
uses
as user$
uses user$
Stream
Dependency
Action (manipulation/method call)
User registration
user.email = email
user.name = name
signup(data)
Slide 107
Slide 107 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 108
Slide 108 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 109
Slide 109 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 110
Slide 110 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 111
Slide 111 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 112
Slide 112 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 113
Slide 113 text
Properties…
• Predictable state management
• Testable (easy to mock services thanks to DI)
• Not coupled to any remote service
• Not coupled to any message format
• Model can use different services based on context
• Easy management of async events
Slide 114
Slide 114 text
Resources
• redux
• ngrx
• Scalable Single-Page Application Architecture
• Demo
Slide 115
Slide 115 text
Thank you!
github.com/mgechev
twitter.com/mgechev
blog.mgechev.com