Single page apps a bleeding edge new concept or a revived old one?

Single Page Applications, a buzz term that has been echoed recently. In this presentation it's shown that the SPA concept isn't really new. In fact it has been around for years, it's just now that browsers are so fast and front-end developers are ready for such patterns.

http://omerio.com/2014/03/23/single-page-apps-a-bleeding-edge-new-concept-or-a-revived-old-one/

Transcript

1. Single Page Apps A bleeding edge new concept or a revived old one? Omer Dawelbeit (omer.dawelbeit@gmail.com) Blog: http://www.dawelbeit.info Copyright © 2014. Omer Dawelbeit
2. Back in the Day (2005 - 2007) •  When Dojo, Scriptaculous, Prototype roamed the jurassic world. •  JQuery was just about born! •  AngularJS didn’t even exist! •  Client side MVC, MVVM and SPAs weren’t new back then. •  Dojo ahead of its time, offered all of those!
3. Dojo had it all! •  Single Page App pattern •  Desktop pattern •  Sophisticated client side MVC, MVVM, etc... •  Ultra rich widget library •  Way ahead of its time •  Plus a plethora of poor documentation
4. Dojo had it all!
5. The concepts at the time Duality of the Web Source (Garrett, 2002): http://www.jjg.net/ia/ Jesse James Garrett
6. The concepts at the time - AJAX At the time Crane et. al, 2006 summarise the concepts of using AJAX as: •  The browser hosts an application, not content. •  The server delivers data, not content. •  User interaction with the application can be fluid and continuous. •  This is real coding and requires discipline. (i.e. no cowboy coding )
7. The concepts at the time - Web 2.0 Web 2.0 is the network as platform, spanning all connected devices; Web 2.0 applications are those that make the most of the intrinsic advantages of that platform: delivering software as a continually-updated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an "architecture of participation," and going beyond the page metaphor of Web 1.0 to deliver rich user experiences.[O'Reilly 2005] Source http://en.wikipedia.org/wiki/Web_2.0
8. The concepts at the time Rich Internet Applications
9. The concepts at the time Rich Internet Applications Source [Dawelbeit 2008] Source [http://www.fsi.co.uk/digital-dashboard-mid-32.html]
10. Nothing is new really •  Complex UI concepts, such as: publish/subscribe notification styles, rich reusable widgets, class definitions, MVVM, etc… were all available at the time. •  OO JavaScript, JSON and AJAX were there. •  UI development workflows were available, although based on ANT tools rather than own dedicated tools like Grunt, Bower, etc…
11. Nothing is really new Tomcat = JavaScript + CSS + HTML + DOM Source [Dawelbeit 2008]
12. So why weren’t SPAs adopted? •  Like Google WAVE , those concepts were ahead of their time. •  Too many new ground breaking concepts for front end developers to digest. •  Developers were too busy trying learn and use AJAX techniques. •  Low bandwidth meant rich front end logic was too heavy to load.
13. So why weren’t SPAs adopted? •  Browsers weren’t keeping up!. There was no Chrome with V8 supercharge JS engine those days. •  Too much information and hype for Web developers to keep up. •  Because browsers didn’t keep up, developers were busy with Flash, Adobe Air & MS Silverlight. •  Users weren’t mature enough, still in the ‘Web as Hypertext’ mode.
14. Technology Hype at the time (2006) Source http://www.gartner.com/
15. Jump to 2009 & no one is interested! Source http://www.gartner.com/
16. Now the time is right •  Super fast Internet access. •  Super fast Browsers. •  Mature end users with high expectations. •  Mature developers. •  Advances in Web technologies such as HTML5 and CSS3 helped to achieve more with less code.
17. The LEGO building blocks •  Image library. •  Widget library. •  UI development workflow → build, test, deploy. •  Reusable UI components. •  Good grip with JavaScript, OO JavaScript, AJAX, JSON & HTTP interactions.
18. A design Methodology Complex things require design & architecture, so here is a simple design methodology for SPAs (Dawelbeit, 2007, 2008): •  Apply the concepts of Web 2.0 •  Treat the Web-UI as an Object Oriented user interface rather than static Web pages. •  Use rich visual widgets. •  Break the Web pages model using AJAX. •  Use established modelling techniques.
19. A design Methodology Prototype Design Code Final UI
20. Recommendations •  For production line of applications, UI Widget library is the best cost effective approach. •  Separation of Frontend and Backend code. •  UI end to end testing and backend unit & integrations tests are the way to go. •  The more complex the UI gets the more starting by just writing code isn’t going to work. •  Complex UI need design first, otherwise it’s going to be messy.
21. References 1.  Crane, D. Pascarello, E. James, D. (2006). Ajax In Action. Greenwich: Manning Publications. 2.  Dawelbeit, O. (2007). Web User Interface from Prototyping to Implementation. URL: http://dawelbeit.info/2008/03/09/web-user-interface-from-prototype-to- implementation/ [10 April 2008] 3.  Dawelbeit, O. (2008). Development of Rich Internet Application for Office Management System. MSc Dissertation at University of Reading. URL: http://dawelbeit.info/development-of-rich-internet-application-for-office- management-system/ 4.  Garrett, J. J. (2002). The Elements of User Experience: User Centered Design for the Web. New Riders Press.
22. Questions