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
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

4. Dojo had it all!
   

   View Slide

5. The concepts at the time
   Duality of the Web Source (Garrett, 2002): http://www.jjg.net/ia/
   Jesse James Garrett
   

   View Slide

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 )
   

   View Slide

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
   

   View Slide

8. The concepts at the time
   Rich Internet Applications
   

   View Slide

9. The concepts at the time
   Rich Internet Applications
   Source [Dawelbeit 2008] Source [http://www.fsi.co.uk/digital-dashboard-mid-32.html]
   

   View Slide

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…
    

    View Slide

11. Nothing is really new
    Tomcat
    = JavaScript + CSS + HTML + DOM
    Source [Dawelbeit 2008]
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

14. Technology Hype at the time (2006)
    Source http://www.gartner.com/
    

    View Slide

15. Jump to 2009 & no one is interested!
    Source http://www.gartner.com/
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

19. A design Methodology
    Prototype
    Design
    Code
    Final UI
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

22. Questions
    

    View Slide