Slide 1
Slide 1 text
Imperative vs Declarative
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Why?
Slide 4
Slide 4 text
Code is for humans,
not computers
Slide 5
Slide 5 text
Code must first be read
before it can be written
Slide 6
Slide 6 text
As soon as you write some code,
you can no longer accurately
judge its readability…
Slide 7
Slide 7 text
…unless you wait awhile until
you’ve forgotten writing it.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
What’s IMPERATIVE?
What’s DECLARATIVE?
No
Yes
Slide 10
Slide 10 text
IMPERATIVE: how
DECLARATIVE: what/why
Slide 11
Slide 11 text
IMPERATIVE: instructions, flow control
DECLARATIVE: non-conditional intent
Slide 12
Slide 12 text
IMPERATIVE: explicit
DECLARATIVE: implicit
Slide 13
Slide 13 text
Hiding Implementation Details
Hiding Implementation Details
Abstractions?
Separating Concerns
Creating Mental Models
Slide 14
Slide 14 text
IMPERATIVITY - DECLARATIVITY
relative spectrum
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
let age = 43
console.log(`I am ${age} years old`)
#include
int main() {
int age = 43;
printf("I am %d years old\n", age);
return 0;
}
Slide 17
Slide 17 text
.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
Slide 18
Slide 18 text
DECLARATIVITY: establishes a
“grammar” for describing
intended outcomes
Slide 19
Slide 19 text
printAmount(x + y)
const total = x + y
printAmount(total)
Slide 20
Slide 20 text
const total = x + y
const addTwoNums = (x, y) => x + y
// ..
const total = addTwoNums(x, y)
Slide 21
Slide 21 text
DECLARATIVITY: not absolute
Slide 22
Slide 22 text
Prompt Engineering
Slide 23
Slide 23 text
Good design of DECLARATIVITY
resists leaking implementation
details.
Slide 24
Slide 24 text
But, good design of DECLARATIVITY
admits the need for IMPERATIVITY
to refine outcomes.
Slide 25
Slide 25 text
DECLARATIVITY
requires discipline
Slide 26
Slide 26 text
DECLARATIVITY
requires balance
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
SELECT
id,
(CASE
WHEN firstName ISNULL THEN 'Customer'
ELSE firstName
END) AS 'customerName'
FROM
Customers
WHERE
enabled = 1
Slide 29
Slide 29 text
This page works best with the new JScript 3.0 in IE4.
Slide 30
Slide 30 text
Cancel
Save
> htmx
Do It! (alt-shift-D)
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
{ customer.name ?? 'Customer' }
Slide 33
Slide 33 text
FatalErrorBoundary(
{ page: FatalErrorPage },
RedwoodProvider(
Routes()
)
)
// vs
compose(
partial(FatalErrorBoundary, { page: FatalErrorPage }),
RedwoodProvider,
Routes
)()
// vs
Routes() |>
RedwoodProvider(%) |>
FatalErrorBoundary({ page: FatalErrorPage }, %)
Slide 34
Slide 34 text
@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;
}
Slide 35
Slide 35 text
.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)
);
/* .. */
}
Slide 36
Slide 36 text
x == 3
// vs
x === 3 || x === '3'
// vs
Number(x) === 3
// vs
+x === 3
Slide 37
Slide 37 text
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)
Slide 38
Slide 38 text
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(', ')
)
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
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 // ..
}
Slide 43
Slide 43 text
Slide 44
Slide 44 text
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
})
}
Slide 45
Slide 45 text
https://weatheround.com
Slide 46
Slide 46 text
(this spot intentionally left blank)