Les bibliothèques logicielles (libraries en anglais) sont là pour aider le développeur à coder un site plus rapidement. Les libraries sont donc des facilitateurs de travail. En effet, elles permettent en très peu de lignes de code d’ajouter de multiples fonctions lors du développement d’un site (ou application) web.
Je vais donc vous faire une liste (non exhaustive) des différentes bibliothèques logicielles – basées sur JavaScript – que j’ai vu lors de la formation.
jQuery
Une des bibliothèques logicielles les plus connues pour JavaScript est jQuery. Et son slogan illustre très bien ce qu’une library apporte au développeur :
write less, do more
jQuery
Ajouter jQuery consiste à charger un script supplémentaire dans le fichier HTML.
C’est un fichier qui a déjà plein de fonctions écrites et dont on pourra se servir pour nos propres scripts (on ajoute donc ce script avant le script de notre propre fichier JS).
Tout comme en JavaScript, jQuery permet de cibler des éléments du DOM pour leur ajouter une action (événement, modification du CSS, etc.). Il permet aussi d’ajouter des animations pré-construites permettant de dynamiser encore plus le site.
jQuery UI
Cette bibliothèque logicielle permet entre-autre de venir compléter jQuery.
En effet, cette library apporte des interactions avec l’utilisateur, des widgets et des effets pré-construits qui ciblent plus particulièrement les formulaires (mais peuvent aussi être utilisées autrement !).
Elle propose aussi des thèmes dont on peut s’inspirer.
Bootstrap
J’en ai déjà parlé, Boostrap est un framework CSS.
Et c’est aussi une library JavaScript.
Elle fonctionne avec les scripts jQuery et PoperJS et permet d’ajouter de nombreux components aux pages HTML.
Ces derniers sont dynamiques, ils utilisent des classes spéciales ; ce qui évite donc d’ajouter des scripts perso.
FancyBox
Cette bibliothèque permet de créer un zoom en cliquant sur une image ou une vidéo et de faire un déroulé d’images.
Elle fonctionne simplement : les images sur toute la page sont de basse qualité. Puis quand on clique dessus, un effet zoom se déclenche et ouvre une image de qualité supérieure.
Cette library permet d’optimiser les temps de chargement des pages contenant de nombreux fichiers multimédias.
Masonry
Cette bibliothèque permet, lorsqu’il y a des images de tailles différentes, de réorganiser les éléments pour les placer de la meilleure façon.
Cette library recalcule donc les tailles de toutes les images.
Isotope
C’est une bibliothèque qui permet de faire du tri visuel dans les éléments.
(Elle permet aussi d’ajouter une mise en page d’images.)
Hammer.js
Cette bibliothèque permet de gérer des gestures tactiles : elle créée de nouveaux événements entièrement dédiés au tactile.
Autres librairies
- Animate CSS et Anime JS
Ces deux bibliothèques logicielles permettent d’ajouter des animations très poussées sur un site. - Leaflet
C’est une library qui permet d’ajouter de la cartographie sur un site. - PixiJS
Cette bibliothèque permet de faire de la gestion 2D pur les images, les jeux. C’est un moteur de rendus qui utilise les canvas.
(elle est assez complexe à prendre en main, je la recommande à des développeur plus aguerris !). - AOS (Animate On Scroll)
Comme son acronyme le mentionne, cette library permet d’ajouter des animations lors d’un scroll. - Container player
C’est une bibliothèque qui permet d’ajouter des vidéos en background. - Progressively
Cette library permet tout simplement de charger progressivement les images.
Voici donc un petit tour d’horizon des différentes libraries que j’ai pu voir lors de ma formation.
Si vous en connaissez ou utilisez d’autres, venez les partager en commentaires ! 🙂