Vanilla JavaScript y HTML. Sin marcos. No hay bibliotecas No hay problema

¿Estás usando Vue, React, Angular o Svelte para crear aplicaciones? Yo uso, y si tú también, y estoy seguro de que no has tenido que escribir una aplicación que muestre información sin estas maravillosas herramientas.

Érase una vez, muchos de nosotros escribimos aplicaciones web solo usando las herramientas integradas en el navegador. Aunque las herramientas modernas nos ayudan a ignorar esto (y tienen muchas otras ventajas), sigue siendo útil saber qué está pasando bajo su capucha.

Al mostrar una pequeña cantidad de información, es posible que deba usar HTML, JavaScript y DOM sin ninguna herramienta. Recientemente escribí algunos ejemplos básicos que ilustran los conceptos básicos del desarrollo web y ayudan a aprender los principios de DOM, HTML, JavaScript y navegador. Esta experiencia me permitió comprender que otros desarrolladores, tal vez usted, estarían felices de recordar cómo mostrar información sin usar bibliotecas.

También es divertido, útil y ayuda a comprender el valor de las bibliotecas y marcos modernos que hacen tanto trabajo por nosotros.

Veamos diferentes formas de mostrar información. ¡Y tenga esta documentación a mano!

Aplicación de muestra

Aquí está la aplicación que demostré en mi artículo. Extrae una lista de caracteres y los muestra cuando se presiona un botón. La aplicación también muestra una barra de progreso al recuperar la lista.

Las herramientas

Es importante elegir las herramientas adecuadas. En este ejercicio, necesitamos mostrar información en un navegador usando herramientas específicas que están disponibles para todos nosotros. Sin marcos. No hay bibliotecas No hay problema

Utilizaremos solo HTML, TypeScript / JavaScript, CSS y el DOM (modelo de objeto de documento) basado en navegador. Veamos cómo se puede mostrar HTML.

Aquí puede leer acerca de cómo escribir TypeScript usando VS Code .

Como habrás notado, estoy usando TypeScript . Las características de su conjunto ayudan perfectamente a evitar errores, y aprovecho su capacidad para transponer a cualquier formato JavaScript. Si lo desea, puede usar JavaScript puro. En el futuro escribiré un artículo sobre cómo transponer TypeScript .

El enfoque

Nuestra aplicación muestra una barra de progreso y una lista de personajes. Comencemos con el indicador más simple y consideremos las diferentes formas de mostrarlo. Luego, iremos a la lista y veremos cómo cambia la situación si se necesita mostrar más información.

Pantalla de barra de progreso

Se debe mostrar un indicador mientras la aplicación decide qué caracteres deben aparecer en la lista. Es decir, al principio el indicador es invisible, luego el usuario presiona el botón de actualización, el indicador aparece y desaparece nuevamente después de que se muestra la lista.

Todos los métodos descritos a continuación requieren la colocación de elementos a medida que se crean. Por ejemplo, un indicador y una lista de caracteres deben ubicarse en algún lugar. Una solución es hacer referencia a un elemento existente que ya los contiene. O puede referirse a un elemento y reemplazarlo con nuevos datos.

Indicador de pantalla usando HTML interno

Crear HTML y ponerlo dentro de otro elemento es la solución más antigua, ¡pero funciona! Seleccione el elemento en el que aparece el indicador y luego innerHtml propiedad innerHtml para los nuevos datos. Tenga en cuenta que también estamos tratando de hacer que el código sea legible utilizando cadenas de patrones para abarcar varias líneas.

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

Simple Fácil ¿Por qué no se puede decir esto sobre ningún código? ¡Mira qué tan rápido esta pieza resuelve el problema!

Probablemente ya haya notado cuán vulnerable es este código. Un error en HTML, ¡y eso es todo! Tenemos un problema ¿Y es realmente legible? Sí, lo es, pero ¿qué sucede cuando el HTML se vuelve demasiado complicado? Cuando tienes 20 líneas de código con clases, atributos y valores ... bueno, entiendes el punto. Sí, la solución no es perfecta. Pero con una pequeña cantidad de HTML, funciona bastante bien, y recomiendo que todos los fanáticos escriban todo en una línea para mirarlo.

También tenga en cuenta cómo el contenido en línea puede afectar la legibilidad y la estabilidad del código. Por ejemplo, si necesita agregar información dentro del indicador para un mensaje de descarga cambiante, puede hacerlo utilizando un reemplazo, por ejemplo, ${message} . Esto no es ni bueno ni malo, solo agrega conveniencia al crear cadenas de plantillas grandes.

Una última innerHTML : innerHTML puede afectar la velocidad de visualización. No me dejo llevar por la optimización excesiva, pero mejor verifique el rendimiento, porque innerHTML puede ser la razón de la representación y los ciclos de representación en el navegador. Tener en cuenta.

Barra de progreso usando la API DOM

Puede reducir el volumen de las largas colas utilizando la API DOM. Creamos un elemento, agregamos las clases y atributos necesarios, establecemos los valores y luego lo agregamos al 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); 

La ventaja es que necesita escribir más código y confiar en la API. Es decir, en comparación con innerHTML , los errores tipográficos aumentan la probabilidad de que el sistema informe un error que ayudará a encontrar la causa del problema y encuentre una solución.

Y la desventaja es que se necesitan seis líneas de código para generar información que se muestra como una sola línea usando innerHTML .

¿El código de la API DOM para mostrar el indicador es más legible que el código con innerHTML ? Yo discutiría Pero, ¿no es esta la razón por la que el código HTML del indicador es muy corto y simple? Posiblemente Si hubiera 20 líneas, innerHTML sería mucho más difícil de leer ... sin embargo, también el código DOM API.

Dibujar un indicador usando plantillas

Otra forma es crear una <tmplate> y usarla para simplificar la salida de información.

Cree <tmplate> y asígnele una ID. La plantilla no se mostrará en la página HTML, pero luego puede vincular a su contenido y usarla. Esto es muy útil, puede escribir HTML cuando sea apropiado: en una página HTML, utilizando todas las funciones útiles de un editor HTML.

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

El código puede tomar la plantilla usando el método document.importNode() de la API DOM. Según sea necesario, el código puede manipular el contenido de la plantilla. Ahora agregue este contenido al DOM para mostrar el 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); 

Las plantillas son una buena forma de construir HTML; Me gusta porque te permite escribir HTML donde tiene sentido, y puedes hacer menos con el código TypeScript / JavaScript.

¿Puedo importar plantillas de otros archivos? Sí, pero con la ayuda de otras bibliotecas. Sin embargo, ahora los hemos rechazado deliberadamente. La importación de HTML se ha discutido durante años, pero como puede ver en el sitio Can I Use , no todos los navegadores modernos admiten esta función.

Visualización de la lista de personajes

Ahora hablemos sobre cómo puede mostrar una lista de caracteres usando las mismas tres técnicas. La diferencia de representar un solo elemento HTML <prgress> y una lista de caracteres es que ahora nosotros:

• mostrar varios elementos HTML;
  
• agregue varias clases;
  
• agregue una cierta secuencia de niños;
  
• mostrar para cada personaje mucha información similar;
  
• Muestra dinámicamente el texto dentro de los elementos.
  

Mostrar caracteres usando HTML interno

Cuando se utiliza innerHTML , innerHTML sentido comenzar con una serie de caracteres e iterarlo. De esta manera puede crear una línea a la vez. Las líneas solo diferirán en los nombres y descripciones de los caracteres, que se pueden insertar usando líneas de plantilla. Cada carácter en la matriz crea una etiqueta li , que está asociada con una matriz de cadena. Finalmente, la matriz de cadenas se convierte a HTML puro, se envuelve en ul y se asigna 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; 

Funciona Y quizás esto sea más legible. ¿Qué pasa con el rendimiento? ¿Es difícil detectar (o incluso posiblemente) errores tipográficos al escribir código? Para juzgarte. Pero no saquemos conclusiones hasta que descubramos las otras técnicas.

Mapeo de caracteres usando la 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); } 

Visualización de caracteres con plantillas

La lista de caracteres se puede mostrar usando plantillas. Para esto, se utiliza la misma técnica que para mostrar el elemento <prgress> . Primero, cree una plantilla en la página HTML. Este HTML será un poco más complicado que con <prgress> . Pero esto no es un problema. Es solo HTML dentro de una página HTML, por lo que podemos corregir fácilmente los errores y el formato con el hermoso editor VS Code .

 <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> 

Ahora puede escribir código para crear una lista de caracteres. Primero, cree ul para ajustar las líneas con caracteres li . Ahora puede pasar por la matriz y usar el mismo método document.importNode() para aplicar la misma plantilla para cada carácter. Tenga en cuenta que el patrón se puede reutilizar para crear cada fila. Se convierte en un dibujo de origen, que crea el número requerido de líneas.

La lista de caracteres debe contener nombres y descripciones. Es decir, será necesario reemplazar valores específicos dentro de la plantilla. Para hacer esto, es recomendable identificar y referirse de alguna manera a los lugares donde insertará estos valores. En nuestro ejemplo, para obtener un enlace a cada carácter, utilizamos el querySelector('your-selector') , después del cual le damos un nombre y una descripción.

 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); } 

¿Es esta plantilla más fácil que otras técnicas? Lo encuentro relativamente fácil. Desde mi punto de vista, el código se basa en una plantilla que simplifica la reproducción y la legibilidad, y también protege mejor contra errores.

Resumen

No mencioné cómo los marcos y bibliotecas populares muestran información. Vue, React, Angular y Svelte hacen la tarea mucho más fácil y requieren menos código para escribir. También tienen otras ventajas. En este artículo, examinamos solo técnicas relativamente simples para mostrar información usando DOM y HTML puro, así como TypeScript / JavaScript.

¿A qué hemos llegado?

Espero que ahora puedas imaginar cómo mostrar información sin usar bibliotecas. ¿Hay alguna otra forma? Por supuesto ¿Puedo escribir funciones que simplifiquen el código y permitan que se use repetidamente? Por supuesto Pero un día querrás experimentar con una de estas herramientas tan buenas como Vue, React, Angular o Svelte.

Estos marcos hacen mucho trabajo por nosotros. Puede recordar cómo generar información utilizando código DOM puro con JavaScript o jQuery. O cómo hacer esto con herramientas como manillar o bigote. O tal vez nunca envíe información al DOM sin la ayuda de un marco. Puede imaginar qué procesos se llevan a cabo bajo el capó de bibliotecas y marcos modernos cuando muestran información para usted en la pantalla.

Es bueno saber qué puede hacer con HTML puro, TypeScript / JavaScript y CSS, incluso si usa un marco que le ahorre todo eso.

Independientemente de su experiencia, espero que esta breve excursión a algunas de las técnicas para mostrar información le haya sido útil.