Share
Vous le voyez depuis longtemps avec Google Reader, Gmail et, plus récemment, sur Facebook. Probablement, vous aussi, voudriez écrire des applications JavaScript avec événement RESTful. Eh bien, chers développeurs, rencontrez Sammy.js, un petit framework JavaScript construit sur jQuery. Sammy utilise le hachage de l'URL (#) pour vous permettre de créer des applications AJAX d'une page qui répondent au bouton Précédent de votre navigateur. Intéressé?
Dans cet article, je donnerai un bref aperçu du cadre, puis une brève démonstration de ce que signifie travailler avec Sammy.js, dans l’espoir de vous attirer suffisamment pour l’envisager dans vos projets..
"Sammy.js est léger à la fois en taille (<20kb) and footprint. Pull it into your already started applications."
Sammy.js est créé par Aaron Quint, un développeur web basé à Brooklyn, NY. Son API est modelée sur le framework Ruby populaire, Sinatra, et convient parfaitement aux applications simples et complexes. Il est facile d’y entrer et peut être intégré à vos projets existants. Ce n'est pas une proposition de tout ou rien; alors jetons un coup d'oeil.
Sammy.js vous permet d'écrire des applications d'une seule page, un peu comme Gmail. Vous pouvez conserver l'état de votre application avec l'URL, sans avoir à actualiser ou à modifier la page. Il existe d'autres frameworks JavaScript MVC, tels que SproutCore, qui ont tendance à englober tous les domaines. Mais avec Sammy, vous avez un framework léger (~ 20 Ko), capable d’appeler plusieurs instances simultanément (c.-à-d. En exécutant plusieurs applications dans le même document)..
L'installation de Sammy.js est assez simple. Rendez-vous sur la page de téléchargement, prenez une copie et déplacez-vous, sammy-0.5.4.min.js où vous stockez les bibliothèques de votre projet (généralement / js pour moi). Pour les besoins de cet article, j'utiliserai la version 0.5.4, mais vous voudrez peut-être essayer sammy-latest.min.js. Vous aurez également besoin d'une copie de jQuery, au moins v. 1.4.1. Comme avec la plupart des plugins jQuery, l'ordre est important: jQuery, avant Sammy.js, avant votre JavaScript. J'ai tendance à placer mon code JavaScript au bas de la page, car il bloque le chargement en parallèle d'autres éléments, ce qui donne l'impression d'une page de chargement plus lente. Jusqu'ici nous avons:
Sammy.js Exemple
Maintenant, commencez à coder notre application. Pour que les choses restent simples, je travaille en ligne, ce qui n'est pas la meilleure pratique. Ajouter une application Sammy.js est aussi simple que l’affecter à une variable, que j’appelle ratPack. Sur notre page, nous avons défini un div avec l'id "contenu" sur lequel notre application va agir. Nous l'indiquons comme suit:
var ratPack = $ .sammy (function () this.element_selector = '#content'; // les routes iront ici);
L'importance du sélecteur d'élément est que nous pouvons avoir plusieurs instances de Sammy.js en cours d'exécution dans notre document, affectant différents éléments..
Sammy.js utilise le chemin d'accès, tel que défini dans le hachage de l'URL, et les méthodes HTTP courantes (get, post, put, delete) pour déterminer une fonction de rappel à appeler. Celles-ci sont généralement appelées "routes". Quelques exemples sur le Web seraient:
À titre d'exemple, nous allons esquisser une application de boîte aux lettres. Commençons par configurer la route par défaut de notre application, qui atterrira sur # / inbox.
Accentsconagua
this.get ('# / inbox', fonction (context) context.app.swap ("); context. $ element (). append ('boîte de réception
'); ); Ici, vous pouvez faire en sorte que la fonction de rappel fasse ce que vous voulez. Comme je suis en train d'afficher une boîte de réception, je souhaiterais probablement passer un appel ajax et récupérer une liste de messages. Cependant, dans un souci de simplicité, je vais simplement retourner un h1 étiquette. le context.app.swap (") demande à Sammy de remplacer le contenu de mon contenu, plutôt que de simplement l'ajouter.
Pour que cela fonctionne dans le navigateur, nous voudrons exécuter l'application à l'aide de la fonction de préparation de documents de jQuery et la transférer à notre URL de départ, comme défini dans le chemin ci-dessus..
$ (function () ratPack.run ('# / inbox');); Et c'est tout. Nous devrions maintenant pouvoir charger notre document dans un navigateur, l'application devrait se lancer et nous diriger vers notre boîte de réception.
Ensuite, nous pouvons créer une autre route pour gérer les messages étiquetés:
this.get ('# / label /: name', fonction (context) context.app.swap ("); context. $ element (). append (''+ this.params [' name '] +'
'); ); Sammy utilise la syntaxe deux-points var (: var) pour nous renvoyer les paramètres permettant de filtrer nos messages. Encore une fois, je montre simplement le nom de l'étiquette.
Jusqu'à présent, nous utilisions uniquement la méthode HTTP "get". Imaginons que nous devions créer un formulaire et l’acheminer vers # / compos:
this.get ('# / compose', fonction (context) context.app.swap ("); context. $ element (). append ('dire bonjour à?
'+''); ); Nous pouvons maintenant configurer une route pour accepter les données publiées et demander à Sammy de les analyser pour nous..
this.post ('# / compose', fonction (context) context.app.swap ("); var à = this.params ['to']; context. $ element (). append ('salut '+ à +'
'); ); C'est l'essentiel. Une API simple, assez puissante pour les projets de toutes tailles. Si vous suivez avec le code, nous pouvons ajouter une navigation pour faciliter le clic.
- boîte de réception
- composer
- brouillons
Bien entendu, Sammy.js a beaucoup plus à offrir que la simple définition d'itinéraires dans l'application. Les utilisateurs plus avancés peuvent explorer des événements et des espaces de noms personnalisés pour des applications pilotées par les événements. Aaron essaie de garder le noyau de Sammy.js aussi étroit que possible, mais il contient aussi beaucoup de plugins. Il existe un plugin de titre, qui vous permet de définir facilement le titre du document pour différents itinéraires. Il existe plusieurs systèmes de gabarits, notamment haml et moustache. Sammy.Store, un créateur de formulaires attrayant, "une classe d'adaptateur abstraite qui englobe la multitude de stockage de données de navigateur dans un ensemble unique de méthodes communes de stockage et de récupération des données".
J'espère que vous avez apprécié ce rapide aperçu de Sammy.js et que vous êtes prêt à envisager de l'utiliser dans vos applications. Écoutons votre opinion sur Sammy.js dans les commentaires.!
L’instructeur d’origine de ce didacticiel a demandé que son nom soit retiré de la signature..
