# Composição atômica

Como recursos, bibliotecas, templates e rotas se combinam em funcionalidades, tão granular quanto o projeto pedir.

Design atômico costuma descrever uma interface: átomos, moléculas e organismos que se combinam em páginas. O Nimbly aplica a mesma ideia à aplicação inteira. Dados, lógica e apresentação são feitos de pequenos blocos, e uma funcionalidade é uma combinação deles.

## Os blocos de construção

| Bloco | Onde | Responsabilidade |
|---|---|---|
| Recurso | `ext/data/<name>/.meta` | Um tipo de dado: seus campos, validação, índices e permissões |
| Biblioteca | `ext/lib/<name>.php` | Lógica de negócio e preparação de dados, chamada como shortcode |
| Template | `ext/tpl/<name>/index.tpl` | Um pedaço de markup, chamado como shortcode |
| Rota | `ext/uri/<path>/` | Um endereço, e a página ou resposta que ele compõe |
| Módulo | `ext/modules/<name>/` | Uma funcionalidade empacotada com rotas, templates, bibliotecas e dados próprios |

## Uma funcionalidade é uma composição

A página de projetos do [tutorial](/pt/docs/learn/projects/) mostra como os blocos se combinam:

| Parte | Bloco | Reutilizado por |
|---|---|---|
| Projetos | Recurso | A página, as páginas de detalhe, o admin, a API |
| Cartão de projeto | Template | A lista de projetos e qualquer outra página que mostre um projeto |
| Cabeçalho do site | Template | Todas as páginas do site |
| Busca do detalhe | Rota com `route.inc` | Um endereço por projeto publicado |
| Página de projetos | Rota | Compõe o cabeçalho, a introdução editável e os cartões |

Nenhuma dessas partes sabe mais do que precisa. O cartão exibe um registro; a rota decide quais registros mostrar; o recurso decide o que é um projeto válido. Mude o cartão e todas as listas de projetos acompanham; acrescente um campo ao recurso e o formulário do admin, a API e o histórico acompanham.

## Tão granular quanto o projeto precisar

Atômico significa granular, não um conjunto de regras. Uma página pode ser um único template com todo o seu HTML, e essa é uma página Nimbly perfeitamente boa. Extraia um template quando um pedaço de markup é compartilhado, ganha dados próprios ou deixa a página mais fácil de ler. Comece de cima para baixo pela página ou de baixo para cima pelos dados, e divida em blocos menores conforme o produto cresce.

O Nimbly não traz uma biblioteca de componentes prontos. Uma biblioteca de componentes decide de antemão como são os cartões, menus e formulários de um projeto; o Nimbly deixa isso para o projeto, para que cada um componha os blocos de que seu design e seus dados realmente precisam.

## Templates continuam sem lógica

Um template exibe valores, repete um template para uma lista e, no máximo, escolhe qual template vem a seguir. Decisões e cálculos ficam em [bibliotecas](/pt/docs/concepts/libraries/), onde podem ser lidos e testados num só lugar. Isso mantém o markup legível para designers e desenvolvedores de frontend, e mantém as regras de negócio fora da apresentação.

```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>
```

## Leia a seguir

- [Core e ext](/pt/docs/concepts/core-and-ext/): onde ficam os blocos e como um projeto substitui blocos do framework.
- [Templates](/pt/docs/concepts/templates/) e [Bibliotecas](/pt/docs/concepts/libraries/).
- [Módulos](/pt/docs/concepts/modules/) para empacotar uma funcionalidade.