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.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

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

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

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

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

Jan Weinschenker

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

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
DC
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
Inside last week’s Dev Digest 198 . 🎂 30 years of JavaScript ⏰ How long is a JavaScript second 💻 Clean code in Angular 🤦‍♂️ AI makes different mistakes than humans 👨‍💻 In-browser and offline AI 🟠 Undocumented Hacker News features 🐋 DeepSeek censored...
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.