# 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](/nl/docs/learn/projects/) 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](/nl/docs/concepts/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.

```html
[#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

- [Core en ext](/nl/docs/concepts/core-and-ext/): waar blokken staan en hoe een project blokken van het framework vervangt.
- [Templates](/nl/docs/concepts/templates/) en [Libraries](/nl/docs/concepts/libraries/).
- [Modules](/nl/docs/concepts/modules/) om een feature te verpakken.