Reactive Angular 2
This course has been updated! We now recommend you take the Reactive Angular with NgRx course.
Table of Contents
Learn to Build Reactive Apps with Angular 2
Course IntroductionLukas Ruebbelke introduces course on Reactive Applications with Angular 2 by outlining the course agenda and sharing links to the sample demo application and other code examples. Students are challenged with downloading and running the example application.
The Reactive Big Picture
Why ReactiveIn the context of this course, Lukas defines reactive programming as when we program an application to react to data over time. Lukas then illustrates the complexity problems within building large systems, specifically the handling of state, code volume, and flow control.
Reactive Angular 2Angular 2 ships with mechanisms to help manage complexity in large applications: objects that maintain a list of dependents (observables); async pipes are used to bind to observables; and immutability alleviates the burden of change detection.
Change Detection & Async PipeLukas talks about change detection being handled by Zone.js including its ability to only check for change with OnPush Change Detection. Then Lukas covers async pipe's features of resolving asynchronous data directly in the template and automatically unsubscribe from the observable when the DOM element is removed.
Challenge 1In this challenge, students identify the major reactive components in the sample application.
Challenge 1: Solution, Part ILukas breaks down the solution into two parts. Lukas walks through the demo Reactive Angular application.
Challenge 1: Solution, Part IILed by audience questions, Lukas continues the code review of the Reactive Angular application.
Redux PrimerLukas introduces Redux, a library and a pattern which dictates there is a single immutable state tree. With Redux, there are no more managing parts of the state on separate controllers and services.
ReducersA reducer is a method that takes in the current state and an action. Based on the action, the reducer will return a new state. Reducers and their initial state are registered in the application with provideStore. After talking about reducers, Lukas demonstrates how the store.select() and store.dispatch() methods are used. Then he takes questions from students.
Challenge 2In this challenge, students create a reducer for the selectedWidget, register the reducer with provideStore, and then use the store.select and store.dispatch methods.
Challenge 2: Solution, Part ILukas walks through solution for Challenge 2.
Challenge 2: Solution, Part IITaking questions from students, Lukas reviews redux pattern implementation.
Redux ReviewBefore working on Immutable Operations, Lukas reviews Redux with the students.
Challenge 3In this challenge, students create immutable methods in the widgets service to create, read, update and delete the widgets collection. Then students verify these operations are immutable with Object.freeze.
Challenge 3: SolutionLukas walks through solution for Challenge 3.
Observables IntroductionLukas mentions additional learning resources before introducing agenda for the learning about Observable Stream.
Observables & Observer PatternLukas reviews the solutions brought by reactive application development: to manage state, control flow, and handle code volume. Then Lukas introduces Observables as a powerful way to encapsulate, transport, and transform data from user interactions into an application.
Challenge 4In this challenge, students make a clicker that increments and decrements with Observable Streams.
Multiple StreamsCombining multiple Observable Streams, Lukas shows how to use Observable.merge() method.
Challenge 5In this challenge, students make a clicker that increments and decrements with Observable Streams.
Challenge 5: SolutionLukas walks through solution for Challenge 5.
Introduction to Reactive DataIntroducing handling async operations and multiple models, Lukas reviews strategies of dealing with reactive data to program reactive Angular 2 applications.
Handling Async OperationsThrough a brief code example, Lukas demonstrates how reactive operations that are asynchronous can be delegated to a service that is responsible for dispatching the appropriate event to the reducers.
Handling Mutiple ModelsComplex observables can be composed of multiple observable streams using the Observable.combineLatest() method. Lukas demonstrates how this type of "computed observable" receive updates anytime one of the streams is changed.