This week's Wednesday Evening Training: Angular state management with ngrx/store, introduction to state management pattern, project walkthrough and handson labs

This wednesday evening, Wouter de Bruin, Roel van de Grint and I gave an introduction to Angular Application State Management using Redux and NgRx/Store.

So what are we talking about anyway?

Nowadays, the client part of web applications has become much more complex than the relative light weight websites in the old days. They have become Single Page Applications in which multiple independent actors all compete in updating the model in parallel. Keeping track of the actual state of an application and having all actions be done in a predictable order has become increasingly difficult and let's the code become dangerously difficult to manage.

NgRx/Store and comparable mechanisms offer ways to manage this "State" in an orderly fasion and coordinate actions in such way that the applications' behaviour stays predictable. Actors can request a state change and subscrive to state changes. Having this mechanism also offers a good opportunity for logging the applications' behaviour by keeping track all states in a history. And if the application's behaviour is not influenced by other processes' behaviour, you could even use this history to restore previous states and "rewind" and "replay" the application's behaviour.

In a nutshell: State Management offers manageability and more and solutions like NgRx/Store helps you implementing this in an efficient manner.

This evening, we were given a lot of code walkthroughs in some nice examples. Wouter and Roel prepared a set of handson labs for us that gave us plenty opportunity for excercise and experimentation. There was also plenty of room for Q&A and to discuss other technologies involved. With NgRx/Store, a set of tools for testing and monitoring is also offered. For Chrome, for example, there is a nice plugin available.

We will definitely have a sequel to this session, since it's quite an important topic in client side software development.

Thanks Wouter and Roel, for sharing your knowledge with us!

Further reading

Do you want to read more on the topics? Here are some links...

Redux development tools: https://github.com/zalmoxisus/redux-devtools-extension
Chrome development plugin for Redux: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
NgRx Developer Tools - Watch the Time-Travelling Debugger In Action(video): https://www.youtube.com/watch?v=70ojPxMA7Ig
Hacker Way: Rethinking Web App Development at Facebook (solving the original problem) (video): https://www.youtube.com/watch?reload=9&v=nYkdrAPrdcw&feature=youtu.be&list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&t=1075
Angular Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why? https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/
Ngrx Store - An Architecture Guide: https://blog.angular-university.io/angular-ngrx-store-and-effects-crash-course/
ngrx/platform - Monorepo for ngrx codebase: https://github.com/ngrx/platform

Next week

In next week's Wednesday Evening Training, we'll be continuing our handson labs and experiments using WebAssembly with our colleague Hans Harts.

Past Wednesday Evening Trainings

You'll find post of previous sessions in LinkedIn as well, see: https://www.linkedin.com/search/results/content/?keywords=%23wednesdayeveningtraining



#capgemini #werkenbijcapgemini #lifeatcapgemini #wednesdayeveningtraining #angular #ngrx #patterns