Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Omer Dawelbeit

May 19, 2015
Tweet

More Decks by Omer Dawelbeit

Other Decks in Technology

Transcript

  1. Single Page Apps
    A bleeding edge new concept or a revived
    old one?
    Omer Dawelbeit ([email protected])
    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