JavaScript e HTML de baunilha. Sem estruturas. Sem bibliotecas. Não tem problema

Você está usando o Vue, React, Angular ou Svelte para criar aplicativos? Eu uso e, se você também, e tenho certeza de que não precisou escrever um aplicativo que exiba informações sem essas ferramentas maravilhosas.

Era uma vez, muitos de nós escrevíamos aplicativos da Web usando apenas as ferramentas que foram incorporadas ao navegador. Embora as ferramentas modernas nos ajudem a ignorar isso (e tenha muitas outras vantagens), ainda é útil saber o que está acontecendo sob o capô.

Ao exibir uma pequena quantidade de informações, pode ser necessário usar HTML, JavaScript e o DOM sem nenhuma ferramenta. Recentemente, escrevi alguns exemplos básicos que ilustram os conceitos básicos de desenvolvimento web e ajudam a aprender os princípios DOM, HTML, JavaScript e navegador. Essa experiência me permitiu entender que outros desenvolvedores - talvez você - ficariam felizes em lembrar como exibir informações sem usar bibliotecas.

Também é divertido, útil e ajuda a entender o valor das bibliotecas e estruturas modernas que trabalham tanto para nós.

Vejamos maneiras diferentes de exibir informações. E mantenha esta documentação à mão!

Aplicativo de amostra

Aqui está o aplicativo que demonstrei no meu artigo. Extrai uma lista de caracteres e os exibe quando um botão é pressionado. O aplicativo também exibe uma barra de progresso ao recuperar a lista.

As ferramentas

É importante escolher as ferramentas certas. Neste exercício, precisamos exibir informações em um navegador usando ferramentas específicas que estão disponíveis para todos nós. Sem estruturas. Sem bibliotecas. Não tem problema

Usaremos apenas HTML, TypeScript / JavaScript, CSS e o DOM (modelo de objeto de documento) baseado em navegador. Vamos ver como o HTML pode ser exibido.

Aqui você pode ler sobre como escrever TypeScript usando o VS Code .

Como você deve ter notado, estou usando o TypeScript . Os recursos de seu conjunto ajudam perfeitamente a evitar bugs, e aproveito sua capacidade de transpor para qualquer formato JavaScript. Se desejar, você pode usar JavaScript puro. No futuro, escreverei um artigo sobre como transpor o TypeScript .

A abordagem

Nosso aplicativo exibe uma barra de progresso e uma lista de caracteres. Vamos começar com o indicador mais simples - e considerar as diferentes maneiras de exibi-lo. Em seguida, iremos à lista e veremos como a situação muda se mais informações precisarem ser exibidas.

Exibição da barra de progresso

Um indicador deve ser exibido enquanto o aplicativo decide quais caracteres devem ser listados. Ou seja, primeiro o indicador fica invisível, o usuário pressiona o botão de atualização, o indicador aparece e desaparece novamente depois que a lista é exibida.

Todos os métodos descritos abaixo requerem a colocação de elementos à medida que são criados. Por exemplo, um indicador e uma lista de caracteres devem estar localizados em algum lugar. Uma solução é fazer referência a um elemento existente que já os contém. Ou você pode consultar um elemento e substituí-lo por novos dados.

Exibir indicador usando HTML interno

Criar HTML e colocá-lo dentro de outro elemento é a solução mais antiga, mas funciona! Selecione o elemento em que o indicador aparece e innerHtml propriedade innerHtml para os novos dados. Observe que também estamos tentando tornar o código legível usando seqüências de caracteres padrão para abranger várias linhas.

 const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `; 

Simples. Fácil. Por que isso não pode ser dito sobre qualquer código? Bem, veja quão rápido esta peça resolve o problema!

Você provavelmente já percebeu o quão vulnerável é esse código. Um erro no HTML - e é isso! Nós temos um problema. E é realmente legível? Sim, é, mas o que acontece quando o HTML fica muito complicado? Quando você tem 20 linhas de código com classes, atributos e valores ... bem, você entendeu. Sim, a solução não é perfeita. Mas com uma pequena quantidade de HTML, ele funciona muito bem, e eu recomendo que todos os fãs escrevam tudo em uma linha para ver.

Observe também como o conteúdo embutido pode afetar a legibilidade e a estabilidade do código. Por exemplo, se você precisar adicionar informações dentro do indicador para uma mensagem de download alterada, poderá fazer isso usando uma substituição, por exemplo, ${message} . Isso não é bom nem ruim, apenas adiciona conveniência ao criar grandes seqüências de modelos.

Uma última innerHTML : innerHTML pode afetar a velocidade de exibição. Não me empolguei com a otimização excessiva, mas verifique melhor o desempenho, porque innerHTML pode ser o motivo para a renderização e ciclos de renderização no navegador. Tenha em mente.

Barra de progresso usando a API DOM

Você pode reduzir o volume de linhas longas usando a API DOM. Criamos um elemento, adicionamos as classes e atributos necessários, definimos os valores e, em seguida, adicionamos ao DOM.

 const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

A vantagem é que você precisa escrever mais código e confiar na API. Ou seja, comparado ao innerHTML , erros de digitação aumentam a probabilidade de o sistema relatar um erro que ajudará a encontrar a causa do problema e a encontrar uma solução.

E a desvantagem é que são necessárias seis linhas de código para gerar informações que são exibidas como uma única linha usando innerHTML .

O código da API do DOM para exibir o indicador é mais legível que o código com innerHTML ? Eu argumentaria. Mas não é esse o motivo pelo qual o código HTML do indicador é muito curto e simples? Possivelmente. Se houvesse 20 linhas, o innerHTML se tornaria muito mais difícil de ler ... no entanto, o código da API DOM também.

Desenhando um indicador usando modelos

Outra maneira é criar uma <tmplate> e usá-la para simplificar a saída de informações.

Crie <tmplate> e atribua um ID a ele. O modelo não será exibido na página HTML, mas posteriormente você poderá vincular seu conteúdo e usá-lo. Isso é muito útil, você pode escrever HTML sempre que apropriado: em uma página HTML, usando todos os recursos úteis de um editor de HTML.

 <template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template> 

O código pode levar o modelo usando o método document.importNode() da API do DOM. Conforme necessário, o código pode manipular o conteúdo do modelo. Agora adicione este conteúdo ao DOM para exibir o indicador.

 const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

Modelos são uma boa maneira de criar HTML; Gosto porque permite escrever HTML onde faz sentido e você pode fazer menos com o código TypeScript / JavaScript.

Posso importar modelos de outros arquivos? Sim, mas com a ajuda de outras bibliotecas. No entanto, agora nós os recusamos deliberadamente. A importação de HTML é discutida há anos, mas como você pode ver no site Can I Use , nem todos os navegadores modernos oferecem suporte a esse recurso.

Exibição da lista de caracteres

Agora vamos falar sobre como você pode exibir uma lista de caracteres usando as mesmas três técnicas. A diferença de renderizar um único elemento HTML <prgress> e uma lista de caracteres é que agora nós:

• exibir vários elementos HTML;
  
• adicione várias classes;
  
• adicione uma certa sequência de filhos;
  
• exibir para cada personagem muitas das mesmas informações;
  
• exibir texto dinamicamente dentro dos elementos.
  

Exibir caracteres usando HTML interno

Ao usar o innerHTML , innerHTML sentido começar com uma matriz de caracteres e iterá-lo. Dessa forma, você pode criar uma linha de cada vez. As linhas diferem apenas nos nomes e descrições de caracteres, que podem ser inseridos usando linhas de modelo. Cada caractere na matriz cria uma tag li , que está associada a uma matriz de string. Finalmente, a matriz de strings é convertida em HTML puro, envolvida em ul e atribuída a innerHTML .

 function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html; 

Isso funciona. E talvez isso seja mais legível. E o desempenho? É difícil detectar (ou possivelmente?) Erros de digitação ao digitar código? Para julgar você. Mas não vamos tirar conclusões até descobrirmos as outras técnicas.

Mapeamento de caracteres usando a API DOM

 function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); } 

Exibição de caracteres com modelos

A lista de caracteres pode ser exibida usando modelos. Para isso, a mesma técnica é usada como para exibir o elemento <prgress> . Primeiro, crie um modelo na página HTML. Este HTML será um pouco mais complicado do que com <prgress> . Mas isso não é um problema. É apenas HTML dentro de uma página HTML, para que possamos corrigir facilmente erros e formatação com o belo editor de código VS.

 <template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template> 

Agora você pode escrever um código para criar uma lista de caracteres. Primeiro, crie ul para quebrar as linhas com caracteres li . Agora você pode percorrer a matriz e usar o mesmo método document.importNode() para aplicar o mesmo modelo para cada caractere. Observe que o padrão pode ser reutilizado para criar cada linha. Ele se transforma em um desenho de origem, que cria o número necessário de linhas.

A lista de caracteres deve conter nomes e descrições. Ou seja, será necessário substituir valores específicos dentro do modelo. Para fazer isso, é aconselhável identificar e se referir de alguma forma aos locais onde você inserirá esses valores. Em nosso exemplo, para obter um link para cada caractere, usamos o querySelector('your-selector') , após o qual fornecemos um nome e uma descrição.

 function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); } 

Este modelo é mais fácil do que outras técnicas? Eu acho isso relativamente fácil. Do meu ponto de vista, o código é construído em um modelo que simplifica a reprodução e a legibilidade e também protege melhor contra erros.

Sumário

Eu não mencionei como estruturas e bibliotecas populares exibem informações. Vue, React, Angular e Svelte facilitam muito a tarefa e exigem menos código para escrever. Eles também têm outras vantagens. Neste artigo, examinamos apenas técnicas relativamente simples para exibir informações usando o DOM e HTML puro, bem como TypeScript / JavaScript.

A que chegamos?

Espero que agora você possa imaginar como exibir informações sem usar bibliotecas. Existem outras maneiras? Claro. Posso escrever funções que simplificam o código e permitem que ele seja usado repetidamente? Claro. Mas um dia você desejará experimentar uma dessas ferramentas excelentes, como Vue, React, Angular ou Svelte.

Essas estruturas fazem muito trabalho para nós. Você pode se lembrar de como gerar informações usando o código DOM puro com JavaScript ou jQuery. Ou como fazer isso com ferramentas como guidão ou bigode. Ou talvez você nunca envie informações para o DOM sem a ajuda de uma estrutura. Você pode imaginar quais processos estão ocorrendo sob o capô das bibliotecas e estruturas modernas quando elas exibem informações para você na tela.

É bom saber o que você pode fazer com HTML puro, TypeScript / JavaScript e CSS, mesmo se você usar uma estrutura que economize tudo isso.

Independentemente da sua experiência, espero que esta breve excursão a algumas das técnicas para exibir informações tenha sido útil para você.