Les 3 vies du Javascript

Javascript est aujourd’hui le langage en vogue alors qu’il a longtemps été considéré comme le vilain petit canard. Voici un petit inventaire des 3 vies du Javascript.

Première vie du javascript

A l’origine, le javascript a été développé par Netscape, puis Mozilla. Il servait au début à dynamiser les sites statiques, en manipulant simplement le DOM HTML du côté du client (navigateur Web).

Pour faire une analogie de vulgarisation, le DOM HTML serait le squelette, le Javascript, les muscles et les tendons et le CSS la peau et les cheveux.

Avec son acolyte le CSS, ils ont bien décidé de résister à la technologie Flash et son arsenal de guerre pour le développement de pages dynamiques.

Beaucoup se laisseront séduire par Flash et ses possibilités graphiques sympathiques et considéreront le javascript comme un petit langage d’appoint, pour faire des fonctionnalités légères sur les sites web.

Il ne faut pas oublier que la plupart des fonctionnalités avancées sont pensées en amont de la génération du DOM directement au niveau du langage utilisé côté serveur (PHP, Java, …), et ceci pour plusieurs raisons. Tout d’abord à l’époque, les machines clientes ne sont pas forcément performantes, il faut donc limiter les actions de ce côté. De plus, les développeurs connaissaient mieux leur langage serveur que le Javascript et limitaient donc par défaut l’usage du Javascript. D’ailleurs, on parlait volontiers de développeur Java, développeur PHP, développeur ASP … mais pas de développeur Javascript !

 

Flash gagne la première manche mais le Javascript et son comparse le CSS n’ont pas dit leur dernier mot.

Javascript contre AngularJS

Seconde vie du Javascript

A l’avènement du Web 2.0 (Site collaboratif) et d’AJAX (acronyme d’Asynchronous JavaScript and XML), le javascript revient au devant de la scène et prend de l’essor en s’appuyant sur des frameworks.

 

L’Ajax a donné un second souffle au Javascript.

En effet, pouvoir se passer de rafraîchir une page entière et se limiter à mettre à jour ce dont on a besoin, de façon asynchrone, était du pain béni.

Les sites commençaient à être de plus en plus gros et chaque action nécessitait le rafraîchissement de toute la page, ce qui impliquait beaucoup de traitement côté serveur et côté client. La solution Ajax a donc répondu à ce souci, tout en offrant beaucoup d’autres possibilités pour dynamiser un site web.

 

Un des premiers framework Javascript fût Dojo, qui offrait des fonctionnalités intégrées. Un gain de temps pour les développeurs car le langage Javascript est toujours reconnu pour être verbeux et peu avenant.

De nombreux autres virent le jour et se livrèrent un combat pour s’imposer. La finale eut lieu entre Mootools et jQuery, au fonctionnement très similaire. La plus grosse communauté des deux remporta la manche et jQuery prit l’ascendant sur tous les autres.

 

Le mode de fonctionnement de ces frameworks est une manipulation du DOM HTML à posteriori, en utilisant les attributs de ces derniers et en manipulant le CSS. Ce dernier évoluant lui aussi de son côté avec CSS2, l’aspect graphique des sites devint de plus en plus vivant.

Les machines sont de plus en plus puissantes et de plus en plus diversifiées avec l’arrivée des smartphones. La Technologie Flash est toujours là mais pêche pour s’adapter sur tous les supports, contrairement à Javascript qui se targue d’être multi-plateforme.

 

Une bataille de gagnée pour Javascript (et CSS) !

Troisième vie du Javascript

De nos jours, les applications Web sont partout, tout le temps et doivent s’adapter à tous les supports et partager les données.

Auparavant, un site web était un projet unique dans lequel le code serveur (PHP/Java/…) – aussi appelé Back-End – et le code client (JS/CSS) – aussi appelé Front-End – étaient mélangés. La nouvelle méthode est de découper son code en une application purement Front-End et une application Back-End sous la forme d’une API, répondant à la norme REST.
REST est une architecture reposant sur le protocole HTTP, pour interroger une API grâce à des URLs afin de récupérer, créer, modifier ou supprimer des données. L’API récupérera les données dans une base de données par exemple.

Plus d’informations sur le REST

L’application Front-End sera donc purement composée de HTML, Javascript et CSS et les appels à l’API REST se feront grâce à AJAX. Ce fonctionnement est toujours possible avec JQuery, mais la construction du DOM reste à la charge d’un langage Serveur tel que PHP.

 

C’est alors qu’intervient un bataillon de nouveaux framework javascript, tel que Ember.js, Backbone.js, Angularjs, Knockout.js …

Ces derniers ont une autre vision des interactions entre Javascript et le DOM HTML. Ce sont eux qui prennent la main sur la génération du DOM en s’appuyant sur des templates HTML et en surchargeant les balises avec de nouveaux attributs, ou en permettant la création de nouvelles balises. Pour bien appréhender ces frameworks, il faut oublier tout ce qu’on sait en jQuery et ne l’utiliser qu’en dernier recours !

 

Ce qui est aussi très puissant dans ces nouveaux frameworks, c’est la notion de data-binding bi-directionnel, qui permet d’avoir des données synchronisées entre le DOM HTML et le Javascript.

En jQuery, une donnée modifiée par le client devait être récupérée suite à une écoute d’évènement pour être utilisée côté Javascript. Et réciproquement, si la donnée était modifiée côté javascript, il fallait aller modifier la donnée de l’élément du DOM.

Avec le Data-binding bi-directionnel, la donnée Javascript et celle utilisée dans le DOM sont modifiées en même temps, qu’elles soient modifiées d’un côté ou de l’autre. Ceci peut paraître bénin à première vue mais supprime bon nombre de lignes de codes rébarbatives et répétitives, ce qui évite donc bon nombre d’erreurs de code.

 

Pour la petite histoire, le framework AngularJS a été créé par des développeurs Google. Ils étaient sur un programme qui comprenait plus de 20.000 lignes de codes et difficilement testable. Un autre développeur a proposé d’essayer d’appliquer le framework qu’il était en train de coder à ce projet. Le nombre de lignes de code s’est réduit à 1 500 et facilement testable. AngularJS est né, et donc depuis soutenu par Google en tant que projet Open Source. Ce genre de projet est donc né du fait que les développeurs Google peuvent consacrer 20% de leurs temps sur des projets “personnels”. Dorénavant l’application GMail utilise cette technologie.

A ce jour HTML5 et CSS3 munis du nouvel arsenal Javascript s’imposent sur toutes les plates-formes. On parle désormais de développeur Javascript ou de développeur Front-End, une belle avancée pour que Javascript puisse se dorer le blason.

Et depuis, ne s’étant pas adapté, Flash est à l’agonie !

 

Javascript a gagné mais la concurrence des frameworks Javascript est rude !

 

Pendant ce temps là, une autre guerre est déclarée entre le fier-à-bras et colossal XML et le petit opportuniste JSON (NDLR : rien à voir avec Jon Snow).
De même qu’il y eut une guerre fratricide entre Oracle et MySql dans la précédente décennie, jusqu’au jour où le premier acheta le second, c’est dorénavant la guerre entre le SQL et le No-SQL, mouvance menée par le lord MongoDB et ses pairs … mais c’est une autre histoire !

Publié par

Yann L'Ebrellec

Ingénieur NTIC / Dev Web Senior

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *