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
20:28 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
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
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
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
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Software Engineer (React, TypeScript, JavaScript) - Remote
Top web
Remote
£145-187K
Intermediate
React
JavaScript
TypeScript
Programador/a React?
knowmad Mood
Municipality of San Sebastian, Spain
Intermediate
GIT
RxJS
SASS
NoSQL
Redis
+10
Programador/a React?
knowmad Mood
Municipality of Santander, Spain
Intermediate
GIT
RxJS
SASS
NoSQL
Redis
+10