Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

S01E17 : Les librairies JavaScript

S01E17 : Les librairies JavaScript

Lors de cette 17e session du #wdfr, nous avons abordé le sujet des librairies JavaScript en essayant de cerner sur quelles technologies se portent les webdesigners français et dans quels cas ils les utilisent. Ce sujet, bien évidemment technique a une nouvelle fois soulevé la question de la barrière entre un intégrateur web et un développeur.

Au total, ce sont 379 tweets qui ont été échangés par les 84 participants de cette session du vendredi 8 octobre 2010.

Un peu d’histoire sur le JavaScript

Le JavaScript est un langage de programmation de script orienté objet. Il a été créé en 1995 par la société Netscape (éditrice du navigateur du même nom, alors seul concurrent d’Internet Explorer). Ce langage fut longtemps décrié car complexe à mettre en place par les développeurs et synonyme de danger pour les utilisateurs. Durant de nombreuses années il a même été conseillé aux internautes de désactiver le JavaScript de leur navigateur pour plus de sécurité. Mais c’était sans compter sur les librairies…

En effet, les librairies ont littéralement changé l’utilisation et la renommée du JavaScript. A l’heure actuelle, il est pratiquement impensable de bâtir un site web sans utiliser de JavaScript et on ne compte plus le nombre d’offre d’emploi demandant la maîtrise de telle ou telle librairie. Qu’on se le dise, les librairies JavaScript ont le vent en poupe!

Les librairies à la rescousse du JavaScript

Il fallait donc intervenir pour redorer un peu l’image de ce langage très puissant qui permet d’effectuer de nombreuses opérations côté front-end (animations d’éléments, interactivité, effets visuels, Ajax, etc).

La solution se trouve dans les librairies. En effet, le principal atout des librairies est de mettre tous les navigateurs au même niveau, c’est-à-dire qu’à présent le développeur n’aura plus à se soucier de l’interportabilité entre les navigateurs, la librairie s’en charge.

De plus, les librairies apportent avec elles une nouvelle syntaxe plus simple d’utilisation (souvent inspirée des sélecteurs CSS) et un grand nombre de fonctions prédéfinies permettant de réaliser des effets très poussés en quelques lignes de codes… Une révolution.

Autre point fort, les librairies offrent la possibilité de créer des plugins qui permettent d’en étendre les fonctionnalités.

Quant à la sécurité, les navigateurs ont fait leur part du travail et le JavaScript n’est pas une technologie plus dangereuse qu’une autre.

Quelle librairie utiliser?

Nous voilà dans le vif du sujet, les quelques lignes précédentes n’étant là que pour présenter le cadre aux novices et ceux désirant en savoir un peu plus sur le passé de cette technologie. Et nous commençons par la question que tout le monde se pose :

Et comme je vous l’ai dit plus haut, le JavaScript a le vent en poupe et de nombreuses librairies ont vu le jour, parmi lesquelles nous pouvons citer :

Si vous êtes perdus devant tout ce choix, j’ai une bonne nouvelle pour vous, car si les librairies JavaScript forment un royaume, jQuery en est le roi.

En effet, sa popularité et sa communauté sont si grandes qu’aucun projet web aujourd’hui ne se déroule sans que le nom de jQuery ne soit prononcé. Il fut acclamé à l’unanimité durant la session par tous les participants, et les raisons pour cela sont nombreuses. La qualité de la documentation est exemplaire, les plugins innombrables, la facilité d’utilisation déconcertante…

Et comme le dit si bien @transatcreative, jQuery est entré dans un cercle d’amélioration perpétuel. Si bien qu’il continue à s’étendre, au fil des mois nous avons pu voir l’apparition de jQuery UI (http://jqueryui.com/) mettant à disposition un grand nombre d’éléments aidant à améliorer l’interface utilisateur, avec des éléments de formulaires avancés, des boites de dialogues, des boites à onglets, un datepicker, etc. Et bientôt nous célèbrerons l’arrivée de jQuery Mobile (http://jquerymobile.com/) ayant pour but d’améliorer et d’uniformiser le développement de sites internet riches pour les appareils mobiles. Un présent radieux, et un futur étincelant!

Mais attention, les autres librairies ne sont pas à laisser de côté, certaines syntaxes seront peut-être plus familières à d’autres développeurs (certaines se basent sur Ruby on Rails ou Python qui sont des langages montants).

Comment la charger?

Il s’avère qu’il y ait plusieurs manières d’introduire une librairie JavaScript au sein de sa page web, la première consiste à rapatrier le fichier en local et de le charger comme suit :

<script src="librairie.js" type=”text/javascript”></script>

Ou, il est possible d’utiliser un CDN (Content Distribution Network) tel que le google API :
http://code.google.com/apis/libraries/devguide.html

Que vous utiliserez comme ceci :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js” type=”text/javascript”></script>

L’avantage d’un tel système est d’économiser des ressources serveur. Le problème c’est que vous devenez dépendant de l’état des serveurs de Google… Même si il n’y a pas trop à s’en faire, certains participants ont évoqué la possibilité d’utiliser un “fallback”, qui répond à l’algorithme suivant :

Aller chercher la librairie sur le serveur de google
Si il n’y a pas de réponse
     Charger la librairie disponible en local

Ce qui donne le code suivant :

&lt;script  type="text/javascript" <a href="https://docs.google.com/ document/edit?id=1zh08N8uD8jXIodQ_0bKWYBsf21BjY_1DyXaVnjmEViU&amp;hl=fr&amp;pli=1"> src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;</a>
&lt;/script&gt;
&lt;script  type="text/javascript"&gt;!window.jQuery &amp;&amp;
document.write('&lt;script  type="text/javascript"
 src="js/jquery-1.4.2.min.js"&gt; &lt;\/script&gt;')&lt;/script&gt;

Et le JavaScript “brut” dans tout ça?

Quand est-il alors du JavaScript pur? A-t-il encore un intérêt? Faut-il l’apprendre et l’appréhender? Ou les librairies sont la solution à adopter à chaque fois?

Les librairies sont effectivement un outil fantastique, mais comme toute librairie ou framework, pas nécessairement la solution la plus adaptée aux besoins.

La première des choses à faire est en réalité de définir le besoin, quels effets ai-je à réaliser sur mon site, et pourquoi vais-je avoir besoin du JavaScript? Si la réponse se résume à une ou deux fonctionnalités du type : pré remplir les champs de mon formulaire. Alors on peut légitimement se questionner sur l’intérêt de charger une librairie JavaScript de plus 70ko alors qu’elle ne fera guère gagner de temps sur la mise en place de telles fonctionnalités.

Cependant, nous conviendrons du fait que la plupart du temps le besoin est bien plus grand que cela, et c’est à partir de ce moment que les librairies prennent tout leur sens.

Mais faut-il alors savoir coder en JavaScript brut? J’aurais tendance à dire, qu’encore une fois, tout dépend du besoin. Il faut savoir si vous allez juste instancier tel ou tel plugin ou si vous souhaitez aller plus loin, en modifiant ou créant vos propres plugins par exemple. Dans le deuxième cas de figure, la connaissance du JavaScript “brut” est indispensable, pour la première on peut vraisemblablement s’en passer sans problème.

Quoiqu’il en soit, connaître les bases du JavaScript ne peut pas faire de mal!

Choisir ses librairies en fonction des plugins, ou ses plugins en fonction des librairies? That is the question

On a tous en tête une certaine base de données de scripts existants, et on se dit qu’on voudrait bien l’implémenter sur notre prochain site… Nous pensons donc aux effets avant la technique, et quoi de plus normal. Mais une fois que l’on se penche sur cet aspect technique, on peut être confronté à certaines surprises, notamment s’apercevoir que deux effets que l’on voulait à tout prix utiliser utilisent deux librairies différentes. Ce n’est pas un problème me direz-vous, on charge les deux librairies et hop ça marche!

Et bien non peut-être pas. En effet, il peut exister des problèmes de compatibilités entre les scripts (pouvant généralement être résolu si on manipule un peu le JavaScript). Mais au-delà de ça, se pose la question de la consistance du site. N’avoir qu’un nombre déterminé et fini de technologies utilisées est primordiale pour la maintenance et la fiabilité d’un système.
Charger plusieurs librairies c’est multiplier les sources d’erreur et de conflits. Sans oublier, une fois de plus le poids important de ces librairies, car même si nos débits internet sont bien au-dessus de 56k des temps passés (et encore pas partout dans le monde), un nouveau marché en pleine expension que sont les appareils mobiles nécessitent d’être vigilant sur le poids de nos sites. Et rapellez-vous qu’une librairie doit vous aider, vous n’avez pas à la subir, c’est à dire que vous devez la choisir, ce n’est pas elle qui doit s’imposer à vous ;-)

Mais alors comment faire?

Et bien la question ne se pose pas vraiment. Ce qui peut-être fais par une librairie, pourra être fait à l’aide d’une autre, de façon plus ou moins complexe certes. Mais surtout, il y a fort à parier qu’avec le nombre incroyable de plugins créés et libres d’utilisation, vous puissiez trouver le même effet déjà réalisé avec une librairie différente. C’est là toute la puissance des communautés derrières les librairies JavaScript et il ne faut pas s’en priver! Avec un peu de patience et de recherche vous trouverez votre bonheur, et si ce n’est pas le cas, franchissez le pas et lancez-vous dans la création de votre propre plugin!

Les ressources JavaScript des participants

Le mot de la fin

“Write less, do more”  ~  jQuery Team

Sources

http://fr.wikipedia.org/wiki/JavaScript

  • http://www.stpo.fr STPo

    Eh les gars, on dit “bibliothèque”, pas “librairie”, en français…

  • http://css4design.com bruno bichet

    Joli compte-rendu, complet et tout, bravo !

  • http://www.la-thenardiere.com LaThenardiere

    On dit qu’est-ce-qu’on veut d’abord, c’est nous qu’on fait les CR ! mouarfff arff arfff.

    Bon, mais c’est vrai… une librairie, c’est presqu’une bibliothèque. La différence c’est qu’à la librairie, les livres sont payants ! :)

  • http://umaneti.net Milouse

    Joli compte rendu effectivement ! Néanmoins une petite typo qui pique, dans la partie “Et le JavaScript “brut” dans tout ça ?”, la première phrase c’est : “Qu’en est-il alors du JavaScript pur ?”. Ce qui me permet de constater que vous ne mettez jamais d’espace entre les mots et les points d’interrogation ou d’exclamation. Mais là je chipote ^^.

    Enfin dans l’historique vous insinuez que Netscape était le concurrent d’IE, ce qui est faux, c’est IE qui est venu concurrencer Netscape…

    Mais effectivement je tatillonne un max !

  • http://www.mutuellefrance.fr Mutuelle France

    Intéressant, merci.

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !