Technos: comparaison de frameworks web2

1 septembre 2007

Technos: comparaison de frameworks web2

Le web 2.0 à l’instar de son aspect commercial et marketing demeure confus sur le plan technique tant la quantité de frameworks disponibles pour les développeurs est phénoménale, on les estime à l'heure actuelle à plus de 500 !

Pour les néophytes, le web 2.0 repose concrètement sur le JavaScript, particulièrement sur sa capacité à faire des appels asynchrones aux serveurs Web via l’objet XMLHttpRequest ; une technologie ancienne initiée par Microsoft avec l’objet ActiveX XMLHttp en 2001 ! Ceci permet aux visiteurs d’un site d’accéder à de nouveaux contenus dynamiquement sans avoir à cliquer sur une succession de liens pour rafraichir leur page Web. A cette fonctionnalité s’ajoute le DHTML (qui permet de modifier l’apparence d’une page HTML grâce au JavaScript sans rafraichir le navigateur) pour donner naissance au Web 2.0.

Un concept qui vise à offrir aux visiteurs une « expérience nouvelle » du Web avec des sites plus dynamiques ressemblants de plus en plus à une vraie application car offrant un haut degré d’interactivité et de réactivité. Tout ceci renforce l’impression qu’a le visiteur d’être au cœur d’une communauté le rendant plus que jamais contributeur du site sur lequel il se trouve.

La déferlante Web 2.0 a engendré une multitude de frameworks pour implémenter facilement de nouveaux contrôles Web appelés « widgets » tels que des arbres dynamiques, des grilles, des champs auto-complétés et autres fenêtres drag-and-dropables jusque-là réservées aux applications. Selon vos besoins, chaque framework aura ses avantages et inconvénients qu’il faudra confronter pour faire le bon choix.

Il existe une variété de frameworks en JavaScript ceux-ci sont en fait des bibliothèques de widgets. Les plus populaires et les plus légers sont prototype-Rico, prototype-Script.aculo.us ou encore, d’autres plus poussés offrent des widgets plus fonctionnels et variés tels que Dojo, Rialto, Yahoo UI ou Ext.

Avantages:

Ces frameworks sont d’une grande souplesse dans la personnalisation des interfaces, on peut créer soi-même ses propres widgets , en maitriser les comportements, y ajouter des effets graphiques flatteurs, etc.

Graphiquement, grâce aux CSS, il est facile de changer l’apparence de ces composants. Ext propose même par défaut un skin très proche des applications comme office 2003 ou Windows Vista.

Il est vraiment possible de rendre une application Web aussi ergonomique qu’une application locale, grâce à des frameworks très poussés comme Ext.

Inconvénients:

Requiert des connaissances en développement avancées, et de l’expérience dans le domaine pour programmer des applications complexes. Car il est très facile de développer quelque chose qui surcharge le serveur Web comme le poste client (navigateur) et qui au final, par rapport aux conditions d'exploitation (forte audience par exemple), s'avère instable et/ou peu performant.

Pour un ingénieur spécialisé dans la programmation orientée objet, le JavaScript parait insuffisamment strict et robuste. De plus pour l’homogénéité d’un projet il est recommandé d’utiliser le même IDE coté client comme coté serveur et de base les IDE les plus connus, Eclipse ou Visual Studio ne sont pas des éditeurs/débogueurs de JavaScript performants.

Même si les frameworks sont compatibles avec la plupart des navigateurs du marché, le JavaScript demeure un langage coté client pour les navigateurs Web, son comportement est tributaire son implémentation par ces derniers. Le code pour implémenter ces frameworks est fortement sujet à des incompatibilités entre les navigateurs voire entre les versions d’un même navigateur.

Le code est plus difficile à maintenir : quand on se penche sur les sources d’un widget par exemple, il est difficile de le comprendre car il s’agit souvent d’un amas de <div> faisant appel à des classes CSS.

Du code bien entendu qui peut être très éloigné du respect des normes d'accessibilité (W3C, Accessiweb)

Les frameworks en langages orientés objet:

GWT, Echo2, DWR, MagicAJAX .NET, ComfortASP.NET entre autres pour .NET, ces frameworks ont pour but de passer au niveau d’abstraction supérieur et de permettre au développeur de se défaire du code JavaScript souvent jugé complexe et couteux. Chaque framework néanmoins propose une approche différente de cette abstraction que je vous invite à découvrir en détails sur leur sites Web respectifs.

Avantages:

Aucunes connaissances en JavaScript ne sont requises, c’est le framework qui se charge de le générer. Le coût de développement est moindre car on garde une structure monolithique dans son application, idéal pour une mise en production rapide.

Facilité de test et de débogage car on peut travailler sur son IDE actuel avec son langage actuel Java, C#... La maintenance est donc plus aisée (ex intégration de JUnit dans GWT).

Ces frameworks (GWT et Echo2) proposent pour la plupart des widgets : Grid, Tree, Input auto-complété ; dans le cas des frameworks .NET beaucoup utilisent un composant conteneur qui se chargera de rafraichir en asynchrone les contrôles qu’il contient.

Les requêtes client/serveur sont gérées automatiquement par ces framework et demeurent transparentes pour le développeur. DWR va plus loin car il permet avec Javascript d’accéder à des méthodes distantes

Inconvénients:

S’il reste possible de personnaliser ses widgets grâce au CSS, il n’est pas possible de changer complètement l’apparence de ceux-ci en changeant le code généré en HTML.

Pour le cas de GWT, l’utilisation d’un tel framework s’est révélée plus adaptée pour des applications web riches à page unique. Or beaucoup d’applications actuelles fonctionnent selon un modèle à plusieurs pages puis essaient d’ajouter de l’interactivité avec des composants AJAX, intégrer GWT à ce genre d’applications est beaucoup plus difficile qu’avec les frameworks JavaScript.

En implémentant GWT, l’application repose entièrement sur le JavaScript généré par le framework, ainsi si le JavaScript n’est pas supporté par le navigateur ou est désactivé rien ne s’affichera sur la page.

DWR ne propose pas de widgets.

Alors lequel choisir ?

On le remarque bien, le choix d’un framework dépendra de plusieurs facteurs :

D’une part du type d’application Web : beaucoup d’applications en « Web 1 » sont construites sur plusieurs pages. Pour les rendre plus attractives, il est moins couteux de faire appel à un framework JavaScript, surtout si vous voulez avoir un contrôle parfait du « look and feel » de vos widgets. Autrement si vous prévoyez de développer une application web riche entièrement « ajaxisée », les frameworks Java ou .NET sont plus adaptés.

D’autre part les compétences des développeurs qui sont a votre disposition. En effet pour la mise en place de frameworks JS, il faut avoir une bonne maîtrise en Web développement (JS, HTML, CSS, XML) pour optimiser le code coté navigateur et les appels qui sont fait au serveur. Le coût en formation ou en temps d’adaptation d’un développeur non-initié est loin d’être négligeable.

On peut conclure que pour implanter de manière légère quelques widgets Web 2.0 sur de l’existant les frameworks JS sont la solution la plus convenable, cette flexibilité à un coût pour des applications Web plus complexes si vous ne disposez pas des compétences en Web développement avancé.

Les frameworks en langages orientés objet sont certes plus rigides mais ils offrent aux applications une structure plus homogène et monolithique mais qui à l’avantage d’épargner aux développeurs la complexité du JavaScript et des communications client/serveur et d'en faciliter la maintenabilité.

Notre conclusion...

Finalement une solution idéale laisserait imaginer une combinaison de frameworks comme DWR avec n’importe quel autre framework JS (en théorie) ou de framework hybride GWT-EXT ou Ruby-on-Rails. Par rapport à la typologie de notre projet en cours (intranet de gestion) le framework extjs.com nous a paru le plus adapté.

Cet article n’ayant pas pour but d’être exhaustif sur les spécificités de chaque framework, nous vous invitons à consulter les liens suivants:

Frameworks JS :