Routing with Sammy.js

Traditionally web applications were dependent on back end for routing as A request is made to a server and based on the URL being requested the server responds by HTML.But now a days due to advanced browsers and need for speedy response more advanced code started being moved from the backend to the frontend.

Sammy.js is a tiny(<20kb) javascript framework which uses URL hash (#) to allow you to create single page AJAX applications.It has also limited yet powerful functionalities.Its API is modeled on the popular ruby framework, Sinatra, and is great for both simple and complex applications.There are basically two main functionalities of Sammy which is (1)Routes and (2)events.

Above theory is good for starting so now lets move on with example of sammy js using type script.

public addRoute(url: string, action: (context: Sammy.EventContext) => void) {
        this.routeTable[url] = action;
    }

Above is the typescript method which take two parameters as first is URL and second is events to be performed when url hits on browser. Routetable is nothing but a stoarge of key value pair
consider following example to add sub routes

this.addRoute('#/index', (context: Sammy.EventContext) => {
            this.setActiveViewModel(new GlobalSearchPageViewModel(), true);
            this.initBreadCrumbs();
            Super.initRoutes();
            });

In above code '#index' will be added to the current url and when it will hit on browser the above code in context will be run.so no burden to add new url we can extend current url with # using sammy.

public initRoutes(): void {
        let app = this;
        let sammy = Sammy(function () {
            let that: Sammy.Application = this;
            for (let key in app.routeTable) {
                if (key == 'notfound') {
                    that.notFound = () => app.routeTable[key].call(app);
                }
                that.get(key, (context: Sammy.EventContext) => app.routeTable[key].call(app, context));
            }
        });

Above is the code by which sammy call the events based on the url hits on browser. its really very easy and fast to render multiple pages without switching the URL.follow the link for more reference.