André Kovac

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

Are you telling the DOM how to change, or just what it should look like? Understand the fundamental difference between imperative and declarative programming.

What the heck do "declarative" and "reactive" actually mean?
#1about 2 minutes

Understanding imperative vs declarative with an analogy

An analogy of tidying a room illustrates the difference between giving step-by-step instructions (imperative) and describing the desired final state (declarative).

#2about 7 minutes

The challenge of manual DOM manipulation in JavaScript

A vanilla JavaScript counter example demonstrates the imperative process of manually querying and updating the DOM to synchronize application state with the UI.

#3about 3 minutes

How the browser renders HTML, CSS, and JavaScript

An overview of the browser's rendering pipeline shows how it converts HTML and CSS into a DOM and CSSOM to paint pixels on the screen.

#4about 4 minutes

Introducing the core concepts of reactive programming

Reactive programming is introduced using a spreadsheet analogy, where changing one value automatically updates all dependent values, aiming for a UI that is a function of its state.

#5about 5 minutes

Abstracting DOM updates with a custom state object

A simple state object with a `setValue` method is created to encapsulate imperative DOM manipulation, making the event handler more declarative.

#6about 4 minutes

The imperative pitfalls of conditional UI rendering

Attempting to conditionally add an element to the DOM imperatively reveals common bugs and makes the UI difficult to reason about from the code.

#7about 3 minutes

How React enables declarative UI with a virtual DOM

React's declarative approach is demonstrated, using a virtual DOM and the `useState` hook to describe the UI's appearance based on state.

#8about 2 minutes

Svelte's approach to truly reactive state updates

Svelte simplifies reactivity by making standard JavaScript assignments automatically trigger UI updates, removing the need for setter functions.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

See all videos
To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Next, Nest, Nuxt… Nust?26:30

Next, Nest, Nuxt… Nust?

Marius Obert

Keith Cirkle of GitHub on React Fatigue49:32

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

From learning to earning

Jobs that call for the skills explored in this talk.