modern web application development
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
University of Virginia1
Modern Web Application Development
Overview of some newer web applications methods
• Web 2.0
• Ajax fundamentals
• Ruby on Rails
University of Virginia2
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
University of Virginia3
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.
University of Virginia4
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)
University of Virginia5
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)
University of Virginia6
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,…
University of Virginia7
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
University of Virginia8
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
University of Virginia9
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
University of Virginia10
Old vs. New from Garrett’s
web article
University of Virginia11
Page Modification in Ajax From Pragmatic Ajax See explanation given in class
University of Virginia12
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
University of Virginia13
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
University of Virginia14
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
University of Virginia15
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);
University of Virginia16
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!
University of Virginia17
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
University of Virginia18
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
University of Virginia19
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
University of Virginia20
University of Virginia21
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
University of Virginia22
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
University of Virginia23
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
University of Virginia24
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
University of Virginia25
MVC in Rails Diagram
(from book Agile Web Development with Rails)
University of Virginia26
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, …
University of Virginia27
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.