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

Parmi l’ensemble des exemples cités ci-dessous, un certain nombre de librairies, ou frameworks, n’existent plus, ou sont devenus quasi inutilisées. Elles sont néanmoins citées car en leurs temps elles ont été bien souvent incontournables et ont ouvert la voie sur un grand nombre de concepts.

Librairies et Frameworks JavaScript

Librairies		Type	Année	Description
Angular		Framework	2009	HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Angular Light		Library	2014	Angular Light is a library for building interactive MVVM web interfaces/applications. Angular.js + Knockout.js way.
Aurelia		Framework	2010	Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity.
Backbone		Framework	2010	Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Bootstrap		Library	2011	Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
CanJs		Library	2015	CanJS is an evolving and improving set of client side JavaScript architectural libraries that balances innovation and stability. It targets experienced developers building complex applications with long futures ahead of them. CanJS is part of DoneJS.
Cappuccino		Framework	2012	Cappuccino is a framework which makes it easy to create advanced web apps. With just a few lines of code you can have an app built with full undo and redo, truly amazing table views, drag and drop and every modern UI appearance and behaviour you might expect on the desktop.
Data-Driven Documents		Library	2009	D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
dojo		Library	2004	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.
DoneJs		Framework	2015	DoneJS is an open source JavaScript framework that makes it easy to build high performance, real time web and mobile applications.
Ember		Framework	2011	Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel (MVVM) pattern. It allows developers to create scalable single-page web applications[ by incorporating common idioms and best practices into the framework. Ember is used on many popular websites, including Discourse, Groupon, LinkedIn, Vine, Live Nation, Nordstrom, Twitch.tv and Chipotle. Although primarily considered a framework for the web, it is also possible to build desktop and mobile applications in Ember. The most notable example of an Ember desktop application is Apple Music,[10] a feature of the iTunes desktop application.
Express		Framework	2014	Express.js, or simply Express, is a web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It is in fact the standard server framework for Node.js
Ext JS		Framework	2007	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
Foundation		Framework	2011	The most advanced responsive front-end framework in the world. A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!
JJRE		Framework	2017	JJRE is a JavaScript based template engine. The framework allows you to extend the functionality of HTML (with scripting capabilities, if, for-loop, variables, custom tags, ...) like with Angular or React. JJRE is a JavaScript reactive framework. It allows you to implement your own tags, attributes, use JavaScript directly in HTML code.
jQuery		Library	2006	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.
jQuery UI		Library	2007	jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
Knockout		Framework	2010	Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates. The underlying principles are therefore: a clear separation between domain data, view components and data to be displayed the presence of a clearly defined layer of specialized code to manage the relationships between the view components. The latter leverages the native event management features of the JavaScript language. These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer. Knockout was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee. As the author said, 'it continues exactly as-is, and will evolve in whatever direction I and its user community wishes to take it', and stressed, 'this isn’t a Microsoft product'.
Lodash		Library	2012	A modern JavaScript utility library delivering modularity, performance & extras.
Meteor		Framework	2014	Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor can be used with its own Blaze templating engine, as well as with the Angular framework or React library.
Mithril		Framework	2014	Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (> 8kb gzip), fast and provides routing and XHR utilities out of the box.
Moment		Library	2011	Parse, validate, manipulate, and display dates and times in JavaScript.
Monkberry		Library	2015	Monkberry is blazingly fast, small 1kb and simple JavaScript library for building web user interfaces.
mootools		Library	2006	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.
Node		Library	2009	Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage's HTML, to be run client-side by a JavaScript engine in the user's web browser. Node.js enables JavaScript to be used for server-side scripting, and runs scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js has become one of the foundational elements of the 'JavaScript everywhere' paradigm, allowing web application development to unify around a single programming language, rather than rely on a different language for writing server side scripts.
Polymer		Library	2013	Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles. Polymer is used by a number of Google services and websites, including the redesigned YouTube, YouTube Gaming, the redesigned Google Earth, Google I/O websites, Google Play Music, redesign of Google Sites and Allo for web
Prototype		Library	2005	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.
React		Library	2013	React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Rico		Framework	2006	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
Riot		Library	2013	Riot is Web Components for everyone. Think React + Polymer but without the bloat. It's intuitive to use and it weighs almost nothing. And it works today. No reinventing the wheel, but rather taking the good parts of what's there and making the simplest tool possible.
Ruby		Framework	2004	Ruby on Rails, or Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.
Scriptaculous		Library	2005	script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly
Semantic UI		Framework	2013	Design Beautiful Websites Quicker. Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
SlimJs		Library	2017	Slim.js is a lightning fast library for development of native web-components and custom-elements based modern applications. No black magic involved. It uses es6+DOM native API and boosts up HTML elements with superpowers.
SproutCore		Framework	2007	SproutCore is an open-source JavaScript web framework. Its goal is to allow developers to create web applications with advanced capabilities and a user experience comparable to that of desktop applications. When developing a SproutCore application, all code is written in JavaScript. A notable fork of SproutCore is Ember.js. Both projects are maintained separately and have taken different directions.
Spry		Library	2007	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
UIKit		Framework	2013	A lightweight and modular front-end framework for developing fast and powerful web interfaces.
Underscore		Library	2009	Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders.
Vue		Framework	2014	Vue.js is an open-source progressive JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Vue can also function as a web application framework capable of powering advanced single-page applications.
YUI Library		Library	2006	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.

Face à cette liste assez impressionnante de possibilités, il est souvent difficile de choisir et d’opter pour une solution qui soit objective et adaptée. Est-il nécessaire également d’utiliser de telles librairies pour chaque projet, Javascript ne ferait-il pas affaire en toute simplicité ? L’article 11 questions pour bien choisir votre framework Javascript essaie de répondre à cette question et permet de bien relativiser sur le sujet.

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">
    <input type="text" id="entree">
    <div id="suggestion">
        <p>element</p>
    </div>
</div>

pourrait s’écrire, ce qui faciliterait l’utilisation d’un simple formulaire si Javascript n’est pas activé sur la machine utilisateur :

<form id="autocomplete" action="">
    <input type="text">
    <ul>
        <li>element</li>
    </ul>
</form>

…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>

$('#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>
<script src="jquery.js"></script>
<script>
    jQuery.noConflict(); // donne jQuery('') au lieu de $('')
      /* ou */
    $j = jQuery.noConflict(); /: donne $j('') au lieu de $('')
</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.

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

En savoir plus sur les librairies

Les librairies sont donc des outils très précieux dans le développement d’applications web. Elles permettent de rapidement mettre en place un grand nombre de fonctionnalités, en utilisant un minimum de lignes de code. Bien que les sites respectifs de chaque éditeur de librairies soient extrêmement bien documentés, voici quelques liens qui vous permettront d’explorer encore plus avant les principales librairies.

• Tutorial Point
• Ajaxonomy
• Prendre un café
• Praticle Tree
• Scripteka
• Prototip
• Lightview
• Table Kit
• Protomenu