We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Three cornerstones ineffable in future Angular architecture | Michael Hladky | ng-conf 2024
Discover the three cornerstones of future Angular architecture: events, state, and effects. Learn how these building blocks can simplify your application development, reduce complexity, and increase reusability.
-
Three building blocks: events, state, and effects
- Events: happenings over time, information that flows around
- State: places in application that remember something, share information with others, stay here and can be consumed, derived values
- Effects: tail end of data flow, trigger logic, e.g., DOM updates
-
Events live in between two edges: user (input devices) and server
- User input is an event, can take events and apply behavior
-
Three ways to glue building blocks together
- Derived: synchronous computation, apply behavior on events
- State: maintain or define certain data shapes
- Effect: trigger logic, e.g., update DOM nodes
- Architecture patterns: reduce complexity, less boilerplate, use RxJS operators for behavior
- State derivation is synchronous computation, apply behavior on events
-
Effects are always the tail end of a data flow, trigger logic
- Can be first-party or third-party effects
- Three reactive primitives: events, state, and effects, can be used as a mental model to build applications
-
Architecture should be easy, understandable, and simple, with reusable patterns
- Less complexity, less boilerplate
- RxJS and signals: can be used to consume events, state, and effects
- Browser APIs: can be consumed, e.g., web sockets, HTTP requests, native APIs
-
Lifetime: duration an object or component exists in application
- Can be short, long, or forever
- State remembers everything, can be consumed by others
- Effects can trigger logic upwards, e.g., update DOM nodes
- Derivation: synchronous computation, apply behavior on events
- Architecture is shaped by the three building blocks: events, state, and effects