Bien coder en Ajax.

On y est, sur cet article on va attaquer ensemble quelques bout de codes. Vu que la majorité de mes lecteurs bossent dans le web. J’ai opté pour l’ajax comme point de départ.

NB : La méthode de travail présenté n’est en aucun cas une norme, mais tout simplement le fruit d’efforts personnels pour trouver une technique stable et élégante qui peut remédier à la majorité des problèmes rencontrés durant le développement d’interfaces riches .

Avant d'entrer dans le vif du sujet il faut savoir que l'utilisation d'ajax compromet pas mal de choses:

1. Les moteurs de recherches ne référencent que les pages qui ont une url.
2. Les utilisateurs ne pourant pas favoriser la page en question.
3. On pert la fonction du browser «retour à la page précédante».
4. Lenteur des requetes asynchrone.
5. Difficulté pour maintenir le code.

Et là c'est juste ce qui me vient directement à l'esprit y a encore pas mal de détails (il existe quelques librairies Google qui gèrent certains cas comme la fonction «page précédante», favoris) juste pour vous dire que l'ajax ce n'est pas que du rose, cependant il peut s’avérer très très utiles voir indispensable dans certains cas typiquement où le rechargement de la page risque de faire perdre des données utilisateurs.

La première gaffe que j'ai fait dans mes débuts en Ajax et je pense que le majorité travaille de la même façon (même des professionnelles) c'est de créer des templates coté serveurs pour répondre aux requêtes XmlHttpRequest, j'y ai trouvé beaucoup de problèmes avec IE6 pour passez des tableaux d'objets d'un coté et aussi dans la maintenabilité et debbugage du code.

Bref pour communiquer avec le serveur en asynchrone j’utilise maintenant du Json qui est un format natif dans le javascript et qui permet de représenter un objet sous forme {‘clé’ : ‘valeur’} . Petit compartifs concret :

Supposons un object client avec les attributs rs (raison social), adresse, ville, contacts.
La représentations Xml sera la suivante :

<client>
<rs>R1</rs>
<adresse>Adresse1</adresse>
<ville>Ville1</ville>
<contacts>
<contact>
<nom>contact1</nom>
<telephone>telephone1</telephone>
</contact>
</contacts>
</client>

L’equivalent Json sera :

Client = {
         rs : 'R1',
         Adresse : 'Adresse1',
         Ville : 'Ville1',
         Contacts : [
                   {nom: 'contact1', telephone: 'tel1'}
                   {nom: 'contact2', telephone: 'te2'}
                  ]
   }

L’avantage des passer des objets Json c’est que coté client on peut accéder au attributs casi instatanément en utilisant par exemple client.rs ou client.contacts[0].telephone et personnelment j’ai encore un petit plus avec le python coté serveur c’est qu’il gère aussi le json nativement ou en utilisant des librairie comme simpleJson ou autre même s‘il reste de toute petites lacunes concernant l’unicode et les valeurs null heuresement il y a quelques librairies qui permettent de remédier à cela.

Seule limitation c’est qu’en Json il n’y a pas de propriétés comme dans les balises xml cependant il existe d’autres formats basé sur json pour ça. Personnelement le Json me suffit largement pour communiquer avec le serveur. Là y a toujours un point qui manque, si le serveur nous renvoie que des objets Json alors coté client on doit créer la nouvelle interface en utilisant du javascript. Petit réflèxe récurant, c’est de créer des variables chaines de caractère pour créer les interfaces ce qui donnera un truc du genre :

var resultat = '<ul>';
   for(i=0 ;i<=clients.length-1 ;i++){
                   Resultat += '<li>' + clients[i].rs +'</li>' ;
   }
   Resultat += '</ul>' ;

Et puis on insére le string sur la balise concerné. Bon le code est assez clin c’est vrai mais il faut imaginer que vous allez traiter non seulement l’attribut ‘rs’ mais beaucoup d’autres choses à la fois. Et c’est ce qui arrive généralement, à un moment donné vous aurez des chaines de caractères très longues très très dure à maintenir sans parler du fait que ça manque de lisibilité.

Il existe une librairie EJS qui permet de mapper des objects json avec un template html en utilisant une syntaxe très proche de l’asp ce qui permet déjà conceptuellement de séparer la couche donnée et présentation pour ceux qui ne le font toujours pas coté serveur ça peut être un bon départ pour voir la lisibilité que ça donne au code, et en même temps ça nous évite d’utiliser du Javascript pour générer de l’html, bref l’exemple précédant donnera un template séparé contenant :

<ul>
   <% for(var i=0; i<=clients.length-1; i++) {%>
                    <li><%= clients[i].rs %></li>
   <% } %>
   </ul>

Et une ligne javascript pour mapper notre Json object avec le template :

Html = new EJS({url :'template'}).render(clients) ;

Bon développement.

Commentaires (2):

Ajouter un commentaire

Nom :	*
Email :	* (ne sera pas affiché)
Site perso :
Commentaire :	*
	chargement