Verification

University of Virginia1

Modern Web Application Development

Overview of some newer web applications methods

• Web 2.0

• Ajax fundamentals

• Ruby on Rails


Some Newer Architecture Frameworks Software Architectures

Larger organization of components Frameworks include:

Components we’re given as building blocks Standard forms of behavior between components

Some frameworks for web-based applications AJAX and supporting frameworks Ruby on Rails


Some General Issues Client/Server architectures Web interface through the browser

Client-side processing (Javascript)

Server needs Underlying database management Server side processing

Security, authorization, etc. Transaction processing Business logic Etc.


AJAX and Web 2.0 Have a look at:

Ajax: A New Approach to Web Applications, by Jesse James Garretthttp://www.adaptivepath.com/publications/essays/archives/000385.php

Building Rich Web Applications with Ajax, by Linda Dailey Paulson. (From IEEE Software.)http://www.computer.org/portal/cms_docs_ieeecs/ieeecs/images/ajax.pdf

Book: Pragmatic Ajax: A Web 2.0 Primer (Overview)


Usual Model for Web Apps Interact with a page

Maybe enter info in forms, then hit Submit Server receives the URL (and forms data etc.)

Processes information, and then… New page is returned to the browser and loaded

Even small changes require entire page to be re-loaded

(The web as a hypertext system, not a SW app platform)


New Model: Web 2.0, Ajax Web 2.0: just a buzzword?

See Wikipedia for the history

In part, Web 2.0 is about The web as a computing platform

But also: “new generation” of web usage Collaboration, sharing, things linked together Examples (?):

Blogs, social networking, Flickr, del.icio.us, Skype, games, SecondLife, wikis, podcasts, RSS,…


Ajax Ajax

Named from “Asynchronous JavaScript and XML” Used to refer to two things

Collection of “old” Web-related technologies A web-based SW architecture

Example apps: Google maps; new Yahoo mail


Ajax Component Technologies Presentation with XHTML and CSS Dynamic page display and interaction using the

DOM (Document Object Model) in the browser Data interchange and processing with XML and

XSLT Asynchronous data retrieval with

XMLHttpRequest (or equivalent) JavaScript

Ties it all together on the client-side


What’s Different than the Old Model? Small events

Small request to the server that makes small change to the page

No refresh of complete page!

Asynchronous processing Browser doesn’t block while waiting Key is a XMLHttpRequest (Javascript to server)

Richer events on the client-side Browser recognizes and shares events much like a

GUI-application does


Old vs. New from Garrett’s

web article


Page Modification in Ajax From Pragmatic Ajax See explanation given in class


Steps in Previous Diagram1. Browser requests original page2. Servers sends back complete page3. Browser displays and creates a DOM tree4. (later) Some user activity initiates a request to

the server Asynchronous! To a different URL for a script

5. Server returns data to browser to be handled differently than in (3) above

6. Browser process server-response and updates current DOM in memory


Handling Asynchronous Requests On the client side with JavaScript

An object of type XMLHttpRequest (XHR for short) On the server side

Most basic: any kind of script like those you’ve written before

More complex and useful: a larger framework E.g. servlets, Ruby on Rails, etc.

Get request (with parameters) and send back data (not a webpage)

Simple, or more complex (XML)

Note that browsers must be “smarter” too


XMLHttpRequest on the client What’s it need to do?

Be created and used by some JavaScript function Create a request to a script on the server

E.g. a URL with parameters

Send it Be linked to a call-back function that will be run on the

client when the data is returned


Example: making the call From the demo (simplified)

var xhr = XMLHttpRequest(); // not for older IE

xhr.onreadystatechange=callback-func-name;

xhr.open(“GET”, “/scriptURL?” + param);

xhr.send(null);


Example: Processing Responses Server talks to the call-back function multiple

times xhr.readystate -- an int that indicates status Value of 4 means it’s done and data is ready

Also, xhr.status is set to HTTP response code E.g. 404 “not found”. 200 means “OK”

In call-back function, after checking the above: Get data sent back: xhr.responseText (text data) Process it and update current page using DOM

No reload of entire page occurs!


See demo http://people.virginia.edu/~tbh3f/cs453/ajax1/ Two very simple demos of XMLHttpRequest

processing with JavaScript Very simple server-side processing with PHP


Ajax Support Server-side “remoting”

Frameworks and toolkits to support communications more easily

Client-side GUI toolkits for Ajax apps (Java Script)

More complete toolkits for building larger apps Rails, Tapestry, Dojo, Django, … SEAS Final 4 Bracket Challenge

Aptana, includes support for Ajax/Javascript libraries Used Dojo and Yahoo UI


Ajax and Frameworks Many frameworks use Ajax and provide

Higher-level support for requests and responses Data integration between DBs on the server and

client-side objects GUI support Separation of data, control, presentation, business

rules “components” or “helpers”: sessions, carts, etc. Internationalization

PHP users: Check out symfony



Ruby on Rails A framework for developing web apps

Remember what a framework is? Rails derived from a real commercial application

Features client-side dynamic pages (DHTML) good integration with database on the server coding written in Ruby based on the MVC architecture AJAX characteristics

Book: Agile Web Development with Rails


Concepts behind Rails More slogans!

DRY: Don’t repeat yourself Things defined in code in one place only

Convention over Configuration Code less by submitting to defaults Often depends on naming conventions Can override these if needed


ORM in Rails Challenge: putting together an OO program with

class design and a set of database tables ORM: object-relational mapping

Rails version of ORM called Active Record Define class and get both Ruby class and DB table Get certain methods for free Other parts of the architecture rely on naming

conventions etc. to make all work together with far less programming effort


Rails and MVC Architecture MVC is a design pattern for interactive

applications Model: just like in Observer

Also enforces business rules View: displays the user-interface Controller

receives external events from the user etc. interact with model and view

Many other frameworks also use MVC E.g. Struts, JavaServer Faces


MVC in Rails Diagram

(from book Agile Web Development with Rails)


Views, Controllers in Rails First step: Rails code generation… Views:

You write HTML pages with embedded Ruby Your code interacts with the controller

Controller: You write code focused on application-specific

functions Rails provides

routing events/requests from pages/views to your handlers sessions, caching, …


Summary The high-level big picture here is:

Certain kinds of applications… (E.g. web-applications, DB-centered, etc.)

… benefit from particular architecture models… (E.g. Ajax ideas)

… and we use frameworks at the architecture level… (E.g. Rails or AJAX environments)

… and lower-level design and coding “tools” (E.g. specific IDEs, toolkits, GUI libraries,…)

… to build larger, better systems quicker.

Documents

Verification