Utilisez-vous Vue, React, Angular ou Svelte pour créer des applications? J'utilise, et si vous aussi, et je suis sûr que vous n'avez pas eu à écrire une application qui affiche des informations sans ces merveilleux outils.
Il était une fois, beaucoup d'entre nous écrivaient des applications Web uniquement à l'aide des outils intégrés au navigateur. Bien que les outils modernes nous aident à ignorer cela (et présentent de nombreux autres avantages), il est toujours utile de savoir ce qui se passe sous leur capot.
Lors de l'affichage d'une petite quantité d'informations, vous devrez peut-être utiliser HTML, JavaScript et le DOM sans aucun outil. J'ai récemment écrit quelques exemples de base qui illustrent les bases du développement Web et aident à l'apprentissage des principes DOM, HTML, JavaScript et du navigateur. Cette expérience m'a permis de comprendre que d'autres développeurs - peut-être vous - seraient heureux de se rappeler comment afficher des informations sans utiliser de bibliothèques.
C'est aussi amusant, utile et aide à comprendre la valeur des bibliothèques et des cadres modernes qui font tellement de travail pour nous.
Examinons différentes façons d'afficher des informations. Et gardez cette
documentation à portée de main!
Exemple d'application
Voici l'application que j'ai démontrée dans mon article. Il extrait une liste de caractères et les affiche lorsqu'un bouton est enfoncé. L'application affiche également une barre de progression lors de la récupération de la liste.
Les outils
Il est important de choisir les bons outils. Dans cet exercice, nous devons afficher des informations dans un navigateur à l'aide d'outils spécifiques disponibles pour nous tous. Aucun cadre. Pas de bibliothèques. Pas de problème.
Nous n'utiliserons que HTML,
TypeScript / JavaScript, CSS et le DOM (modèle d'objet document) basé sur un navigateur. Voyons comment le HTML peut être affiché.
Ici, vous pouvez lire comment écrire TypeScript en utilisant VS Code .Comme vous l'avez peut-être remarqué, j'utilise
TypeScript . Les fonctionnalités de son ensemble aident parfaitement à éviter les bugs, et je profite de sa capacité à se transposer dans n'importe quel format JavaScript. Si vous le souhaitez, vous pouvez utiliser du JavaScript pur. À l'avenir, j'écrirai un article sur la
façon de transposer TypeScript .
L'approche
Notre application affiche une barre de progression et une liste de personnages. Commençons par l'indicateur le plus simple - et considérons les différentes façons de l'afficher. Ensuite, nous irons à la liste et verrons comment la situation change si plus d'informations doivent être affichées.
Affichage de la barre de progression
Un indicateur doit être affiché pendant que l'application décide quels caractères doivent être répertoriés. Autrement dit, l'indicateur est d'abord invisible, puis l'utilisateur appuie sur le bouton de mise à jour, l'indicateur apparaît et disparaît à nouveau après l'affichage de la liste.
Toutes les méthodes décrites ci-dessous nécessitent le placement des éléments lors de leur création. Par exemple, un indicateur et une liste de caractères doivent se trouver quelque part. Une solution consiste à référencer un élément existant qui les contient déjà. Ou vous pouvez vous référer à un élément et le remplacer par de nouvelles données.
Indicateur d'affichage à l'aide de HTML interne
Créer du HTML et le mettre dans un autre élément est la solution la plus ancienne, mais ça marche! Sélectionnez l'élément dans lequel l'indicateur apparaît, puis
innerHtml propriété
innerHtml pour les nouvelles données. Veuillez noter que nous essayons également de rendre le code lisible en utilisant des chaînes de modèle pour s'étendre sur plusieurs lignes.
const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `;
C'est simple. C'est facile. Pourquoi ne peut-on pas en dire autant d'un code? Eh bien regardez à quelle vitesse cette pièce résout le problème!
Vous avez probablement déjà remarqué la vulnérabilité de ce code. Une erreur en HTML - et c'est tout! Nous avons un problème. Et est-ce vraiment lisible? Oui, c'est vrai, mais que se passe-t-il lorsque le HTML devient trop compliqué? Lorsque vous avez 20 lignes de code avec des classes, des attributs et des valeurs ... eh bien, vous obtenez le point. Oui, la solution n'est pas parfaite. Mais avec une petite quantité de HTML, cela fonctionne assez bien, et je recommande à tous les fans d'écrire tout sur une seule ligne pour le regarder.
Notez également comment le contenu en ligne peut affecter la lisibilité et la stabilité du code. Par exemple, si vous devez ajouter des informations à l'intérieur de l'indicateur pour un message de téléchargement changeant, vous pouvez le faire en utilisant un remplacement, par exemple,
${message} . Ce n'est ni bon ni mauvais, cela ajoute simplement de la commodité lors de la création de grandes chaînes de modèle.
Une dernière
innerHTML :
innerHTML peut affecter la vitesse d'affichage. Je ne me laisse pas emporter par une optimisation excessive, mais mieux vérifier les performances, car
innerHTML peut être la raison du rendu et des cycles de rendu dans le navigateur. Gardez à l'esprit.
Barre de progression à l'aide de l'API DOM
Vous pouvez réduire l'encombrement des longues lignes à l'aide de l'API DOM. Nous créons un élément, ajoutons les classes et les attributs nécessaires, définissons les valeurs, puis l'ajoutons au 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);
L'avantage est que vous devez écrire plus de code et vous fier à l'API. Autrement dit, par rapport à
innerHTML , les fautes de frappe augmentent la probabilité que le système signale une erreur qui aidera à trouver la cause du problème et à trouver une solution.
Et l'inconvénient est qu'il faut six lignes de code pour produire des informations affichées sous la forme d'une seule ligne à l'aide de
innerHTML .
Le code API DOM pour afficher l'indicateur est-il plus lisible que le code avec
innerHTML ? Je dirais. Mais n'est-ce pas la raison pour laquelle le code HTML de l'indicateur est très court et simple? C'est possible. S'il y avait 20 lignes, alors
innerHTML deviendrait beaucoup plus difficile à lire ... cependant, le code DOM API aussi.
Dessiner un indicateur à l'aide de modèles
Une autre façon consiste à créer une
<tmplate> et à l'utiliser pour simplifier la sortie des informations.
Créez
<tmplate> et attribuez-lui un ID. Le modèle ne sera pas affiché sur la page HTML, mais plus tard, vous pouvez créer un lien vers son contenu et l'utiliser. Ceci est très utile, vous pouvez écrire du HTML quand cela est approprié: sur une page HTML, en utilisant toutes les fonctionnalités utiles d'un éditeur HTML.
<template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template>
Le code peut ensuite prendre le modèle à l'aide de la méthode
document.importNode() de l'API DOM. Si nécessaire, le code peut manipuler le contenu du modèle. Ajoutez maintenant ce contenu au DOM pour afficher l'indicateur.
const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode);
Les modèles sont un bon moyen de créer du HTML; Je l'aime parce qu'il vous permet d'écrire du HTML là où cela a du sens, et vous pouvez faire moins avec du code TypeScript / JavaScript.
Puis-je importer des modèles à partir d'autres fichiers? Oui, mais avec l'aide d'autres bibliothèques. Cependant, nous les avons maintenant délibérément refusés. L'importation HTML est discutée depuis des années, mais comme vous pouvez le voir sur le site
Puis-je utiliser , tous les navigateurs modernes ne prennent pas en charge cette fonctionnalité.
Affichage de la liste des personnages
Voyons maintenant comment afficher une liste de personnages en utilisant les trois mêmes techniques. La différence avec le rendu d'un seul élément HTML
<prgress> et d'une liste de caractères est que maintenant nous:
- afficher plusieurs éléments HTML;
- ajouter plusieurs classes;
- ajouter une certaine séquence d'enfants;
- afficher pour chaque personnage un grand nombre des mêmes informations;
- afficher dynamiquement le texte à l'intérieur des éléments.
Afficher les caractères à l'aide de HTML interne
Lors de l'utilisation de
innerHTML il
innerHTML logique de commencer par un tableau de caractères et de l'itérer. De cette façon, vous pouvez créer une ligne à la fois. Les lignes ne différeront que par le nom et la description des caractères, qui peuvent être insérés à l'aide de lignes de modèle. Chaque caractère du tableau crée une balise
li , qui est associée à un tableau de chaînes. Enfin, le tableau de chaînes est converti en HTML pur, enveloppé dans
ul et affecté à
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;
Ça marche. Et c'est
peut -
être plus lisible. Et la performance? Est-il difficile de détecter (ou peut-être même?) Des fautes de frappe lors de la saisie de code? Pour vous juger. Mais ne tirons pas de conclusions avant d'avoir compris les autres techniques.
Mappage de caractères à l'aide de l'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); }
Affichage des caractères avec des modèles
La liste des caractères peut être affichée à l'aide de modèles. Pour cela, la même technique est utilisée que pour l'affichage de l'élément
<prgress> . Créez d'abord un modèle sur la page HTML. Ce HTML sera un peu plus compliqué qu'avec
<prgress> . Mais ce n'est pas un problème. C'est juste du HTML dans une page HTML, afin que nous puissions facilement corriger les erreurs et le formatage avec le bel éditeur
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>
Vous pouvez maintenant écrire du code pour créer une liste de caractères. Tout d'abord, créez
ul pour envelopper les lignes avec des caractères
li . Vous pouvez maintenant parcourir le tableau et utiliser la même méthode
document.importNode() pour appliquer le même modèle à chaque caractère. Notez que le motif peut être réutilisé pour créer chaque ligne. Il se transforme en dessin source, ce qui crée le nombre de lignes requis.
La liste des caractères doit contenir des noms et des descriptions. Autrement dit, il sera nécessaire de remplacer des valeurs spécifiques dans le modèle. Pour ce faire, il est conseillé d'identifier et de se référer en quelque sorte aux endroits où vous allez insérer ces valeurs. Dans notre exemple, pour obtenir un lien vers chaque caractère, nous utilisons la
querySelector('your-selector') , après quoi nous donnons un nom et une description.
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); }
Ce modèle est-il plus facile que d'autres techniques? Je trouve cela
relativement facile. De mon point de vue, le code est construit sur un modèle qui simplifie la lecture et la lisibilité, et protège également mieux contre les erreurs.
Résumé
Je n'ai pas mentionné comment les frameworks et bibliothèques populaires affichent les informations. Vue, React, Angular et Svelte rendent la tâche beaucoup plus facile et nécessitent moins de code à écrire. Ils ont également d'autres avantages. Dans cet article, nous n'avons examiné que des techniques relativement simples pour afficher des informations à l'aide du DOM et du HTML pur, ainsi que de TypeScript / JavaScript.
Où en sommes-nous?
J'espère que vous pouvez maintenant imaginer comment afficher des informations sans utiliser de bibliothèques. Y a-t-il d'autres moyens? Bien sûr. Puis-je écrire des fonctions qui simplifient le code et permettent de l'utiliser à plusieurs reprises? Bien sûr. Mais un jour, vous voudrez expérimenter avec l'un de ces excellents outils comme Vue, React, Angular ou Svelte.
Ces cadres font beaucoup de travail pour nous. Vous pouvez vous rappeler comment générer des informations en utilisant du code DOM pur avec JavaScript ou jQuery. Ou comment le faire avec des outils comme le guidon ou la moustache. Ou peut-être que vous ne sortez jamais d'informations vers le DOM sans l'aide d'un framework. Vous pouvez imaginer quels processus se déroulent sous le capot des bibliothèques et des cadres modernes lorsqu'ils affichent des informations pour vous à l'écran.
Il est bon de savoir ce que vous pouvez faire avec du HTML pur, du TypeScript / JavaScript et du CSS, même si vous utilisez un framework qui vous sauve tout cela.
Quelle que soit votre expérience, j'espère que cette brève excursion dans certaines des techniques d'affichage des informations vous a été utile.