An analogy of tidying a room illustrates the difference between giving step-by-step instructions (imperative) and describing the desired final state (declarative).
A vanilla JavaScript counter example demonstrates the imperative process of manually querying and updating the DOM to synchronize application state with the UI.
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.
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.
A simple state object with a `setValue` method is created to encapsulate imperative DOM manipulation, making the event handler more declarative.
Attempting to conditionally add an element to the DOM imperatively reveals common bugs and makes the UI difficult to reason about from the code.
React's declarative approach is demonstrated, using a virtual DOM and the `useState` hook to describe the UI's appearance based on state.
Svelte simplifies reactivity by making standard JavaScript assignments automatically trigger UI updates, removing the need for setter functions.
Sensory-Minds GmbH
Offenbach am Main, Germany
Hubert Burda Media
München, Germany
26:00Rainer Hahnekamp
31:21Markus Hatvan
40:05Nathalia Rus
32:56Laurie Voss
28:43Michał Moroz
49:00Marc Backes
43:02Tobias Schröder
41:54Rowdy Rabouw
Jobs that call for the skills explored in this talk.
Turboneer LLC
Mount Morris, United States of America
ARRK Engineering GmbH
Freiburg im Breisgau, Germany
Adria Solutions ltd
Northwich, United Kingdom
CareerValue
Bilthoven, Netherlands