JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet

Yoann ma fait découvrir un superbe framework Javascript, plus puissant et impressionnant que tous ceux que je connaissais déjà, son nom : Ext JS. Le but de ce framework est de déployer une application riche RIA avec la technologie Javascript rapidement et très simplement.
De grand nom l'utilise déjà comme Adobe, IBM, Dow Jones & Co, Siemens, Sony Online Entertainment, ect...
Le mois de septembre à vue l'arrivée de la version 2.0 avec de nouvelles fonctionnalités présentées dans les démos en ligne sur la page d'accueil de Ext JS. Les exemples sont vraiment très impressionnant. Ce qui ma le plus bluffé est la simplicité des scripts, la clarté et la légèreté des objets de la librairie et sa facilité d'utilisation!

La démonstration la plus impressionnante est l'espace de travail et l'espace de travail type RIA.

Le centre de ressources de Ext JS est très complet, vous trouverez les explications, exemples d'utilisation complet et surtout compréhensible, ce qui est souvent le gros défaut de ce genre de projet ! Autrement, le centre de développement de Ext JS est également très bien pensé, d'ailleurs il utilise de nombreuses fonctionnalités de la librairie, un autre belle exemple d'utilisation !
En résumé, une librairie à découvrir absolument ! Je testerai plus en détail ce framework et je posterai des tutoriels pour présenter certaines fonctionnalités!

A force de m'intéresser de très prêt à Ajax, je constate qu'il y énormément d'amalgame de fait à ce sujet! En effet, beaucoup pense que faire une requête en httpRequest au onclick d'un bouton constitue de l'Ajax. Hors la véritable utilisation de Ajax est véritablement ailleurs, la subtilité réside de faire un interface Web dont toute l'interactivité Javascript (dont les transferts asynchrone de donnée) sont Indépendante de l'application principale, c'est à dire que si le site le client ne possède pas Javascript, le site marche quand même normalement. Cela va plus loin, car cette méthode permet également de référencé les contenus des pages même si elles sont chargés de manière asynchrone!

Il faut que le document XHTML ne possède aucun script Javascript dans le body, mais juste l'appelle au librairie utilisées dans le header.

La technique est simple pour faire ceci, il faut utilisé les gestionnaires d'évènements ainsi que les sélecteurs d'éléments. Ainsi un site traditionnel pourra ce voir gréfer un ensemble évènementiel qui permettra de rendre un interface Web interactive. Le seul supplément sera de crée un fichier 'dataTransfert.php' qui transféra les templates de contenu. Autrement tout le reste sera simplement des librairie Javascript qui déclencheront des actions suivant un système évènementiel.

Voici un exemple de ce qu'il ne faut pas faire (gestionnaire d'évènement directement dans le document XHTML):

<p id="monBouton" onclick="maFoncitonJs();">Cliquez moi</p>

Voici le même exemple, mais correcte cette fois ci (fichier javascript inclus dans le header):

 $'(monBouton').addEvent('click', function(){
        // Contenu de ma fonction
  });

Ce principe est la base, à partir de découle tout le reste, le Blog JFLAD vous présentera ultérieurement d'autres techniques pour faire des transferts asynchrone de données depuis une page traditionnelle en gardant une lisibilité dans les moteurs de recherche!


Je vous conseil fortement l'utilisation du framework Mootools dont j'ai déjà fait l'éloge dans de précédent billet, ce framework est vraiment sur-puissant, et possède toutes les fonctionnalités imaginable pour faire de l'Ajax et rendre une application Web riche version Web 2.0.

JSON (JavaScript Object Notation) est un format de structure de données générique qui utilise la notation des objects Javascript. Il peut être utilisé pour transmettre de l'information structurée du client au serveur dans des applications Ajax, c'est d'ailleur sa plus grosse utilisation à l'heure actuel. Il s'agit d'un format de fichier alternatif à XML.

Voilà un modèle de structure de donnée JSON:

{"menu": {
    "id": "file",
    "value": "File",
    "popup": {
        "menuitem": [
            {"value": "New", "onclick": "CreateNewDoc()"},
            {"value": "Open", "onclick": "OpenDoc()"},
            {"value": "Close", "onclick": "CloseDoc()"}
        ]
    }
}}

Coté serveur il vous faudra simplement encoder et décoder la chaine, je vous conseil d'utiliser la class Zend_Json du framework zend pour effectuer cette opération.

// Récupérer les valeurs
$phpNative = Zend_Json::decode($encodedValue);

// Encoder les valeurs
$json = Zend_Json::encode($phpNative);

Par ailleurs, il n'est plus nécessaire de faire appel à un parseur XML pour gérer les données, étant donné qu'elles sont directement prises en compte par Javascript via la fonction eval(). Les tests actuels montrent un gain significatif en vitesse de traitement pour Json.