RestFul Evented Javascript avec sammyjs et jquery

1,484 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,484
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

RestFul Evented Javascript avec sammyjs et jquery

  1. 1. RestFul Evented Javascript avec sammyjs et jqueryFabien Baligand Copyright©Sfeir (D.GEN.375.V1)
  2. 2. Constat Les applications RIA / SPA ont quelques inconvénients : Pas d’historique de navigation Bouton “Rafraichir” qui revient à la vue d’accueil Vues non bookmarkables
  3. 3. Solution : RestFul Evented Javascript Utiliser la partie hash de l’URL pour stocker l’état actuel de l’application, donc la vue en cours. Le changement de hash de l’URL pilote le changement de vue.
  4. 4. Solution : RestFul Evented Javascript1. Pour chaque vue, définir une URI REST associée Exemple: /products/{productId}2. Chaque fois que l’utilisateur clique sur un bouton, un lien ou un onglet, mettre à jour le hash de l’adresse courante, avec l’URI REST de la vue cible. Exemple: #/products/{productId}3. Ecouter en javascript l’évènement “hashchange”, et traiter chaque URI REST appelée. Exemple: #/products/{productId} => Affichage du produit {productId}
  5. 5. Solution : RestFul Evented Javascript Avantages : Les changements de hash dans l’URL sont historisés => vous pouvez utiliser les boutons Précédent/Suivant du navigateur Si vous appuyez sur “Rafraichir”, le hash de l’URL est interprété, et vous tombez bien sur la même vue. Vous pouvez enregistrer en favori l’URL courante, et l’ouvrir plus tard, vous tombez bien sur la même vue.
  6. 6. Et sammyjs dans tout ça ? Librairie JavaScript Basée sur jQuery Permet d’écrire facilement et élégamment du code RestFul Evented Javascript http://sammyjs.org
  7. 7. Exemple de code sammyjs$.sammy("#main", function() { this.get("#/products", function() { this.partial("/products.jsp"); }); this.get("#/products/:productId", function() { this.partial("/product.jsp?productId=" + this.params["productId"]); });}).run("#/products");
  8. 8. DEMO

×