JavaScript a toujours eu une mauvaise réputation. Quel mauvais? Eh bien, pour être franc, le genre de développeurs qui ont laissé les développeurs vouloir lui donner un coup de poing au milieu de la semaine prochaine. Mais les temps ont changé. JavaScript est encore une fois l'enfant cool sur le bloc.

Une grande partie de cet intérêt renouvelé est dû aux bibliothèques et aux frameworks JavaScript. jQuery est sorti pour la première fois en janvier 2006 et a été suivi quelques jours plus tard par Prototype. Au cours des quatre ou cinq prochaines années, de nouvelles bibliothèques et de nouveaux cadres ont été mis en place, chacun luttant pour sa place dans la trousse à crayons du développeur..

À mesure que chaque nouveau logiciel devenait de plus en plus rapide, devançant les autres dans les tests SlickSpeed, JavaScript devenait progressivement un utilitaire sur lequel les professionnels pouvaient compter sans souci..

La raison pour laquelle JavaScript s’était fait un nom si pauvre au fil des ans depuis sa sortie en 1995 n’était pas tout à fait parce que c’était une mauvaise langue. Les vrais problèmes étaient liés au DOM, qui ne s'appelait pas le DOM à l'époque..

Les navigateurs ont implémenté ce que nous connaissons aujourd'hui sous le nom de DOM de différentes manières. Il y avait souvent et il y a toujours des bogues lors de l'interaction avec le DOM. Parmi tous les problèmes de performances en JavaScript, travailler avec (c'est-à-dire manipuler ou lire) le DOM est le meilleur choix à éviter ou à minimiser. La normalisation du DOM a énormément aidé à cet égard, mais comme le sait tout bon développeur, Internet Explorer n'est pas à suivre de près..

Ce n'est que maintenant, en 2010, que l'IE9 non publié prend enfin en charge addEventListener, une exigence assez fondamentale pour l'utilisation du DOM. C'est là que les frameworks JavaScript ont vraiment produit la solution miracle. Ils ont bouché les lacunes laissées grandes par les navigateurs. Personne n'aime gérer les bogues de navigateur répétitifs et stupides, donc si un framework peut faire fonctionner l'âne pour vous, cela signifie que vous disposez de plus de temps sur la partie intéressante: la résolution du problème réel.

Les grands garçons

Il existe cinq principaux acteurs dans le monde des frameworks JavaScript - ou bibliothèques, selon votre choix de phraséologie (Wikipedia considère qu'ils sont la même chose, mais tous les développeurs de la communauté ne sont pas d'accord sur ce point). De toute façon, les grands garçons sont jQuery, Prototype, YUI, Dojo et MooTools.

Si vous n'en avez pas entendu parler, vous vous êtes probablement caché sous un gros rocher en forme de JavaScript et, croyez-moi, vous avez manqué.

Ces leaders du marché ont quelques points communs importants: Prise en charge solide de plusieurs navigateurs, en particulier pour les navigateurs plus anciens (comme IE6). Une équipe de base de développeurs qui connaissent leur métier, mais travaillent aussi à l'air libre. Licences ouvertes, qui permettent aux développeurs d’utiliser les projets dans des environnements privés et commerciaux. Des communautés actives derrière les entreprises. Fonctionnalité pouvant être étendue si nécessaire.

Malgré ce terrain d'entente, ils couvrent tous les principes fondamentaux du développement Web à leur manière. Par exemple, jQuery est le logiciel de manipulation DOM le plus puissant et offre également un moyen de créer tout effet personnalisé et une gamme de méthodes Ajax simples à puissantes..

Prototype, quant à lui, est une bibliothèque de langage JavaScript qui étend le jeu de fonctionnalités de JavaScript, mais comprend toujours un moyen de manipuler le DOM.

YUI semble offrir tout sauf l'évier de la cuisine. Il inclut les bases de la manipulation du DOM et des gestionnaires d’événements, mais bénéficie également d’une multitude d’utilitaires, allant de l’internationalisation à la gestion de l’histoire et à l’animation. Ce qui rend YUI spécial, c'est sa capacité à charger les utilitaires pendant l'exécution, de sorte que vous n'avez pas à télécharger toute la collection en tant que visiteur..

Dojo s'apparente à des applications JavaScript d'entreprise. Sa page d'accueil montre comment IBM, Cisco et Sun font partie de ceux qui ont choisi de bien en faire usage. En effet, la documentation de Dojo montre à quel point la boîte à outils est accessible via le support ARIA fourni.

Bien sûr, vous pouvez utiliser chacun de ces outils pour un grand nombre de tâches: rien ne vous empêche d'utiliser Dojo pour une simple manipulation DOM, ni Ajax ou jQuery pour des tâches à grande échelle et compliquées, wham-bam-merci-madame applications. Vous pouvez combiner des outils comme bon vous semble; c'est votre prérogative.

En règle générale, vous souhaitez utiliser le meilleur outil pour le travail. Il est donc sage de toujours considérer vos options..

Élargir le filet

Si vous démarrez un projet à partir de zéro et que vous savez que l'ajout d'une bibliothèque ou d'un framework JavaScript vous fera économiser temps et argent, vous avez l'avantage de pouvoir rechercher le candidat idéal..

Outre les «cinq grands» susmentionnés, vous pouvez également envisager de nombreux autres outils. Ils ont des qualités similaires, mais peuvent être plus récents, ou ont des licences qui ne permettent pas aux projets de voyager aussi loin.

Par exemple, Sencha, anciennement connu sous le nom d'Ext JS, permet de créer des interfaces très riches. Il propose un ensemble complet de modules pour la création d'applications. Des exemples vont des visualiseurs de flux et des bureaux Web à la documentation complète de l'API de Sencha, construite avec sa propre bibliothèque..

Il y a quelques années, j'ai utilisé Ext JS lors d'une révision de cadres qui conviendraient à notre entreprise. À l’époque, la documentation était encore relativement difficile à utiliser, ce n’était donc pas la meilleure expérience pour moi, mais elle conviendrait peut-être à vos besoins, et elle est jolie aussi..

Closure de Google est le dernier framework à avoir été publié avec une fanfare. C'est une décision de nommage agaçante prise par Google. nous avons déjà Prototype, ce qui rend presque impossible la recherche d'informations sur les prototypes JavaScript, et maintenant la fermeture rendra les choses moins amusantes pour les débutants à la recherche du fonctionnement des fermetures JavaScript.

Mais ce qu’il mérite, c’est son système de templates et ses outils de développement, en particulier le compilateur Closure, qui est actuellement le meilleur outil de compression disponible pour JavaScript..

Cadres de l'interface utilisateur

Nous avons déjà examiné YUI, qui fournit de nombreux widgets d'interface utilisateur, et j'ai mentionné JavaScript, ce qui vous oblige à suivre un modèle / vue / contrôleur strict, mais ce n'est pas particulièrement une mauvaise chose. Le résultat final est un framework d’applications Web extrêmement soigné, qui inclut tous les widgets d’application de bureau classiques que vous vous attendez à ressentir, faute d’un meilleur mot, «application-y»..

Une simple validation de ceci est que le texte généré par SproutCore n'est pas sélectionnable par défaut, ce à quoi nous nous attendions lorsque nous surfons sur le Web et cliquons sur la page. Est-ce une bonne chose ou une mauvaise chose? Tu décides.

Une chose qui ne me tient pas à cœur est la confiance de SproutCore en JavaScript. Ce n'est certainement pas un cadre pour les amateurs d'amélioration progressive. À l'origine, MobileMe a été publié avec une page complètement vierge si JavaScript était désactivé. Si vous choisissez d’utiliser SproutCore, vous voudrez au moins couvrir les utilisateurs qui visitent avec JavaScript désactivé..

Il y a sans doute beaucoup d'autres frameworks d'interface utilisateur, alors gardez les yeux ouverts.

Spécialistes

Les bibliothèques et les frameworks que nous avons examinés jusqu'ici offrent des outils génériques et vont résoudre la plupart des problèmes d'un développeur web. Mais bien qu’ils aient chacun leurs forces, aucun d’entre eux n’est particulièrement spécialisé..

Les bibliothèques spécialisées font vraiment un travail. Il y a beaucoup de projets sur le Web et la liste ne raccourcit pas. Je vais donc vous présenter deux des meilleurs cadres de dessin disponibles sur le marché..

Processing.js de John Resig, alias Mr jQuery, est un portage JavaScript du langage Processing souvent utilisé pour les visualisations et les animations. Processing.js permet à un auteur d'écrire en utilisant le langage de traitement actuel dans une balise de script, en utilisant application ou processing en tant qu'attribut type. Le cadre rendra également une animation de zone de travail HTML5 qui exécute constamment la méthode draw..

Il y a d'innombrables démos montrant ce qu'il est possible de faire avec Processing.js, et il existe même un site dédié aux démos de HasCanvas, présentant tout ce qui a été enregistré et joué avec.

Un petit avertissement: Processing.js ressemble beaucoup à Java. Bien qu'il y ait beaucoup de croisement entre les styles syntaxiques de Java et de JavaScript, vous devrez peut-être effacer les vieux livres Java sur les étagères pour vous rappeler comment créer des classes et de telles absurdités non-JavaScript. Sinon, il s'agit d'un puissant cadre permettant de tirer parti de la puissance de dessin de l'élément de canevas HTML5..

Raphaël est un autre cadre de dessin mais va dans une direction différente, en utilisant SVG pour obtenir ses effets de dessin. En fait, Raphaël est peut-être l’une des raisons pour lesquelles SVG a attiré autant d’attention de la part des développeurs de JavaScript au cours de la dernière année..

Pour pallier le manque de prise en charge SVG d'Internet Explorer (bien que cela arrive dans IE9), Raphaël utilise VML pour produire les mêmes effets dans IE6 et les versions ultérieures, ce qui lui confère une prise en charge intégrale entre les navigateurs. Un grand nombre de démos d'animation ont été écrites en utilisant le canevas HTML5 alors qu'ils auraient dû utiliser SVG, et Raphaël est un cadre absolument superbe pour y parvenir..

En effet, en utilisant Raphaël, le JavaScript permettant d'obtenir un effet simple mais impressionnant est assez similaire à jQuery:

paper.circle (320, 240, 60) .animate (remplissage: "# 223fa3", contour: "# 000", "largeur-trait": 80, "contour-opacité": 0,5, 2000);

Micro-bibliothèques

Depuis que des bibliothèques telles que jQuery et Prototype sont devenues un utilitaire standard pour les développeurs Web, nous assistons à une augmentation du nombre de micro-bibliothèques. Pour être juste, voici comment les bibliothèques étaient livrées à l'époque de DHTML, mais il y a quelque chose de très différent chez les nouveaux arrivants.

Plus souvent qu'autrement, une micro-bibliothèque sera open source, sous licence libre afin que vous puissiez l'utiliser à la fois pour des travaux personnels et commerciaux et, en général, elle sera hébergée sur GitHub pour que tout le monde puisse la transformer et l'améliorer..

Les micro-bibliothèques sont comme l'antimatière des grands garçons. Ils s’attaquent à une tâche unique et essaient de la gérer vraiment bien. En fait, la plupart des micro-bibliothèques sont tellement minimalistes qu’elles n’ont souvent pas de site Web, seulement leurs pages GitHub..

J'ai sélectionné quelques micro-bibliothèques à discuter ici, mais beaucoup d'autres sont en cours de création. Je suis même coupable d'en écrire quelques-uns. Emile.js est "un framework JavaScript autonome en animation CSS, nommé d'après le nom d'Animile Cohl, premier animateur".

Écrit par Thomas Fuchs, lui-même de Scriptaculous et Scripty 2, il s’agit d’une bibliothèque Gzipped de 50 lignes, 946 octets (oui, c’est aussi petit) qui animera toutes les propriétés CSS que vous aimez. La seule exception est que cela ne fonctionnera pas avec l'opacité d'IE, bien qu'un correctif soit disponible dans la branche opacity.

Lawnchair est un magasin JSON léger, orienté client, qui fonctionne sur de nombreuses plates-formes différentes. C'est un projet de Brian LeRoux, l'un des hackers à l'origine de PhoneGap, qui fournit une API simple permettant de stocker des quantités arbitraires de données dans pratiquement n'importe quel type de plate-forme, notamment les applications Adobe AIR, Android, iPhone, Palm webOS et les ordinateurs de bureau C'EST À DIRE. Très simple et beaucoup plus facile que d'écrire du code cookie.

Moustache.js est une implémentation JavaScript de Moustache (moustache. Github.com) pour les "modèles sans logique". Ecrit par Jan Lehnardt, l'un des organisateurs de JSConf.eu, la deuxième meilleure conférence JavaScript en Europe (voir mon site pour le meilleur!),

Moustache.js est disponible en tant que script vanille ou plug-in pour YUI, jQuery et Dojo. Il s'agit d'une micro-bibliothèque qui sert uniquement à fusionner les données d'un objet JavaScript dans un mannequin HTML sans la douleur habituelle causée par certains systèmes de templates. Vous pouvez non seulement utiliser ce système dans le navigateur, mais également l’exécuter très facilement dans des environnements JavaScript côté serveur, tels que Node..