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
13:59 MIN
Applying reactive principles to system architecture
Rethinking Reactive Architectures with GraphQL
03:44 MIN
The core principles of reactive programming
Java's Project Loom & Co - the end for reactive programming?
02:03 MIN
Examining the trend and debate around reactive programming
Is reactive the new black? Imperative vs. reactive programming with Quarkus
09:14 MIN
Defining true reactivity in modern frameworks
Angular Signals: what's all the fuss about?
05:15 MIN
Meeting modern application demands with the Reactive Manifesto
Is reactive the new black? Imperative vs. reactive programming with Quarkus
02:14 MIN
Understanding the core concept of reactivity
Under The Hood of Vue 3 Reactivity
31:27 MIN
Separation of concerns versus modern web frameworks
WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more
19:50 MIN
Understanding the principles of reactive architecture
Architectures that we can use with .NET
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
46:24The Rise of Reactive Microservices
David Leitner
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
54:44Under The Hood Of Vue 3 Reactivity
Marc Backes
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer (JavaScript, React)
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript
React Entwickler:in (w/m/d)
BSB Bremer Software & Beratungs GmbH
Bremen, Germany
Intermediate
Senior
CSS
Java
HTML
React
JavaScript
+1
JS Developer
Frontend Revolution
Frontend Developer
Frontend Revolution