1. WHAT IS A WEB APP? Van Kelly Yeshiva University July 6, 2013

2. APPS BEFORE THE WEB

3. Timeshare Application Architecture Terminal user interaction (text and block graphics) Mainframe data + programs

4. Standalone Apps with GUI Netbeui or Netware over Ethernet or ARCnet File ServerPC all app functionality

5. Two-Tier Client-Server Applications "Fat" Client presentation logic + business rules Server database ODBC/JDBC over Ethernet

6. Three-Tier Application Architecture "Thin" Client presentation logic Application Server business rules Data Server business data Private Protocol over TCP Socket ODBC/ JDBC

7. MVC Business Logic "Thin" Client presentation logic Application Server business rules Data Server business data Model View Controller V V M M C C

8. 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)

9. 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

10. Web App 1.0 Java Applet presentation logic Application Server business rules Data Server business data Web Server Java applet HTTP TCP Socket JDBC

11. Canonical Example: Hangman

12. Web App 1.5 Browser HTML + CSS + JS or Flash Application Server business rules Data Server business data Web Server presentation logic (PHP) HTTP *CGI JDBC

13. Web App 1.9: "RESTful" Browser HTML + CSS + JS Application Server presentation logic + business rules Data Server business data HTTP mod_* JDBC V V M M C C Web Server proxy + caching

14. Web App 2.0: "AJAX" Browser HTML + CSS + JS presentation logic Application Server presentation logic + business rules Data Server business data HTTP mod_* JDBC V V M M C C Web Server proxy + caching

15. Web App 2.5: Single Page Apps (SPA) "Fat Client" in Browser HTML + CSS + JS presentation logic + business rules Data Server business data Web Server app download + data proxy HTTP JSON V V M M C C

16. 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: 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