Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Routing in SPA Web Applications

Routing in SPA Web Applications

Avatar for Dima Kuzmich

Dima Kuzmich

June 18, 2013
Tweet

More Decks by Dima Kuzmich

Other Decks in Technology

Transcript

  1. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

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

    www.js-il.com | Browser Request Index.html Server Traditional Request / Response for ALL rendered content and assets Client
  3. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | 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
  4. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | Choosing frameworks that provides you with routing and navigation built-in
  5. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | Choosing stand-alone navigation libraries History.js jQuery BBQ Crossroads.js
  6. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | 4.0 (2.0) 5.0 5.0 10.0 11.5
  7. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | Change your URL from this: www.app.com/index.html#my-hash-value To this new one: www.app.com/index.html#!my-hash-value
  8. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | Instead this URL: www.app.com/index.html#!my-hash-value Crawler will go to tis one: www.app.com/index.html?_escaped_fragment_=my-hash-value http://crawljax.com – Java https://github.com/gregorypratt/Ajax-Crawling - ASP.NET MVC
  9. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | this == context == Sammy.EventContext
  10. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | EventContext support some useful args and methods: here
  11. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | 'post', 'put' and 'delete' can be invoked only by submitting form
  12. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | You can bind custom event to the app. Inside events is EventContext, same as in routes
  13. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | You can trigger events on the app context and EventContext.
  14. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | You can pass custom data object as third parameter
  15. Israel JavaScript Conference | 03 – 6325707 | [email protected] |

    www.js-il.com | http://singlepageappbook.com/index.html http://www.informit.com/articles/article.aspx?p=789762 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/