Catégorie : Front

Bootstrap

Bootstrap est un framework CSS développé par Twitter, il a été le premier du genre et a rapidement connu une grande notoriété. Il a permis aux développeurs de pouvoir créer rapidement et facilement des interfaces utilisateur convaincantes sans forcément avoir de solides connaissances en CSS.

Pour plus de finesse dans la personnalisation de l’interface, on peut surcharger les classes CSS, ou en rajouter de nouvelles pour modifier le comportement du framework. Pour bénéficier de changements plus globaux et sans avoir à bidouiller dans le code, il y a un multitude thèmes disponibles qui modifient la charte graphique du framework.

SemanticUI

Semantic UI est le plus complet des trois en terme de composants graphiques, son crédo est d’être semantique, c’est à dire que les classes sont écrites de manière explicites et en toutes lettres, ce qui facilite la relecture du code HTML.

Materialize CSS

Materialize CSS est basé sur le Material Design, un ensemble de règles de design proposées par Google. C’est un framework très accessible et rapide à prendre en main, surtout si l’on a déjà une première expérience sur d’autres frameworks CSS. Les formulaires sont particulièrement esthétiques avec le label qui se décale en haut lorsque que l’input est sélectionné. Enfin on peut de créer facilement un effet de parallaxe (deux images qui défilent à une vitesse différente lorsque que l’utilisateur scrolle).

Ionic est un framework JavaScript conçu pour faciliter le développement d’applications mobiles. Contrairement aux applications natives écrites en Java pour Android ou en Objective-C pour IOS, Ionic permet la création d’applications dites hybrides. C’est à dire qu’il est possible de faire fonctionner une application avec JavaScript sous Android et IOS, c’est ce que l’on appelle une web view.

Ionic se base sur Apache Cordova pour communiquer avec les composants natifs du smarphone (caméra, micro, accéléromètre, etc..). La logique métier est gérée par Angular 2+ (AngularJS pour sa première version), qui est en englobé par Ionic. Le framework fournit beaucoup de composants CSS prêt à l’emploi (boutons, menus, inputs), on peut aussi utiliser du SASS.

L’environnement de développement est très agréable : on peut voir instantanément le résultat visuel sur Android ou IOS, Ionic dispose aussi d’un watcher permettant de redémarrer le serveur à chaque modification du projet.

JQuery est une bibliothèque JavaScript, elle permet d’en simplifier les développements. Tous les frameworks CSS l’utilisent pour implémenter leur propres effets JavaScript. JQuery est basé sur des sélecteurs qui modifient les propriétés des éléments du DOM (Document Object Model), il permet de gérer plus efficacement les évènements et les requêtes AJAX.

JQuery fait le lien entre le code JavaScript pur et les frameworks front-end modernes tel que AngularJS, Angular2+, ReactJS ou VueJS, c’est à dire vers plus d’intégration côté client. L’inconvénient de JQuery est qu’il met du temps à s’exécuter et peut donc ralentir la navigation, voilà pourquoi, pour une utilisation épisodique de Javascript dans une page web on préfère plutôt utiliser du JavaScript pur (appelé JavaScript Vanilla). Très populaire à une époque, JQuery est donc de moins en moins utilisé.

AngularJS est la première version de Angular, un framework JavaScript développé par Google. Attention toutefois à ne pas le confondre avec Angular 2+ (Angular 2, 4, 5, …), qui sont des versions très différentes dans leur approche, en particulier au niveau de la structure du projet. Il permet se créer des SPA (Single Page Application) et introduit de nouvelles notions, telle que le data-binding : il rend le HTML dynamique en lui ajoutant des propriétés. Angular est aussi utilisé avec Ionic (première version) qui est un frameworks qui facilite le développement d’applications mobiles hybrides (aussi appelé cross-platforms), il gère la logique métier. Bien que bénéficiant encore d’une forte communauté de développeurs, ceux-ci migrent peu à peu vers Angular 2+, ou d’autres frameworks JavaScript comme ReactJS ou VueJS.

Angular, développé par Google, fait partie des nombreux frameworks front-end, à l’instar de ReactJS ou VueJS. Ces outils permettent de mieux organiser le code côté client, et de décorréler la partie client de la partie serveur, qui fait office de serveur d’API.

Angular JS et Angular 2+

Il existe deux versions du framework qui sont très différentes, tant au niveau de la syntaxe que de l’organisation d’un projet.

AngularJS 1.X est la première version, qui est toujours utilisée aujourd’hui, surtout pour maintenir des projets existants, mais de moins en moins sur de nouveaux. En tant que premier vrai framework front-end, AngularJS a eu beaucoup de succès à ses début.

Angular 2+ (comprendre la version 4, 5, 6, 7, 8 et 9 jusqu’à maintenant) est la version moderne d’Angular, elle est écrite en TypeScript et intègre un CLI permettant de créer facilement un projet, des composants, des services, etc…

Un projet Angular s’articule autour de briques élémentaires appelés composants, représentés par des dossiers comprenant :

• Un fichier TypeScript (.ts)
• Un ficher HTML (.html)
• Un fichier CSS (.css) ou SASS (.scss)

Les observables et opérateurs RxJS

Un observable est un objet qui émet des données et auquel on peut souscrire, on les utilise pour écouter des événements asynchrones, comme par exemple les requêtes HTTP. Les observables font partie de la bibliothèque RxJS, qui fournit différent opérateurs pour traiter les données émises (filter, map, etc…)

Server-Side Rendering (SSR)

Le principal problème de ces frameworks est qu’ils sont (très) mauvais pour le référencement naturel (SEO), c’est à dire l’indexation par les moteurs de recherche ou par les réseaux sociaux de l’application web.

En effet les pages web du client sont renvoyées en JavaScript pur et non en HTML, le JavaScript étant beaucoup plus difficile à parser (car il faut du temps et des ressources pour l’exécuter) que le HTML, ils en ignorent tout simplement le contenu.

Toutefois une parade existe, cela s’appelle de SSR (Server-Side Rendering), qui permet lors d’une requête de renvoyer du HTML statique, qui est ensuite remplacé par la vue JavaScript une fois qu’elle a finie de se charger. Outre que le fait que les pages web sont plus facilement crawlable, elles s’affichent aussi plus rapidement. Angular utilise Angular Universal pour faire du SSR.

Tests Unitaires

Les tests unitaires sont regroupés par composants et sont écrit dans un fichier portant l’extension spec.ts. C’est un large sujet car il est possible de tester beaucoup de choses, par exemple :

• Les méthodes des composants ou des services : on exécute la méthode (en y ajoutant éventuellement les paramètres) puis on voit si elle régit bien (par exemple si la valeur de retour est conforme au résultat attendu)
• Les formulaires : il sera plus aisé de tester un Model-Driven-Form (MDF) qu’un Template-Driven-Form (TDF), car un MDF instancie l’objet FormGroup dans le composant sous forme d’attribut, il est donc directement testable
• Savoir quant une méthode a été appelée : on utilise la méthode spyOn() pour tester si l’exécution d’une méthode entraîne bien l’exécution d’une autre méthode du composant (ou d’un service)
• Savoir quant le DOM a été modifié : par exemple pour tester si le changement d’une condition *ngIf se répercute bien dans le DOM

Tests e2e

Les tests e2e servent à simuler le parcours utilisateur en reproduisant les interactions avec l’application (clics, remplissage de formulaire). L’intérêt est la reproductibilité du test, qui peut-être exécuté par simple ligne de commande, par défaut Angular utilise Protractor. Pour sélectionner les éléments du DOM de manière unique, une bonne pratique est d’ajouter des attributs data-testid et d’y attacher une valeur unique.

Un autre outil, Puppeteer, permet de simuler l’application sous un navigateur Chrome, avec la possibilité de prendre des screenshots, pour documenter l’application par exemple. Puppeteer dispose d’une API puissante qui permet d’interagir finement avec les éléments du DOM.

Pattern Redux (ngrx/store)

Le pattern Redux a d’abord été implémenté avec React, car il était impossible de gérer la communication d’un composant enfant vers un composant parent (ce qui est possible avec Angular en utilisant les événements). L’intérêt d’utiliser ce pattern est d’éviter les événements spaghetti, c’est à dire une sur-utilisation des événements, rendant le code moins lisible. Par exemple avec Angular, si l’on veut remonter un événement dans un composant parent sur plusieurs niveaux, on est obligé de répliquer cet événements dans tous les composants traversés.

Le pattern Redux permet de simplifier la gestion des ces événements en les centralisant dans un store, qui est une sorte d’observable qui peut être écouté dans n’importe quel composant de l’application, les différent type d’événements sont listés sous forme d’actions.

Angular material

Angular material est une bibliothèque qui reprend les principes graphiques du material design, elle est intégrée à Angular depuis la version 7. Elle fournit des composants prêts à l’emploi, attention à ne pas oublier d’importer le module correspondant dans le projet.