Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single page webapplications

8,156 views

Published on

Slides from a small free workshop

Published in: Technology
  • Login to see the comments

Single page webapplications

  1. 1. Single Page Applications ronald@nforza.nl @ronaldhamsen
  2. 2. • • • • 13:00 – 14:15 Introduction SPA 14:15 – 15:30 Break 15:30 – 15:45 Practice! 15:45 – 16:00 Q&A
  3. 3. Wikipedia: A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.
  4. 4. • More responsive UI / UX • “Application like” interaction • Distributed computing (offloading rendering tasks to the client) • Ability to go offline • Less data traffic • Back/forward button work as expected?
  5. 5. 2005 - The term single-page application was coined by Steve Yen 2003 – Article: Inner-browsing extending the browser navigation paradigm (MDN) 2002 - Self-Contained website at http://slashdotslash.com with the same goals and functions (Stuart Morris)
  6. 6. • DOM manipulation: Viewmanagement, Templating • Managing state • Databinding • Data-access / Calling services • Modules and application composition • Testing
  7. 7. • Showing and hiding elements (views) • Templating EJS } Hogan.js
  8. 8. • Originally managed by page (url) • Backbutton in browser? • Integration with google analytics? • How to handle in SPA? • But also: credentials, sessions etc.
  9. 9. • <url>/#somestate -> <url>#somesecondstate window.onhashchange = function () { // do something } • window.location.hash (beware ie6 and 7) • jquery.hashchange.js (Ben Alman)
  10. 10. • • • • • window.history.back() window.history.forward() window.history.pushState(stateObj,title,url) window.history.replaceState(stateObj, title, url) window.onpopstate gives back state on page back/forward jquery.pathchange.js
  11. 11. • Dependencies in code on frameworks
  12. 12. http://www.sidewaffle.com + take a look at hot towel by John Papa
  13. 13. http://yeoman.io
  14. 14. Ideas: “Build a simple time tracking app. Date, description, number of hours” “Create a simple CRM simpel. Contacts, history of events per contact.” Tips: Use bootstrap! http://getbootstrap.com Choose a framework: Durandal or Angular, or start with jQuery. Focus on front-end, never mind the database, rest-services etc.

×