Templates e a camada de visão
A sintaxe de template do Kiln, ao lado de EJS e Handlebars — e por que ela é deliberadamente pequena.
EJS, Handlebars e Jinja resolvem o mesmo problema: montar HTML a partir de dado, sem concatenar texto à mão. A diferença entre eles é quanta linguagem cabe dentro do template — e essa escolha decide a manutenção do projeto inteiro.
As quatro construções#
<h1>{{titulo}}</h1>
{{#produtos}}<article>{{nome}} — {{preco}}</article>{{/produtos}}
{{^produtos}}<p>Nada na forja.</p>{{/produtos}}
<footer>{{&html_bruto}}</footer>| Forma | O que faz |
|---|---|
{{x}} | escreve, escapando HTML |
{{&x}} | escreve sem escapar |
{{#lista}}…{{/lista}} | repete para cada item |
{{^lista}}…{{/lista}} | mostra quando a lista está vazia |
server loja at "0.0.0.0" on 8000:
views "views"
route GET "/":
render "loja" with {"titulo": "Forja", "produtos": catalogo()}Ao lado de EJS e Handlebars#
| EJS | Handlebars | Kiln | |
|---|---|---|---|
| código no template | JavaScript inteiro | helpers registrados | nenhum |
| escapar por padrão | não (<%= %> escapa, <%- %> não) | sim | sim |
| condicional | if do JS | {{#if}} | só "vazio ou não" |
| laço | for do JS | {{#each}} | {{#lista}} |
| chamar função | sim | helpers | não |
| parcial / include | include() | {{> parcial}} | compor no .df |
O que fazer quando o template "precisa" de lógica#
A resposta é sempre a mesma: decida antes, e passe o resultado pronto.
// em vez de tentar formatar no template:
action para_a_tela(produtos):
yield [{"nome": p.nome,
"preco": $"R$ {round(p.preco, 2)}",
"esgotado": p.estoque is 0}
cycle p in produtos]
route GET "/":
render "loja" with {"titulo": "Forja", "produtos": para_a_tela(catalogo())}O ganho não é estético: para_a_tela é uma ação comum, e testá-la não exige servidor, socket nem HTML.
Escapar é o padrão, e isso é segurança#
{{x}} escapa. É a diferença entre um nome de produto com <script> virar texto na tela ou virar código no navegador de quem visita. O {{&x}} existe para o caso legítimo — um trecho que você mesmo gerou — e a forma mais longa é de propósito: o inseguro tem de ser escrito de caso pensado.
A outra camada de visão#
Quando a página é o programa — um painel, uma ferramenta interna, um relatório interativo — a resposta não é template: é a Vitrine, onde o .df de cima a baixo vira a página, sem HTML nenhum.