Modern Web Application Development

1. Modern Web Application Development • Overview of some newer web applications methods • Web 2.0 • Ajax fundamentals • Ruby on Rails

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

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

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

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

6. 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,…

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

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

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

10. Old vs. New • from Garrett’s web article

11. Page Modification in Ajax • From Pragmatic Ajax • See explanation given in class

12. Steps in Previous Diagram • Browser requests original page • Servers sends back complete page • Browser displays and creates a DOM tree • (later) Some user activity initiates a request to the server • Asynchronous! To a different URL for a script • Server returns data to browser to be handled differently than in (3) above • Browser process server-response and updates current DOM in memory

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

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

15. 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);

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

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

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

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

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

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

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

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

25. MVC in Rails Diagram (from book Agile Web Development with Rails)

26. 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, …

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