Michał Moroz

Bringing back reactivity in "reactive" frontend

A light switch is 'off' but the bulb is 'on'. This talk explores how derived state prevents such contradictions and makes your application predictable.

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.

Featured Partners

Related Videos

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Keith Cirkle of GitHub on React Fatigue49:32

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

Side-by-Side: Reactive vs non-reactive Java25:41

Side-by-Side: Reactive vs non-reactive Java

Jan Weinschenker

Rethinking React State Management: The Power of Built-In Solutions23:39

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

The Rise of Reactive Microservices46:24

The Rise of Reactive Microservices

David Leitner

From learning to earning

Jobs that call for the skills explored in this talk.

Programador/a React?

knowmad Mood
Municipality of Madrid, Spain

Intermediate
CSS
GIT
HTML
RxJS
SASS
+12