Michał Moroz
Bringing back reactivity in "reactive" frontend
#1about 2 minutes
Defining the core principle of reactive programming
Reactive libraries exist primarily to reduce the number of possible invalid states within a system.
#2about 4 minutes
Using derived state to eliminate invalid states
A lamp example demonstrates how derived state reduces four possible states, including two invalid ones, down to two valid states.
#3about 2 minutes
How popular JavaScript libraries implement reactivity
Frameworks like React, Vue, RxJS, and Solid all provide primitives for both mutable state and derived state.
#4about 1 minute
Tip 1: Transform imperative updates into derived state
Refactor imperative UI updates, such as setting a title, to be a derived state based on the application's core data.
#5about 4 minutes
Tip 2: Decouple state by keeping items independent
Avoid using multiple boolean flags for related UI visibility, as this creates coupled state and potential invalid combinations.
#6about 3 minutes
Tip 3: Place state in the component hierarchy
Decide whether to use global state for coupled features or local state for isolated components to manage complexity effectively.
#7about 8 minutes
A four-step process for refactoring reactive code
Follow a structured process of mapping function calls, reverse-mapping state, and incrementally creating derived state to untangle complex code.
#8about 3 minutes
The benefits of reducing invalid application states
Refactoring to a reactive model with derived state leads to clearer code boundaries, easier conceptualization, and a more predictable application.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
09:14 MIN
Defining true reactivity in modern frameworks
Angular Signals: what's all the fuss about?
02:14 MIN
Understanding the core concept of reactivity
Under The Hood of Vue 3 Reactivity
04:28 MIN
Core principles of the reactive manifesto
Development of reactive applications with Quarkus
00:04 MIN
Understanding the core principles of the reactive manifesto
Side-by-Side: Reactive vs non-reactive Java
05:46 MIN
Why React's model conflicts with the modern web platform
Keith Cirkle of GitHub on React Fatigue
00:26 MIN
Why in-depth React knowledge may not be a good investment
Keith Cirkle of GitHub on React Fatigue
33:55 MIN
Audience Q&A on practical micro-frontend challenges
Micro-frontends anti-patterns
00:03 MIN
Introduction to JavaScript design patterns
10 must-know design patterns for JS Devs
Featured Partners
Related Videos
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
49:32Keith Cirkle of GitHub on React Fatigue
Keith Cirkle
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
23:39Rethinking React State Management: The Power of Built-In Solutions
Marc Brehmer
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
54:44Under The Hood Of Vue 3 Reactivity
Marc Backes
46:24The Rise of Reactive Microservices
David Leitner
From learning to earning
Jobs that call for the skills explored in this talk.
