1. RestFul Evented Javascript
avec sammyjs et jquery
Fabien Baligand

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. 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. Solution : RestFul Evented Javascript
1. 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. 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. 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. 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. DEMO