1

ARCHITECTING FOR THE ENTERPRISE

https://xkcd.com/844/

2

Thomas CowellHead of Interactive Development (UK)

@hairballopolis

http://uk.linkedin.com/thomascowell

A Brief History of the Web

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

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

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

OMG they have legacy systems

How to bring the best in breed solutions to a technically conservative

market place.

Looking to the FutureOr do I mean present?

Private & Confidential, SapientNitro © 2013

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

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

SEO MaintainabilityComplexity of

systems

Platform support -CMS, Ecommerce

system, etc.

Performance (Perceived & Measured)

Accessibility

(A, AA, AAA, etc.)

Fragmentation of Browsers

Browser SupportEmerging

technology & speed

Responsive / Adaptive Web?

Technical Focus of Developers

What are the constraints?

…they have legacy systems…

What does this mean?

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

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

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

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

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

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

Here is the secret

29

Be smart and flexible!Choose the right technology for the right purpose.

We are already skilled at Static & Progressive Enhanced Sites

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

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,

Sometimes it feels like glaciers move faster

Sometimes legacy makes it interesting

© 2013 SAPIENT CORPORATION | CONFIDENTIAL

THANK YOU