Angular 2 observables
•
8 likes•3,290 views
This document provides an overview of Angular 2 and related reactive programming concepts: - It discusses fundamentals like reactive programming, functional reactive programming (FRP), and the observer design pattern. - Related concepts like promises, Object.observe, and RxJS observables are explained. - Angular 2 uses observables for forms, HTTP requests, the async pipe for change detection, and more. Pipes and change detection are also covered. - The document compares promises and observables, and how RxJS implements observables for use in Angular 2. Bridging between different async patterns and observables is discussed. - Questions are invited at the end regarding Angular 2 and related reactive
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular 2 observables
Similar to Angular 2 observables (20)
Recently uploaded
Recently uploaded (20)
Angular 2 observables
- 1. Angular 2 Observables, Change Detection, AsyncPipe, Forms, Rx.js /Geoff Filippi @geofffilippi
- 3. Oildex A cloud service company for oil and gas 1 year
- 4. Formerly: Time Warner Cable 12 years
- 5. Experience Worked on streaming media (Voice over IP), 6 years 5 million phone customers
- 6. Experience Worked on video and streaming video, 4 years
- 7. Projects twctv.com Video streaming website backbone.js Video streaming Set-Top Box (STB) web application
- 8. Oildex Projects Rewrite 10+-year-old apps Angular 1.4 New router ES5 No Angular 2, yet No ES6 or Typescript, yet
- 9. We will cover Fundamentals Related concepts Angular 2
- 10. Fundamentals A brief overview of reactive fundamentals Reactive programming Functional Reactive Programming (FRP) Observer design pattern
- 11. Related concepts Object.observe Promises Other Async concepts RxJS
- 12. Observables in Angular 2 Forms Http AsyncPipe
- 13. Fundamentals
- 14. Overview of Reactive Programming Data flows Propagation of change
- 16. (FRP) Functional Reactive Programming Reactive Programming and Functional Programming
- 17. Related Concepts
- 18. Observer Design Pattern Subject tracks observers Subject notifies observers of state changes
- 19. Terminology Subject, Observable, Producer Observer, Consumer
- 20. Object.observe Not the same as Observables Formerly a Stage 2 Proposal Proxy Proposal withdrawn
- 21. Criticisms of Object.observe Big changes to Object internals Bad performance Not well-supported or adopted But really, Ecosystem moved in different direction
- 22. Observable Stage 1 Current Proposal Description Specification
- 23. Differences between Observables and Object.observe
- 24. Creating an Observable The hard way let myObservable = new Observable(observer => { const token = doAsyncAction((err, value) => { if (err) } observer.error(err); } else { observer.next(value); observer.complete(); } }); return () => { cancelAsyncAction(token); }; {);
- 26. Promises vs. Observables Promise is like a async variable Observable is like a async array
- 27. Promises vs. Observables Promises Single value Cannot be cancelled Not lazy Good for some AJAX calls Unless you want to cancel them Catch, Finally
- 28. Promises vs. Observables Observables Streams Can be unsubscribed Lazy, until you call .subscribe() Better for events, WebSockets Animations, AJAX you want to cancel Can by retried Catch, Finally
- 29. Bridging Observables Easy way to get an observable You can turn other async concepts into an observable using a helper Promises .from() Generator .from() Callbacks .fromCallback()
- 30. Bridging Observables Easy way to get an observable Events .fromEvent() DOM AJAX WebSockets .fromWebSocket() Other observable implementations bacon.js kefir.js
- 31. Bridging Observables You can even turn non-async concepts into an observable using a helper Arrays .of()
- 32. Working with Promises vs. Observables .then()becomes .subscribe()
- 33. Working with Promises vs. Observables Observables do not need to complete, but... If you need to do something when an observable completes, pass an optional complete handler
- 35. Angular 2
- 37. Forms Forms are observable this.myForm = fb.group({ 'sku': ['', Validators.required] }); this.sku = this.myForm.controls['sku']; this.sku.valueChanges.subscribe( (value: string) => { console.log('sku changed to: ', value); } ); this.myForm.valueChanges.subscribe( (value: string) => { console.log('form changed to: ', value); } );
- 38. Http Cancel requests Stream results "type ahead" Returns observable
- 39. Http getRandomQuote() { this.http.get('http://localhost:3001/api/random-quote') .retry(3) .map(res => res.text()) .subscribe( data => this.randomQuote = data, err => this.logError(err), () => console.log('Random Quote Complete') ); }
- 40. Pipes Like Angular 1 filter
- 41. AsyncPipe Can subscribe to observables timerAsync = Observable.interval(1000).startWith(0); <h2>Current Total (Async Pipe): {{timerAsync | async}}</h2>
- 42. Change Detection New in Angular 2: Apps are reactive Change detection is directional You can skip walking parts of the tree Immutable objects Observables
- 43. ngrx Reactive Extensions for Angular 2 ngrx/store Can be used to implement elm/redux-style applications in Angular 2
- 44. Questions?