Quel framework pour les animations en Javascript ?

J’avais publié en début d’année un article sur les CSS Animations et le fait qu’elles ne concurrençaient pas réellement les technologies RIA fondées sur un plug-in mais plutôt les framework d’animations en javascript (Pourquoi les CSS Animations ne sont pas concurrentes de Flash ou Silverlight). Le débat est relancé cette semaine avec la publication d’un article sur Six Revisions : 10 Impressive JavaScript Animation Frameworks.

L’idée de cet article est de faire le point sur 10 frameworks d’animation Javascript. Parmi les frameworks présentés, je retiens $fx (pour les soucoupes volantes) et scripty2 (pour sa démo de Solitaire). Plusieurs autres framewokrs ont été proposés dans les commentaires de l’article : script.aculo.us, jQuery, cakejs… Vous noterez qu’aucun de ces framework ne s’orthographie avec une majuscule au début (je dis ça, je dis rien).

scripty2

Comme il est question d’animations en javascript, comment ne pas parler de Chrome Experiment, le portail d’expérimentation des possibilités du moteur javascript du navigateur de Google (qui fonctionnent forcément mieux avec … Chrome).

ChromeExperiments

Cette article relance le débat sur la performance des moteurs javascript des différents navigateurs. Dans ce domaine, le vainqueur est généralement celui qui publie les résultats de sa propre étude, ici le benchmark d’Apple :

JS_Benchmark

Pourquoi est-ce que je vous parle de tout ça ? Car les animations sont un élément essentiel des interfaces : elles illustrent, focalisent l’attention et améliorent grandement l’expérience d’usage (cf. Vive les transitions !). Du moins si elles sont utilisées à bon escient, mais c’est la même chose pour toute technologie de RIA.

Ces frameworks sont donc un bon moyen d’insérer des animations dans une interface en attendant l’arrivée à maturation des CSS Animations. Le tout étant de ne pas chercher à réaliser un exploit technologique là où des technologies comme Flash sont plus appropriées.

Au final je pense que nous n’en sommes qu’au tout début d’une nouvelle ère d’innovation pour les navigateurs qui après 10 ans d’existence sont en train de se métamorphoser (cf. Opera 10, Chrome 4, Firefox 4 : Vers des plateformes sociales et applicatives). Faire évoluer les technologies de base des navigateurs (HTML, CSS, Javascript) est un préambule indispensable, encore faut-il que cela se fasse dans la voie de la standardisation. Dans cette optique, des frameworks open source et largement rependus comme jQuery sont peut-être un choix plus pérene. Mais n’étant pas un spécialiste, je suis ouvert à toute argumentation à ce sujet (ça tombe bien les commentaires sont là pour ça).

8 réflexions sur “Quel framework pour les animations en Javascript ?

  1. Sûr que le javascript permet aujourd’hui de réaliser des animations impressionnantes, si je pouvais émettre un bémol c’est sur le temps de réalisation des dites animations, les possibilités de créativité, le workflow entre designer et coder et la simplicité du code produit.

    Est-ce que ces framework permettent de réaliser n’importe quelle animation ou doit-on faire avec ce que les créateurs ont prévu

    Personnellement, je pense que les plugins ont encore de belles heures devant eux

    Car, je me répète, mais dans certains cas, la vitesse de développement et la simplicité de mise en oeuvre peuvent être importants

    Je pense que le jour où il existera des IDE graphiques qui permettront de réaliser des animations javascript avec dessin à la souris, à l’image de l’IDE Flash, Adobe pourrait être en grosse difficulté

    J'aime

  2. Arghhh…

    J’attendais un argumentaire précis, j’étais impatient de lire l’article, et finalement, c’est à moi de poster pour donner mon avis…

    Bon, du coup je suis là, je vais le donner ;-)

    J’utilise jQuery, il me convient parfaitement, j’ai eu l’occasion d’utiliser mootools, pas mal aussi bien que je ne vois pas en quoi il est réservé aux pros (peut être pour déboger les plugins moins bien finis que ceux que j’ai testé en jQuery…)

    N’ayant pas d’expérience sur d’autres frameworks, je suis preneurs d’autres avis !

    J'aime

  3. En tant que développeur web comme passe-temps, j’ai commencé par utiliser Script.aculo.us et donc Prototype.js.

    Ces frameworks permettent en effet de ne pas réinventer la roue à chaque effet souhaité. De plus le code obtenu est beaucoup plus lisible.

    Malheureusement, j’ai toujours des regrets lorsque je me rends compte que j’utilise plus de 100ko de code (Prototype fait 124ko) uniquement pour déplacer un object.

    Il m’arrive donc assez souvent de devoir écrire mes propres animations: 20 lignes de codes qui remplissent parfaitement leur rôle.

    On trouve à peu près toute les fonctionnalités que proposent en vrac les « grands » frameworks, dans des petits scripts de quelques dizaines de codes.

    Dans cette optique de réduire la taille, $fx est une bonne trouvaille. A tester et peut-être adopter.

    J'aime

  4. J’ai le même avis que Martin. J’utilise jquery dans un projet professionnel après avoir expérimenté dojo, moins flexible à mon sens.
    Ce qui est appréciable avec jquery c’est la syntaxe très simple pour accéder à des tags, etc … et manipuler des div en faisant du DOM.
    Scriptaculous est pas mal aussi quoi que un peu lourd (en terme de ko mais il existe des versions « allégées »).
    Jamais testé mootools dans un cadre professionnel mais j’aimerai bien savoir en quoi il est plus adapté.

    J'aime

  5. Je rejoins Thibaut sur MooTools.

    MooTools est bien plus complet que jQuery, mais pas plus lourd car vous pouvez choisir précisément quel fonctionnalité prendre dans votre « .js » (grâce au Core Builder), et c’est sans compter le « More Builder » qui permet de rajouter encore des fonctionnalités.
    Bref on compile son propre MooTools perso.

    Pour ce qui est du dev, un petit coup d’œil ici permet de se rendre compte de la chose :
    http://www.metal3d.org/index.php/blog/ticket/2009/02/12/Jquery-vs-Mootools
    Je rejoins parfaitement l’auteur de ce billet sur les arguments avancés (tous en faveur de MooTools évidement :D), étant un fervent utilisateur de MooTools.

    J'aime

  6. @Nico : Je pense que l’auteur de ce billet de sait pas se servir de jQuery et que ses critiques autant que ces arguments sont irrecevables. D’un coté, je ne suis pas moi même utilisateur de Mootools.

    Personnellement j’utilise jQuery et j’en suis pleinement satisfait. Que ce soit dans la simplicité, la puissance et la vitesse d’exécution ou dans la courbe d’apprentissage.

    D’un coté, aucun framework ne code à votre place et une usine à gaz restera une usine à gaz même si elle utilise jQuery au lieu de Mootools ou prototype/scriptaculous.

    Il faudra tout de même que je me penche sur certains framework, un critère étant bien évidemment qu’il soit plus léger (en ko) que jQuery et qu’il réponde tout de même à mes attentes (suivant le projet, je n’ai peut-être pas besoin de toute la manipulation DOM par exemple, ou bien les animations ne m’intéressent pas).

    Il peut aussi être intéressant de n’importer que la librairie Sizzle, composante principale de jQuery pour développer ses propres fonctionnalités persos autour.

    J'aime

  7. Oui,

    MooTools a aussi mes faveurs, car « relativement » facile à personnaliser. Mais je crois surtout, en tant que webmaster professionnel, que l’important est de gagner un max de temps sur chaque mise en oeuvre de ces contenus riches : en fonction de ce que je souhaite, je varie les plaisirs… Mootools ici, jQuery là, et ainsi de suite… Gaffe quand même de ne pas tout mélanger sur une même page : crash assuré ! Et de vérifier aussi les compatibilités sur différentes plate-formes pour éviter les mauvaises surprises…

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s