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
08:28 MIN
Applying reactive principles to system architecture
Rethinking Reactive Architectures with GraphQL
02:47 MIN
The core principles of reactive programming
Java's Project Loom & Co - the end for reactive programming?
01:19 MIN
Examining the trend and debate around reactive programming
Is reactive the new black? Imperative vs. reactive programming with Quarkus
07:42 MIN
Defining true reactivity in modern frameworks
Angular Signals: what's all the fuss about?
02:07 MIN
Meeting modern application demands with the Reactive Manifesto
Is reactive the new black? Imperative vs. reactive programming with Quarkus
01:27 MIN
Understanding the core concept of reactivity
Under The Hood of Vue 3 Reactivity
05:23 MIN
Separation of concerns versus modern web frameworks
WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more
01:32 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
23:39Rethinking React State Management: The Power of Built-In Solutions
Marc Brehmer
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
46:24The Rise of Reactive Microservices
David Leitner
54:44Under The Hood Of Vue 3 Reactivity
Marc Backes
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
31:12But, you're not Facebook
Kristijan Ristovski
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
BSB Bremer Software & Beratungs GmbH
Bremen, Germany
Intermediate
Senior
CSS
Java
HTML
React
JavaScript
+1
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Nia Health GmbH
Berlin, Germany
Intermediate
Senior
CSS
GIT
React
TypeScript
Cap3 GmbH
Kiel, Germany
Intermediate
Senior
React
Angular
JavaScript
TypeScript
Speech Processing Solutions
Vienna, Austria
Intermediate
CSS
HTML
JavaScript
TypeScript
Saby New Compy
Bielefeld, Germany
Intermediate
Java
Kotlin
