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.
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Technoly GmbH
Berlin, Germany
Senior
JavaScript
Angular
+1
Matching moments
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
02:23 MIN
Core principles of the reactive manifesto
Development of reactive applications with Quarkus
Featured Partners
Related Videos
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
49:32Keith Cirkle of GitHub on React Fatigue
Keith Cirkle
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
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Code Healers LLC
Hinesville, United States of America
Remote
€40-50K
Intermediate
Senior
PHP
.NET
React
+2
Adria Solutions ltd
Manchester, United Kingdom
£40-55K
REST
React
Next.js
WebPack
+5
KA RESOURCES
Mannheim, Germany
€65K
GIT
React
WebPack
JavaScript
+1