TP1 - Les frameworks front-end

Un framework c'est quoi ?

Un framework est un ensemble d'outils : des classes, des fonctions, des librairies dont l'objectif est de faciliter le développement logiciel. Vous retrouverez la notion de framework dans tous les langages de programmation. Le framework contiendra des outils que vous pourrez réutiliser pour construire une application. Un framework front-end en particulier vous aidera à mettre en place des applications web pour les navigateurs. Il y a des avantages majeurs à utiliser un framework :

• La réutilisation du code : nul besoin d'écrire encore un autre menu HTML, le framework proposera des outils pour la gestion de l'interface utilisateur, la gestion des évènements...
• La compatibilité : assurer la compatibilité entre les navigateurs et avec les plateformes mobiles
• Le support : le code fourni est maintenu et testé par toute une communauté

Bien sûr, l'utilisation d'un framework a aussi un coût :

• Les performances : la navigateur doit télécharger les données du framework, les charger. C'est plus ou moins lourd en fonction des frameworks bien sûr.
• La dépendance : les mises à jour et nouvelles fonctionnalités dépendent de la communauté ou de l'entreprise maintenant le framework
• L'apprentissage : un framework vous permet de rapidement monter un site riche et de travailler plus rapidement de manière générale. Problème : vous devez pour ça apprendre le framework. Problème #2 : pendant que vous vous formez sur le framework, vous n'apprenez pas les technologies sous-jacentes : le javascript, le CSS, l'HTML. Or comprendre le fonctionnement du framework "sous le capot" est un avantage indéniable. Et bien sûr, le framework pourrait bien tomber en désuétude plus tôt que vous ne le pensez !

On va donc s'intéresser en particulier aux outils qui permettent de concevoir l'interface des applications webs : le front-end. On ne parlera pas des technologies côté serveur (le back end), ce n'est pas l'objet du cours, mais bien sûr il existe là aussi multitudes de frameworks pour gérer le traitement des données, les bases de données etc.

Note : j'ai également parlé de librairie. jQuery que vous connaissez est une librairie. Quelle est donc la différence ? Une librairie est une collection de classes, de fonctions, de méthodes. Ça ressemble beaucoup à la définition d'un framework ça ! En règle générale, le rôle de la librairie est bien précis (connexion à une base de données par exemple) tandis que le rôle du framework est bien plus large, d'où sa définition plus vague. Le framework peut contenir plusieurs librairies !

De jQuery à aujourd'hui

L'époque jQuery

Au commencement était jQuery. Apparue en 2006, c'est une librairie javascript que vous connaissez. Elle permet d'uniformiser le développement pour tous les navigateurs et simplifie la manipulation du DOM et des évènements. Je ne referai pas le cours sur jQuery, en théorie, vous connaissez bien maintenant ! Beaucoup de ressources gravitent autour de jQuery : jQueryUI bien sûr mais aussi beaucoup, beaucoup de plugins de toutes sortes : 4560 au dernier compte sur npm. Des date pickers, des éléments d'interface de toutes sortes, des nuages de tags. Bref on trouve de tout.

L'usage de jQuery tend à s'affaiblir dans les années 2010. Plusieurs raisons à cela : l'amélioration du langage Javascript lui-même avec la version ES6 que nous avons vu le semestre dernier, un meilleur respect des normes dans les navigateurs (et RIP IE) et l'arrivée de nouveaux frameworks que l'on verra dans la suite du cours. Il reste tout de même largement utilisé.

Les frameworks CSS et JS

À partir du début des années 2010, on a vu fleurir des frameworks incluant des éléments HTML, CSS et Javascript visant à simplifier la création des interfaces utilisateurs. Ces frameworks fournissent des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript, le plus souvent sous forme de plugins jQuery. Il s'agit notamment de Bootstrap (2011, utilisé sur cette page), Foundation (2011), Semantic UI (2013), et beaucoup d'autres. Ils sont toujours bien vivants, on les reverra un peu plus tard.

Les frameworks MVC

À force d'empiler du Javascript, et comme les pages web ont fini par être entièrement générées par le Javascript, on s'est dit : pourquoi ne pas ré-utiliser la même architecture que sur le serveur, l'architecture MVC ?

L'architecture MVC pour Modèle-Vue-Contrôleur est une façon de concevoir une application en trois parties :

• le modèle : il contient les données à afficher (les produits, caractéristiques, prix d'un site d'e-commerce par exemple)
• la vue : la présentation de l'interface graphique : comment doivent-être affichés les produits, leurs prix
• le contrôleur : c'est l'intermédiaire entre les données et la vue, il traite les actions de l'utilisateur, modifie les données du modèle et de la vue. C'est le contrôleur qui va gérer toute la logique de l'application : est-ce que l'utilisateur a le droit de voir ce produit ? Est-ce qu'il bénéficie d'une promotion ?

L'un des pionniers de cette architecture est notamment AngularJS (Google, 2010). Assez souvent dans les frameworks MVC en Javascript, jQuery est encore utilisé, puisqu'on continue à manipuler le DOM. La différence est que le DOM est généré proprement par un langage de templating plutôt que d'être bidouillé à la main.

Donc pour résumer, on a un ensemble de modèles qui peuvent se synchroniser (ou pas) avec les modèles côté serveur. Le contrôleur, avec sa place centrale, peut dialoguer avec l'utilisateur, le serveur et le modèle, pour finalement transmettre des données à un langage de templating afin de générer une page complète. La page elle-même peut envoyer des événements qui seront interceptés par le contrôleur, qui pourra de nouveau réagir et modifier les modèles, ou dialoguer avec le serveur. Parfois il y a des automatismes, comme des synchronisations de l'interface en fonction du modèle, avec une bonne dose de magie apparente.

Le développement est plus propre qu'en empilant des fonctions Javascript, mais au bout du compte, oui, ça reste souvent complexe à comprendre et à débugger, car il persiste de nombreux échanges asynchrones entre serveur et client.

Le DOM virtuel et les composants

La dernière nouveauté en la matière est arrivée avec React (Facebook, 2013). React est conçu comme une bibliothèque et non comme un framework MVC. Il prend la place de la vue au sein d'une architecture MVC. Sa nouveauté principale est l'idée de DOM virtuel.

Un DOM virtuel est une représentation du DOM en Javascript. Au lieu de générer le DOM lui-même comme avec un langage de templating, c'est à dire au lieu de dialoguer avec les API du navigateur pour construire le DOM, on ne génère qu'une arborescence d'objets Javascript en mémoire. Dès qu'il se passe la moindre chose, une interaction avec l'utilisateur, un dialogue avec le serveur, alors on régénère TOUTE cette arborescence d'objets, c'est à dire toute la page web virtuelle. Au premier affichage, le DOM virtuel est transformé en DOM réel. Ensuite React conserve au moins deux versions de l'arborescence, celle qui correspond au DOM réel et la nouvelle version qu'on veut afficher. Puis il calcule la différence entre les deux versions et interagit lui-même avec le DOM pour trouver la façon minimale de le modifier pour obtenir la page souhaitée. Manipuler du Javascript étant beaucoup plus rapide que de manipuler le DOM, il est même possible de régénérer cette arborescence plusieurs dizaines de fois par seconde. On peut donc en profiter pour faire des animations. Et si jamais des lenteurs se font sentir, on peut court-circuiter certaines parties de l'arborescence dans la régénération.

On ne touche donc plus jamais le DOM lui-même, d'où l'inutilité de jQuery dans ce cas.

React a également inauguré une nouvelle approche basée sur des composants. Les composants React contiennent en eux-mêmes tout le nécessaire à leur fonctionnement : leur structure, leur style et leur logique de fonctionnement. On abandonne donc le paradigme de la séparation entre HTML (structure), CSS (style) et JS (comportement). Pour écrire ces composants, React utilise une syntaxe particulière : JSX. Une application React ressemble donc à un arbre de composants.

Cette logique des composants est reprise ensuite dans Vue.js (2014) puis dans Angular2 (2016), réécriture complète d'AngularJS.

Ces trois frameworks, React, Angular et Vue, bénéficient de nombreux modules. 37258 modules liés à React sur npm, 13576 pour Angular, 10807 pour Vue. Par exemple, react-bootstrap propose des composants React pour Bootstrap.

Comme les frameworks MVC, leur apprentissage peut sembler long. Il n'est pas forcément pertinent de toujours les utiliser, nous y reviendrons juste après. Retenez que leur objectif est la conception d'application web "single page" : des applications sur une seule page donc seul l'état des composants varie.

La situation en 2019

Pour vous donner une idée de l'utilisation de ces technologies aujourd'hui, vous pouvez jeter un oeil à ces graphiques.

La fréquence de recherche dans Google depuis 5 ans :

Le nombre de téléchargements dans npm :

Il existe bien sûr bien d'autres frameworks javascript, je ne peux pas tous les détailler et ne les connaîs pas tous moi-même. Il faut retenir que la situation évolue vite, ces lignes seront certainement obsolètes dans moins de 2 ans ! Il est donc important de tenir ses connaissances à jour et de connaître les caractéristiques des outils, leurs avantages et inconvénients, pour savoir quand et pourquoi les utiliser. Nous allons donc revenir sur chacun de ces frameworks dans les prochaines parties.

Bootstrap

Bootstrap est donc un framework fournissant des éléments HTML, CSS et JS pour développer des interfaces web. C'est le plus populaire parmi ses (nombreux) concurrents. Il est avant tout un framework CSS, basé sur Sass. Il propose :

• Une grille de mise en page sur 12 colonnes
• Des styles définis pour une multitudes d'éléments (boutons, menu, tableaux...)
• La compatibilité entre navigateurs, mobiles compris
• Des composants Javascript basés sur jQuery (boutons, menus déroulants, fenêtres modales, caroussels, menus, alertes..) [optionnels]
• Une bonne doc !

Une page minimale utilisant Bootstrap ressemble à ceci :

Et avec une barre de navigation :

Les possibilités sont nombreuses et la doc donne de nombreux exemples. Vous pouvez aussi regarder le code source de la page du cours ! Je ne vous conseille pas de chercher ailleurs : la doc est très claire avec des exemples fournis pour chaque composant. Surtout elle est à jour. Vous trouverez beaucoup de ressources sur le web qui s'appliquent aux versions 2 et 3 de Bootstrap. Or il y a des différences importantes avec la version actuelle, la 4.

Créez une nouvelle page web en utilisant Bootstrap. Elle devra comporter :

• Une barre de navigation avec "MMI" en titre, et trois boutons : "Home", "Page 1", et "Page 2", un menu déroulant et un formulaire de recherche. Exemple
• Un jumbotron avec un titre, une description et un bouton. Exemple
• Trois cartes alignées avec une image, une description et un bouton. Exemple. Pour aligner les cartes en 3 colonnes, servez-vous de la grille.

Vous devriez arriver à quelque chose ressemblant à ça :

Note : Pour les images, j'ai utilisé LoremFlickr.

Angular

Depuis sa version 2 totalement réécrite en 2016, Angular a adopté la même approche "composants" que React. La dernière version en date est la 7.

C'est le plus mûr des frameworks disponibles et le plus complet et il bénéficie d'un bon soutien de la part de la communauté et des entreprises. Il est maintenu par Google. La documentation est de bonne qualité.

Côté inconvénients, l'apprentissage est le plus ardu avec une courbe assez abrupte et des concepts complexes à comprendre, notamment son modèle. De plus, Angular utilise TypeScript (un sur-ensemble de Javascript) qu'il faut donc également connaître.

Débuter avec Angular est singulièrement plus complexe qu'avec les autres frameworks que nous verrons ici. Il nous faudrait quelques heures pour approfondir le modèle MVC et les outils de build. Pas d'exercice pour Angular donc mais si vous savez que devrez apprendre à vous en servir, venez m'en parler. Vous pouvez également jeter un œil à la mise en route décrite dans la doc si vous êtes curieux.

React

Mise en route

React ou ReactJS est développé par Facebook depuis 2013. Comme on l'a vu, elle utilise des composants et un DOM virtuel. Son objectif est le développement d'applications web single-page mais on peut aussi se diriger vers le mobile avec ReactNative. React est relativement facile à apprendre, le démarrage est facilité et la doc est complète. Elle est bien soutenue, avec des entreprises comme Facebook, Uber, Netflix, Twitter, Udemy, Paypal, Reddit, Tumblr... qui l'utilisent. Ça en fait un bon choix pour débuter dans les frameworks javascripts. Beaucoup de composants sont disponibles prêts à être réutilisés.

Une page HTML minimale construite avec React ressemble à ceci :

Vous voyez que ça n'a rien de bien terrible (pour l'instant :)). C'est une page HTML classique qui charge les bibliothèques react et react-dom. Enfin, entre les balises script, notre premier composant React :)

Vous verrez en parcourant la doc que React utilise la syntaxe JSX, une extension de la syntaxe de Javascript. Elle a pour but de simplifier l'écriture des composants React en la rendant plus claire et plus accessible.

Un autre exemple utilisant JSX :

Vous voyez qu'une troisième bibliothèque est nécessaire : babel. Elle permet de convertir le JSX en Javascript. Ce n'est pas nécessaire d'apprendre JSX pour utiliser React mais vous le croiserez souvent et si vous vous plongez dans React, vous verrez que ça vous simplifiera la vie.

Intégrer Bootstrap à React

Il est tout à fait possible d'utiliser Bootstrap avec React. On peut bien sûr simplement associer le CSS (pour utiliser seulement la grille par exemple). Si on a besoin des composants (jumbotron, cards etc), le plus pratique est d'utiliser un module comme React Bootstrap qui fournit tous les composants Bootstrap sous la forme de composants React.

Voici le HTML d'un exemple minimal avec une barre de navigation et un jumbotron :

Et le JS correspondant :

Je place tout mon code dans le même fichier mais vous devinez que l'on va pouvoir modulariser notre code : écrire un composant React par fichier. On s'y retrouvera plus facilement ! Notez au début du fichier que l'on doit déclarer les variables ReactBootstrap : c'est obligatoire car on utilise le module depuis un CDN. On peut s'en affranchir en utilisant des outils de build comme Create React App mais on va se concentrer sur React lui-même pour le moment. Sachez que ça existe.

Je n'ai bien sûr pas d'actions chez Bootstrap, il existe beaucoup d'autres projets qui peuvent se joindre à React pour faciliter le design des interfaces. Entre autre : MaterialUI plus utilisée même avec React que Boostrap qui vient en deuxième position, ou encore SemanticUI. Vous pouvez les tester via un CDN de la même façon que nous venons de le faire avec Bootstrap, si vous ne dormez pas la nuit ;)

Vue.js

Mise en route

Vue.js a été lancé en 2013 par un ancien de Google. Lui ne bénéficie pas du support d'une grande boîte comme Facebook ou Google mais a réussi à s'imposer comme un concurrent sérieux (allez-voir sur GitHub). Conséquence certainement, on retrouve Vue chez de grosses entreprises chinoises, comme Alibaba ou Baidu. Il est le plus simple et le plus souple des trois, reste à voir si son utilisation décollera réellement (cette année ?).

Particularité intéressante : la documentation est disponible en français ! Si vous n'êtes pas très à l'aise en anglais, ça peut être un avantage important.

Sur le principe, le fonctionnement de Vue.js est similaire à React, vous n'allez pas être perdu. On retrouve la notion de composants et de DOM virtuel. Avec Vue, les composants sont écrits en Javascript exclusivement, pas de TypeScript ou de JSX ici donc (mais c'est possible..).

De la même manière que React, il a été pensé pour être évolutif : on peut commencer à l'utiliser de manière légère, seulement pour quelques composants, et évoluer par la suite. On peut donc commencer à l'utiliser rapidement.

Voilà à quoi va ressembler un petit Hello World avec Vue :

En quelques lignes, vous pouvez lier le contenu d'une balise et la valeur d'un champ de formulaire :

Testez et vous verrez que le contenu du paragraphe est lié à la valeur de l'input et est modifié dynamiquement. Un peu magique !

Comme vous voyez, on retrouve la séparation entre la structure et le comportement, contrairement à React où les composants encapsulent tous ces aspects.

Je vous laisse lire le chapitre d'intro de la doc en français si vous voulez un aperçu plus complet des possibilités de Vue.js, il est bien fichu.

Bootstrap Vue

Pour intégrer des modules avec vue.js, c'est de manière générale très simple. Exemple avec Bootstrap toujours :

Les composants Bootstrap vous sont familiers maintenant, vous devriez retrouver vos petits.

Bien sûr même chose, aucune obligation d'utiliser Bootstrap, bien d'autres librairies sont dispo : Vue Material, Vue UI, utilisée par les apps officielles Vue, Semantic UI Vue...

Et.. on va changer de maquette ! Je sens que le jumbotron vous lasse. On va en profiter pour visiter d'autres composants Bootstrap :

• Implémentez la même barre de navigation avec 3 liens à gauche, un menu déroulant et une barre de recherche à droite. Exemple
• Intégrez un caroussel avec trois images avec des légendes. Exemple
• Ajoutez un champ de formulaire demandant à l'utilisateur son nom. Vous vérifierez que le nom entré à une longueur de minimum 3 lettres, et dans ce cas une alerte "Salut [nom tapé]" s'affichera. Exemple

Vous devriez obtenir ceci :

Vous avez maintenant un aperçu des technologies (Javascript) qui sont actuellement utilisées dans le développement web, côté front-end. Bien sûr, ce cours est introductif, maitriser l'un de ces frameworks demanderait d'y consacrer plus de temps. Comptez une douzaine d'heures pour vraiment vous familiariser avec React ou Vue par exemple, le double pour Angular. Avant de passer à l'exercice final qui vous permettra de vous y plonger, voici un petit récapitulatif des caractéristiques de ces outils pour se remettre les idées au clair :

À vous de jouer