This is the repository demonstrating RxJS Anti-Patters; discussed on a YouTube live-coding session.
The Angular application (here in the repository) uses a Cloud service to access ipsum-lorem type posts and author details. The UX - while underwhelming - demonstrates a classic master-details UI application implemented using Angular Http and RxJs Observables.
The complication here is two (2) RESTful services that must be used.
The lists of posts do NOT contain author information. So for each post entry, author information mus be also retrieved. This aggregated information is then displayed in the posts.component.ts view.
These issues present both UX and RxJS chaining challenges!
A a training exercise, these issues are address with ten (10) refactoring steps. Developers can see how Angular UI components are transformed into presentation-only components which consume observable-based service APIs.
The initial code was intentionally implemented with a plethora of common, bad practices and RxJS anti-patterns.
The commits in this repository show incremental improvements to the application and best-practices for using RxJS in Angular applications.
Developers can explore the changes in two (2) ways:
- View the changes online in the commit log
- Checkout the commit on a local clone of the repository
Use this link to learn how to Use Commit Logs to Explore Changes Online
Here is a Table of Contents for the Tutorial changes.
| Step | Git Command |
|---|---|
| step(1): expand 'bad' logic for easy consumption | git checkout 0f8d304 |
| step(2): show raw posts immediately | git checkout 4cd0d74 |
step(3): use async pipe, remove subscribes |
git checkout f01c9f4 |
| step(4): remove all subscribes, mergeMap | git checkout ddf32ef |
| step(5): refactor post/user logic to PostService | git checkout 66a1d8a |
| step(6): condense post service | git checkout 1cb1762 |
| step(7): fix router view pooling with post details | git checkout c2f5b32 |
| step(8): condense post detail logic using async pipe | git checkout 2b9aa6a |
| step(9): central rxjs operator imports | git checkout 613b544 |
step(10): use .do() operator for event side effects |
git checkout ff7bbb7 |
Each step/commit shown above (^) has fixes or improvements to the previous step.
Simply use a terminal command git checkout <SHA> to checkout a tutorial step you would like to explore.
git checkout 3ffa635 # Review fixes in Step#5And to quickly get a pretty list of commits for your local, cloned repository, use this command:
git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --
- Run
ng servefor a dev server. - Navigate to
http://localhost:4200/.
The app will automatically reload if you change any of the source files.