Olá pessoal! Neste artigo, gostaria de dizer como você pode reduzir o tamanho dos arquivos javascript várias vezes graças a uma linguagem de modelo como hmpl.

A abordagem tecnológica que aparece no artigo não é nova, mas mesmo assim é popular o suficiente hoje para valer a pena falar sobre ela.

Reduzir o tamanho do arquivo javascript permitirá que as páginas carreguem mais rapidamente no cliente. Se considerarmos o SPA moderno, verifica-se que os tamanhos dos arquivos, mesmo levando em consideração todas as minificações, ainda são bastante grandes. É claro que, depois de carregar uma página uma vez, é mais fácil navegar nela, mas o primeiro tempo de carregamento pode variar de um segundo a, digamos, vários minutos com uma conexão de Internet ruim. Poucos clientes vão querer esperar tanto tempo.

Ao usar a maioria das estruturas e bibliotecas para criar UI, você precisa escrever muitos códigos padronizados. Cada símbolo ocupa espaço de memória. Vamos usar um clicker Vue.js:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

Um clicker super simples, mas mesmo assim requer uma boa quantidade de linhas de código em js, sem falar nos casos em que o aplicativo é mais ou menos grande.

Mesmo sem duas vírgulas, pode haver alguns bytes a menos

Isso não é um problema apenas do Vue, mas também de outros frameworks e bibliotecas que funcionam de maneira semelhante. Mas, esse não é o único ponto. Há um grande número de módulos adicionais que vão para eles, e para eles vai o mesmo número de módulos adicionais, e assim por diante até o "infinito".

Na verdade, uma das soluções para este problema foi proposta há muito tempo e é trivialmente simples - é preparar a UI no servidor e simplesmente carregá-la no cliente. Graças a isso, o tamanho dos arquivos do aplicativo pode ser reduzido significativamente. Essa é exatamente a ideia usada no HMPL.

No exemplo, também tentarei fazer um clicker, mas usando hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

Como você pode ver, a UI será a mesma, mas o tamanho do arquivo será um pouco menor.

Mesmo se você reduzir os arquivos e remover todos os espaços desnecessários dos modelos, talvez os arquivos fiquem no mesmo nível ou algo maior, mas isso é apenas uma suposição em pequenos exemplos. Se considerarmos aplicativos grandes, é óbvio que com essa abordagem haverá muito menos js.

Como pode ser visto no exemplo, a funcionalidade de cálculo e armazenamento do estado da aplicação pode, se desejado, ser movida para o servidor.

Como você pode ver no exemplo, a funcionalidade de cálculo e armazenamento do estado da aplicação pode, se desejado, ser movida para o servidor. É claro que se houver um grande número de usuários, isso simplesmente derrubará o servidor, mas o fato de a interface do usuário ser a mesma é importante.

Sim, claro, esse método não tem apenas essa desvantagem, mas também a capacidade de reutilização da UI, como armazenar em cache a UI para não carregar tudo cem vezes e muito mais. É importante uma alternativa que, se configurada corretamente, pode competir com a maioria das soluções modernas.

Muito obrigado a todos por lerem este artigo!

Lista de materiais:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html