Architecture of a Modern Web App

© 2013 SpringSource, A division of VMware. All rights reserved

Re-distribution allowed with author’s consent.

Architecture of a Modern Web App

Scott Andrews

@scothis

[email protected]

Re-distribution allowed with author’s consent.2

About Me

Joined SpringSource in 2008

Wearer of many hats

Drifter• frameworks ⇆ applications

• open source ⇆ commercial

• client ⇆ server

• front-end ⇆ back-end

Teams• Spring Web

• tc Server

• Spring Insight

• Cloud Foundry

• SpringSource JavaScript


Agenda

Where we’ve been

Where we’re going

How we’ll get there

Further resources

Questions


Agenda

Where we’ve been

Where we’re going


Further resources

Questions


In the beginning...


In the beginning...

Sites were static HTML Pros:• low computational overhead

• highly cacheable

• highly indexable

Cons:

• hard (easy?) to update

• no personalization

• usually poor UI


Let there be CGI


Let there be CGI

Introduced dynamic generated pages

Pros:• dynamic!

• selectively cacheable

• highly indexable

• personalizable

Cons:

• “high” computational overhead

• hard to create

• usually poor UI


LiveScript JavaScript

http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg




LiveScript JavaScript

Dynamic pages

Lightweight complement to applets

Mostly used for simple scripting• basic form validation

• popup ads

• comet cursor trails

Pros:• enhanced usability, maybe

• reduced trips to the server

Cons:

• abuses annoyed users

• business logic often implemented twice: client and server





AJAX - Web 2.0

Google Maps sparked Web 2.0

GMail• required JavaScript

Pros:• killer UI

• more responsive apps

Cons:

• difficult to cache

• impossible to index

• required JavaScript


Unobtrusive JavaScript

No JavaScript, no problem

Provide features for user agents that support them• fall back to basic HTML

Pros:• wider compatibility

• just as rich UI

• just as responsive

Cons:

• higher development costs

• requires thoughtful engineering


Client Side Applications

Business logic lives on the client

Resources and permanent state stored on the server

Application and session state stored on client

Pros:• reduce server workloads

• application is highly cacheable

• extremely rich UI

Cons:

• content not indexable

• requires JavaScript

• often requires a ‘modern’ browser


Agenda

Where we’ve been

Where we’re going


Further resources

Questions


From server-side app to smart clients and services

Browser-based

HTML Rendering

(progressive enhancement)

HTML HTTP

ApplicationServer

ViewGeneration Controllers

Client

Server

Browser

Service Layer

Channels Repositories RDBMSCRUD



Client

ServerRDBMSCRUD

HTML5 & JS Engine

ControllersDOM

Client-side model

Service Layer

Channels Repositories

web stg

HTTP &WebSockets

events &notificationsJSON

Browser app orembedded in native



Client

RDBMSCRUD

HTML5 & JS Engine

ControllersDOM

Client-side model

Service Layer


web stg

HTTP &WebSockets


Service Service Service


Server

business / domain services



Client

RDBMSCRUD

HTML5 & JS Engine

ControllersDOM

Client-side model


web stg

HTTP &WebSockets


Service Service Servicebusiness / domain services


Server

platform services,web APIs



ClientHTML5 & JS Engine

ControllersDOM

Client-side model web stg

HTTP &WebSockets


Service Service Servicebusiness / domain services


Service Service Service

SQL NoSQL otherPaaS


DemoApplications as Services

Monty Hall

20


Agenda

Where we’ve been

Where we’re going


Further resources

Questions


Client side code as a first class citizen

Apply design patterns• all of your old favorites still apply

• functional and OO patterns

Modularize• decompose applications

• let loaders reassemble

Unit test• several excellent test harnesses

Enforce code quality• JSHint


DemoClient side code as a first class citizen

23


Think Messaging

Web Sockets are message based

Web Workers are message based

DOM Events are message based

Web vs Integration is a false dichotomy


DemoClient-Server Messaging

25


Simplify Views

Simple templates can render on the client or server• JSP, et al will never render client side

Can the model be cleanly serialized?• anemic domain model has benefits

Avoid imperative logic• lots of conditions may indicate the model is poorly structured


Client vs Server

The definitions of “back-end” and “front-end” are shifting• font-end != client, back-end != server

Embrace both sides

Specialize in client-server integration


Frameworks

New frameworks are emerging• quickly reaching maturity

• watch this space

Frameworks will not solve all your issues• sorry


Agenda

Where we’ve been

Where we’re going


Further resources

Questions


IoC + JavaScript

Decompose applications into modules

Assemble modules together with Dependency Injection

Brian Cavalier and John Hann• founders of Cujo.js

Webinar January 31st• signup: http://www.springsource.org/node/3768

• sneak peak: http://www.youtube.com/watch?v=TqX-CqYYwEc


Questions?


Links

Libraries• clicks.js: https://github.com/s2js/clicks

• integration.js: https://github.com/s2js/integration

• rest.js: https://github.com/s2js/rest

• wire.js: https://github.com/cujojs/wire

Scripted Editor: http://scripted-editor.github.com/scripted/

Monty Hall application• front-end: https://github.com/five-eleven/monty-hall-ui

• back-end: https://github.com/acolyer/monty-hall

IoC + JavaScript Webinar: http://www.springsource.org/node/3768

Architecture of a Modern Web App

Technology

Transcript of Architecture of a Modern Web App