Contenu principal
Cours : Apprendre à coder > Chapitre 6
Leçon 7: Utiliser des bibliothèques JS dans votre page WebL'univers des bibliothèques JS
Il y a des milliers de bibliothèques JavaScript que vous pouvez inclure dans vos pages Web, et beaucoup d'aspects sur lesquels elles peuvent vous aider :
- Manipulation du DOM
- Événements DOM
- AJAX / Extraction de données
- Effets et animations
- Modélisation HTML
- Modèles de page
- Widgets d'interface utilisateur
- Graphiques et diagrammes
- Modélisation de données
- Routage et navigation
- Accessibilité
- Support multi-navigateurs
- Support mobile
Voici une autre manière de voir les choses que j'affectionne : une page Web est constituée d'une interface utilisateur (HTML et CSS), d'interactivité (JS + DOM), et de données (qu'on récupère souvent avec du JS). Vous pouvez créer votre interface utilisateur, interactive et basée sur les données, sans bibliothèque, ou vous pouvez récupérer différentes bibliothèques pour vous aider dans différentes parties. Certaines bibliothèques apportent beaucoup, d'autres une seule chose :
L'une des choses les plus difficiles du développement Web est de décider quelles bibliothèques utiliser, car vous rédigerez souvent du code qui va s'appuyer sur elles, et il sera difficile de changer plus tard. Il n'y a pas de bonne réponse. Soyez conscient de vos options et faites un choix éclairé.
Les frameworks Web
Il existe quelques bibliothèques qui font "tout" (tout, de l'extraction de données à la manipulation du DOM, jusqu'à des widgets interface utilisateur sophistiqués). Si vous utilisez un de ces frameworks, vous allez inclure typiquement beaucoup de JavaScript dans votre page. Vous souhaiterez donc vous assurer que vous avez vraiment besoin de tout ce qu'il apporte. Pour certains développeurs, ces frameworks en font trop, et ils trouvent plus judicieux d'utiliser de plus petites bibliothèques, contenant des tâches plus spécifiques.
Les frameworks CSS
Une bibliothèque CSS est un ensemble de règles de styles CSS, et une documentation qui explique quelles balises HTML et quelles classes utiliser. Il existe de nombreuses bibliothèques CSS populaires qui facilitent la réalisation de beaux sites Web. Elles incluent quelquefois, de façon optionnelle, des widgets JavaScript, mais les développeurs préfèrent souvent utiliser d'autres bibliothèques JS avec une bibliothèques CSS.
Les bibliothèques JS pour navigateurs
Voici des bibliothèques qui rendent plus facile l'utilisation des fonctionnalités des navigateurs (comme l'API DOM, les méthodes window et des sujets que nous avons abordés dans ce cours). Elles rendent souvent possible l'accomplissement des choses avec moins de code, et elles tiennent compte des différences entre les navigateurs.
Les bibliothèques JS d'architecture d'applications
Ces bibliothèques vous aident pour vos applications web alors que celles-ci prennent du volume. Il se peut que votre code soit gérable au début, avec quelques centaines de lignes de code, mais une fois que vous aurez atteint les milliers de lignes de code, celui-ci pourrait devenir "spaghetti" (un bazar ingérable). Ces bibliothèques vous aident à séparer les "modèles" (données) des "vues" (présentations), et utilisent souvent des concepts de programmation orientée objet pour organiser votre code.
Les mini et micro bibliothèques
Vous pouvez aussi utiliser de petites bibliothèques que des développeurs ont écrites pour une tâche spécifique (quand elles sont vraiment petites, ellse sont quelquefois appelées "micro bibliothèques"). En voici une poignée :
- DOM : tinyDOM
- Événements : Events.js
- AJAX : MicroAjax
- Animation : Morpheus, Viper
- Modélisation de données : Spine, Knockout
- Modèles : Handlebars, Mustache
- Routage : PathJS
- Orientation Objet : Classy, Klass
- Graphisme : Processing.JS (voir un exemple à Khan Academy), RaphaelJS (voir un exemple à Khan Academy), D3, Three.JS (voir un exemple à Khan Academy), Paper.js
- Diagrammes : gRaphael, High Charts
- Date/heure : moment.js
Vous pouvez en trouver plus sur microjs.com, ou juste en cherchant sur Internet "javascript library [functionality]" ("javascript bibliothèque [fonctionnalité]") en remplaçant 'functionality' par ce que vous cherchez.
Avez-vous essayé une bibliothèque JS dans vos pages Web, ici, à Khan Academy ? Parlez-nous en dans les commentaires ci-dessous.
Vous souhaitez rejoindre la discussion ?
Pas encore de posts.