This document provides a brief history of the web and discusses different technical approaches to web development. It outlines the evolution of the web from the 1960s development of packet switching to the standardization of HTML5. It also summarizes static pages, progressively enhanced pages, and single page applications in terms of their technical complexity, SEO, performance, and other factors. Finally, it advocates taking a flexible approach and choosing the right technology for each use case and business need.

1. 1
ARCHITECTING
FOR THE
ENTERPRISE
https://xkcd.com/844/

2. 2
Thomas Cowell
Head of Interactive Development (UK)
@hairballopolis
http://uk.linkedin.com/thomascowell

3. A Brief History of the Web

4. 4
 60s – Packet switching discovered.
 60s/70s – Dawn of networked computers
 1982 – TCP/IP standardized (mass utilized
until native stack in Windows 95)
 80s/90s - AOL / Bulletin Boards
Brief History of
the Web

6. 6
 80s/90s - AOL / Bulletin Boards
 1984 – DNS
 1991 – First Web Page
 1993 – Mosaic – First Browser
 1995 – Shockwave Flash
 1999 – IE5
 2000 – HTML4
 2001 – IE6
Brief History of
the Web

8. 8
 2001 – IE6 & Windows XP
 2004 – Facebook started
 2005 – Firefox 1.0
 2006 – Ajax takes of with Ruby on Rails
 2008 – HTML5 first public draft
 2012 – HTML5 Candidate Recommendation
 2013 – 153 of Fortune 500 use HTML5
 2014 – HTML5 Recommendation
 April 8 2014 – WinXP & IE6 End of Life
Brief History of
the Web

9. OMG they have legacy systems

10. How to bring the best in breed
solutions to a technically conservative
market place.

11. Looking to the Future
Or do I mean present?

12. Private & Confidential, SapientNitro © 2013

14. 14
 Thin Client, Thick Server, pull/get only
 Thick(ish) Client, Thick Server, isolated push
 Thick Client, Thin(ish) Server, natural push
Technical Design

15. 15
Low Complexity
Pages
Static HTML
Full Page
Refresh
Client Pull /
Get from
Server
Progressively
Enhanced Pages
Multiple Pages
with in-page
interactions
Ajax, generally
pull
Transactional /
Interactive
May contain
isolated Push
widgets
Single Page
Applications
Transactional /
Workflow /
Tool
App like
Experience
Lends itself
naturally to
Push
Technical Design

16. 16
SEO Maintainability
Complexity of
systems
Platform support -
CMS, Ecommerce
system, etc.
Performance
(Perceived &
Measured)
Accessibility
(A, AA, AAA, etc.)
Fragmentation of
Browsers
Browser Support
Emerging
technology &
speed
Responsive /
Adaptive Web?
Technical Focus of
Developers
What are the
constraints?

17. …they have legacy systems…

18. What does this mean?

19. 19
Using principles of well constructed systems UI
systems.
 Modular components
 Clear separation of responsibilities
 Self contained
 Decoupled interactions
 Shouldn’t fail when not there
 Behave like DOM events
 Clear dependency management
 Dependency management - require js
 Each module should manage its
dependencies
Architectural
principles

20. 20

21. 21
Static HTML with no transaction with a server.
Where to use this technology?
 Brochure-ware
 Informative sites, which irregularly change
 Content is not transactional
 Technology: CQ5, Tridian, Wordpress,
Drupal, nanoc, jekyll
Static Pages

22. 22

23. 23
An enhanced HTML page with componentry
and moving parts where there are interactions
with the server.
Where to use this technology?
 Transactional with greater client support
 Where SEO is super important.
 James Croft – Integrating Ember into
existing sites. https://vimeo.com/86698279
 Interactive Digital Experiences
 Linger is short
 Creative is not app-like in appearance
 Technology: jQuery, Flash, eCommerce,
airline booking sites.
Progressively
Enhanced

24. 24

25. 25
A page where a visitor spends a considerable
amount of time transacting with a service or
page.
Where to use this technology?
 Highly interactive pages and transactional
pages
 Behind authentication
 SEO is not too important or can be
embedded into server delivered HTML
 Modern browsers are acceptable minimum.
 JSON APIs all the way
 Gmail, Facebook Timeline, Harley Bike
Configurator, Trading platforms.
Single Page
Applications

26. 26
Technical Challenges
 Analytics and measuring
 In the controller
 Part of view interactions
 Content Management
 How to provide simple management of the
application to non-technical content
managers
 Seamless management and deployment
 Authentication
 Done in app, when on SSL
 Done as a separate page when
Single Page
Applications

27. 27
Static Pages Progressive Enhanced Single Page Application
Technical Complexity Low Medium - High Medium - High
Initial HTML page Same Small transaction flourishes To bootstrap and then it changes
SEO High High Medium - Low
Performant Super Fast Fast Slow load & super fast
Total Cost of Ownership Low Medium High
Accessibility High High Medium (extra effort required)
Responsive / Adaptive High High High
Dwell Time Low Medium High
Design is app-like Low Low – Medium High
Volume of Transaction on each page None – Low Low – Medium High
Legacy Browser Support High Priority Medium – High Low - Medium
Complexity of Systems Low Medium Medium - High
Can business logic exist in the client? No Maybe Maybe - Yes
Server Interactions Pull only Isolated Push, generally pull Naturally Push

28. Here is the secret

29. 29
Be smart and flexible!
Choose the right
technology for the right
purpose.
We are already skilled
at Static & Progressive
Enhanced Sites

30. 30
Making a place
for Single Page
Applications
Find suitable locations to make it a celebration
of the technology
 Application Like experiences
 Behind Authentication
 Configurators
 Highly interactive
 Transactional without substantial content
changes.
 JSON APIs

31. 31
How to handle a
hybrid approach
There is an opportunity to mix approaches as
and where appropriate.
 Identify the sweet spots
 Look at cost of making as a static page vs
SPA
 Understand the visitor expectations
 Are there security or privacy rationale that
would be mitigated by separate pages.
 Facebook,

32. Sometimes it feels like glaciers move
faster

33. Sometimes legacy makes it
interesting

34. © 2013 SAPIENT CORPORATION | CONFIDENTIAL
THANK YOU