modern web app architectures

web app architecture

raphael starysoftware engineer @ RISEcs student @ tuwienenthusiastic about #ux #agile #javaEE #tdd #architecturalStylez#openWebGames #html5 #fancyStuff

FAT CLIENT

proprietary plugins

open web stack

thick server architecture

thin server architecture

move client-side logic from the server to the client this results in the role of the web server evolving into a pure data API or web service.

thin server architecture

MVC / MVVM / MVP

declarative procedural

component basedaction based

do it yourself

https://github.com/addyosmani/todomvc

knockout javascriptMVC

batman angularbackbone sammy

stateful

stateless

where is the state?

local storage / session storagecookie

http session

just RDBMS

polyglot persistence

http://martinfowler.com/articles/nosql-intro.pdf

AJAX

server side templatingclient side templating

full page reload

partial page rendering JSON objects

rpc

restful

multi page app

single page app

single page app

the goal of providing a more fluid user experience akin to a desktop application.

pushState navigationhash based navigation

https://www.facebook.com/messages/

https://www.facebook.com/#!/messages/

offline !!!

app cacheindexedDB - local storage

mobile / touch version

responsive web designnative wrapper

http://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/

best practicesmodernizr (Polyfills)twitter bootstraphtml5 boilerplatekickstrap

c&c

to infinityand beyond