6

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?

2
  • 4
    É uma coisa bem legal, tem diversas ferramentas semelhantes cada uma com suas características. Muito site não precisa ser dinâmico, só precisa de uma estrutura de geração. Porque gerar uma página a cada requisição se ela "nunca" muda? Então você pega os dados de algum lugar, um banco de dados, arquivo, etc. e gera o HTML estático e serve isto de forma performática. Simples e eficiente. Pena que muita gente não enxerga essas coisas, só seguem fórmulas. Estou fazendo um blog que funcionará assim.
    – Maniero
    22/09/2017 às 13:43
  • Muito interessante esse novo olhar para web, quando ficar pronto o blog linka aqui :), a propósito acho melhor responder a pergunta, pois dificilmente alguém o fará. 22/09/2017 às 14:54

1 Resposta 1

5

Existe uma quantidade de enorme de ferramentas assim, alguns são CMS bem sofisticados, com a diferença que a página a ser visualizada não ser criada a cada requisição como é comum.

Pensa bem, se uma página praticamente não muda, não é entregue algo diferente para cada usuário, para cada acesso, para que criar esta página dinamicamente? O jeito que se faz na maioria dos CMSs é insano.

Você pode ter toda infraestrutura de CMS, um banco dedados, arquivos de dados, e gerar a página toda vez que ela é alterada de alguma forma. Então você muda a necessidade de processamento do momento de leitura da página para o momento que há escrita nela, o que é muito raro, muitas páginas nunca receberão alterações.

A geração ocorre praticamente da mesma forma que todo mundo conhece, mas em vez de já mandar para o servidor entregar para uma requisição ele grava em um arquivo e/ou mantém na memória para que seja entregue pronta toda vez que há uma requisição. Na verdade na maioria dos casos nem precisa ter uma aplicação servindo isso, pode gerar o HTML e deixar lá como uma página estática, a diferença é que existe um backend para sua geração, não foi feito na mão. E tem um dashboard para administração

É muito simples fazer isso, muito eficiente e costuma ser bem mais seguro.

O pessoal não usa mais isso porque não conhece a técnica, que é até ingênua, não tem nada de avançado. É que as pessoas não pensam para fazer, elas seguem o que leram em algum lugar e não criam nada, não procuram por soluções novas, não pesam as alternativas, não são engenheiras.

Nesse caso existe esse JSON em algum lugar com os dados necessários para a geração da página

Mas só com esse trecho não ficou claro se é isso que está ocorrendo, parece que há um requisição de dados JSON em uma página estática e que os dados são carregados dinamicamente, pra isso precisa de algum script que faça essa carga. Pode ser que isso seja mais um SPA do que conteúdo estático.

1
  • Entendi, no exemplo os dados json são requisitados por meio do comando {{ $products := getJSON "/data/products.json" }}, e sim, se trata de uma SPA, porém estática, não sei se isso é possível pois como disse, sou novato nesse assunto, o que eu realmente não entendi é que se caso eu queira alguma alteração ou adicionar alguma seção no site, terei de fazer somente através do script? 23/09/2017 às 22:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .