routing in spa

Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il

Routing in SPA

Israel JavaScript Conference

mailto:[email protected]

http://www.js-il.com/

http://www.facebook.com/dima.kuzmich

http://il.linkedin.com/in/dimakuzmich


What’s all about?




Traditional apps

Browser Request

Index.html

Server

Traditional Request / Response for ALL rendered content and assets

Client




HTML 5 )Changes The Rules of The

Game(




Web Application (SPA)

Initial Request

Application.htm RequireJS Loader

Page1 Partial.htm

IndexViewModel.js

Application.js (bootstrap)

ViewModel (#index)

ViewModel (#login)

Model (LoginModel)JSON Requests

HTML5 localstorage

Handling disconnection

Server Client




What have we gained?

Interactivity

Speed

Great User Experience

Hybrid apps




Navigation Challenges




History and Back Button




Deep Linking




Maintain Navigation




SEO Friendly




Cross-Browser




Choosing Your Way

Choosing frameworks that provides you with routing and navigation built-in




Choosing Your Way

Choosing stand-alone navigation libraries

History.js jQuery BBQ

Crossroads.js



https://github.com/browserstate/history.js/

https://github.com/cowboy/jquery-bbq/

https://github.com/cowboy/jquery-bbq/

http://millermedeiros.github.io/crossroads.js/

http://millermedeiros.github.io/crossroads.js/

http://sammyjs.org/


Choosing Your Way

Writing your own solution




Choosing Your WayMy personal opinion is that we don’t need to reinvent the wheel, so the easiest way is to use ready solutions.




The Old Way




Why?



https://developer.mozilla.org/en-US/docs/Web/API/window.location


The Problem



http://en.wikipedia.org/wiki/Usage_share_of_web_browsers


Inability to track hash changes

Request

Response




The Method - Polling



http://reallifejs.com/brainchunks/repeated-events-timeout-or-interval/


The Solution




Polling hash




onhashchange event

3.6 (1.9.2)

5.0

5.0

8.0

10.6




How to




The Solution




onhashchange




Back button support

Remember those?



http://en.wikipedia.org/wiki/Usage_share_of_web_browsers


The Solution




Back button support




The New Way




One day I will change Url

without hash and without full

refresh.




Dreams come true!




The API




window.onpushstate?

Unfortunately, HTML5 doesn't provide us with a native event that will fire on pushing new state.

Thus, if we want to provide response to that kind of change, we need to implement it by ourselves.




HTML5 History API

4.0 (2.0)

5.0

5.0

10.0

11.5




HTML5 History API




SEO




SEO

The basis of SEO is that every page with different content is in fact a different document, therefore it has a different location (URL).

Since AJAX uses JavaScript to generate the page with new content search engine robots cannot crawl these altered pages.




The Page Backbone




The Page after JS execution




What the User see




What the Crawler see




Hijax




Hijax motto

Plan for Ajax from the start

Implement Ajax at the end




Hijax way

Create an app using traditional page refreshes

Data requested from server via regular links and forms

Intercept (hijack) your links and forms using JavaScript

Send that data via XMLHttpRequest to the server




Hijax




Google !




Making Ajax Apps Crawlable

1. Indicate to the crawler that your site supports the AJAX crawling scheme

Change your URL from this:

www.app.com/index.html#my-hash-valueTo this new one:

www.app.com/index.html#!my-hash-value





2. Set up your server to handle requests for URLs that contain

Instead this URL:

www.app.com/index.html#!my-hash-valueCrawler will go to tis one:

www.app.com/index.html?_escaped_fragment_=my-hash-value

http://crawljax.com – Javahttps://github.com/gregorypratt/Ajax-Crawling - ASP.NET MVC



http://crawljax.com/

http://crawljax.com/

https://github.com/gregorypratt/Ajax-Crawling%20-%20ASP.NET

https://github.com/gregorypratt/Ajax-Crawling%20-%20ASP.NET



3. Handle pages without hash fragments

* Full explanation and step-by-step guide you can find here



https://developers.google.com/webmasters/ajax-crawling/


My name is Sammy, and I’m Tiny (5.2K when I’m compressed and

gzipped)

Built on top of jQuery

Using hash for navigation

Supporting back/forward buttons

Bookmarkable

RESTful




The Beginning

Use standard JavaScript definition:

Or use a jQuery like syntax




The Routes

Define routes directly:

Or use a verb shortcuts:




Don’t forget to Run() your app




The Beginning




Route With Parameters




Who is ‘this'?

this == context == Sammy.EventContext




EventContextEventContext support some useful args and methods:

app $element params path redirect() trigger()

* Full list of arguments and events check out here



http://sammyjs.org/docs/api/0.7.4/all#Sammy.EventContext


Form Submitting

'post', 'put' and 'delete' can be invoked only by submitting form




Routes and Forms




Events

You can bind custom event to the app.Inside events is EventContext, same as in routes




Trigger Events

You can trigger events on the app context and EventContext.




Passing Data To Event

You can pass custom data object as third parameter




Sammy.js Events




Resources

http://singlepageappbook.com/index.html

http://

www.informit.com/articles/article.aspx?p=789762

https://developers.google.com/webmasters/ajax-cr

awling/docs/getting-started

http://net.tutsplus.com/tutorials/javascript-ajax/qui

ck-tip-an-introduction-to-sammy-js

/

http://sammyjs.org/





http://www.informit.com/articles/article.aspx?p=789762

http://www.informit.com/articles/article.aspx?p=789762

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-sammy-js/



http://sammyjs.org/


www.js-il.com

18.6.13





Thanks

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il



http://www.facebook.com/dima.kuzmich

http://il.linkedin.com/in/dimakuzmich

routing in spa

Technology

israel javascript conference

standalone navigation

navigation builtin

browser requestindex

rendered content

requirejs loaderpage1

aspnet mvc