Fernando Correia’s Weblog

August 23, 2008

Example of RIA in the cloud

Filed under: Software Development — Fernando Correia @ 12:34 pm
Tags: , , , , ,

When I decided to learn and get some first-hand experience about Rich Internet Applications (RIA) and distributed application hosting (cloud computing), I chose to do it using Flex and the Google App Engine. Flex is a mature tool that has a plethora of rich interface capabilities and is very good to connect to services on the Web. And the App Engine is a very intriguing proposition where you use Google’s infrastructure to run your application.

To share my experience and get some feedback I started a project called “Flex and Python Test”. Now this project is finished and released. The application is a very simple project portfolio that can keep a list of projects and participants. The data is kept on the client for fast response, and the modifications are sent to the server for persistence. This is what the application looks like:

The source code for this application is available on github. If you want to understand it, download it and browse the code. To help, I will explain a bit about the design.

This is the general architecture:

The client is a Flex application running in a browser. Flex allows us to have a rich interface without dealing with incompatibilities between browser implementations. The server is a Python application running in Google App Engine. The client send requests through HTTP using the AMF encoding format. This is a binary format that is very efficient for Flex applications. The server processes the requests and sends responses also encoded in AMF. The server exposes its interface in the Remote Procedure Call (RPC) pattern.

If you download the source, take a look at README.txt. It explains how to run and deploy the application. There are three directories: flex-client contains the Flex application that will run in the browser. python-client contains an alternate client in Python that you can run in your computer to initialize data, test the service and learn the API. server contains the Python service that is deployed to Google App Engine.

To build the Flex client I decided to use a Model-View-Controller (MVC) framework. A sound structure helps when you want to build larger applications. After experimenting with Cairngorm, I went for PureMVC. If I would make another iteration I might now try Mate.

With PureMVC, this is the overall architecture of my client application:

The Model represents the data. It uses the Proxy pattern to control access to the remote service. The View contains the user interface. It uses the Mediator pattern to implement Supervising Presenters that manage the interface components. The Controller contains business logic. It uses the Command pattern to execute actions that interact with several other components. The model, view and controller objects communicate using a Publish/subscribe-style Observer notification scheme.

For instance, this is how the Participants proxy asks the server to insert a new participant:


public function addParticipant(participant:Participant):void
{
    ServiceGateway.GetConnection().call("ProjectParticipantsService.save",
        new Responder(onAddParticipantResult, onFault), participant.toDto());
}

On the server side, Google App Engine takes care of executing your application when it receives requests. The Python application uses PyAMF to decode the client requests and execute the service operation that is being called. The data that is transferred between the client and the server is stored in Data Transfer Objects (DTOs). Since both Python and Actionscript are dynamic languages, I didn’t declare formal type structures for these DTOs. They are just dynamic objects. The service operations use App Engine’s Datastore API to store and retrieve objects.

This is how the ProjectParticipants service executes the operation to insert a new participant:

def save(self, participant_dto):
    if hasattr(participant_dto, '_key') and participant_dto._key != None:
        return self.update(participant_dto)
    else:
        return self.insert(participant_dto)

def insert(self, participant_dto):
    participant = ProjectParticipant()
    participant.project = Project.get(participant_dto.project_key)
    participant.name = participant_dto.name
    participant.put()
    return self.to_dto(participant)

Some of my previous posts have more details about how I built this application:

I’ve deployed this sample application to Google App Engine. You can interact with it using this URL:

http://fernando-correia.appspot.com/

Click on Edit projects to open the RIA client. If you refresh the homepage you should see the updates you made.

I hope this can help other people who want to learn some of these techniques and tools. Your feedback is most welcome.

Advertisements

13 Comments »

  1. Cool stuff, if you are in the Atlanta area ever you should drop by and give a talk.

    Comment by Noah Gift — August 23, 2008 @ 1:28 pm

  2. Noah: Thanks a lot for the support!

    Comment by fernandoacorreia — August 23, 2008 @ 1:34 pm

  3. […] I went out and built a sample application to learn how to use App Engine. I even learned some Python, which was […]

    Pingback by Google App Engine is 25% ready « Fernando Correia’s Weblog — October 4, 2008 @ 10:07 am

  4. […] will do my learning in the open, as I did before, sharing my path and my discoveries. This is a journey from the eyes of a n00b that knows very […]

    Pingback by Exploring Pinax - Part 1 « Fernando Correia’s Weblog — October 22, 2008 @ 8:13 pm

  5. Great Post. Thanks

    Comment by Adnan — January 2, 2009 @ 2:54 am

  6. […] dev.aol.com Using AnyChart in Flex applications – anychart.com Flex Store Application – azavar.com Example of RIA in the cloud – fernandoacorreia.wordpress.com Flex LSystem Component – Application Example – […]

    Pingback by Bookmark: 60+ Adobe Flex reference websites — January 11, 2009 @ 3:33 pm

  7. […] Example of RIA in the cloud – fernandoacorreia.wordpress.com […]

    Pingback by 行骏-IT Player » Blog Archive » 推荐60+ Flex开发参考网站 — December 25, 2009 @ 2:13 pm

  8. […] Example of RIA in the cloud – fernandoacorreia.wordpress.com […]

    Pingback by 16 » January » 2010 » 博兮博客 — January 16, 2010 @ 3:41 am

  9. […] Example of RIA in the cloud – fernandoacorreia.wordpress.com […]

    Pingback by Bookmark: 60+ Adobe Flex reference websites « Indian-Music.com Blog — August 3, 2010 @ 1:02 pm

  10. […] 2008 eu publiquei uma série de artigos descrevendo um projeto com esta arquitetura, utilizando Flex para o cliente com interface rica, […]

    Pingback by RIA com Azure « Plataforma Nuvem — May 7, 2011 @ 3:56 pm

  11. […] Using AnyChart in Flex applications – anychart.com Flex Store Application – azavar.com Example of RIA in the cloud – fernandoacorreia.wordpress.com Flex LSystem Component – Application Example – […]

    Pingback by Bookmark: 60+ Adobe Flex reference websites | Financial Information For Better Life — July 23, 2011 @ 12:36 pm

  12. […] Using AnyChart in Flex applications – anychart.com Flex Store Application – azavar.com Example of RIA in the cloud – fernandoacorreia.wordpress.com Flex LSystem Component – Application Example – […]

    Pingback by Adobe Suite » Blog Archive Bookmark: 60+ Adobe Flex reference internet sites | Adobe Suite — August 28, 2011 @ 4:07 am

  13. […] por isso que tenho estudado este tema desde 2008 e tenho trabalhado para encontrar os modelos de arquitetura mais eficientes para esta nova […]

    Pingback by Computação em nuvem irá gerar 400 mil empregos no Brasil « Pensando Azure — March 8, 2012 @ 9:04 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: