Recentemente me deparei com esse tema, mais precisamente com a ferramenta Hugo, que basicamente constrói sites a partir de temas e APIs lembrando muito Ruby on Rails.
Fiz um teste no build de uma aplicação que usa um JSON estático para listagem de conteúdo, exemplo:
products.json
[{
"id": "1",
"name": "Klingon dictionary",
"price": 34.87,
"image": "/images/dictionary.jpg",
"description": "nIvbogh tlhIngan dictionary qaStaHvIS veng SuvwI'",
"url": "http://snipcart-hugo.netlify.com"
}, {
"id": "2",
"name": "Captain Kirk Phaser",
"description": "The Original Series Phaser comprises a small, hand-held Type I Phaser, which slots into a larger Type II Phaser body with a removable pistol-grip.",
"price": 145.98,
"image": "/images/phaser.png",
"url": "http://snipcart-hugo.netlify.com"
}]
HTML
<div class="col s6">
<h2 class="header">{{ .name }}</h2>
<div class="card horizontal">
<div class="card-image">
<img src="{{ .image }}">
</div>
<div class="card-stacked">
<div class="card-content">
<p>{{ .description }}</p>
</div>
<div class="card-action">
<button
class="snipcart-add-item waves-effect waves-light btn"
data-item-id="{{ .id }}"
data-item-name="{{ .name }}"
data-item-price="{{ .price }}"
data-item-url="{{ .url }}">
<i class="material-icons right">shopping_cart</i>
Add to cart
</button>
</div>
</div>
</div>
</div>
Ao consultar as requisições, o arquivo products.json
não foi requisitado no client
deixando claro a segurança em trabalhar com JSON diretamente no DOM
.
O que é e como funciona esse tipo de ferramenta?