Jeremy Keith maakt al 27 jaar lang websites. Hij is mede-oprichter van het bedrijf Clearleft waar hij werkt als webdeveloper en onderzoeker. In deze weekly nerd verteld hij over declarative design, een bepaalde manier van ontwerpen en ontwikkelen. Daarbij maakt Jeremy een vergelijking tussen declarative en imperative.
Wat is declarative?
Om declarative design uit te leggen begint Jeremy vanuit de muziek. Aan de ene kant heb je klassieke muziek, met als voorbeeld Mozart. Bij klassieke muziek staan alle noten precies opgeschreven op bladmuziek zoals je ze moet spelen. Aan de andere kant heb je jazz muziek, met als voorbeeld Miles Davis. Voor jazz muziek is er vaak geen bladmuziek met preciese noten, maar een akoorden schema, een soort schets van hoe het ongeveer moet worden. Dit is vergelijkbaar met hoe we op twee manieren kunnen programmeren. Imperative programming is heel exact en stap voor stap. Declarative programming is juist niet specifiek, je geeft aan wat je als resultaat wilt en laat de computer bepalen hoe dit gebeurt.
Declarative vs. Imperative
HTML en CSS zijn beide voorbeelden van declarative talen. Elke regel code in CSS is een suggestie. JavaScript is juist een voorbeeld van een imperative taal. Dit geeft je meer controle, maar daardoor kan er ook meer fout gaan. Als je in JavaScript één fout maakt, werkt je hele script niet meer. Als je in CSS een fout maakt, wordt die regel simpel overgeslagen.
| Declarative | Imperative |
|---|---|
| Fouten worden genegeerd | Fouten breken alles |
| Je geeft suggesties | Meer controle |
| Domein specifiek | Kan op meerdere plaatsen worden gebruikt |
Mindset
Er is dus een verschil in talen, maar volgens Jeremy nog belangrijker is het verschil in mindset. Je zou met JavaScript een button kunnen maken, maar beter is om gewoon het HTML <button> element te gebruiken.
JavaScript should only do what only JavaScript can do.
Waarom gebruiken mensen dan toch JavaScript? Omdat ze controle willen. Iets declarative doen, voelt als de controle verliezen. Er gebeuren dingen zonder dat jij hebt gezegt dat het moet gebeuren.
Jeremy laat dit zien aan de hand van voorbeelden in CSS. Ook CSS kan volgens Jeremy meer declerative zijn.
Declarative CSS
-
font-size: 16px;→font-size: 1rem;Lettergrootte kan je aangeven in pixels, maar ook in rem. Standaard is dit hetzelfde, maar rem is meer declerative, dit hangt af van wat de gebruiker heeft opgegeven als lettergrootte, wel zo gebruikersvriendelijk!
-
padding-left→padding-inline-startWaar padding inline start is kan in een andere taal veranderen, dit zorgt er juist voor dat de padding in die taal ook nog logisch is.
-
font-size: calc(.5rem + 0.6vw)De eenheid vw maakt de lettergrootte afhankelijk van de schermbreedte, toch voegen we ook nog rem toe om de voorkeuren van de gebruiker te volgen. Op deze manier weet je als developer helemaal niet meer hoe groot het wordt, maar je weet wel dat het er op elk apparaat goed uitziet.
Jeremy vindt dit een goede samenwerking tussen mens en computer. Een computer is immers om te rekenen. Dit is heel anders dan dat je alles moet aangeven.
Is declarative beter?
Jeremy eindigt met de vraag of declarative beter is dan imperative. Dit hangt volgens hem af van de context. Een manager van een team kan bijvoorbeeld heel strict moeten zijn omdat de leden van het team anders niet goed weten wat ze moeten doen, of andersom kunnen sommige mensen juist niet tegen die controle. Een ander voorbeeld is een design system. Hierin kunnen hele specifieke waardes staan, of juist richtlijnen. Ten slotte zijn er verschillende mediums. Voor print kan je vaste waardes gebruiken, omdat je het papier formaat weet. Voor web design kan dit niet, je weet immers niets over het apparaat dat je gebruiker gebruikt om je website te bekijken