Ajax Journal

Blog francophone sur Ajax

Avec Google Gears, Google se lance dans le hors ligne

Google vient de publier Google Gears, une extension opensource (pour Firefox et Internet Explorer) permettant d'utiliser des applications web en mode déconnecté. Google reader est déjà compatible.

A mons avis, les applications web supportant un mode offline vont fleurir, et on attend avec impatience, Gmail ou Google Calendar version offline.

L'équipe de Dojo Offline a par ailleurs travailler conjointement aux équipes de google afin de proposer des extensions à Google Gears.

Note : 4.5/5 pour 6 votes

Rendez vos applications web plus sûres

Nadav Samet publie sur son blog un article intéressant faisant un tour d'horizon des failles de sécurités classiques rencontrées dans les applications web.

Au menu: Injection SQL, Cross site scripting (XSS), et Cross-site request forgery (XSRF), le tout agrémenté d'exemple et de code.

Une lecture de choix pour comprendre comment faire du code secure.

Note : 3.6/5 pour 5 votes

Diaporama Présentation Ajax

Voici des supports de cours pour une brève conférence sur AJAX : une introduction des concepts de base, peut servir de support de vulgarisation.

Lire la suite

Note : 3.8/5 pour 12 votes

Dojo en profondeur

Alex Russell de Dojo a mis en ligne les slides qu'il a présenté à la conférence The Ajax Experience

Note : 3.1/5 pour 15 votes

Un système d'exploitation Ajax ?

Atomic OS est un projet visant à developper une sorte de système d'exploitation (WAJAX) tournant dans un navigateur qui utilise Ajax pour reproduire le fonctionnement d'un système (ROM, Kernel ...) avec gestionnaires de fenêtres (déplacement, reduction ...). Une démo est utilisable en ligne. Reste à trouver l'utilité de ce genre de chose ... Qu'en pensez-vous ? Utile, Inutile, Simple Démo Technologique, Aperçu de l'avenir ?

AtomicOs

Note : 3.4/5 pour 15 votes

Ajax et les fuites de mémoires

Une fuite de mémoire ou memory leak en anglais est une consommation involontaire de mémoire par un programme informatique, généralement due au fait que le programme ne libère pas la mémoire dont il n'a plus besoin de facon convenable. Cela entraine des ralentissements des programmes voir des plantages.

Concept bien connu des développeurs C, les fuites de mémoires étaient pour le moment bien loin des préoupations des développeurs d'applications web. Cependant avec Ajax, la donne a changé. En effet, avant l'arrivée du web 2.0, l'utilisation de javascript dans les pages web était relativement simple et surtout à chaque changement ou rechargement de page, le Garbage Collector - Ramasse-miettes en francais - faisait son office est désaloué les objets javascripts utilisés par la page précédente.

Mais vous l'auriez bien compris, le problème vient qu'avec Ajax la page web n'est plus rechargée, elle est modifiée à la volé, et de nouveaux objets javascripts sont sans cesses créés. Le garbage collector ne désaloue donc pas les objets non utilisées. Il faut le faire explicitement pour eviter les fuites de mémoire. Ces fuites de mémoires peuvent prendre des proportions assez importante, alors soyez vigilant.

De plus il existe d'autre cas non liés exclusivement à l'utilisation d'Ajax qui peuvent provoquer des fuites de mémoires, Internet Explorer semble être enclin à se laisser aller dans ce secteur. (Encore lui !) Le garbage collector de l'interpreteur Javascript d'IE ne semble pas capable de detecter des références circulaires entre des noeuds DOM et d'autre objets. Ce problème vien(drai)t du faire que les objets JS et les objets DOM sont gérés par deux composants différents. L'article DHTML leaks like a sieve (une lecture chaudement recommandée) revient sur les problèmes causés par les références circulaires (la gestion des évenement, les fermetures) et donne quelques exemples de code javascript provoquant des fuites de mémoire.

var unDiv = document.getElementById('unDiv');
monObjetJS.unObjetDom = unDiv; 
unDiv.unObjet = monObjetJS;

Ce code provoque une référence circulaire, monObjetJS ayant une référence du unDiv et unDiv ayant une référence vers monObjetJS.

Il faut également noté que les handler d'évenement peuvent également créer des références circulaires si celui-ci référence un objet javascript. Il faut donc autant que possible décrocher les handlers d'évenement lorsqu'ils ne sont plus utilisés.

Un article sur le wiki mozilla pour les développeurs traite également de ces problèmes

Ce problème de fuite de mémoire n'est pas spécifique à IE, tous les navigateurs peuvent en être victimes. Pour preuve, Firefox a plusieurs bugs pouvant provoquer des fuites de mémoires.

Enfin pour terminer ce post, un outil utile. Pour détecter ces fuites de mémoire, David Baron (développeur Mozilla) a développé une petite extension firefox avertissant des blocs de mémoire perdus lorsque l'on quitte une page web. Bien pratique.

Note : 4.3/5 pour 20 votes

Outils pour le développement sous Firefox

Firefox via son système d'extension permet à un miriade d'outil de faciliter la vie des développeurs d'applications web. Parmis la multitude d'extensions disponibles, en voici trois, vraiment indispensables.

Firebug est un outil permettant de grandement faciliter le débugage d'application web, en effet il propose au coeur de la même extension, un inspecteur DOM, une console javascript évoluée, un débugger javascript. L'une des killer features de firebug est la possibilité de voir les requêtes XMLHttpRequest effectuées par l'application, tellement pratique pour débugger de l'Ajax.

La Web developper toolbar est comme son nom l'indique à nos amis anglophones, une barre d'outils destinée aux développeurs web. Elle apporte son lot d'outils allant de l'éditeur CSS, à la validation de page XHTML en passant par l'affichages des id des balises en surimpression sur la page web.

Le Venkman Debugger est un débugger Javascript très complet proposant toutes les fonctionnalités attendues d'un débugger. Il permet même de débugger les fichiers javascripts qui animent Firefox. (attention cette extension est un peu lourde en terme de ressources consommées).

Bref, 3 extensions à installer de toute urgence si vous utilisez Firefox.

Note : 4.0/5 pour 8 votes

Mettre en place un indicateur d'activité

Que se cache derrière ce titre obscure ? Tout simplement un article expliquant la facon de bien mettre en place un , devenu quasiment synonyme d'application web 2.0 depuis l'avènement d'ajax. GenXDesign propose ainsi un article de 4 pages sur le sujet, CSS et Javascript sont au menu, et bien évidemment l'ensemble se termine par une page de démo.

Note : 3.9/5 pour 10 votes

Les erreurs à ne pas commettre avec AJAX

Ed Burnette a posté sur son blog chez Zdnet un article sur les erreurs classiques commises lorsqu'on utilise Ajax. Il identifie les principales erreurs à éviter à tout prix comme étant:

  • Des communications entre le client et le serveur trop lourdes: Il faut éviter de faire trop d'aller-retour entre le client et le serveur, et essayer de faire des requêtes intelligentes, en mettant en cache un maximum de chose.
  • Trop d'analyse (parsing) de flux XML, l'efficacité des parseurs XML intégrés aux navigateurs web étant ce qu'elle est ... il faut préférer des formats alternatifs de serialisation des données comme JSON par exemple.
  • Charger toute l'application avant d'afficher quelque chose. Il est préférable de charger le minumum de chose au lancement pour donner un maximum de retour à l'utilisateur, et charger ensuite, en arrière plan, la suite.
  • Effectuer trop de chose sur le serveur. Ajax est une méthodologie pour offrir plus d'interactivité à l'utilisateur, en transférant un peu d'intelligence au client executant l'application. (par opposition à tout effectuer sur le serveur, et uniquement fournir les résultats à l'utilisateur). Il faut donc ne pas eviter à transferer autant d'intelligence que possible au client, tout en gardant à l'esprit les erreurs ci-dessus à éviter et sans négliger la sécurité de l'application.

Un point de départ interressant pour une réflexion sur les travers d'Ajax.

Note : 3.6/5 pour 5 votes

Introduction à AJAX pour les non-techniciens

Et oui tout le monde n'est pas technicien et pourtant tout le monde peut être interressé par comprendre le monde qui nous entoure (hum, hum, je m'enflamme).

Tout ca pour dire que IT Business Net a publié une introduction à Ajax destinée aux non-techniciens, non-programmeurs, non-geeks et autres personnes (normales) ne parlant pas l'ASN1 ou le XML dans le texte. L'article fait le tour des technos employées par le Web 2.0 de manière compréhensible par le commun des mortels sans trop tomber dans la vulgarisation à outrance.

Note : 3.4/5 pour 5 votes

Logger en Javascript

Log4JS est une classe permettant de fournir des fonctionnalités de log en javascript. Elle s'inspire de Log4j du Logging Services de la fondation Apache (oui, oui la même que le célèbre serveur web). Il est possible d'envoyer les logs vers une popup, un fichier local, et - fonctionnalité intéressante - un fichier distant via des appels à XmlHttpRequest.

La page d'exemples permet de se rendre compte de l'étendue des possibilités de logging offertes par log4JS. Bref, un bon outils pour ajouter facilement des logs dans son projet web 2.01.

Note : 3.8/5 pour 8 votes

Un système d'upload de fichier Ajax

Steven Miles a développé un script d'upload de fichier utilisant Ajax afin de rendre compte à l'utilisateur de l'avancement de l'upload de ses fichiers. Perl, PHP et Javascript animent le tout. Le look de l'ensemble est facilement adaptable en modifiant la CSS.

Note : 3.9/5 pour 25 votes

Ajaxterm, un emulateur de terminal web

Attention cette application s'adresse à nos amis les geeks (bon ok, j'en suis un jusqu'à la moelle ...), Ajaxterm est un emulateur de terminal web développé par Antony Lesuisse en Python. Mais à quoi ca sert ? Une connexion http ou https, un navigateur web et hop vous voilà connectez sur une machine distante en SSH, magique non ?

Note : 3.8/5 pour 9 votes

Yahoo teste une page d'accueil ''Ajaxifiée''

Yahoo! a récemment ouvert au public la version beta de sa future page d'accueil. Look rafraîchit, barre de recherche plus grande, Javascript et Ajax pour rendre la page plus interractive (par exemple sur la partie droite de la page, Mail, Weather). Une version de test prometeuse du prochain visage de Yahoo!

Note : 4.7/5 pour 3 votes

Un indicateur de progression personnalisé

Vous développez une application Web 2.0 effectuant des traitements assez longs ? (utilisant des XHR par exemple) et vous voulez ajouter une jolie icône pour expliciter que des tâches s'executent ? Alors rendez-vous sur ajaxload.info et créez votre propre icone de progression.

update: Un autre site bien fourni.

Note : 4.0/5 pour 4 votes