angular. mobx. happiness
TRANSCRIPT
1. Angular 2. MobX 3. Happiness
Adam Klein
Adam Klein
-Frontend developer & consultant -Open source (ng2-tree, ng2-mobx) -Co-organizer of AngularUP -Fun fact: I used to have a jewfro
CTO @ 500Tech
mmmm…. cake….
Regular checkbox
Selected Items Master Checkbox
Master Checkbox
Filtered Items
add a framework change filter
Imperative
Declarative
getFilteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); }
Declarative
Declarative
<div *ngFor="let item of getFilteredItems()"> {{ item.title }}</div>
Declarative
<div *ngFor="let item of getFilteredItems()"> {{ item.title }}</div>
Being declarative &
Staying performant?
PRESENTATION TITLE
Presenter Name
Small Subtitle
[DELETE THIS]: Presentation caption should be ALL CAPS, small subtitle should be All Capitalized
MobXyes we can
Michel Weststrate from Mendix
Was written for React
Completely framework agnostic
Automagically react to changes
Works with plain objects
MobX
Taking the state out of components
Items Filter
Checkbox ListFilter
Add New Selected Items
Remove Item InputSelected
Item
App
State
Components
State
Minimal State (@observable)
List of Frameworks
Selected Items
Filter Master Checkbox
Filtered Items
Derived State (@computed)
@Injectable() class State { filter = ''; items = []; }
Observable
@Injectable() class State { filter = ''; items = []; }
Observable
import { observable } from 'mobx';
@Injectable() class State { @observable filter = ''; @observable items = []; }
Observable
… getFilteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } …
Computed
… @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } …
Computed
… @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } …
Computed
… setFilter(value) { this.filter = value; } …
Action
… setFilter(value) { this.filter = value; } …
Action
… @action setFilter(value) { this.filter = value; } …
Action
List of Frameworks
Selected Items
Filter Master Checkbox
Filtered Items
Selected Frameworks Component
Frameworks Filter Component
UI Components Obesrve?
State
ng2-mobxgithub.com/500tech/
• 64 lines of code • Automatically observes state from the components • Deregisters observers onDestroy
With MobX
With MobX
export class SelectedItemsComponent { constructor(private state:State) {}}
<div> {{ state.filteredItems }}</div>
ng2-mobx
export class SelectedItemsComponent { constructor(private state:State) {}}
<div> {{ state.filteredItems }} </div>
ng2-mobx
export class SelectedItemsComponent { constructor(private state:State) {}}
<div> {{ state.filteredItems }} </div>
ng2-mobx
export class SelectedItemsComponent { constructor(private state:State) {}}
<div *mobxAutorun> {{ state.filteredItems }}</div>
ng2-mobx
@observable
List of Frameworks
Selected Items
Filter Master Checkbox
Filtered Items
@computed
Selected Frameworks Component
Frameworks Filter Component
UI Componentsng2-mobx
ChangeDetectionStrategy.OnPush
MobX Redux
Plain objectsImmutable data
actions, middleware, dispatcher, reducers, selectors
Automatic Explicit
Computed values Use reselect
What’s next?ng-mobx for Angular1
@adamklein500
www.slideshare.net/500techOur slides:
Adam [email protected]
https://github.com/500tech/angular1-mobx-demo
https://github.com/500tech/angular2-mobx-demo
Thank You
MAKE ANGULAR
GREAT AGAIN