André Kovac
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
25:14 MIN
Audience Q&A on patterns, typescript, and frameworks
10 must-know design patterns for JS Devs
02:31 MIN
Understanding the core concepts of React
React and the power of visualisation
29:39 MIN
Rethinking web development by embracing the DOM
Rethinking web application design for fastest possible time to interactive
00:32 MIN
Defining the core principle of reactive programming
Bringing back reactivity in "reactive" frontend
00:26 MIN
Why in-depth React knowledge may not be a good investment
Keith Cirkle of GitHub on React Fatigue
02:52 MIN
Understanding the core principles of React
Hands-on React Native: From Zero to Hero
23:35 MIN
Q&A on compiler adoption and the move to full-stack
To New Frontiers: The Future of Frontend Development
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
28:43Bringing back reactivity in "reactive" frontend
Michał Moroz
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
49:32Keith Cirkle of GitHub on React Fatigue
Keith Cirkle
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
41:54Extending HTML with Web Components
Rowdy Rabouw
43:02Using backend languages for frontends: Why ClojureScript is an awesome idea!
Tobias Schröder
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Frontend Developer - Typescript / Svelte - (f/m/x)
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Frontend Web Developer (JavaScript, React)
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript
