Concepten

Atomaire compositie

Hoe resources, libraries, templates en routes samen features vormen, zo fijnmazig als het project vraagt.

Atomic design beschrijft meestal een interface: atomen, moleculen en organismen die samen pagina's vormen. Nimbly past hetzelfde idee toe op de hele applicatie. Data, logica en presentatie bestaan elk uit kleine bouwstenen, en een feature is een combinatie daarvan.

De bouwstenen

Blok Waar Taak
Resource ext/data/<name>/.meta Een soort data: de velden, validatie, indexen en rechten
Library ext/lib/<name>.php Bedrijfslogica en datavoorbereiding, aangeroepen als shortcode
Template ext/tpl/<name>/index.tpl Een stuk markup, aangeroepen als shortcode
Route ext/uri/<path>/ Een adres, en de pagina of het antwoord dat het samenstelt
Module ext/modules/<name>/ Een verpakte feature met eigen routes, templates, libraries en data

Een feature is een samenstelling

De projectenpagina uit de tutorial laat zien hoe de blokken samenwerken:

Onderdeel Blok Hergebruikt door
Projecten Resource De pagina, de detailpagina's, de admin, de API
Projectkaart Template De projectenlijst, en elke andere pagina die een project toont
Siteheader Template Elke pagina van de site
Detail opzoeken Route met route.inc Eén adres per gepubliceerd project
Projectenpagina Route Zet de header, de bewerkbare introductie en de kaarten samen

Geen van deze onderdelen weet meer dan nodig. De kaart toont één record; de route bepaalt welke records er komen; de resource bepaalt wat een geldig project is. Pas de kaart aan en elke projectenlijst volgt; voeg een veld toe aan de resource en het admin-formulier, de API en de geschiedenis volgen.

Zo fijnmazig als het project vraagt

Atomic betekent fijnmazig, geen set regels. Een pagina kan één template zijn met al zijn HTML erin, en dat is een prima Nimbly-pagina. Haal er een template uit als een stuk markup gedeeld wordt, eigen data krijgt, of de pagina er beter leesbaar van wordt. Begin top-down bij de pagina of bottom-up bij de data, en splits op in kleinere blokken naarmate het product groeit.

Nimbly levert geen kant-en-klare componentenbibliotheek. Een componentenbibliotheek bepaalt vooraf hoe de kaarten, menu's en formulieren van een project eruitzien; Nimbly laat dat aan het project over, zodat elk project de blokken samenstelt die zijn ontwerp en data echt nodig hebben.

Templates blijven zonder logica

Een template toont waarden, herhaalt een template voor een lijst, en kiest hooguit welke template volgt. Beslissingen en berekeningen staan in libraries, waar je ze op één plek kunt lezen en testen. Zo blijft markup leesbaar voor designers en frontend developers, en blijven bedrijfsregels buiten de presentatie.

[#data projects filter=published:1 sort=year|numeric|desc#]
<ul class="grid gap-8 md:grid-cols-3">
  [#repeat data.projects tpl=card-project#]
</ul>

Verder lezen

Bekijk deze pagina als Markdown