Workshop
Advanced Reactive UI Patterns Master Class
If you already know REDUX or reactive state management patterns and want to learn more about the internal architectural implementation details, this is the workshop you need to book. We start off with some theory to deepen the understanding of global and local state, learn about common terms like model and viewmodel, and determine how to apply this knowledge in our Angular applications.
Defining the state of your application can be a cumbersome task. Done wrong, it can potentially lead to utterly complex scenarios that harm the performance of your components. Learn how to effectively make use of state derivations and master communication with async APIs powered by RxJS flattening operators like exhaustMap. Efficiently reflecting a reactive state in the UI is key to providing exceptional user experiences.
Yet, the task can easily be further complicated – managing state coming from asynchronous APIs (e.g., websockets, Http results) in your UI adds a whole new layer of challenges to handle. In this workshop, we will focus on a practical approach to understanding and addressing this problem.
To this end, together we will examine the terms suspense, next, error and complete, and identify the different states that reactive data sources reflect in the UI. We will round up by enhancing your knowledge about the best practices around OOP design patterns.You will also learn how patterns like Adapter or MVVM can increase the scalability and maintainability of your Angular applications. In the end, you will be able to apply all the performance and scalability relevant software design patterns to your Angular applications.
Takeaways
Local vs. global state (when to us what)
Derived state (shared computations, distinct changes, and nullish values)
Model vs. ViewModel
OOP Design Patterns and Component state (Facade, MVVM, MVC, Adapter)
Observable Inputs without decorators
Observable HostBindings
Managing async data streams with RxJS flattening operators
How to handle error, complete, suspense, and values in the template
Component lazy loading
Improving UX with Reusable reactive helpers (nonFlickerLoader)
More...