Les diverses librairies Javascript
Librairie ou Frameworks ? Là est la question. Qui sont ils ? et comment les différencier tant leurs frontières se sont imbriquées et leurs possibilités élargies.
De plus, certains s’entendent à dire que jQuery est un Framework Javascript, alors que jQuery, lui même, écrit dans sa page d’accueil Jquery est une librairie javascript rapide et concise… alors que penser ?
Que peut-être il est temps de ne pas chercher à jouer sur les mots et d’opter pour une définition sans arguer que celle ci soit ‘la’ définition avec un grand D…. Donc, pour faire simple, on peut dire qu’une librairie est un ensemble de fonctions qui permet de rapidement utiliser des portions de code sans avoir à les réécrire alors qu’un Framework sera lui composé de plusieurs librairies et de classes permettant de rapidement concevoir des applications.
Il existe diverses librairies Javascript qui permettent d’accélérer le développement de nos applications AJAX et de par leur large possibilités sont devenus de véritables Framework… Sans entrer dans le détail de chacune d’entre elle, cet article permettra d’en lister les principales et d’indiquer leurs sites respectifs… Une rapide mise en place pour leur utilisation et une comparaison entre du code Javascript et son équivalent, avec jQuery par exemple, permettra de rapidement se faire une idée des avantages de tels outils. Et posons nous la question : Les librairies sont elles compatibles avec les standards du web. Cet article de Kevin Yank sur sitepoint.com, pose la question et essaie quelques solutions.
Quelques Librairies ou Framework Javascript
| Librairie | Description du site (en anglais) | |
|---|---|---|
 | Prototype | Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere. |
 | Scriptaculous | script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly |
 | Rico | Rico is a JavaScript library for creating rich internet applications. Based on Prototype, it includes grids, calendar & tree controls, drag & drop, and cinematic effects. Its object-oriented framework makes it easy to add richness to your web applica |
 | jQuery | jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. |
 | dojo | Unbeatable JavaScript Tools Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences. |
 | YUI Library | The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library for professionals who love JavaScript. |
 | mootools | MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. |
 | Spry | The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages |
 | Ext JS | Ext JS is a cross-browser JavaScript library for building rich internet applications. Build rich, sustainable web applications faster than ever. It includes: High performance, customizable UI widgets, Well designed and extensible Component model, An intuitive, easy to use API and Commercial and Open Source licenses available |
| * vous trouverez d’autres détails sur la plupart des librairies sur Comparison of JavaScript frameworks | ||
Principe de fonctionnement d’une librairie
Comme il est facile de le constater dans les exemples employés ci-dessous, une fois la librairie chargée au sein de la page HTML, elle nous propose une alternative d’écriture aux principales requêtes exécutées en Javascript afin de manipuler le DOM… par exemple le classique et récurant …document.getElementById('identifiant')… devient un simple…$('#identifiant')Encore plus souple, son confrère getElementsByTagName() qui travaille sur les nom balises et qui nécessite toujours l’emploi d’une boucle afin d’affecter tous les éléments qu’il récupère …peut également s’écrire en une seule ligne.En Javascript
var tableau = document.getElementsByTagName('balise')
var nb = tableau.length
for (var i=0; i<nb; i++){
tableau[i].className = "uneclasse"
}En jQuery
$('balise').addClass('uneclasse');Efficace non ! Et ce n’est là que la partie émergée de l’iceberg. Pour creuser encore plus en avant ce genre de fonctionnalité rapprochez-vous du billet sur les premiers pas avec jQuery.Optimiser l’emploi des librairies
Bien que les librairies s’adaptent à toutes les situations, nous allons devoir les aider à mieux déployer leur puissance. Pour cela, il faut commencer par créer des documents HTML qui soient épurés de toute balise superflue ou mal employée. De même, il nous faudra optimiser les règles de sélecteurs afin d’éviter une surcharge de balises <div>, d’attributs de classes et d’id bien souvent inutiles et inappropriés.Par exemple, pour la mise en place d’un moteur auto-complète :
<div id="autocomplete">pourrait s’écrire, ce qui faciliterait l’utilisation d’un simple formulaire si Javascript n’est pas activé sur la machine utilisateur :
<input type="text" id="entree">
<div id="suggestion">
<p>element</p>
</div>
</div>
<form id="autocomplete" action="">…de même, le sélecteur qui cible la liste de suggestion pourrait se définir en tant que premier enfant, ilpeut éviter une surcharge en id sur la balise <ul>
<input type="text">
<ul>
<li>element</li>
</ul>
</form>
$('#suggestion') <==> $('form#autocomplete > ul)Avantages sur l’utilisation d’une librairie Javascript
Afin de mettre en évidence l’emploi d’une librairie Javascript, nous allons comparer le code nécessaire pour l’affichage/masquage d’une zone, d’une part en utilisant uniquement Javascript et d’autre part, en ayant recours à la librairie jQuery. Commençons par décrire l’exemple mit en place. Imaginons une page de contenu qui offre diverses palettes d’informations sur lesquelles nous souhaiterions, par interaction utilisateur, afficher/masquer leur contenu en cliquant simplement sur le titre de la palette.Vous pouvez consulter la page et son fonctionnement enfin de mieux en saisir le sens, puis comparer les codes employés ci-dessous :
Avec Javascript uniquement
window.onload = function(){
var palette = document.getElementsByTagName('div')
var nb_palette = palette.length
for (var i=0;i<nb_palette;i++){
if (palette[i].className == "palette"){
var titre = palette[i].getElementsByTagName('h3')[0]
titre.onclick = alerte
}
}
}
function alerte(){
var cnt =this.parentNode.getElementsByTagName('p')[0]
cnt.style.display = (cnt.style.display == "none")?"block":"none"
}Avec jQuery
$(document).ready(function(){
$('.palette h3').toggle(function(){
$('p',this.parentNode).addClass('masque')
}, function(){
$('p',this.parentNode).removeClass('masque')
}
)
})Bien que les fragments de code utilisés ci-dessus ne soient pas optimisés dans un sens comme dans l’autre (structure HTML, approche du code), il est facile de constater que l’emploi d’une librairie simplifie grandement l’approche générale. De plus, il est très facile d’implémenter cette fonctionnalité en lui ajoutant des effets et ce, de manière très intuitive ou presque… par exemple :Avec un effet jQuery
$(document).ready(function(){
$('.palette h3').click(function(){
var el = $('p',this.parentNode)
if (el.is(':hidden')){
el.fadeIn('slow')
}else{
el.fadeOut('slow')
}
})
})Utilisation de diverses librairies en simultané
Bien souvent il est possible de télécharger sur le web une fonctionnalité intéressante basée sur une librairie Javascript. Par exemple, la classique LightBox 2 de Lokesh Dhakar qui utilise Prototype et Scriptaculous. Prototype comme jQuery, utilise le raccourci $( ») pour pointer sur les blocs à affecter. Pas de soucis donc en ouvrant le code, on trouve vite ses repères et on arrive à pouvoir en comprendre les principes si une adaptation devient nécessaire.Par contre, si on souhaite ajouter à notre document d’autres fonctionnalités s’appuyant sur une seconde librairie, par exemple jQuery, l’affaire se corse, car il sera alors difficile de distinguer les instructions $( ») s’adressant à Prototype, de celles destinées à jQuery. Pas de soucis, jQuery a pensé à tout, et il existe à cet effet une instruction de cohabitation. Il suffit donc de l’invoquer pour prendre la place du raccourcis $. Généralement, on récupère la valeur par défaut jQuery.
Mais il est possible d’utiliser un autre pointeur, par exemple :
<script src="prototype.js"></script>D’autres librairies peuvent poser plus de soucis pour cohabiter entre elles, cependant, l’élargissement des possibilités de chacune d’entre elles, permettent souvent de trouver la solution sans devoir charger trop de librairies.
<script src="jquery.js"></script>
<script>
jQuery.noConflict(); // donne jQuery('') au lieu de $('')
/* ou */
$j = jQuery.noConflict(); /: donne $j('') au lieu de $('')
</script>
Autocomplete par l’exemple
L’implémentation de fonctionnalités classiques d’AJAX comme l’autocompléte devient élémentaire. Vous trouverez, dans les liens ci-dessous, quelques sites qui démontrent la mise en place d’une telle fonctionnalité en utilisant diverses librairies :- Autocomplete avec jQuery
- Autocomplete basé sur Scriptaculous
- Autocomplete Ajax Dady
- Autocomplete basé sur Prototype
- Dévellopez.com
- Brand Spanking
- Javascript Code Source
- Ajax.AutoCompleter
No comments