Reactive Programming
Crash Course for
Angular Baes <3
Jennifer Wadella
Jennifer Wadella
@likeOMGitsFEDAY
- 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.
RxJS
(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
Demo code: https://github.com/tehfedaykin/ReactiveProgrammingAngularBaesDemo
Imperative branch - `main` | Reactive branch - `reactive`
Refactor Time:
Let's get Reactive
Summary
- 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
Jennifer's
Reactive Programming
Tips
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:
https://rxjs.dev/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.
Questions?
Slides available at:
reactiveprogrammingforangularbaes.jenniferwadella.com
Want to grow your 
career? I'm growing my team! jennifer@bitovi.com