single page apps a bleeding edge new concept or a revived old one?
TRANSCRIPT
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
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!
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
Dojo had it all!
The concepts at the timeDuality of the Web Source (Garrett, 2002): http://www.jjg.net/ia/
Jesse James Garrett
The concepts at the time - AJAXAt 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 )
The concepts at the time - Web 2.0Web 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
The concepts at the timeRich Internet Applications
The concepts at the timeRich Internet Applications
Source [Dawelbeit 2008] Source [http://www.fsi.co.uk/digital-dashboard-mid-32.html]
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…
Nothing is really new
Tomcat
= JavaScript + CSS + HTML + DOM
Source [Dawelbeit 2008]
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.
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.
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.
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.
A design MethodologyComplex 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.
A design Methodology
Prototype
Design
Code
Final UI
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.
References1. 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.
Questions