Single Page Web Apps
4 likes1,082 views
The document discusses single page web apps, which allow a web app to exist on a single page without reloading the DOM. Key points made include: - Single page apps only update parts of the page rather than reloading the entire page, improving performance. - They allow for immediate feedback and smooth transitions between states within the app. - While they break links and expose business logic to users who inspect elements, they reduce server load and improve mobile experiences. - Popular tools for building single page apps include Backbone.js, SammyJS, and Brunch.
Single Page Web Apps
- 1. Single Page Web Apps Get your buzzword-bingo sheets out :P Jan Monschke Eray Basar
- 2. #!/bio ! Jan Monschke ! Coffeescript / brunch / CouchApps / Brunch-Colors ! @thedeftone / http://github.com/janmonschke ! Eray Basar ! @toshiyori ! @9elements : @imgly, @watchlaterapp
- 3. #!/index ! The big picture ! What the #! is a Single Page Web App? ! Why would I do that? ! Why wouldn‘t I do that? ! What tools are there?
- 4. The big picture: Apple‘s ecosystem
- 5. Is the web the saviour? f JavaScript CSS3 4 HTML5 4 f REST
- 6. Is the web the saviour? ! From a developer‘s perspective ! Solve distribution ! Get low tech API access (Device API) ! From a users‘s perspective ! Harmonize UI concepts / overall UX ! Web apps have to feel more native
- 7. Web Apps have to feel more native ! Desktop- and Web-Experience converge! http://www.yuiblog.com/blog/2009/10/13/video-neuberg-html5/
- 8. Desktop- and Web-Experience converge ! Then: ! Flash ! Now: ! JavaScript ! AJAX ! JavaScript is everywhere (Frontend, Backend, DB) ! Single Page Web Apps
- 9. #!/what ! http://twitter.com/ / http://facebook.com ! Your whole app exists on a single page ! No complete reload of the DOM ! Only parts of your page change ! In-App URLs: mydomain.tld/#!/test ! bookmarkable ! client-side routing
- 10. #!/why ! Server doesn‘t need to render complete layouts ! Less CPU time needed for each request ! Server is able to handle more requests ! No huge HTML files are transported ! Less data à less time for transport à Good for UX and Backend ! Especially good for devices that are connected to mobile networks
- 11. #!/why/2 ! Transitions between states ! Immediate Feedback and Interaction Response ! Elegant way to lead the user through complex processes ! Web is not silent ! Reintroduction of music experience through-out the Web ! Separate information flows are not interrupted (chat, music player, file transfers...)
- 12. #!/why/not ! Existing page with a good pagerank, hundreds of indexed urls ! gawker.com à All links from Google were broken ! Intensive Data ! You shouldn‘t develop a banking page like that ! Inspect Element / See source à Your business logic exposed to the user ! Your page relies on the JavaScript performance of your clients ! bad UX with slow browsers ! Make sure JavaScript is enabled (<noscript/> ftw!)
- 13. #!/tools ! Backbone.js - http://documentcloud.github.com/backbone/ ! MVC – in JavaScript ! Easy Backend integration ! SammyJS - http://sammyjs.org/ ! brunch - https://github.com/brunch/brunch ! Toolchain for Single Page Web Apps ! Clean project structure à automatic builds ! Buzzword mayhem: CoffeeScript / Backbone.js / Eco / Stylus
- 14. #!/hosting ! Easily integration into all REST backends ! Rails / AppEngine / you name it ! The missing link for nodejs? ! There‘s no Rails for nodejs (yet) ! Single Page Web Apps + nodejs = Awesomeness
- 15. #!/thx Any questions? Feel free to contact us via Twitter: @thedeftone @toshiyori