The last few months have been jam packed full of awesome. Totally living the dream right now.
On the back of my Pluralsight “Building Beautiful Angular Apps with PrimeNG“ course, I landed an awesome consulting gig building a very cool PrimeNG front-end.
The double-cool part of this gig is that the backend is totally asynchronous with lots of concurrent user changes coming over websockets. This was a great chance to apply a lot of the RxJS “Reactive Angular” stuff I’d been learning about over the last few months. That stuff is rocket fuel..
But everything has its limits.
I was soon lost in a maze of Observables and spiraling in a technical debt of state mutation.
Enter ngrx.
If you haven’t bumped into ngrx before, it’s about applying the new hotness of Redux-style applications to Angular, but built on RxJS.
The Benefits of ngrx
How does this ngrx stuff help my async plight?
- There’s now a single central place in my app where state lives. Everything goes through here!
- That state is transformed through a set of pure reducer functions (think super easy to test since there’s no DI, just in and out)
- Reducers are triggered by actions - simple async calls in my client code to say “Hey, I got a new piece of data, please add it to the store” or similar.
- I can subscribe to changes in the parts of the store my component cares about (eg “tell me when the list of inventory changes”), at whatever points in my app need to listen for those changes
The Refactor Factor
And what’s been the result in my refactor to ngrx?
- I ended up throwing out tons of code (always a good thing, especially the way I code :-)
- The complexity level went through the floor (it was much easier to see where things were broken, since a lot of the code that was removed was “side-effect” style stuff which are replaced by ngrx Effects, or just plain reducers)
- I could debug async stuff since I could see the flow of actions, and the mutations they were effecting
But what’s really blown my mind has been the Redux Devtools which work just great with ngrx.
Because all the store mutations are through returning fresh copies of the mutated store, you can use the dev tools to time travel! I can travel back in time inside my app to see what the state looked like before and after a particular event. Crazy, right!
The Dreaded Learning Curve…
Yeah. That’s really been the only snag. There’s actually not too much “noob-level” ngrx tutorial stuff. And like everything JS, versions of things cycle like crazy, so lots of tutes get out of date very quickly.
I found Oren’s book Reactive Programming with Angular and ngrx to be super helpful on fundamentals. And particularly his rock star sample app – demo, source. Such great code in there!
I’m actually really keen to YouTube some basic screencasts around ngrx - at the noob level - that’s all I’ve unlocked! So if you think that would be helpful/interesting, tweet me up.
Will keep you posted..