Workshop

Advanced Reactive UI Patterns Master Class

May 25
May 25, 2023 Warsaw, Poland

Michael Hladky

Michael Hladky

WorkshopFest Attend the event
MichaelWorkshopFest

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...