Flex on Rails

April 2008 - Het web evolueert continu. De tijd dat we genoegen namen met statische HTML pagina’s is niet meer. Tegenwoordig hebben we hele interactieve applicaties op het web draaien. Om dit alles mogelijk te maken wordt gebruik gemaakt van verschillende technologieën.

PHP, JSP, en .NET zijn maar enkele voorbeelden om een interactieve pagina te maken. Deze technologieën alleen zijn over het algemeen niet genoeg. Voor een plezierige gebruikerservaring voegen we AJAX (Javascript) toe zodat de pagina niet telkens ververst hoeft te worden. Natuurlijk willen we ook gegevens op kunnen slaan in verschillende databases. De combinatie van deze technologieën maakt een "Web 2.0" pagina. Althans, dat zou kunnen. Er zijn vele manieren om een interactieve website te ontwikkelen die goed werkt en er daarbij ook nog eens goed uitziet. Deze Whitebook gaat over de combinatie van "Ruby on Rails" en "Flex 3" om een dergelijke website te realiseren.

In deze Whitebook zullen de belangrijkste aspecten van "Ruby on Rails" en "Flex 3" worden uitgelegd. Daarnaast zult u lezen over hoe deze 2 technologieën te koppelen zijn. Hierbij zal vooral stil worden gestaan bij RESTful HTTP requests. U zult ook een stuk over architectuurkeuzes vinden. Uiteindelijk zullen we bekijken of deze 2 technologieën een winnende combinatie zijn.

Waar verder in deze Whitebook over Rails gesproken wordt kan ook "Ruby on Rails" gelezen worden.

Ruby on Rails

Een sterk opkomend open-source applicatie framework is "Ruby on Rails". Met behulp van dit framework is het mogelijk om snel complexe applicaties te ontwikkelen op een compleet object georiënteerde manier. Rails leunt op de volgende principes:

"Don’t repeat yourself"

Dit principe is vrij duidelijk. Rails draagt er zorg voor dat men maar op één plaats een stukje hoeft te programmeren waarna het te gebruiken is in de rest van de applicatie. Het is dan ook belangrijk om code zo te schrijven dat een specifieke taak uitvoert zodat men zich niet hoef te herhalen.

"Convention over Configuration"

Een van de grote krachten van "Ruby on Rails" is dat ze is gebaseerd op aannamen. Configuratie wordt zo veel mogelijk vermeden. XML was vooral in de eerste versies een vies woord.

Rails maakt gebruik van het Model-View-Controller (MVC) principe. Wanneer men een nieuw project aan maakt zal men dan ook merken dat er een standaard mappenstructuur wordt opgebouwd die op dit principe is gebaseerd. Het modelgedeelte specificeert dan ook de verschillende entiteiten in de applicatie. Wanneer er bijvoorbeeld een modelklasse aanmaakt met de naam "User" zal Rails aannemen dat hierbij de tabel "Users" in de database hoort. In de controller wordt de applicatielogica vastgelegd. De view is dan uiteindelijk wat de gebruiker te zien krijgt. Wanneer men zich aan de conventies van "Ruby on Rails" houd zal merken dat het ontwikkelen van een applicatie verrassend makkelijk en snel gaat. Er kan uiteraard van deze conventies afgeweken worden. Dan zal er wel configuratie benodigd zijn. De praktijk leert dat dit leidt tot langere ontwikkeltijden en haalt een groot gedeelte van de kracht van Rails weg.

Flex 3

Flex is ontwikkeld door Adobe en is oorspronkelijk bedacht om een brug te creëren tussen ontwikkelaars en visuele designers. De meeste ontwikkelaars vonden het moeilijk om om te gaan met "Adobe Flash" vanwege de manier van ontwikkelen met een tijdlijn. Flex probeert door middel van een herkenbaar programmeermodel en een op xml gebaseerde user interface dit probleem op te lossen. Het resultaat van een Flex project resulteert in een SWF bestand welke in een Flash 9 player kan draaien.

Actionscript

Fig. 1 Een AS klasse met 1 methode. De syntax lijkt sterk op java.

De ruggengraat van Flex bestaat uit Actionscript. Versie 3 wel te verstaan. Actionscript is een scripting taal gebaseerd op de "ECMAScript" standaard. De meest bekende variant van ECMA is "Javascript". Actionscript ondersteund object-georiënteerd programmeren en data typering. Degenen die Java onder de knie hebben zullen geen problemen hebben met Actionscript.

MXML

Fig. 2 Een stukje van de MXML code die de gebruikersinterface specificeert.

De gebruikers interface van Flex wordt opgebouwd door middel van MXML. Zoals de naam al suggereert is dit een vorm van XML. MXML word gebruikt voor de layout, invoermethoden en stijl van de website. Daarnaast is het ook mogelijk om logica en iteraties te definiëren in MXML. Deze pagina’s kunnen ook nog eens Actionscript bevatten. Uiteindelijk word een MXML pagina toch omgetoverd in Actionscript voordat het project wordt omgezet naar een SWF.

De kracht van Flex is om in een korte tijd een volledig functionele gebruikersinterface te krijgen die er ook nog eens goed uitziet. Daarnaast kan Flex goed omgaan met grote hoeveelheden data. Er zijn veel verschillende componenten die hiervoor gebruikt kunnen worden. Een datagrid gevuld met een paar duizend rijen word in een oogopslag gesorteerd zonder dat hier extra code voor geschreven moet worden. Om deze gegevens in Flex te krijgen kan gebruik worden gemaakt van Webservices, HTTP Requests of een open-source dataserver zoals BlazeDS. Voor Flex 3 is een ontwikkel omgeving genaamd Flex Builder 3 aan te schaffen. Deze stelt de ontwikkelaar in staat om textueel en visueel Flex code te creëren.

Flex en Rails

Toen Flex en Rails uitkwamen rond 2004 konden ze niet meer verschillend zijn. Flex was duur en de code was in handen van Macromedia (Later Adobe) waar Rails open-source en gratis was. Daarnaast zat Flex vol met XML code, en verafschuwde Rails XML. Naarmate we dichter bij het heden komen is Flex open-source, net zoals Rails. Flex houdt nog steeds van XML, en Rails heeft toegegeven door XML output te kunnen genereren in RESTful controllers. Nu is het ineens een stuk interessanter om een combinatie van Flex en Rails te gaan gebruiken. Rails voor de applicatie logica en persistentie met de database en Flex voor de view.

Voor efficiënte ontwikkeling met FLEX en Rails is het aan te raden om Flex Builder 3 aan te schaffen of in ieder geval een begin te maken met de proef versie. Nadat men het Rails project vanaf de command line met het "rails -d mysql <<projectnaam>>" heeft aangemaakt kan het Flex Project aangemaakt worden. Als men Flex Builder gebruikt kan men een nieuw Flex project maken in de map van het Rails project. Na een aantal Ruby file associaties te hebben gemaakt in Flex Builder is men klaar om het hele project vanuit Flex Builder te ontwikkelen.

Fig. 3 Het bovenstaande diagram illustreert hoe Flex en Rails samen gebruikt kunnen worden zoals beschreven in "Flexible Rails" van Manning.

Zoals het bovenstaande plaatje illustreert geschied het koppelen door middel van HTTP requests. De URL bepaald welke functie van welke controller wordt aangeroepen in Rails.

Fig. 4 Bijvoorbeeld: http://localhost:3000/hello/helloworld

Hierbij verwijst hello naar de rails controller "hello_controller" met daarbinnen de functie "helloworld". Hier ziet men ook een Ruby conventie. Alle controllers hebben "_controller" na de controllernaam staan. In de URL ziet men deze ook niet meer terug komen. Deze Rails functie bevat de volgende code:

# De klasse HelloController erft over van Applicationcontroller 
class HelloController < ApplicationController  
   
   
  #onderstaande methode plakt de naam achter de tekst en geeft deze terug
*

  def helloworld(name) 
    render :text => "Hello to you, " + name   
  end 
end 

^* Een conventie in Ruby is dat wanneer er geen return statement staat aan het einde van een methode, dan zal het resultaat van de laatste operatie terug worden gegeven.

Fig. 5: Voorbeeld applicatie

Bovenstaand voorbeeld is alleen nuttig voor de meeste triviale applicaties. Voor de grotere en robuustere applicaties is een andere aanpak benodigd.

REST to the rescue!

REST is een manier om webservices te bouwen die focussen op simpliciteit en een web gerelateerde architectuur. Rails voorziet in een aantal conventies om een rails applicatie op een "RESTful" manier op te bouwen. Hierbij word vooral gebruik gemaakt van de vier standaard HTTP methoden. Belangrijk om te onthouden is dat REST is gebaseerd op het feit dat elke HTTP methode een te ondernemen actie op een resource vertegenwoordigt. Op deze manier kan voor één URL alle CRUD* acties uitgevoerd worden. De volgende acties en hun bij behorende URL patronen worden onderkend in Rails.

 # Methode URL           HTTP methode CRUD methode
 1 index   /users        GET          READ
 2 show    /users/1      GET          READ
 3 new     /users/new    GET          -
 4 edit    /users/1/edit GET          READ
 5 create  /users        POST         CREATE
 6 update  /users/1      PUT          UPDATE
 7 destroy /users/1      DELETE       DELETE
 

Om de applicatie nu RESTful te maken moeten er een aantal dingen gebeuren. Ten eerste zal men de controller moeten aanpassen om hem RESTful te maken. Daarvoor moeten alle REST methoden worden geïmplementeerd in de controller. In de Flex applicatie moet daarna afhankelijk van de CRUD actie een andere URL en/of HTTP methode moeten worden gekozen.

Voorbeeld van een RESTful Rails "show" methode:

 # GET /users
   # GET /users.xml
   def index
     @users = User.find(:all)

     # Geef het juiste formaat terug, afhankelijk van de extensie
     respond_to do |format|
       format.html # index.html.erb
       format.xml  { render :xml => @users }
     end
   end
 

Bovenstaand stukje code geeft een overzicht van alle gebruikers terug in HTML of in XML voor bijvoorbeeld gebruik in Flex.

Architectuur in Flex

Er schuilen een aantal gevaren achter de handigheid van Flex. Omdat het zo makkelijk is om door middel van een combinatie van MXML en Actionscript een functionele Flex pagina te bouwen is het verleidelijk om MXML en Actionscript lukraak door elkaar te gebruiken. In eerste instantie lijkt het allemaal volstrekt logisch en leesbaar. Maar wanneer diezelfde programmeur een dag later zijn code terug ziet snapt hij er soms al helemaal niets meer van. Daarom valt het sterk aan te raden om zo weinig mogelijk Actionscript code te schrijven binnen de MXML bestanden. Er helemaal onderuit komen zal nooit lukken. Probeer klassen te schrijven voor verschillende functies en roep deze aan vanuit een klein stukje Actionscript in het MXML bestand. Men zal zien dat dit source code van Flex een stuk leesbaarder maakt.

Wanneer men een groot project met meerder ontwikkelaars en Flex en Rails wil gaan uitvoeren valt het aan te raden om naar de Cairngorm architectuur te kijken. In principe is dit een Flex framework waarbij een duidelijke scheiding word gehouden tussen view en data. Dit is ook weer een implementatie van MVC.

Conclusie

Voortbordurend op de situatie geschetst in de inleiding blijkt het dat veel webapplicaties een groot aantal technologieën gebruiken om het gewenste resultaat te bereiken. Men wil een goede layout, plaatjes, soms animaties en interactiviteit in een webpagina met een goede architectuur. Het liefst nog zonder te herladen ook.

Met Flex en "Ruby on Rails" kunnen alle bovenstaande wensen bereikt worden. Flex verzorgt de interface naar de gebruiker, daar waar Rails de daadwerkelijke applicatielogica bevat en deze weg kan schrijven naar een database. Een simpele koppeling vanuit Flex naar Rails is zo gemaakt, maar voor applicaties groter dan "Hello World" kan men er beter voor kiezen om gebruik te maken van RESTful HTTP. Het neemt wat tijd in beslag om REST te begrijpen en toe te passen, maar daarna werkt het erg prettig.

Met betrekking tot architectuur is het in Rails is het verstandig om de standaard MVC opbouw aan te houden in combinatie met REST. Voor Flex is het wijs om een duidelijke scheiding te houden tussen MXML en Actionscript. Voor de grotere applicaties met meerdere gebruikers valt het aan te raden om eens naar de Cairngorm architectuur te kijken.

Een veelgehoorde misvatting is dat velen denken dat Flex de volgende tool van Adobe is om flitsende websites te maken. Dit is wel mogelijk maar de focus van Flex ligt meer op het ontwikkelen van volledig functionele applicaties waarmee men prettig kan werken.

Al met al heeft de combinatie van Flex en Rails erg veel potentie. De sterke punten van beide technologieën vullen elkaar namelijk aan. Dit betekent snel en effectief ontwikkelen en het resultaat mag er zeker zijn.

Over de auteur
Marcel Maas is consultant en houdt zich vooral bezig met Java en Integratie vraagstukken. Daarnaast heeft hij een degelijke kennis van Flex. Met betrekking tot de Rails code heeft Barry van de Graaf in een adviserende rol opgetreden.