Sammy.js

1. Sammy.js A step closer to building SPA Applications Doncho Minkov Telerik Software Academy http://academy.telerik.com Senior Technical Trainer http://minkov.it

2. Table of Contents • Sammy.js Overview • Using Sammy.js • Sammy.js features • Routing • Events • Sammy.js routing • Creating multiple "pages" • Loading pages

3. Sammy.js Overview

4. Sammy.js Overview • Sammy.js is a JavaScript framework, that supports the basics functionality for creating SPA applications • Sammy.js allows defining routes that load different pages, based on the route • Each page is not a real page, but a dynamic change of the content

5. Using Sammy.js

6. Using Sammy.js • Sammy.js introduces a $.sammy global object • With the $.sammy object our application can work with Sammy.js functionality • When using Sammy.js, our JavaScript must register an application, that Sammy.js can run var app = $.sammy("#main-content",function() { //app code }); app.run("#/"); • Basically the app is the way to use Sammy.js • "#main-content" is the element where Sammy.js loads the different pages

7. Using Sammy.js Live Demo

8. Routes in Sammy.js

9. Routes in Sammy.js • A route is an identifier that points to a service • In the case of SPA applications, the identifier is an URL and the service is a web page • With routes Sammy.js define pages • Each route corresponds to a page • Actually pages in Sammy.js app are a function that is executed when a given route is reached #/ -> shows the Home page #/about -> shows the AboutUs page #/course/:id -> shows a page for the course with the id

10. Defining Routes • The definition of routes is done in the app-load • The function that creates the Sammy.js app • Each route have three components: • A verb (GET, POST, PUT, DELETE, etc…) • A path ( "#/", "#/about", "#/item/:id") • A callback function (the function to be executed when the page is loaded)

11. Defining Routes: Examples • All route definitions are made in the app load var app = sammy(function () { this.get("#/", function () { alert("In home"); }); this.get("#/about", function () { alert("In about"); }); this.get("#/item/:id", function (id) { alert("In item with id: " + this.params["id"]); }); }); app.run("#/");

12. Simple Routes in Sammy.js Live Demo

13. What is the Point of Routing? • The Sammy.js routing uses the JavaScript History API, that enables navigation between page (back and forward), • Without reloading of pages • This allows more native look and feel when using a SPA application

14. Sammy.js http://academy.telerik.com

15. Homework • Implement the UI of the "Battle game" • The services and their description are located at: https://www.dropbox.com/s/nt7pb9lnl1bpszn/Battle-Game.zip • Use the following JavaScript libraries: • mustache.js for templating • Underscore.js for extension methods • RequireJS to create modules • Sammy.js to create multiple pages

16. Homework • (cont.) Implement the UI of the "Battle game" • Use Sammy.js to create the following pages: • "Register"/"Login" page • When user is not authenticated • "Join game" page • View all active games at the moment • "My games" page • View all games that are created or joined by the logged user • "Battle in game" page • View the field of a "in-progress" game