Partager via

Technologies Web courantes côté client

Conseil / Astuce

Ce contenu est un extrait du livre électronique, architecte d’applications web modernes avec ASP.NET Core et Azure, disponible sur .NET Docs ou en tant que PDF téléchargeable gratuitement qui peut être lu hors connexion.

Télécharger le PDF

Miniature de la couverture de l'eBook: Concevez des applications web modernes avec ASP.NET Core et Azure.

« Les sites web devraient être bons de l’intérieur et de l’extérieur. » - Paul Cookson

ASP.NET Applications principales sont des applications web et s’appuient généralement sur des technologies web côté client telles que HTML, CSS et JavaScript. En séparant le contenu de la page (html) de sa mise en page et de son style (CSS) et de son comportement (via JavaScript), les applications web complexes peuvent tirer parti du principe séparation des préoccupations. Les modifications futures apportées à la structure, à la conception ou au comportement de l’application peuvent être apportées plus facilement lorsque ces préoccupations ne sont pas entrelacées.

Bien que le HTML et le CSS soient relativement stables, JavaScript évolue à une vitesse fulgurante grâce aux infrastructures d'application et aux utilitaires que les développeurs utilisent pour créer des applications web. Ce chapitre examine quelques façons dont JavaScript est utilisé par les développeurs web et fournit une vue d’ensemble générale des bibliothèques côté client Angular et React.

Remarque

Blazor offre une alternative aux frameworks JavaScript pour la création d’interfaces utilisateur clientes riches et interactives.

HTML

HTML est le langage de balisage standard utilisé pour créer des pages web et des applications web. Ses éléments forment les blocs de construction de pages, représentant du texte mis en forme, des images, des entrées de formulaire et d’autres structures. Lorsqu’un navigateur envoie une requête à une URL, qu’il récupère une page ou une application, la première chose retournée est un document HTML. Ce document HTML peut référencer ou inclure des informations supplémentaires sur son apparence et sa disposition sous la forme de CSS ou de comportement sous la forme de JavaScript.

CSS

CSS (Feuilles de style en cascade) est utilisé pour contrôler l’apparence et la disposition des éléments HTML. Les styles CSS peuvent être appliqués directement à un élément HTML, défini séparément sur la même page ou défini dans un fichier distinct et référencé par la page. Les styles sont organisés en cascade selon la manière dont ils sont utilisés pour sélectionner un élément HTML donné. Par exemple, un style peut s’appliquer à un document entier, mais il est remplacé par un style appliqué à un élément particulier. De même, un style spécifique à un élément serait substitué par un style appliqué à une classe CSS appliquée à l’élément, qui à son tour serait substitué par un style ciblant une instance spécifique de cet élément (via son ID). Figure 6-1

Règles de spécificité CSS

Figure 6-1. Règles de spécificité CSS, dans l’ordre.

Il est préférable de conserver des styles dans leurs propres fichiers de feuille de style distincts et d’utiliser la cascade basée sur la sélection pour implémenter des styles cohérents et réutilisables au sein de l’application. Le placement de règles de style au sein du code HTML doit être évité et l’application de styles à des éléments individuels spécifiques (plutôt que des classes entières d’éléments ou d’éléments ayant une classe CSS particulière appliquée à ces éléments) doit être l’exception, et non la règle.

Préprocesseurs CSS

Les feuilles de style CSS ne prennent pas en charge la logique conditionnelle, les variables et d’autres fonctionnalités du langage de programmation. Par conséquent, les feuilles de style volumineuses incluent souvent un peu de répétition, car la même couleur, police ou autre paramètre est appliquée à de nombreuses variantes différentes d’éléments HTML et de classes CSS. Les préprocesseurs CSS peuvent aider vos feuilles de style à suivre le principe DRY en ajoutant la prise en charge des variables et de la logique.

Les préprocesseurs CSS les plus populaires sont Sass et LESS. Les deux étendent CSS et sont rétrocompatibles avec celui-ci, ce qui signifie qu’un fichier CSS brut est un fichier Sass ou LESS valide. Sass est basé sur Ruby et LESS est basé sur JavaScript, et les deux s’exécutent généralement dans le cadre de votre processus de développement local. Les deux disposent d’outils en ligne de commande, ainsi que de la prise en charge intégrée de Visual Studio pour les exécuter à l’aide de tâches Gulp ou Grunt.

JavaScript

JavaScript est un langage de programmation dynamique interprété qui a été normalisé dans la spécification du langage ECMAScript. Il s’agit du langage de programmation du web. Comme CSS, JavaScript peut être défini en tant qu’attributs dans des éléments HTML, en tant que blocs de script dans une page ou dans des fichiers distincts. Tout comme CSS, il est recommandé d’organiser JavaScript en fichiers distincts, de le séparer autant que possible du code HTML trouvé sur des pages web individuelles ou des vues d’application.

Lorsque vous utilisez JavaScript dans votre application web, il existe quelques tâches que vous devrez généralement effectuer :

  • Sélection d’un élément HTML et récupération et/ou mise à jour de sa valeur.

  • Interrogation d’une API web pour les données.

  • Envoi d’une commande à une API web (et réponse à un rappel avec son résultat).

  • Exécution de la validation.

Vous pouvez effectuer toutes ces tâches avec JavaScript seul, mais de nombreuses bibliothèques existent pour faciliter ces tâches. L’une des premières et les plus réussies de ces bibliothèques est jQuery, qui continue d’être un choix populaire pour simplifier ces tâches sur les pages web. Pour les applications monopage (SPA), jQuery ne fournit pas de nombreuses fonctionnalités souhaitées que Angular et React offrent.

Anciennes applications web avec jQuery

Bien qu’ancienne par les normes du framework JavaScript, jQuery continue d’être une bibliothèque couramment utilisée pour utiliser HTML/CSS et créer des applications qui effectuent des appels AJAX aux API web. Toutefois, jQuery fonctionne au niveau du modèle objet du document du navigateur (DOM), et par défaut, offre uniquement un modèle impératif, plutôt qu'un modèle déclaratif.

Par exemple, imaginez que si la valeur d’une zone de texte dépasse 10, un élément de la page doit être rendu visible. Dans jQuery, cette fonctionnalité est généralement implémentée en écrivant un gestionnaire d’événements avec du code qui inspecte la valeur de la zone de texte et définit la visibilité de l’élément cible en fonction de cette valeur. Ce processus est une approche impérative basée sur le code. Une autre infrastructure peut plutôt utiliser la liaison de données pour lier la visibilité de l’élément à la valeur de la zone de texte de manière déclarative. Cette approche ne nécessite pas d’écrire de code, mais elle nécessite uniquement de décorer les éléments impliqués dans les attributs de liaison de données. À mesure que les comportements côté client augmentent, les approches de liaison de données entraînent fréquemment des solutions plus simples avec moins de code et de complexité conditionnelle.

jQuery vs a SPA Framework

Facteur JQuery Angulaire
Fait abstraction du DOM Oui Oui
Prise en charge d’Ajax Oui Oui
Liaison de données déclarative Non Oui
Routage de style MVC Non Oui
Création de modèles Non Oui
Routage de lien ciblé Non Oui

La plupart des fonctionnalités que jQuery n'a pas intrinsèquement peuvent être ajoutées grâce à d'autres bibliothèques. Toutefois, une infrastructure SPA telle que Angular fournit ces fonctionnalités de manière plus intégrée, car elle a été conçue avec tous ces fonctionnalités à l’esprit dès le début. En outre, jQuery est une bibliothèque impérative, ce qui signifie que vous devez appeler des fonctions jQuery pour faire quoi que ce soit avec jQuery. Une grande partie du travail et des fonctionnalités que les infrastructures SPA fournissent peuvent être effectuées de manière déclarative, ce qui ne nécessite pas d’écriture de code réel.

La liaison de données est un excellent exemple de cette fonctionnalité. Dans jQuery, il ne prend généralement qu’une seule ligne de code pour obtenir la valeur d’un élément DOM ou pour définir la valeur d’un élément. Toutefois, vous devez écrire ce code chaque fois que vous devez modifier la valeur de l’élément, et parfois cela se produit dans plusieurs fonctions sur une page. Un autre exemple courant est la visibilité des éléments. Dans jQuery, il peut y avoir de nombreux endroits différents où vous écriviez du code pour contrôler si certains éléments étaient visibles. Dans chacun de ces cas, lors de l’utilisation de la liaison de données, aucun code ne doit être écrit. Vous devez simplement lier la valeur ou la visibilité des éléments en question à un viewmodel sur la page, et les modifications apportées à ce viewmodel sont automatiquement reflétées dans les éléments liés.

SPA Angular

Angular reste l’un des frameworks JavaScript les plus populaires au monde. Depuis Angular 2, l’équipe a reconstruit le framework depuis la base (à l’aide de TypeScript) et l'a rebaptisé d'AngularJS à Angular. Depuis plusieurs années, Angular repensé continue d’être un framework robuste pour la création d’applications à page unique.

Les applications Angular sont générées à partir de composants. Les composants combinent des modèles HTML avec des objets spéciaux et contrôlent une partie de la page. Un composant simple de la documentation d’Angular est illustré ici :

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Les composants sont définis à l’aide de la @Component fonction décorateur, qui prend des métadonnées sur le composant. La propriété sélecteur identifie l’ID de l’élément sur la page où ce composant s’affiche. La propriété de modèle est un modèle HTML simple qui inclut un espace réservé qui correspond à la propriété de nom du composant, définie sur la dernière ligne.

En travaillant avec des composants et des modèles, au lieu d’éléments DOM, les applications Angular peuvent fonctionner à un niveau supérieur d’abstraction et avec moins de code global que les applications écrites à l’aide de JavaScript (également appelé « vanille JS ») ou avec jQuery. Angular impose également un ordre sur la façon dont vous organisez vos fichiers de script côté client. Par convention, les applications Angular utilisent une structure de dossiers commune, avec des fichiers de script de module et de composant situés dans un dossier d’application. Les scripts Angular concernés par la création, le déploiement et le test de l’application se trouvent généralement dans un dossier de niveau supérieur.

Vous pouvez développer des applications Angular à l’aide d’une interface CLI. Pour démarrer le développement Angular en local, en supposant que vous ayez déjà installé git et npm, clonez simplement un dépôt depuis GitHub et exécutez npm install et npm start. Au-delà de cela, Angular fournit son propre interface CLI, qui peut créer des projets, ajouter des fichiers et aider à tester, regrouper et déployer des tâches. Cette convivialité cli rend Angular particulièrement compatible avec ASP.NET Core, qui offre également une excellente prise en charge de l’interface CLI.

Microsoft a développé une application de référence, eShopOnContainers, qui inclut une implémentation d’application SPA Angular. Cette application inclut des modules Angular pour gérer le panier d’achat du magasin en ligne, charger et afficher des éléments à partir de son catalogue et gérer la création de commandes. Vous pouvez afficher et télécharger l’exemple d’application à partir de GitHub.

Réagir

Contrairement à Angular, qui offre une implémentation complète du modèle MVC (Model-View-Controller), React concerne uniquement les affichages. Il ne s’agit pas d’une infrastructure, simplement d’une bibliothèque. Par conséquent, pour créer une spa, vous devez tirer parti de bibliothèques supplémentaires. Il existe un certain nombre de bibliothèques conçues pour être utilisées avec React pour produire des applications monopage riches.

L’une des fonctionnalités les plus importantes de React est son utilisation d’un DOM virtuel. Le DOM virtuel offre à React plusieurs avantages, notamment les performances (le DOM virtuel peut optimiser les parties du DOM réel à mettre à jour) et la testabilité (il n’est pas nécessaire d’avoir un navigateur pour tester React et ses interactions avec son DOM virtuel).

React est également inhabituel dans son fonctionnement avec HTML. Au lieu d’avoir une séparation stricte entre le code et le balisage (avec des références à JavaScript apparaissant dans des attributs HTML peut-être), React ajoute du code HTML directement dans son code JavaScript en tant que JSX. JSX est une syntaxe de type HTML qui peut être compilée en JavaScript pur. Par exemple:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Si vous connaissez déjà JavaScript, l’apprentissage de React doit être facile. Il n’y a pas autant de courbes d’apprentissage ni de syntaxe spéciale impliquées avec Angular ou d’autres bibliothèques populaires.

Étant donné que React n’est pas une infrastructure complète, vous souhaiterez généralement que d’autres bibliothèques gèrent des éléments tels que le routage, les appels d’API web et la gestion des dépendances. La bonne chose est, vous pouvez choisir la meilleure bibliothèque pour chacun d’entre eux, mais l’inconvénient est que vous devez prendre toutes ces décisions et vérifier que toutes vos bibliothèques choisies fonctionnent bien ensemble lorsque vous avez terminé. Si vous souhaitez un bon point de départ, vous pouvez utiliser un kit de démarrage comme React Slingshot, qui prépackage un ensemble de bibliothèques compatibles avec React.

Vue

À partir de son guide de prise en main, « Vue est une infrastructure progressive pour la création d’interfaces utilisateur. Contrairement à d’autres infrastructures monolithiques, Vue est conçue à partir du terrain pour être adoptable de manière incrémentielle. La bibliothèque principale se concentre uniquement sur la couche d’affichage et est facile à récupérer et à intégrer à d’autres bibliothèques ou projets existants. D’autre part, Vue est parfaitement capable de alimenter des applications Single-Page sophistiquées lorsqu’elles sont utilisées en combinaison avec les outils modernes et les bibliothèques de prise en charge. »

La prise en main de Vue nécessite simplement d’inclure son script dans un fichier HTML :

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Avec l’infrastructure ajoutée, vous pouvez ensuite restituer de manière déclarative des données dans le DOM à l’aide de la syntaxe de création de modèles simple de Vue :

<div id="app">
  {{ message }}
</div>

puis en ajoutant le script suivant :

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Cela suffit pour rendre "Hello Vue!" sur la page. Notez toutefois que Vue n'affiche pas simplement le message dans l'élément une seule fois. Il prend en charge la liaison de données et les mises à jour dynamiques, de sorte que si la valeur de message change, la valeur dans <div> est immédiatement mise à jour pour la refléter.

Bien entendu, cela ne fait qu’effleurer la surface du potentiel de Vue. Il a acquis beaucoup de popularité au cours des dernières années et a une grande communauté. Il existe une liste énorme et croissante de composants et de bibliothèques de prise en charge qui fonctionnent avec Vue pour l’étendre également. Si vous souhaitez ajouter un comportement côté client à votre application web ou si vous envisagez de créer un spa complet, Vue vaut la peine d’étudier.

Blazor WebAssembly

Contrairement à d’autres frameworks JavaScript, Blazor WebAssembly il s’agit d’une infrastructure d’application monopage (SPA) permettant de créer des applications web interactives côté client avec .NET. Blazor WebAssembly utilise des normes web ouvertes sans plug-ins ni recompilation de code dans d’autres langages. Blazor WebAssembly fonctionne dans tous les navigateurs web modernes, y compris les navigateurs mobiles.

L’exécution de code .NET à l’intérieur des navigateurs web est rendue possible par WebAssembly (abrégé wasm). WebAssembly est un format bytecode compact optimisé pour un téléchargement rapide et une vitesse d’exécution maximale. WebAssembly est une norme web ouverte et est prise en charge dans les navigateurs web sans plug-ins.

Le code WebAssembly peut accéder à toutes les fonctionnalités du navigateur via JavaScript. Cela s’appelle l’interopérabilité JavaScript, JavaScript interop ou encore JS interop. Le code .NET exécuté via WebAssembly dans le navigateur s’exécute dans le bac à sable JavaScript du navigateur avec les protections offertes par le bac à sable contre les actions malveillantes sur l’ordinateur client.

Pour plus d’informations, consultez Présentation de ASP.NET Core Blazor.

Choix d’une infrastructure SPA

Lorsque vous envisagez quelle option fonctionnera le mieux pour prendre en charge votre spa, gardez à l’esprit les considérations suivantes :

  • Votre équipe connaît-elle l’infrastructure et ses dépendances (y compris TypeScript dans certains cas) ?

  • Quel est le degré de rigidité du framework et acceptez-vous son mode de fonctionnement par défaut ?

  • Est-ce que cela (ou une bibliothèque complémentaire) inclut toutes les fonctionnalités dont votre application a besoin ?

  • Est-ce bien documenté ?

  • Quelle est l’activité de sa communauté ? Les nouveaux projets sont-ils en train d'être construits avec cela ?

  • Quelle est l’activité de son équipe principale ? Les problèmes sont-ils résolus et les nouvelles versions livrées régulièrement ?

Les cadres continuent d’évoluer à une vitesse vertigineuse. Utilisez les considérations répertoriées ci-dessus pour atténuer le risque de choisir un framework dont vous regretterez ultérieurement d’être dépendant. Si vous êtes particulièrement risqué, envisagez un framework qui offre un support commercial et/ou est en cours de développement par une grande entreprise.

Références – Technologies web côté client

PrécédentSuivant