WHAT IS A WEB APP?Van Kelly

Yeshiva University

July 6, 2013

APPS BEFORE THE WEB

Timeshare Application Architecture

Terminaluser interaction(text and block

graphics) Mainframedata + programs

Standalone Apps with GUI

Netbeui or Netware over

Ethernet or ARCnet

File ServerPCall app

functionality

Two-Tier Client-Server Applications

"Fat" Clientpresentation logic +

business rules

Serverdatabase

ODBC/JDBC over Ethernet

Three-Tier Application Architecture

"Thin" Clientpresentation logic

Application Serverbusiness rules

Data Serverbusiness data

Private Protocol over TCP

SocketODBC/JDBC

MVC Business Logic

"Thin" Clientpresentation logic

Application Serverbusiness rules

Data Serverbusiness data

Model

View

Controller

V

M C

Three-Tier App Components• Disruptive economics = a vigorous market of "components"• Components = instantiable "templates" for software

• super-encapsulated – "objects on steroids"• abstracted away locality – worked locally or remotely• configurable at compile-time or run-time• standardized deployment packages – plug & play• MS: "Lego for software"

• Component examples• GUI widgets• spreadsheets, chart/graph generators• network services (e.g. FTP servers)• HTML/CSS rendering engine• app infrastructure (message queues)• all MS Office apps were also components

• Needed language support (C++ bad, VB worked)

Apps on the Web? How?• Browsers are unstable, slow• The Web was designed to serve paged documents/forms• Page refreshes take too long (>10 seconds)• The web has no "state"• HTML is not a rich UI language• JavaScript is just a toy for writing stuff like tic-tac-toe• Web UIs look nothing like "real" UIs• Web protocols have nothing like MVC• Web software is nothing like components

Web App 1.0

Java Appletpresentation logic

Application Serverbusiness rules

Data Serverbusiness data

Web ServerJava applet

HTTP

TCP Socket JDBC

Canonical Example: Hangman

Web App 1.5

BrowserHTML + CSS + JS or

Flash

Application Serverbusiness rules

Data Serverbusiness data

Web Serverpresentation logic

(PHP)

HTTP

*CGI

JDBC

Web App 1.9: "RESTful"

BrowserHTML + CSS + JS

Application Serverpresentation logic +

business rules

Data Serverbusiness data

HTTP

mod_*

JDBC

V

M C

Web Serverproxy + caching

Web App 2.0: "AJAX"

BrowserHTML + CSS +

JS presentation logicApplication Serverpresentation logic +

business rules

Data Serverbusiness data

HTTP

mod_*

JDBC

V

M C

Web Serverproxy + caching

Web App 2.5: Single Page Apps (SPA)

"Fat Client" in BrowserHTML + CSS +

JS presentation logic + business rules

Data Serverbusiness data

Web Serverapp download +

data proxy

HTTP

JSON

V

M C

Web Components (Web App 3.0?)• Current web "components" are just plug-ins for a specific

server environment (e.g., WordPress)• Web Components promise universal component-like

interfaces• Support only in Firefox and Chrome for now.• W3C Component Model:

• HTML/JS templates• Decorators• Custom HTML Elements• Shadow DOM – a gory mess of new browser infrastructure to allow

fine-grained encapsulation• HTML Imports