- Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer...
Transcript of - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer...
![Page 1: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/1.jpg)
"Once you stop learning, you start dying"- Albert Einstein
RACHEL HEIMBACH
Developer
@Rach_Nerd
HENK BAKKER
Developer
@spike1292
![Page 2: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/2.jpg)
![Page 3: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/3.jpg)
![Page 4: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/4.jpg)
XML
![Page 5: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/5.jpg)
![Page 6: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/6.jpg)
Angular 2
Big communityPopular frameworkScales wellCode share
![Page 7: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/7.jpg)
![Page 8: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/8.jpg)
NativeScript
iOS + Android appNative performanceNo webviewAngular 2 integration
![Page 9: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/9.jpg)
![Page 10: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/10.jpg)
![Page 11: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/11.jpg)
XML JSON
![Page 12: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/12.jpg)
Application level Essent modules API Gateway
![Page 13: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/13.jpg)
Code sharing
![Page 14: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/14.jpg)
Component-basedDependency injectionModules (Http, Forms, ...)Platform independent
![Page 15: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/15.jpg)
![Page 16: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/16.jpg)
This is not PhoneGap, Cordova or IonicReal Native ComponentsNo DOM to manipulateNot HTML elements styled like native components
![Page 17: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/17.jpg)
![Page 18: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/18.jpg)
Use lots of prebuilt code
![Page 19: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/19.jpg)
Native Layout Containers
Absolute DockGridStack Wrap
Like '<div>' - more concise though
![Page 20: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/20.jpg)
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout class="p-20"> <Label text="Tap the button" class="h1 text-center"/> <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary"/> </StackLayout>
</Page>
// DOM comparison...
<html><body>
<div class="p-20"> <h1 class="h1 text-center">Tap the button</h1> <button type="button" class="btn btn-primary" (tap)="onTap()">TAP</button> </div>
</body></html>
![Page 21: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/21.jpg)
VM const switch = new Switch();
Nativescript modules
Nativescript runtime
Switch module
![Page 22: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/22.jpg)
NativeScript Modules
![Page 23: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/23.jpg)
![Page 24: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/24.jpg)
![Page 25: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/25.jpg)
State management!?
![Page 26: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/26.jpg)
?
![Page 27: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/27.jpg)
RxJS"...is a set of libraries to composeasynchronous and event-based
programs using observablecollections and Array style
composition in JavaScript" - RxJS
![Page 28: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/28.jpg)
Observable
"The Observer and Observable
interfaces provide a generalized
mechanism for push-based
notification, also known as the observer
design pattern." -RxJS
![Page 29: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/29.jpg)
const observable$ = Observable.of('foo');
observable$ .subscribe( value => console.log(value), error => console.error(error), () => console.log('Completed') );// LOG: foo// LOG: Completed
observable$ .map(text => text + ' bar') .subscribe( value => console.log(value), error => console.error(error), () => console.log('Completed') );// LOG: foo bar// LOG: Completed
![Page 30: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/30.jpg)
Subject
"An RxJS Subject is a special type of
Observable that allows values to be
multicasted to many Observers" - RxJs
![Page 31: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/31.jpg)
const subject = new Subject();
subject .subscribe( value => console.log(value), error => console.error(error), () => console.log('Completed') );
subject.next('foo'); // LOG: foosubject.next('bar'); // LOG: barsubject.complete(); // LOG: Completedsubject.next('foo');
![Page 32: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/32.jpg)
const subject = new Subject();const observable$ = subject.asObservable();
observable$ .subscribe( value => console.log(value), error => console.error(error), () => console.log('Completed') );
subject.next('foo'); // LOG: foosubject.next('bar'); // LOG: bar
observable$.next('foo'); // Error
![Page 33: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/33.jpg)
![Page 34: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/34.jpg)
@Injectable()export class BudgetBillService { amount$: Observable<number>; private budgetBillStateSubject: Subject<BudgetBillState>;
constructor(private http: Http) { this.budgetBillStateSubject = new Subject<BudgetBillState>(); this.amount$ = this.budgetBillStateSubject.asObservable() .map((bbState: BudgetBillState) => bbState.amount); }
get(): void { this.http.get('assets/bbs.json') .map((res: Response) => res.json()) .subscribe( (bbState: BudgetBillState) => this.budgetBillStateSubject.next(bbState), (error: Response) => console.error(error), () => console.log('Completed') ); }}
![Page 35: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/35.jpg)
Streamsareawesome!
![Page 36: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/36.jpg)
Tips state managementKeep state in streamsExpose state as an observableManipulate state by executing actions that push datathrough streamsNever manually call error/complete on a stream youdo not wish to close
![Page 37: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/37.jpg)
Hot/ColdObservable
![Page 38: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/38.jpg)
Cold
@Injectable()export class TodosService { todos$: Observable<Todo[]>; private todosSubject: Subject<Todo[]>;
constructor(private http: Http) { this.todosSubject = new Subject(); this.todos$ = this.todosSubject.asObservable(); }
get(): void { this.http.get('assets/todos.json') .map((res: Response) => res.json()) .subscribe( (todos: Todo[]) => this.todosSubject.next(todos), (error: Response) => console.error(error), () => console.log('Completed') ); }}
Hot
![Page 39: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/39.jpg)
@Component({ selector: 'q-todos', templateUrl: 'todos.component.html', styleUrls: ['todos.component.css']})export class TodosComponent implements OnInit { todos: Todo[] = [];
constructor(private todosService: TodosService) { }
ngOnInit() { this.todosService.todos$ .subscribe( (todos: Todo[]) => this.todos = todos ); this.todosService.get(); }}
Hot
![Page 40: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/40.jpg)
Subscription"A Subscription is an object that
represents a disposable resource,
usually the execution of an
Observable." - RxJS
![Page 41: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/41.jpg)
const subject = new Subject();
const observable$ = subject.asObservable();
const subscription = observable$ .subscribe(value => console.log(value) );
subject.next('foo'); // LOG: foosubscription.unsubscribe();subject.next('bar');
![Page 42: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/42.jpg)
@Component({ selector: 'q-todos', templateUrl: 'todos.component.html', styleUrls: ['todos.component.css']})export class TodosComponent implements OnInit, OnDestroy { todos: Todo[] = []; private ngUnsubscribe = new Subject();
constructor(private todosService: TodosService) { }
ngOnInit() { this.todosService.todos$ .takeUntil(this.ngUnsubscribe) .subscribe( (todos: Todo[]) => this.todos = todos ); this.todosService.get(); }
ngOnDestroy() { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); }}
![Page 43: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/43.jpg)
@Component({ selector: 'q-todos', templateUrl: 'todos.component.html', styleUrls: ['todos.component.css']})export class TodosComponent implements OnInit { todos$: Observable<Todo[]>;
constructor(private todosService: TodosService) { }
ngOnInit() { this.todos$ = this.todosService.todos$ this.todosService.get(); }}
<div *ngIf="todos$ | async as todos; else loading"> <div *ngFor="let todo of todos"> {{ todo.content }} </div></div><ng-template #loading>Loading...</ng-template>
Docs: https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html
![Page 44: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/44.jpg)
Tips observablesIdentify hot observablesUse async pipe to clean up hot subscriptionsUnsubscribe remaining hot subscriptions onDestroy()Make use of operators like .take(1) to convert a hotstreams to cold streams
![Page 45: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/45.jpg)
DemoTime
![Page 46: - Albert Einstein - GOTO Conference...- Albert Einstein RACHEL HEIMBACH Developer rheimbach@quintor.nl @Rach_Nerd HENK BAKKER Developer hbakker@quintor.nl @spike1292. XML. Angular](https://reader034.fdocuments.us/reader034/viewer/2022042308/5ed55804cfcb033b55255ee0/html5/thumbnails/46.jpg)
ResourcesRxJS 5 Thinking Reactively Ben Lesh (Youtube)How to build Angular apps using Observable Data Services(Angular University)How NativeScript works (Telerik)Building Apps with NativeScript and Angular (NativeScript)
& @Rach_Nerd @spike1292