Reactive Programming
Crash Course for
Angular Baes <3

Jennifer Wadella

Jennifer Wadella


  • Director of Angular Development at Bitovi
  • Angular GDE
  • International Speaker (pre-pandemic)
  • Kombucha brewin' crazy plant lady

This talk may contain strong language, harsh truths, and serious passion.

Problems with Modern JavaScript Development

MVC Approach

Bidirectional data flow can affect application state in many places and be difficult to track.

Imperative vs. Declarative Programming

Imperative Approach

When events occur, code runs and changes the state of the program.

Declarative Approach

Specifying HOW the state of a program should be altered.

Declarative Programming Pros

- Readability ++

- Refactorability ++

- Easier to track "state" change of the UI

Reactive Programming

A declarative programming style concerned with data “streams” and propagation of change.


(Reactive Extensions for JavaScript) is a library for reactive programming using Observables that makes it easier to compose asynchronous or callback-based code.

When to Use Observables vs Subjects

- When we care about execution context

- When we need unidirectional data flow (preferably always)

Why Can't I Just .next() All the Things?

Cause then you're just imperatively programming with BehaviorSubjects, you gain no benefits with additional complexity.

Play with Stackblitz demo here

Operators Types

  • Combinational: combineLatest, merge, forkJoin, startWith
  • Creational: from, fromEvent, of
  • Multicasting: publish, multicast, shareReplay
  • Filtering: distinctUntilChanged, filter, first, last, takeUntil
  • Transformational: map, mapTo, switchMap, scan

Reactive Programming in Angular:
What We Care About

- Creating unidirectional data flow.

- Controlling when pieces of our application state change, and getting notified of those changes.

App Demo

Freckles from Animal Crossing

Demo code:

Imperative branch - `main` | Reactive branch - `reactive`

Refactor Time:

Let's get Reactive


  • Created stream from HttpClient returned Observable
  • Merged streams from HttpClient and ReactiveForms Observables
  • Created streams from click events
  • Manipulated streams & merged multiple streams
  • Used operators to multicast Observables

Beginner Mistakes in Reactive Programming

  • Recreating streams
  • Imperative Coding with Behavior Subjects

Reactive Programming

Tip #1 - Think Backwards.

Start with what you want to display in the UI. List the different things that would cause that things state to change.

API response?Interaction events?

Tip #2 - Let TypeScript Help You

Streams are very abstract and can be hard to visualize until you've created a solid mental model. Add the Type of the value you want your stream to ultimately display in the UI, and let the errors help you learn how operators work.

Tip #3 - Be chonky.

Just throw all your logic in that first map function once you have all your streams, return what you need to display. As you get more comfortable, break pieces apart.

Tip #4 - Start with a Few Operators

There's a ton of operators(in RxJS < 7, anyway). Get comfortable with a few at first.

Operator Decision Tree:

Tip #5 - Work Towards Breaking Apart Your Streams

Start pulling your streams into separate consts, and bringing them into Combinational operators separately. You'll be able to see patterns more easily and create more composability as you get more comfortable.

Tip #6

Do NOT go back to work and rewrite your codebase over the weekend to adopt Reactive Programming!

Architectural decisions and pattern adoptions MUST be discussed and approved by everyone committing code to the project!

Code Smells

- Nested subscriptions

- Imperative logic in subscription functions

- Not unsubscribing

- Imperative logic in tap operations*

*Sometimes this can't be avoided -
like launching modals/toasts, or dealing with not-truly-reactive-reactive-forms

Reactive Programming is Hard, Ya'll.

Practice, practice, practice.


Slides available at:

Want to grow your Angularcareer? I'm growing my team!

@likeOMGitsFEDAY #reactiveProgrammingCrashCourse