Développement d’une nouvelle application : le choix de JavaScript.

  • Sharebar

Suite à l’article de Vincent sur son retour du Devoxx et notamment sur ses interrogations “Du JavaScript propre ?” voici mon retour d’expérience sur le développement d’applications web riches dans le cadre d’un projet client.

Il y a encore quelques années il était très difficile voire impossible de développer des applications complexes sur un navigateur web. Le choix du client lourd s’imposait alors comme solution par défaut, faute d’alternative viable. JavaScript était alors considéré comme un langage peu performant aux fonctionnalités limitées. Les gens considéraient le code difficile à maintenir et à faire évoluer.

Aujourd’hui encore beaucoup de développeurs sont effrayés à l’idée de développer de grosses applications entièrement en JavaScript. Des frameworks comme GWT ou ZK ont alors pris beaucoup d’ampleur en permettant de faire des applications web sans toucher une ligne de JavaScript ou presque.

ZK fut d’ailleurs le framework de prédilection chez mon client pendant longtemps et nous continuons de l’utiliser sur certaines applications.

Mais l’avènement de l’HTML5 a amené avec lui la création d’un immense écosystème autour de JavaScript, avec entre autres de nombreuses bibliothèques et outils.

Saviez-vous par exemple que les principales applications Google (GMail, Google Maps, Google+ et bien d’autres) étaient écrites principalement en JavaScript ?

Dans cet article j’aimerai vous présenter les raisons qui nous conduisent à  à proposer des développements d’ applications JavaScript pour nos clients dans le cadre  de nouvelles applications.

  1. JavaScript : un langage orienté objet
    Le développement orienté objet en JavaScript diffère de la plupart des autres langages orientés objets car les objets ne sont pas des instances de classe, et l’héritage se fait par prototype. Vous trouverez beaucoup de littérature sur Internet à ce sujet, je ne rentrerai donc pas dans les détails ici, mais grâce à l’orienté objet, écrire un code propre, maintenable et réutilisable est tout à fait possible en JavaScript.
  2. Les bibliothèques
    Pour les applications sur lesquelles je travaille, nous nous appuyons principalement sur des bibliothèques reconnues qui ont fait leurs preuves comme JQuery et JQueryUI, mais il existe aujourd’hui des bibliothèques pour pratiquement tous les besoins. Je vous conseille d’ailleurs le site http://jster.net/ qui propose un catalogue assez complet de bibliothèques JavaScript.
    Il existe également des bibliothèques destinées au monde professionnel avec des licences commerciales payantes, comme le framework Kendo UI qui est l’équivalent de JQuery UI en beaucoup plus poussé.
  3. Les tests unitaires
    L’énorme avantage quand vous développez votre application en JavaScript, c’est la possibilité de tester unitairement les IHM beaucoup plus facilement, soit en utilisant des bibliothèques de tests unitaires (comme Jasmine) soit, comme nous le faisons, en développant des tests spécifiques par exemple en simulant les actions utilisateurs comme les clics de souris ou les saisies clavier.
  4. Les outils de débogage
    Il y a de nombreux outils de débogage JavaScript, les deux plus connus étant Firebug et les Chrome Dev Tools (ces derniers ayant ma préférence) intégrés à Google Chrome. On peut ainsi mettre facilement des points d’arrêts conditionnels, inspecter l’état des variables lors de l’exécution et même modifier le code JS à chaud sans avoir à recharger la page grâce à ces outils.
  5. Les outils de vérification et minification
    Quelques autres outils vraiment pratiques que nous utilisons sur le code JavaScript :

    • JSLint et JSHint : des outils qui permettent d’améliorer la qualité du code JS.
    • YUI Compressor : compresse le code JS et ajoute de l’obfuscation de code. S’intègre facilement à Maven pour être lancé automatiquement lors d’un build.
      Dans le même genre d’outil, mais en beaucoup plus poussé il y a le Google Closure Compiler.
  6. Les nouvelles possibilités offertes par l’HTML 5
    Si vous pouvez vous permettre d’oublier les vieilles versions d’IE vous aurez alors accès via JavaScript à une multitude de possibilités inédites grâce aux nouveautés introduites avec l’HTML 5. Pour n’en citer que quelques-unes :

    • Canvas. Pour faire du rendu 2D directement à l’écran. Voir par exemple la bibliothèque KinectJS pour avoir une idée de tout ce qu’on peut faire avec.
    • SVG : Cela permet, entre autres, de dessiner des graphiques, des diagrammes et autres courbes en vectoriel, et de rendre le tout interactif. La bibliothèque RaphaëlJS vous simplifiera le développement en vectoriel.
    • Local Storage. Permet de sauvegarder des informations sur le poste client de manière permanente. Pour aller plus loin avec la manipulation des données entièrement côté client, la nouvelle API IndexedDB permet d’avoir une base de données locale facilement manipulable.
    • WebGL : basé sur OpenGL ES 2.0, WebGL permet de faire de la 3D en utilisant la carte graphique. Supporté actuellement par tous les navigateurs récents sauf IE (mais a priori plus pour longtemps), WebGL est l’API de choix pour afficher des graphiques 3D temps réel ou faire des simulations 3D. Si vous avez déjà développé en utilisant OpenGL, vous serez à l’aise avec WebGL.

Avec les énormes optimisations effectuées par les navigateurs sur l’exécution du JavaScript depuis ces dernières années (la plupart compilent et optimisent le code en natif à la volée) il devient aujourd’hui possible de faire presque n’importe quel type d’application entièrement en JavaScript. Si on ajoute à cela l’impressionnant écosystème qui s’est formé autour de ce langage (bibliothèques, outils, documentations) le choix de développer un client léger en lieu et place d’un client lourd, prend désormais tout son sens.

This entry was posted in HTML, Java, JavaScript and tagged , . Bookmark the permalink.

Leave a Reply