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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Audience Q&A on patterns, typescript, and frameworks
02:59 MIN

Audience Q&A on patterns, typescript, and frameworks

10 must-know design patterns for JS Devs

Understanding the core concepts of React
03:09 MIN

Understanding the core concepts of React

React and the power of visualisation

Rethinking web development by embracing the DOM
02:16 MIN

Rethinking web development by embracing the DOM

Rethinking web application design for fastest possible time to interactive

Defining the core principle of reactive programming
01:50 MIN

Defining the core principle of reactive programming

Bringing back reactivity in "reactive" frontend

Why in-depth React knowledge may not be a good investment
02:53 MIN

Why in-depth React knowledge may not be a good investment

Keith Cirkle of GitHub on React Fatigue

Understanding the core principles of React
05:58 MIN

Understanding the core principles of React

Hands-on React Native: From Zero to Hero

Q&A on compiler adoption and the move to full-stack
02:25 MIN

Q&A on compiler adoption and the move to full-stack

To New Frontiers: The Future of Frontend Development

Examining the trend and debate around reactive programming
01:19 MIN

Examining the trend and debate around reactive programming

Is reactive the new black? Imperative vs. reactive programming with Quarkus

Featured Partners

Related Videos

See all videos
Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

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

Using backend languages for frontends: Why ClojureScript is an awesome idea!43:02

Using backend languages for frontends: Why ClojureScript is an awesome idea!

Tobias Schröder

Svelte ♥ TypeScript and so will you28:20

Svelte ♥ TypeScript and so will you

Ivan Hofer

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

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

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

Marc Brehmer

Related Articles

View all articles
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
LM
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025
AP
Anto Pranjić
That was WeAreDevelopers World Congress 2022
Thank you, danke, hvala, merci, gracias, Дякую – we don’t know yet exactly how many languages were spoken here at the City Cube Berlin over the last two days, but thank you 10 000 times to everybody who joined us here for WeAreDevelopers World Congre...
That was WeAreDevelopers World Congress 2022

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript