1 / 27

Modern Web Application Development

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

Download Presentation

Modern Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

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

More Related