cours-javascript

Logo JavaScript

TP 13: Composants Web

Objectifs:

Slides du TP


Création d’un composant Web simple

Sur le Web, un composant est un programme qui permet de fournir une interface intégrable, conçue pour un usage précis, mais personnalisable par chaque développeur.

Par exemple, si je développe et diffuse un composant de galerie d’images, d’autre développeurs pourront intégrer simplement mon composant sur leur site, et y ajouter les images de leur choix.

Les composants permettent donc d’enrichir le contenu, l’esthétique, et/ou les interactions proposées par un site Web, en ré-utilisant du code qui n’a pas été écrit spécifiquement pour ce site.

Il existe de très nombreux composants publiés sur Internet et utilisables gratuitement. Pour la plupart, ils sont basés sur la librairie “jQuery” (dont nous parlerons plus tard dans ce cours). Mais nombreux ont été conçus en JavaScript/DOM natif (aussi appelé “Vanilla JavaScript”), et peuvent donc fonctionner sans jQuery.

Note: Dans le cadre de ce cours, l’usage (direct ou pas) de jQuery ne sera pas accepté.

Voici quelques exemples de composants natifs intégrables librement:

Vous pourrez trouver d’autres composants natifs sur le site Vanilla List.

À ce stade, nous allons apprendre à réaliser un composant simple, dans le sens où celui-ci ne sera pas suffisamment modulaire pour être intégré plusieurs fois sur une même page. Nous verrons plus tard comment faire cela.

Généricité et instructions d’intégration

Afin que notre composant puisse être intégré de manière personnalisée par chaque développeur, quelque soit le site Web en question et son contenu, il est important de définir quelques règles et abstractions.

D’abord, un composant doit être simple à intégrer, et un utilisateur de composant ne devrait jamais avoir à consulter ni modifier le code source du composant. Il va falloir donc que le composant soit suffisamment générique et configurable depuis le site Web qui l’intégrera.

Par exemple, un composant de galerie d’images doit s’adapter à une liste d’images fournie par un développeur désirant l’intégrer, et l’intégrateur ne devrait en aucun cas avoir à modifier la liste d’images dans le code source du composant.

Pour cela, un composant:

Exemples d’instructions d’intégration fournies par la documentation d’un composant:

Prenez le temps d’analyser les instructions d’intégration des composants listés plus haut.

Exercice 1: développer et documenter un composant simple

Pour mettre en pratique cette partie du chapitre, développer un des trois composants suivants, et fournir la page de documentation associée.

La page de documentation doit contenir:

S’inspirer de la documentation des composants fournis plus haut en exemple.

Conseil pratique: pour afficher du code source sur une page HTML sans que celui-ci ne soit interprété par le navigateur, utiliser la balise <xmp>.

Un “carousel” est un composant de galerie d’images permettant à l’utilisateur de passer d’une image à l’autre, et éventuellement d’agrandir une image en plein-écran.

composant animation

Certains carousels passent automatiquement d’une image à l’autre, à l’aide d’un minuteur (setTimeout() ou setInterval()).

Pour développer un carousel, il faut maîtriser:

Solution: Jsfiddle

Composant: Accordéon

Un “accordéon” est un composant proposant plusieurs rubriques à l’utilisateur, et lui permettant d’afficher le contenu d’une rubrique à la fois, en cliquant sur son titre.

composant animation

Pour développer un accordéon, il faut maîtriser:

Solution: Jsfiddle

Composant: Galerie vidéo

Une galerie vidéo permet à l’utilisateur de visualiser une vidéo, en cliquant parmi une sélection fournie.

composant animation

Pour développer une galerie vidéo, il faut maîtriser:

Solution: Jsfiddle