; cs453-n-ajax
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>



  • pg 1
									 Modern Web Application

Overview of some newer web applications methods
   • Web 2.0
   • Ajax fundamentals
   • Ruby on Rails

                              1                   University of Virginia
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

                                      2                 University of Virginia
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.

                                             3   University of Virginia
AJAX and Web 2.0
   Have a look at:
       Ajax: A New Approach to Web Applications, by Jesse
        James Garrett
       Building Rich Web Applications with Ajax, by Linda
        Dailey Paulson. (From IEEE Software.)

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

                                            4                        University of Virginia
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-

   (The web as a hypertext system, not a SW app

                                  5                  University of Virginia
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,…

                                         6                    University of Virginia
   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

                                        7                   University of Virginia
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
 Asynchronous data retrieval with
  XMLHttpRequest (or equivalent)
 JavaScript
       Ties it all together on the client-side

                                    8             University of Virginia
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

                                 9                University of Virginia
Old vs. New
   from Garrett’s
    web article

                     10   University of Virginia
Page Modification in Ajax
   From Pragmatic Ajax
   See explanation given in class

                                     11   University of Virginia
Steps in Previous Diagram
1.   Browser requests original page
2.   Servers sends back complete page
3.   Browser displays and creates a DOM tree
4.   (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

                                    12                     University of Virginia
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
       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

                                         13          University of Virginia
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

                                      14             University of Virginia
Example: making the call
   From the demo (simplified)

var xhr = XMLHttpRequest(); // not for older IE
xhr.open(“GET”, “/scriptURL?” + param);

                           15             University of Virginia
Example: Processing Responses
   Server talks to the call-back function multiple
       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!

                                       16           University of Virginia
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

                                17               University of Virginia
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

                                        18                    University of Virginia
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
       “components” or “helpers”: sessions, carts, etc.
       Internationalization
   PHP users:
       Check out symfony

                                 19                University of Virginia
20   University of Virginia
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

                                 21                University of Virginia
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

                                       22               University of Virginia
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

                                 23                University of Virginia
Rails and MVC Architecture
 MVC is a design pattern for interactive
 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

                                 24                   University of Virginia
MVC in Rails Diagram

  (from book Agile Web Development with Rails)

                               25                University of Virginia
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
       Rails provides
            routing events/requests from pages/views to your handlers
            sessions, caching, …

                                       26                   University of Virginia
   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.

                                         27                    University of Virginia

To top