Formation avancé sur les principaux frameworks AJAX

Problème à signaler:


Télécharger Formation avancé sur les principaux frameworks AJAX



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:


 

SOMMAIRE

 

-PROPOS

 

AJAX permet de créer des interfaces riches avec des comportements jusqu’alors réservés aux « clients lourds », une démarche qui place donc l'expérience utilisateur au cœur des applications en ligne. Utilisé avec parcimonie, AJAX rehausse élégamment la qualité des applications en ligne en les rendant plus attractives et ergonomiquement

fonctionnelles.

A travers cette étude, nous évaluons et comparons 11 frameworks permettant l'intégration d'AJAX au sein d'une application. L'expérimentation, le profil architectural et fonctionnel ainsi que le niveau de flexibilité de chacun des frameworks envisagés, nous a mené vers un découpage en trois catégories :

?   les « moteurs AJAX », bibliothèques légères et conçues pour des développements  AJAX de bas niveau : Prototype, jQuery ;

?   les bilbiothèques de composants AJAX, compactes et riches fonctionnellement : Dojo, , Scriptaculous, Yahoo!UI, Mochikit, Rialto ;

?   les frameworks de développement AJAX, restrictifs mais adaptés à un développement rapide et maîtrisé : Echo2, Atlas, Google Web Toolkit.

Avant de passer en revue ces différents frameworks, nous présentons quelques préalables à la mise en place d'AJAX.

'APPELLE-T-ON AJAX ?

 

Le terme AJAX a été mentionné pour la première fois par Jesse James Garrett d'Adaptive Path en février 2005 dans un article intitulé « AJAX: A New Approach To Web Applications ». C'est l'acronyme de Asynchronous JavaScript And XML :

?   Le terme Asynchronous désigne les échanges effectués via l'objet XMLHttpRequest.

?   Javascript est le langage qui régit ces échanges et qui, par le biais du DOM, agit sur la couche de présentation Web classique (XHTML & CSS)

?   Enfin, XML est le format utilisé pour stocker les données échangées.

 

Comparaison de modèles de communication HTTP (applications Web traditionnels à gauche - applications Web AJAX à droite)

(Source : )

En résumé, lors d'une interaction entre la page et l'utilisateur, AJAX demande au serveur Web de ne rafraîchir qu'une partie de la page, celle impactée par un changement de contenu ou de présentation.

 

Comparaison des mécanisme sd'échanges client / serveur synchrone

(applications Web traditionnelles) et asynchrone (applications Web AJAX)

(Source : )

La partie de la page impactée est affichée via une fonction de callback qui récupère, dans la réponse du serveur Web, les données (au format XML) à mettre à jour.

C'est essentiellement sur ce principe de mise à jour de page qu'AJAX diffère des applications Web classiques.

En résumé :

AJAX n'est pas une technologie.

AJAX est indépendant de tout environnement.

AJAX peut être implémenté sur toute plateforme Web (PHP, JSP,

Zope, ).

AJAX désigne l'utilisation conjointe de plusieurs technologies Open Source.

AJAX attire l'attention de la communauté Web à de nombreux égards.

Pour formaliser ce mouvement, IBM a créé en février 2006 l'Open AJAX Alliance, un consortium de sociétés qui rallie sous son aile des acteurs majeurs : Adobe, BEA, Borland, Eclipse Foundation, Google, Yahoo!, Mozilla Corporation, Novell, Oracle, Red Hat, Zend, Sun, etc.

 

 

Ainsi que l'énonce J. Ferraiolo, directeur d’OpenAjax Alliance : « L’essor de la technologie Ajax et les bénéfices dont on peut tirer de l'initiative OpenAjax constituent des facteurs essentiels pour accélérer son adoption ».

D'autres organismes relaient la promotion d'AJAX :

?   l'organisateur d'évenements « AjaxWorld Conference & Expo »

() ;

?   Ajaxian (), une communauté d'utilisateurs et d'experts qui alimentent les débats sur AJAX et montrent ses applications professionnelles (cf. la rubrique Showcases du site).

TOUR D'HORIZON

 

Pour un ingénieur Web, un designer graphique, un chef de projet ou un décideur, adopter AJAX implique de prendre en considération plusieurs points et de se poser les bonnes questions.

?   Quelles sont les différences fondamentales d'architecture entre une application Web classique et une application AJAX ?

?   Mes utilisateurs sont-ils ouverts à de nouvelles habitudes de navigation ? Quelles fonctionnalités AJAX peuvent leur rendre service ?

?   Mon application sera-t-elle compatible avec la majorité des navigateurs (IE, Firefox, Opera, Safari) ?

?   Ajax permet-il d'améliorer une architecture serveur, la gestion et le stockage de données ?

?   Mon équipe a-t-elle les compétences suffisantes pour démarrer ? Quels sont les problèmes qu'elle pourrait rencontrer en phase de production ?

a/ Navigation plus réactive et moins intrusive

AJAX contourne la ré-actualisation complète de page par la ré-actualisation partielle. L'utilisateur n'attend pas de voir toute la page se rafraîchir ce qui lui permet de poursuivre sa navigation.

b/ Enchaînement de requêtes AJAX

Par défaut, une requête AJAX n'en «bloque» pas une autre : si l'utilisateur effectue plusieurs actions sur une interface AJAX, le serveur Web traitera ses actions en parallèle. 

c/ De meilleures performances

Une page Web complexe nécessite systématiquement plusieurs accès à des sources de données (bases de données, fichiers XML, ) pour récupérer l'ensemble des informations à afficher. Or dans de nombreux cas ces informations varient peu.

Un exemple : si le menu d'un site ne change pas, pourquoi récupérer ses rubriques en base de données à chaque chargement de page ?

En ne demandant « que ce qui change », AJAX permet au serveur Web de transmettre moins de données. La réponse à une action de l'utilisateur est donc plus rapide et le trafic réseau réduit.

d/ Transmission uniquement de données

AJAX ne reconstruit pas via HTML l'ensemble des éléments de la page qu'il doit mettre à jour. AJAX s'appuie sur le DOM pour détecter ces éléments puis sur Javascript pour mettre à jour leurs propriétés ou leur contenu.

e/ Aucun plug-in requis

Contrairement à d'autres technologies telles que Flash, AJAX ne nécessite aucun plugin puisqu'il est basé sur un standard de fait (l'objet XMLHttpRequest) désormais livré dans tous les navigateurs Web.

f/ Compatibilité avec les navigateurs du marché

Les toolkits AJAX apportent avantageusement de l'uniformité dans ce domaine. La majorité d'entre eux sont compatibles avec les navigateurs les plus usuels (Internet Explorer, Mozilla, Firefox, Opéra, Safari) et gèrent cette compatibilité de manière transparente sans que le développeur n'ait besoin d'intervenir.

a/ Multiplication du code Javascript

AJAX requiert une interaction avancée entre les éléments d'une page : la mise à jour d'éléments lors de requêtes AJAX implique souvent l'écriture de code Javascript supplémentaire, code fastidieux à maintenir et rapidement instable.

Ce phénomène met en jeu la maturité des développeurs et les méthodes de conception Javascript : force est de constater que peu de développeurs peuvent réellement revendiquer être des experts dans le domaine. Il faut donc garder à l'esprit que mettre en « action » AJAX au sein d'une application Web, nouvelle ou existante, équivaut à relever de nombreux défis notamment pour les équipes de développeurs si elles ne disposent pas du temps ou des compétences nécessaires.

b/ Accessibilité & Ergonomie

Mal utilisé, AJAX peut engendrer des pertes de fonctionnalités du navigateur :

?   impossibilité de mettre une page en favoris (signets ou bookmarks) ;

?   impossibilité d'utiliser des boutons de navigation « suivant » et « précédent » (cf. les démonstrations en ligne du toolkit Dojo).

La majorité des frameworks contournent désormais ces deux problèmes en récupérant l'URL de la page.

c/ Utilisation conjointe de plusieurs toolkits Ajax

L'utilisation simultanée de plusieurs toolkits AJAX mene parfois à des blocages fonctionnels.

Le cas le plus simple pour résoudre le problème est de modifier l'ordre de chargement des bibliothèques Javascript.

d/ Avertir l'utilisateur lors de changements sur la page

Si l'utilisateur :

?       n'est pas averti d'un changement de focus,

?       n'est pas averti d'une mise à jour dans le contenu de la page,

?       ou s'il ne peut pas trouver le contenu mis à jour par un indicateur visuel quel qu'il soit (message d'attente, indicateur graphique), il pensera rapidement que l'application ne marche pas correctement.

e/ Risques, Sécurité

Cette section écarte les techniques d'attaques qui consistent à exécuter du code Javascript chez le client, simplement car elles existaient déjà avant AJAX (Cross-Site Scripting : XSS, ).

Le danger réel qu'implique AJAX se situe coté serveur car AJAX permet des transferts de données asynchrones et sans confirmation.

Il faut noter que ce danger est minime mais réel (virus « Samy » sur MySpace et « Yamanner » sur Yahoo!Mail). Des méthodes préventives suffisent à régler le problème (s'assurer que les requêtes XmlHttpRequest recues proviennent bien de l'application Ajax déployée, minimiser le nombre de requêtes AJAX, ).

Par ailleurs, des outils pour détecter d'éventuelles failles commencent à voir le jour : par exemple, Sprajax un outil Open Source édité par Denim Group

().

Cette partie propose des outils simplifiant le développement AJAX et le développement Web en général.

3.3.1 Les IDE (Integrated Development Environment) orientés AJAX

Les IDE AJAX sont récents. Il faut avouer que pour l'instant :

?   ils impliquent souvent des méthodes de développement difficilement conciliables avec le développement Web traditionnel ;

?   ils intègrent encore mal les frameworks AJAX déjà existants (ou ne les intègrent pas du tout).

Toutefois, ces outils ont le mérite d'exister, c'est pourquoi nous les mentionons :

IDE

URL

Licence / Tarification

Aptana

 

Eclipse Public License

Flapjax

 

BSD

JackBe

 

50.000 $ et +

Java Studio Creator 

 

-

Morfik

 

-

Plugin ATF pour Eclipse

 

Eclipse Public License

Tibco General Interface

 

25.000 $ et +

3.3.2 Outils de développement Web

a/ Javascript

Depuis sa naissance, Javascript a été présenté comme un langage « obscur ». Malgré sa normalisation par l'ECMA, le langage manque de crédibilité en partie à cause de problèmes liés à son design, à sa mauvaise utilisation (scripts mal conçus) ou à ses différences d'implémentations par chaque navigateur.

Javascript redore aujourd'hui son blason grâce à des outils qui rendent son utilisation plus confortable :

?   débogage à l'aide d'extensions Firefox (Venkman, Firebug), de Visual Studio (pour IE), de toolkits AJAX (), JSLint (un équivalent Javascript de Lint pour C/C++ : )

?   réduction / optimisation de code ( ou )

?   obsfucateur ()

?   tests unitaires ()

?   un éditeur de liens (ou linker en anglais) en cours de développement

()

b/ Autres

Trois extensions Firefox très pratiques :

?   View Source Chart (anciennement View Rendered Source) qui affiche la source d'une page avec un code de couleurs :

 

?   IE Tab qui permet d'émuler Internet Explorer dans Firefox (pour Windows seulement) ;

?   Web Developer qui, entre autre, permet de jouer en temps réel sur les CSS d'une page.

Il semble difficile de prédire ou dicter l'évolution d'AJAX dans les années à venir : à l'heure actuelle, de nombreux frameworks existent déjà tandis qu'on observe une profusion de nouveaux projets aussi bien Open Source que commerciaux : parmi eux, les plus fédérateurs sont sans nul doute ceux qui apportent une vision nouvelle à la programmation AJAX (modèle de conception objet, packaging robuste) ou qui bénéficient d'un soutien fort (Google, Yahoo, Microsoft).

Dans deux études intitulées « Emerging Technologies Hype Cycle Highlights Key Technology Themes » et « Le Web 2.0 : préparez-vous à une nouveauté toute relative », le Gartner Group pense qu'AJAX atteindra son stade de maturité dans le court terme (moins de 2 ans).

 

« 2006  Hype Cycle for Emerging Technologies »

(Technologies émergentes et tendances à venir)

(Source : ?id=495475)

Ray Valdes et David Mitchell Smith, analystes chez Gartner, le résument ainsi : « Bien qu'AJAX soit plus lourd que le HTML, il reste léger par rapport à des approches qui s'appuient sur des modules compagnons (comme les contrôles ActiveX, les applets Java, les animations Flash, les graphiques vectoriels adaptables ou les PDF). Avec AJAX, les concepteurs qui cherchent à offrir une expérience plus riche aux utilisateurs disposent d'une alternative légère comptant sur un soutien important de la communauté du code source ouvert ».

Il existe de nombreux services et applications autour d'AJAX. En voici quelques exemples :

 

Amazon A9. Moteur de recherche.

Fonctionnalités AJAX :

?    info bulle

?    fenêtrage du contenu

 

Google Suggests. Moteur de recherche.

Fonctionnalité AJAX :

? auto-complétion (suggestion de mots au fur et à mesure d'une saisie de texte)

 

 

PagesFlakes. Mashup (syndication de contenus).

Conçu avec le toolkit AJAX Microsoft Atlas Fonctionnalités AJAX :

?      drag&drop

?      accès à des services informatifs distants

 

Earth POI. Système d'information Géographique & Centre d'intérêts.

Conçu en partie avec le toolkit AJAX Prototype Fonctionnalité AJAX :

? accès à des services informatifs distants (API Map)

 

 

Yahoo!Mail Beta. Webmail.

Fonctionnalités AJAX :

?     tris de tableaux

?     raccourcis clavier

 

Ajaxwrite. Traitement de texte en ligne.

Fonctionnalités AJAX :

?     éditeur WYSIWYG

?     ouverture / sauvegarde de documents

 

Box. Gestionnaire électronique de documents.

Fonctionnalités AJAX :

?     tris de tableaux

?     raccourcis clavier

 

FRAMEWORKS AJAX : FICHES REPÈRES

 

Pour implémenter Ajax dans une application Web, nous distinguons  trois catégories de frameworks :

?   les  « moteurs AJAX » ;

?   les bibliothèques de composants AJAX prêt à l'emploi ; ? les frameworks de développement Ajax.

Les frameworks de chacune de ces catégories offrent un nombre d'outils et de fonctionnalités simplifiant la mise en œuvre d'applications AJAX. Leur présentation dans la suite du document a pour but de balayer le large panel de possibilités offert par le développement d'applications AJAX.

Le plus souvent livrés sous la forme d'un fichier unique, les moteurs AJAX regroupent un ensemble de méthodes de bas niveau pour le développement AJAX avec les standards Javascript et CSS. Ils impliquent l'intervention de développeurs confirmés pour concevoir les applications AJAX du fait notamment d'un code parfois complexe.

4.1.1 Prototype

 

a/ Présentation

Prototype peut être considéré comme une extension des fonctionnalités natives de Javascript. La bibliothèque se base sur un modèle objet inspiré de Ruby.

Voici les 10 composants qui forment Prototype:  

?   Base qui fournit des méthodes utiles à la programmation Javascript orientée objet (Class.create & Object.extend)

?   Compat qui résout les problèmes de compatibilité entre navigateurs

?   String, Enumerable et Array,  qui permettent de manipuler plus facilement des structures de données Javascript

?   Ajax qui contient des méthodes simplifiant l'utilisation de XMLHttpRequest (Ajax.Request) et la mise à jour partielle ou périodique d'une page (Ajax.Updater et PeriodicalExecuter)

?   DOM qui permet de récupérer, d'insérer, de masquer les éléments HTML de la page

?   Form, Event (Event.observe) et Position, qui fournissent des méthodes pour le contrôle de formulaires (Form.serialize), pour la gestion du clavier et le positionnement d'élements HTML

Nom

Prototype

Site Internet

 

Auteur

Sam Stephenson ()

Licence

MIT

Version(s) stable(s)

1.4 ()

1.5 RC 0 ()

Compatibles avec les navigateurs

Internet Explorer 6.0 et + / Mozilla Firefox 1.0 / Mozilla 1.7 et + / Apple Safari 1.2 et +

Documentation

?   Prototype

?   . html

?   e.pdf

?  

Tarification

Gratuit

Présentation

 

Exemples d'utilisation

Prototype Window Class ()

 

Prototype Window Class : Création de fenêtres déplaçables et redimensionnables avec Prototype

 

Exemple de requête AJAX avec Prototype

b/ Analyse

Forces

Faiblesses

o    Propreté, élégance du code

o    Raccourcis (Helper functions) simplifiant la programmation

DOM / Javascript

o  Documentation minimaliste :

nécessité d'apprendre à partir d'une lecture du code

o  Mécanismes d'héritage objet o Gestion des évenements

Opportunités

Menaces

o Compartimentation de la bibliothèque

o    Roadmap

o    Réutilisation non maitrisée de Prototype

o    Communauté peu écoutée malgré son souhait de contribuer. L'évolution de Prototype n'est dirigée que par une seule personne, son auteur.

4.1.2 jQuery

 

a/ Présentation jQuery est une bibliothèque Javascript axée sur les standards

?   DOM

?   CSS 3 (prise en compte sélecteur ~, attributs [@attr=’nom_attribut’]) ? XPATH (opérateurs / et // ).

Nom

jQuery

Site Internet

 

Auteur

John Resig ()

Licence

MIT & GPL

Version stable

1.0.2

Compatibles avec les navigateur

Internet Explorer 5.5+ / Firefox 1.0+ / Safari

1.3+ / Opera 8.5+

Documentation

?  

?  

Tarification

Gratuit

Poids

15ko

Présentation

?  

?  

Exemple d'utilisation

 

 

Thickbox v2.1 : création de gallerie d'images avec jQuery

b/ Analyse

Forces

Faiblesses

o  Parcours / manipulation du DOM o Documentation

o  Réactivité de la communauté o Simplicité de la syntaxe

o Fuite de mémoires due à la gestion des évenements (Internet Explorer seulement)

Opportunités

Menaces

o Intégration du plugin visuel

Interface () o Support international

o Alourdissement de la librairie

Les bibliothèques de composants AJAX sont fondées sur un ou plusieurs moteur(s) AJAX d'origine ou bien modifié(s). Elles peuvent utiliser des bibliothèques DHTML telles que Behavior et sont généralement agrémentées de composants (graphiques ou non) existants ou à développer.

Les composants se présentent typiquement sous la forme de fichiers Javascript séparés parfois hiérarchisés et liés par des dépendances. Il s'agit de contrôles qui élargissent ou créent des actions sur des éléments de la page.

4.2.1

 

a/ Présentation

est une bibliothèque Javascript qui permet de créer des effets visuels : initialement la bibliothèque ne disposait que de peu de composants (accordéons, effets de scrolling automatique ou d'apparition de texte). Aujourd'hui, la bibliothèque étend sa richesse fonctionnelle avec les trois composants , , .

Par ailleurs, l'intérêt majeur de réside dans l'utilisation d'une version allégée de Prototype (). Partie d'une initiative d'optimiser Prototype pour une utilisation personnelle, s'affirme à ce jour comme un compétiteur de talent attirant de plus en plus de contributeurs (nombre croissant de démonstrations en ligne).

Nom

Moo

Site Internet

 

Auteur

Valerio Proietti ()

Licence

MIT

Version stable

1.2.4

Compatibles avec les navigateurs

Safari, Firefox, Internet Explorer

Documentation

 

Poids

12,9ko

Tarification

Gratuit

Support & Communauté

 

Exemples d'utilisation

 

 

Création d'onglets, effets d'apparition de texte avec

b/ Analyse

Forces

Faiblesses

o Croissance de la communauté o Poids de la librairie

o Documentation

Opportunités

Menaces

o Librairie modulable Mootools ()

o Manque de support

4.2.2 Scriptaculous

 

a/ Présentation

est une bibliothèque AJAX basée sur Prototype (version 1.5.0_rc). Elle fournit :

?   un constructeur d'objets DOM () ;

?   une large palette d'effets visuels (, ) ;

?   des fonctionnalités de contrôles d'éléments HTML telles que l'auto-completion, le drag-and-drop et l'édition « sur place » (, ) ; ? des méthodes pour procéder à des tests unitaires ().

Nom

Scriptaculous

Site Internet

 

Auteur

Thomas Fuchs ()

Licence

MIT

Dernière Version stable

1.6.4

Compatibles avec les navigateurs

 

Poids

Environ 200ko

Documentation

 

Tarification

Gratuit

Communauté

 

Exemples d'utilisation

?  

?  

Outils

Un bundle pour l'éditeur Textmate (Mac OS) :

?   écrans :

prototype-script-aculo-us-textmatebundle

?   téléchargement :

/textmate-prototype-scriptaculusbundle

 

Drag & Drop (Glisser & Déposer) d'une liste vers une autre avec

b/ Analyse

Forces

Faiblesses

o    Multitude d'effets graphiques o Simplicité du Drag-and-drop

o    Modèle orienté objet simple à comprendre et à prendre en main

o L'utilisation d'une version non officielle de Prototype (même s'il s'agit d'une version améliorée :

)

Opportunités

Menaces

o Support de Ruby on Rails

o Roadmap : futures évolutions non connues

4.2.3 YUI Library a/ Présentation

Yahoo! User Interface Library est un exemple de projet Open Source de qualité : la documentation fournie est centrée sur les exemples et les différents méthodes possibles pour exploiter les composants.

La bibliothèque se décompose en trois collections :

?   Utilities : manipulation du DOM, gestion d'évènements, Drag & Drop, utilisation de XmlHTTPRequest.

?   Controls : widgets pour la plupart graphiques (autocomplete, calendrier, container, logger, menu, slider, treeview)

?   CSS : gestion des tailles, polices de caractères, styles prédéfinis

Nom

Yahoo! User Interface Library

Site Internet

 

Auteur

Yahoo

Licence

BSD

Version stable

0,11,4

Compatibles avec les navigateurs

Safari, Firefox, Internet Explorer, Opera

Documentation

1 documentation par composant

Tarification

Gratuit

Support & Communauté

 

Poids

2,09mo

Exemples d'utilisation

?  

?  

 

Composant « arbre » fourni par YUI

b/ Analyse

Forces

Faiblesses

o    Documentation

o    Intégration : possibilité de découpler les composants de la bibliothèque pour qu'ils fonctionnent seuls au sein par exemple d'une page HTML

o    Objet Arbres (Tree)

o    Gestion des CSS (taille des polices, placement)

o    Nombre restreint de composants

o    Fuite de mémoires due à la gestion des évenements (Internet Explorer seulement)

Opportunités

Menaces

o Intégration de la bibliothèque à des frameworks AJAX

o Roadmap : futures évolutions non connues

4.2.4 Mochikit a/ Présentation

Mochikit est une bibliothèque complète fournissant des méthodes pour travailler plus facilement avec Javascript notamment sur les structures de données et les données.

?   JSON Serialization, URL Builder ;

?   Recherche / Tri de tableaux ;

?   Formatage de date ;

?   Gestion des évènements du clavier, de la souris, utilisation de signaux.

Nom

Mochikit

Site Internet

 

Auteur

 

Licence(s)

MIT / Academic Free License version 2.1

Version stable

1.3.1

Compatibles avec les navigateurs

Safari 2.0.2, Firefox 1.0 & 1.5, Internet Explorer 6, and

Opera 8.5

Serveur requis

non

Documentation

 

Tarification

Gratuit

Exemples d'utilisation

?  

?   TurboGears Ajax application development

 

framework (commercial, )

 

Fenêtre de debogage sous Mochikit

b/ Analyse

Forces

Faiblesses

o    Manipulation de structures de données (tableaux, )

o    Interpréteur JavaScript, panel de debogage 

o Effets visuels (malgré l'intégration, portage de la bibliothèque )

Opportunités

Menaces

o Elargissement

o Roadmap : futures évolutions non connues

4.2.5 Rialto

 

a/ Présentation

Rialto est une bibliothèque de composants principalement graphiques. Elle peut être utilisée de manière autonome mais se décline aussi en plusieurs implémentations conçues pour des intégrations plus spécifiques avec certains langages tels que JSP, JSF, .NET, PHP et Python.

Des formations Rialto de 1 a 3 jours sont assurées par son éditeur (Improve SA, une société française située à Puteaux).

Nom

Rialto – Rich Interface Application Toolkit

Site Internet

 

Auteur

Improve Institute ()

Licence

Apache 2.0

Version stable

1.0

Compatibles avec les navigateurs

IE6.x and Firefox 1.x.

Documentation

1 documentation par langage

Tarification

Gratuit

Poids

Environ 600ko

Outils

Rialto Studio (éditeur WYSIWYG)

 

Echo Studio : création de composants graphiques Rialto

b/ Analyse

Forces

Faiblesses

o    Intégration technologique o Des widgets aboutis o Drag & drop sur des onglets o Support Rails mais

o    Ne dépend d'aucun framework

et peut être intégrer à PHP, Java

 

o    Expérience de l'éditeur en JAVA et J2EE

o    Browser Compatibilité

o    Documentation (des commentaires dans le code)

Opportunités

Menaces

o Elargissement vers de nouvelles technologies o Soutien de l'éditeur (formation)

o Pérennité de l'éditeur

4.2.6 Dojo

 

a/ Présentation

Dojo Toolkit est né avec le site qui l'utilise au sein de son système de wiki Jotspot. Le toolkit inclut de nombreux composants personnalisables : Form Widgets, Layout Widgets, RPC, Storage, Drag & Drop et Effects.

IBM et Sun ont récemment rejoint la Fondation Dojo : ces deux acteurs participeront vraisemblablement à l'internationalisation de la documentation.

Nom

Dojo Toolkit

Site Internet

 

Auteur

Alex Russell ()

Licence

Academic Free License v 2.1

Version stable

0.3.x

Compatibles avec les navigateurs

IE 5.5+ / Firefox 1.0+ / Safari 2.0+ / Opera 8.5+ / Konqueror 3.5+

Serveur requis

non

Outils

Compresseur Javascript ShrinkSafe ()

Tarification

Gratuit

Exemples d'utilisation

 

 

Client JSON / RPC (Remote Procedure Call) sous Dojo

b/ Analyse

Forces

Faiblesses

o    Fonctionnalités « Import » et « Requires »

o    Layout Widgets : système de conteneurs qui permet de simuler des boîtes / fenêtres redimensionnables et repositionnables à la souris

o Documentation

Opportunités

Menace

o    Internationalisation de la documentation

o    Idées de projets : Javascript RDF

Package, amélioration du Dojo Compressor, un

linker/obfuscateur Javascript, intégration avec

Django,Internationalisation de la documentation

o Instabilité et poids croissants des composants (cf. démonstrations officielles)

Les frameworks de développement AJAX ont pour objectif commun de masquer la complexité du développement d'applications AJAX. Ils permettent de faire de l'AJAX sans développements Javascript ce qui apporte confort et rapidité de travail aux développeurs.

Ils s'appuient généralement sur :

?   des technologies orientées objet tels que Java ;

?   la configuration de fonctionnalités à partir de fichiers individuels (XML ou dérivés propriétaires) ;

?   des environnements de développement (IDE).

4.3.1 Echo2

a/ Présentation

Echo2 dans sa philosophie tente de s'approcher des clients riches à travers une plateforme Java de développement Web. Le framework s'intègre à un moteur de servlet pour convertir coté client les requêtes HTTP en Javascript.

NextApp, l'éditeur d'Echo2, vante ses atouts en précisant qu'aucune ligne de code JavaScript, HTML, or XML n'est écrite lors de son utilisation notamment grâce son IDE Echo Studio et au plugin Eclipse. Le framework fournit une API riche (composants d'interface utilisateur, évenements/écouteurs).

L'affichage des composants ou la communication avec le client sont faites séparement via le module «  Web Rendering Engine ».

Le module « Update Manager » traque les intéractions de l'utilisateur avec les composants de l'interface qu'ils remontent au serveur au format XML (ClientMessage). Coté serveur, les écouteurs déclenchent ensuite une réponse au format XML (ServerMessage) qui effectue la mise à jour de l'élément concerné dans la page.

Nom

Echo2

Site Internet

 

Auteur

NextApp

Licence

2.0.0

Version stable

Mozilla Public licence / LGPL

Serveur Requis

Java

Compatibles avec les navigateurs

Firefox 1.5 / Opera 9 / Safari 2

Documentation

 

Tarification

Commercial

Communauté

 

Outils

Echo Studio Visual Development Environment

 

Webmail complet avec Echo2

b/ Analyse

Forces

Faiblesses

o    Documentation HTML (Javadoc)

o    set of DHTML and Ajax components (accordian widget, window widget, tabbed panes, and split panes)

o    Ecouteurs, propagation d'évenements

o DHTML effects are limited to a few transition effects.

Opportunités

Menaces

o Nouvelle version de Echo Studio

o Poids des composants

4.3.2 GWT (Google Web Toolkit)

a/ Présentation

Le Google Web Toolkit (GWT) est un framework AJAX atypique dans le sens où :

? le développement se fait intégralement sous Java 1.4 (avec une API spécifique rappelant celle des bibliothèques graphiques Swing ou AWT) ; ? la compilation traduit le code Java en Javascript.

Cette translation de code est une solution élégante pour développer des applications AJAX sans même connaître Javascript.

Nom

Google Web Toolkit

Site Internet

 

Auteur

Google ()

Licence

?   Composants fournis avec le kit (Tomcat, SWT,Xerces, etc.) sous licences respectives

?   Classes nécessaires au déploiement () : Apache V2.0

Version stable

1.1.10

Compatibles avec les navigateurs

Internet Explorer 6, Firefox 1.0, Safari 1.2, Opera

Serveur Requis

non

Documentation

 

t.html

Outils

ProjectCreator, applicationCreator, junitCreator

Tarification

?   Gratuit

?   Autorisation Google obligatoire pour la commercialisation, modification et diffusion de gwt-dev-***.jar (Java2Javascript)

Exemples d'utilisation

Gmail, Google Earth,

 

Tableau dynamique avec GWT : insertion / suppression immédiate de ligne à partir de cases à cocher

b/ Analyse

Forces

Faiblesses

o Simplicité du développement

Java (pas de debuggage

Javascript)

o Le code Javascript généré est

illisible ce le rend difficilement modifiable

o    Test unitaires avec les classes JUNIT pour tester son application.

o    Intégration de toolkits AJAX par exemple (http://wt.components.googlepa on)

o Ne convient pas aux développeurs souhaitant conservent un cycle de développement Web (intégration de

Javascript supplémentaire complexe)

Opportunités

Menaces

o Alternative au développement Swing

o Non ouverture du compilateur Java2JavaScript

4.3.3 Atlas a/ Présentation

Microsoft Atlas est un framework AJAX conçu pour s'intégrer au framework .NET.

Ses bibliothèques Javascript sont construites et liées de manière complexe ce qui rend difficile leur utilisation sans les outils Microsoft (Visual Studio). De fait, Atlas prévoit des mécanismes exploitant la puissance de son framework .NET (par exemple, l'accès via C# à une base de données).

Enfin, une majorité des widgets fournis dans Atlas offre une bonne compatibilité avec les navigateurs Safari et Firefox.

Nom

Atlas

Site Internet

 

Auteur

Microsoft

Licence

Go-live

Serveur requis

oui

Version (béta)

1.0 Beta

Compatibles avec les navigateurs

IE, Safari / Firefox selon les composants

Documentation

 

Tarification

Gratuit

Exemples d'utilisation

PagesFlakes ()

b/ Analyse

Forces

Faiblesses

o    Documentation

o    Développement : Atlas, une extension intégrée à .NET

o Outils de développement : Intégration .NET o Effets visuels (animations) o Editeur limité

Opportunités

Menaces

o Meilleure déploiement à l'aide des outils Microsoft déjà existants ()

o    Communauté anti-Microsoft

o    Widgets non compatibles Safari et Firefox

 

 

 

Prototype

jQuery

MooFx

Scriptaculous

Mochikit

Rialto

Dojo

YUI

GWT

Echo2

Atlas

Moteur AJAX

X

X

 

 

 

 

 

 

 

 

 

Bibliothèque de composants AJAX

 

 

X

X

X

X

X

X

 

 

 

Framework de développement AJAX

 

 

 

 

 

 

 

 

X

X

X

 

 

 

 

Open Source

X

X

X

X

X

X

X

X

 

X

 

Propriétaire

 

 

 

 

 

 

 

 

X

 

X

 

 

 

 

Principale caractéristique

Extension de Javascript

 Manipulation du DOM

Effets

visuels

Effets visuels

XML, JSON

Widgets /

Interfaces riches

 Widgets

Widgets

Traduction Java vers Javascript

 Interfaces riches

Widgets

 

 

 

 

Exécuté coté client

X

X

X

X

X

X

X

X

X

 

 

Exécuté coté serveur

 

 

 

 

 

 

 

 

 

X

 

Programmation Javascript

X

X

X

X

X

X

X

X

 

 

X

Programmation Objet

 

 

 

 

 

 

 

 

X

X

X

 

 

 

 

Intégration (note de 0 à 3)

3

3

3

2

2

1

1

3

1

0

0

Composants (note de 0 à 3)

0

0

1

2

2

3

3

3

3

3

3

Débogage (note de 0 à 3)

0

0

0

0

2

0

2

1

3

3

3

 

5.2.1 Constats

Un sondage Ajaxian mené auprès de 865 personnes révèle que Prototype est le framework le plus utilisé, suivi de et Dojo. , jQuery, YUI sont moins fréquemment employés tandis qu'Atlas, Mochikit et GWT sont relégués en bas de tableau.

 

Résultats du sondage Ajaxian 2006 : frameworks AJAX les plus populaires

(Source : )

Par ailleurs, le sondage montre également que la plateforme de développement la plus utilisée avec AJAX est PHP, ce qui est peu surprenant au vu de l'essor des plateformes LAMP (Linux + Apache + MySQL + PHP). Rails n'obtient pas un score satisfaisant malgré l'intégration native du toolkit Prototype. A noter le recul de la plateforme Java, et l'effondrement du framework .NET de Microsoft Ces résultats sont réalistes mais à relativiser en fonction du taux de pénétration hors AJAX de chacune des plateformes.

 

Résultats du sondage Ajaxian 2006 : plateformes AJAX les plus populaires

(Source : )

5.2.2 Conclusion

Toujours selon le même sondage, 25% des applications AJAX n'utilisent pas de framework mais directement Javascript et XMLHttpRequest. 11% se basent sur JSON plutôt que XML pour l'échange de données.

En regardant les évolutions du secteur, le meilleur chemin à suivre pour implémenter AJAX reste l'utilisation conjointe de plusieurs frameworks selon les besoins fonctionnels.

a/ Prototype, Scriptaculous et

Prototype a été l'un des premiers framework AJAX à voir le jour ce qui explique sa forte présence. Dans la pratique, Prototype seul n'est implémenté que dans des applications où AJAX joue un rôle minime.

Prototype est également connu car il a su révélé la puissance de Javascript : de nombreux frameworks et développeurs s'en inspirent pour simplifier leurs scripts.

C'est le cas du framework , l'un des premiers framework à s'être lancé sur la voie.

Dans la course, s'affiche aujourd'hui comme le principal compétiteur et pourrait bien atteindre la richesse fonctionnelle de d'ici peu de temps.

b/ Dojo, Yahoo!UI, Rialto

Dojo, Yahoo!UI et Rialto ont une position particulière car ils sont à la frontière entre bibliothèque Javascript de composants et frameworks. Cette ambiguïté sème souvent le trouble dans les esprits ce qui explique leur utilisation ponctuelle.

Dojo remporte du succès notamment grâce à une stratégie de partenariats (IBM et Sun) qui semble porter ses fruits.

Concernant YUI, nous pensons clairement que les bénéfices de Yahoo ne sont pas à la hauteur à de ses engagements : les composants fournis par défaut dans YUI sont de qualité « professionnelle » et accompagnés d'une documentation et d'exemples complets. D'autre part, Yahoo ouvre largement ses savoirs et s'investit régulièrement pour rendre le développement Web plus cohérent (avec les Design Patterns par exemple). Il faudra donc attendre encore pour mesurer le résultat des efforts de Yahoo.

Enfin, n'oublions pas Rialto, un framework AJAX aux origines françaises malheureusement inconnu dans le bataillon international. Pour rappel, Rialto tend vers l'intégration d'AJAX au sein de technologies précises : alors qu'AJAX en soit se veut indépendant de tout environnement, la direction prise par Rialto est originale mais aussi dangereuse

c/ GWT, Echo2, Atlas

Le marché des frameworks de développement est malheureusement le terrain AJAX de prédilection des éditeurs privés qui scandent l'attractivité d'interfaces de conception graphique évoluées supprimant toute programmation Javascript.

Même s'ils sont prometteurs et qu'ils représentent un idéal, les frameworks AJAX brident inutilement AJAX en lui ajoutant une sur-couche applicative (traduction de code objet en code Javascript, API propriétaires ou incomplètes, ).

Le seul framework à tirer réellement son épingle du jeu reste le GWT, un framework grâce auquel Google séduit une communauté croissante de développeurs déjà habitués à Java Swing.

Enfin, il ne faut pas oublier que les élans de générosité de Google, Yahoo ou Microsoft (avec le framework Atlas) ne sont là que pour desservir d'autres produits cette fois commerciaux (par exemple, outils cartographiques de Yahoo et Google, framework Microsoft .NET).



 

349