Anatomy of an Advanced Web Application

Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)

Erik Wilde and Dilan Mahendran, UC Berkeley School of Information
2011-03-14

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde and Dilan Mahendran: Anatomy of an Advanced Web Application

Contents

Erik Wilde and Dilan Mahendran: Anatomy of an Advanced Web Application

(2) Abstract

The widespread adoption of client-side scripting and AJAX techniques has resulted in web applications becoming easier use but harder to understand. No longer is it the case that HTML is used simply to present a document to be read. Now HTML, Javascript and CSS are used together to build dynamic applications that run in the browser. These applications often depend on APIs, resources intended for use by programs rather than people.



Getting Advanced

Outline (Getting Advanced)

  1. Getting Advanced [6]
  2. Midterm [2]

(4) AJAX Flow Diagram

img/ajax-diagram.png
Courtesy of http://loadstorm.com/2009/load-testing-ajax-loadstorm


(5) AJAX Auto Complete with JQuery(JavaScript)/PHP/Mysql



(6) Web Service APIs



(7) Javascript Object Notation (JSON)



(8) JSON Handling

  1. Client side Javascript Objects
    • JSON parser transforms object to string
    • URL encoded JSON is sent to the server vid HTTP request
  2. Server Side
    • Decode incoming JSON string with parser into object
    • The object can now be handled by any prefered server side language
  3. Client-side
    • Returned JSON string is transformed into new object with JSON parser on client


(9) JSON Example

{ 
  'name': 'Web Architecture & Information Management',
  'semester': 'Spring 2011',
  'students': [
    { 
      'name': 'Angie Fredette',
      'year': 1 
    },
    { 
      'name': 'Philip Fall',
      'year': 4 
    },
    { 
      'name': 'Olivia Odum',
      'year': 2 
    } 
  ] 
}


Midterm

Outline (Midterm)

  1. Getting Advanced [6]
  2. Midterm [2]

(11) Midterm



(12) Review Session



2011-03-14 Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)