Imperative vs Declarative: Weathering the storm

You’ve no doubt heard the terms “imperative” and “declarative” before, and you probably know that developers strongly prefer the latter whenever possible. But just how clear are you on what these really mean, when it comes to writing lines of code in your app? Most of us probably just wing it or feel “I know it when I see it.”

Debates have raged for decades on this topic. In this talk, I’ll drive straight into the eye of the storm and try to sift through what it all means for our apps, specifically for the readability and maintainability of our code bases. We’ll look at how these concepts play out in a variety of webdev technologies, from HTML, to CSS, to JS… and more along the way. I hope you’ve brought your raincoat!

Transcript

1. Imperative vs Declarative
3. Why?
4. Code is for humans, not computers
5. Code must first be read before it can be written
6. As soon as you write some code, you can no longer accurately judge its readability…
7. …unless you wait awhile until you’ve forgotten writing it.
9. What’s IMPERATIVE? What’s DECLARATIVE? No Yes
10. IMPERATIVE: how DECLARATIVE: what/why
11. IMPERATIVE: instructions, flow control DECLARATIVE: non-conditional intent
12. IMPERATIVE: explicit DECLARATIVE: implicit
13. Hiding Implementation Details Hiding Implementation Details Abstractions? Separating Concerns Creating Mental Models
14. IMPERATIVITY - DECLARATIVITY relative spectrum
16. let age = 43 console.log(`I am ${age} years old`) #include <stdio.h> int main() { int age = 43; printf("I am %d years old\n", age); return 0; }
17. .model small .stack 100h .data age db 43 ; Byte-sized variable named "age" initialized with 43 msg db "I am %d years old", 0 ; Null-terminated string for printf .code mov ax, @data ; Load the data segment address into AX mov ds, ax ; Set DS to the data segment mov al, age ; Move the value of "age" into AL register mov ah, 0 ; Clear AH to prepare AX for printing lea dx, msg ; Load effective address of the message into DX mov ah, 09h ; Function 09h - Display string int 21h ; Call DOS interrupt mov ax, 4C00h ; DOS function to exit the program int 21h ; Call DOS interrupt end DISCLAIMER: CHATGPT
18. DECLARATIVITY: establishes a “grammar” for describing intended outcomes
19. printAmount(x + y) const total = x + y printAmount(total)
20. const total = x + y const addTwoNums = (x, y) => x + y // .. const total = addTwoNums(x, y)
21. DECLARATIVITY: not absolute
22. Prompt Engineering
23. Good design of DECLARATIVITY resists leaking implementation details.
24. But, good design of DECLARATIVITY admits the need for IMPERATIVITY to refine outcomes.
25. DECLARATIVITY requires discipline
26. DECLARATIVITY requires balance
28. SELECT id, (CASE WHEN firstName ISNULL THEN 'Customer' ELSE firstName END) AS 'customerName' FROM Customers WHERE enabled = 1
29. <img src="cats.jpg" width="300" height="200" alt="cats eating cake"> <input type="text" placeholder="First name, please"> <canvas width="300" height="200"> <img src="sad-face.gif" alt="Sorry this content is missing."> </canvas> <noscript> This page works best with the new JScript 3.0 in IE4. </noscript>
30. <tr hx-trigger="cancel" class="editing" hx-get="/contact/${contact.id}" > <td> <input name="name" value="${contact.name}"> </td> <td> <input name="email" value="${contact.email}"> </td> <td> <button class="btn btn-danger" hx-get="/contact/${contact.id}" > Cancel </button> <button class="btn btn-danger" hx-put="/contact/${contact.id}" hx-include="closest tr" > Save </button> </td> </tr> </> htmx <button hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body" hx-post="/doit" > Do It! (alt-shift-D) </button>
32. <FatalErrorBoundary page={FatalErrorPage}> <RedwoodProvider> <Routes /> </RedwoodProvider> </FatalErrorBoundary> <span> { customer.name ?? 'Customer' } </span>
33. FatalErrorBoundary( { page: FatalErrorPage }, RedwoodProvider( Routes() ) ) // vs compose( partial(FatalErrorBoundary, { page: FatalErrorPage }), RedwoodProvider, Routes )() // vs Routes() |> RedwoodProvider(%) |> FatalErrorBoundary({ page: FatalErrorPage }, %)
34. @media (orientation: portrait) and (prefers-color-scheme: dark) { .my-list { --base-font-size: min(max(3vw, 1.3rem), 2.2rem); font-size: var(--base-font-size); } } @supports (display: grid) { section h1 { background-color: green; color: white; } } input[type=radio]:checked { margin-left: 20px; }
35. .bar { --value-abs: max( -1 * var(--cfg-value), var(--cfg-value) ); --value-sign: calc( var(--cfg-value) / max(0.001, var(--value-abs)) ); --bar-width: max( 1px, var(--bar-scale-factor) * var(--value-abs) ); --bar-translate-x: min( 0px, var(--value-sign) * var(--bar-width) ); --bar-left-rounding: calc( -1 * min( 0px, var(--value-sign) * var(--bar-rounding) ) ); --bar-right-rounding: max( 0px, var(--value-sign) * var(--bar-rounding) ); /* .. */ }
36. x == 3 // vs x === 3 || x === '3' // vs Number(x) === 3 // vs +x === 3
37. switch (customer.type) { case 'guest': printCustomer('Guest'); break case 'subscriber': printSubscriber(customer.name); break case 'vendor': printVendor(customer.name) } // vs const actions = { guest: () => printCustomer('Guest'), subscriber: customer => printSubscriber(customer.name), vendor: customer => printVendor(customer.name) } actions[customer.type]?.(customer)
38. let names = '' for (const record of records) { if (!!record.enabled) { const upperName = record.name.toUpperCase() names = ( (names == '') ? upperName : `${names}, ${upperName }` ) } } // vs const names = ( records .filter(record => !!record.enabled) .map(record => record.name.toUpperCase()) .join(', ') )
42. function HomePage() { const [ locState, updateLocState ] = useState({ reset: false, canceled: false }) const locCanceled = locState.canceled const [ searchText, setSearchText ] = useState(null) const [ weatherCanceled, setWeatherCanceled ] = useState(false) const [ loc, locFound ] = useGetLocation({ searchText, ...locState }) const [ selectedLoc, setSelectedLoc ] = useState(null) const searchInputRef = useRef() locState.reset = locState.canceled = false return // .. }
43. <Search searchText={searchText} setSearchText={setSearchText} locFound={locFound} setSelectedLoc={setSelectedLoc} resetLocState={resetLocState} setWeatherCanceled={setWeatherCanceled} ref={searchInputRef} />
44. function resetLocState() { setLocState({ reset: false, canceled: false }) } function setLocState({ reset = false, canceled = false } = {}) { // hack: new object inserted to change the // state-slot value and force a re-render updateLocState({ reset, canceled }) }
45. https://weatheround.com
46. (this spot intentionally left blank)