Single page webapplications

7,999 views

Published on

Slides from a small free workshop

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,999
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • https://developer.mozilla.org/en-US/docs/Inner-browsing_extending_the_browser_navigation_paradigm
  • http://www.adequatelygood.com/Saner-HTML5-History-Management.html
  • Build by MadsKristensen van Microsoft, van Web Essentials etc.
  • 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.

    ×