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
The Reactive Big Picture
Why Reactive
In 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 2
Angular 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 Pipe
Lukas 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 1
In this challenge, students identify the major reactive components in the sample application.
Challenge 1: Solution, Part I
Lukas breaks down the solution into two parts. Lukas walks through the demo Reactive Angular application.
Challenge 1: Solution, Part II
Led by audience questions, Lukas continues the code review of the Reactive Angular application.
Reactive State
Redux Primer
Lukas 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.
Reducers
A 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 2
In 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 I
Lukas walks through solution for Challenge 2.
Challenge 2: Solution, Part II
Taking questions from students, Lukas reviews redux pattern implementation.
Immutable Operations
Redux Review
Before working on Immutable Operations, Lukas reviews Redux with the students.
Immutable Operations
Immutable operations are JavaScript methods that can be used to avoid Object and Array mutations. Simplifying application development does not contain any defensive copying, and it is easier to test.
Challenge 3
In 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: Solution
Lukas walks through solution for Challenge 3.
Observable Stream
Observables Introduction
Lukas mentions additional learning resources before introducing agenda for the learning about Observable Stream.
Observables & Observer Pattern
Lukas 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 4
In this challenge, students make a clicker that increments and decrements with Observable Streams.
Multiple Streams
Combining multiple Observable Streams, Lukas shows how to use Observable.merge() method.
Challenge 5
In this challenge, students make a clicker that increments and decrements with Observable Streams.
Challenge 5: Solution
Lukas walks through solution for Challenge 5.
Reactive Data
Introduction to Reactive Data
Introducing handling async operations and multiple models, Lukas reviews strategies of dealing with reactive data to program reactive Angular 2 applications.
Handling Async Operations
Through 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 Models
Complex 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.
