An Introduction to the Development of Web Applications using Ruby on Rails with Ajax

1. An Introduction to the Development of Web Applications using Ruby on Rails with Ajax Ansgar Berhorn, B.Sc. and Mike Rowe, Ph.D.

2. Contact Information Ansgar Berhorn, B.Sc. Dept. of Computer Science University of Applied Sciences / Hochschule Darmstadt Haardtring 100 64295 Darmstadt, Germany ansgar.berhorn@berhorn.de Michael Rowe, Ph.D. Computer Science and Software Engineering Department University of Wisconsin – Platteville 215 Ullrich Hall Platteville, Wisconsin 53818 rowemi@uwplatt.edu

3. Outline of Presentation • Introduction to Ruby • Ruby on Rails • Model –Viewer – Controller (MVC) and Ruby on Rails • Ajax and Ruby on Rails and MCV

4. Ruby on Rails from 40,000 feet • Ruby was first released by Yukihiro Matsurnoto in 1995. • “I wanted a language more powerful than Perl and more object-oriented than Python.”, Matsurnoto • Rails: • Is a framework that allows the rapid development of web applications • Maintains a well-structured code base • Produces a Model-Viewer-Controller (MVC) skeleton for the application • Provides support for asynchronous web updates via AJAX

5. Testimonials • Tim O'Reilly, “Ruby on Rails is a breakthrough in lowering the barriers of entry to programming. Powerful web applications that formerly might have taken weeks or months to develop can be produced in a matter of days”. • Martin Fowler, “It is impossible not to notice Ruby on Rails. It has had a huge effect both in and outside the Ruby community... Rails has become a standard to which even well established tools are comparing themselves to.”http://rubyonrails.com/quotes

6. Ruby code examples Ruby Command-line Interpreter (fxri) 001:0> puts "Hello Moon" Hello Moon

7. Heterogeneous Arrays 054:0> # array with 3 elements // a comment 055:0* a = [ 1, “Avogodro", 78.91] => [1, " Avogodro ", 78.91] 056:0> # set first element of a[ ] to 5 057:0* a[ 0 ] = 5 => 5 058:0> # set the second element to 6.02 059:0* a[ 1 ] = 6.02 => 6.02 060:0> a=> [5, 6.02, 78.91]

8. Ruby Count Control Loop 1> 10.downto( 0 ){ 2> |lvc| print lcv , ”__” } 10__9__8__7__6__5__4__3__2__1__0__ downto, as well as upto and others are methods of the Integer Class

9. Ruby Procedures 063:0> # define a procedure called looper 064:0* def looper( count ) 065:1> count.downto( 0 ) { 066:2* |lcv| print lcv , "_" } 067:1> end => nil # execute looper with an argument of 5 069:0* looper( 5 ) 5_4_3_2_1_0_=> 5

10. Characteristics of Ruby • Programmers do not need to declare data types. • Data types are dynamic • Everything is an object • Operators (and also array brackets ‘[ ]’) are aliases for object methods • Managed memory • Has great support for access to OS; CGI; FTP; HTTP; Templates; IP ,TCP, UDP Sockets; RegExp; threads/processes; IMAP; POP ; SMTP; Telnet; XML; RUNIT (like JUnit); Win32; databases; and more

11. Introduction to Ruby on Rails • Ruby on Rails is an Open Source web application framework • developed by David Hansson in 2004 • Follows principle of “Convention Over Configuration” • Rails forces us to follow programming conventions that allow the framework to plug together the pieces automatically.

12. Model-View-Controller (MVC) • Rails guides applications into the MVC pattern. • MVC Pattern is composed of three components: • Model: maintains the state/data of the system • Controller: the logic center of an application, responsible for: • Routing requests from the user to the application • Caching to prevent unnecessary queries of the model • Session management of application users • Viewer: provides each user with a consistent view of the application based on their state. • The goal of MVC is to separate code used for data access from code used for the user interface.

13. MVC Pattern • A web browser sends a request to the Controller (1), • The Controller interacts with the Model to obtain necessary data (2). • The Model queries these data from the database (3) and provides them to the Controller (4), • The Controller sends it for rendering to the View (5). • The View is then sent to a users browser for viewing (6).

14. MVC and Ruby on Rails • Ruby on Rails has a base class for each of the MVC components. • Model inherits from the ActiveRecord class • View inherits from the ActionView class • Controller inherits from the ActionController class

15. The ActiveRecord / Model • The ActiveRecord uses Object Relational Mapping (ORM) for storing and retrieving data from a database. • ORM maps DB tables to Ruby Classes • DB rows to Ruby Objects • Conventions • If the DB has a table called “products”, then Rails will generate a Class Product in the Model that provides access to the products table. • Product.find( ID ) would return a row object from the products DB • DB tables will have plural names, classes will have corresponding singular names.

16. The ActionController • Rails provides the three responsibilities of the Controller, Routing, Caching, and Session Management, automatically behind the scenes through the inherited ActionController Class.

17. ActionView • The View connects HTML code with the application. • “Embedded Ruby” (ERb) supports the implementation of dynamic HTML for web pages in a manner similar to PHP and JSP. • Recall the rich support set of Ruby mentioned earlier!

18. Setting Up a MVC App • We will need to set up the following: • Database • Controller • View • Model

19. Database setup using SQLit > rails helloworld -d sqlite3 The above rails command will set up three DB environments, one each for : • development • test • production

20. Creating and Provisioning DB Table $ sqlite db/development.sqlite3 sqlite> CREATE TABLE greetings ( "id" INTEGER PRIMARY KEY NOT NULL, "text" VARCHAR(255), "created" DATE ); sqlite> INSERT into greetings values(NULL,"Hello World", "2006-12-01"); sqlite> INSERT into greetings values(NULL,"Hello Bubba", "2006-12-02"); sqlite>select * from greetings; .quit

21. DB Conventions • The above example enforces two Rails Conventions • The DB table name is plural “greetings” – this will map to a Ruby Class of “Greeting”. • The primary key to the greeting table is “id”.

22. Setup of Controller > ruby script/generate controller Say The above line creates the shell of a MVC’s Controller called “Say” >class SayController <ApplicationController >end We can define a “hello” method for this class by adding >class SayController <ApplicationController > def hello >#------ method code goes here. > end >end

23. Setup of Viewer The generation of the Controller done previously with > ruby script/generate controller Say Created a shell MVC View that we can fill in: 1 <html> 2 <head><title>Hello World</title></head> 3 <body> 4 <h1>HelloWorld</h1> 5 </body> 6 </html>

24. We can now run the app • “http://helloworld.berhorn.de/say/hello”

25. Setup of Model > ruby script/generate model Greeting • Since the DB was generated with the Rails DB generator earlier, the Rails Model generator produces a Controller called “Greeting” that is consistent with the DB. • The generator reads the DB schema and generates Class attributes for all of the DB fields and Class methods like: • Greeting.find( ID ) • Greeting.find_all() • . . .

26. MCV implemented in Ruby on Rails • The web browser sends a request that is routed (1a) to a Controller (1b). • The Controller executes the requested action (a class method). • The Controller has a method, which returns an object of a Model class. • The Controller request the data from the Model (2). • The Model object queries these data from the database (3) and provides the results to the Controller (4), • The Controller sends the results to the View for rendering (5). • The View processes the object, generates the output and sends this to the web browser (6).

27. Ajax • Asynchronous JavaScript and XML is a key concept in the evolution from the traditional, Web 1.0 to Web 2.0 • Web 1.0 generally requires an entire webpage to transmitted and rendered to update content. • All nine components would need to be transmitted and re-rendered if element 9 needed to be changed.

28. Ajax • Ajax / Web 2.0 allows web pages to be broken into multiple independent components • When an component needs to be changed, only that component needs to be transmitted and re-rendered. • Thus, the components are asynchronously updated, rather than synchronously updated (like Web 1.0) • Asynchronous updates gives Web Applications the behavior similar to desktop applications and can significantly reduce bandwidth requirements.

29. Ruby on Rails and Ajax • Ruby on Rails v1.0 (Dec 2005) allowed single components of Web pages to be updated using Ruby. • Ruby on Rails v1.1 (Mar 2006) introduced RJS that generates JavaScript necessary to support Ajax. • Ruby on Rails with RJS allows Ajax capabilities without the need to actually write JavaScript.

30. RJS and Rails MVC • RJS support Ajax capabilities in the MVC View component.

31. Questions?