RIA Development via Adobe Flex + JRuby on Rails Prepared By Chua Chee Seng

The RIA Definition Adobe : Rich Internet Application, Microsoft : Rich Interactive Application Well, definition from Wikipedia: RIAs are web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the web client but keep the bulk of the data back on the application server.

Adobe : Rich Internet Application, Microsoft : Rich Interactive Application

Well, definition from Wikipedia:

RIAs are web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the web client but keep the bulk of the data back on the application server.

RIA Battlefield AJAX, Flex, Silverlight 2, JavaFX AJAX : Heavy use of Javascript and abstraction libraries (e.g. YUI) for interactive web UI development, based on web standard and no plugin required. Flex : Use ActionScript 3.0 (aka Javascript 2) and Flex framework for interactive web UI development, runs on Flash Player plugin. Silverlight 2 : Able to use .NET languages like C# for development, back-ed by rich .NET runtime libraries, runs on Silverlight 2 plugin. JavaFX : Rebranded Java Applet (first RIA platform in the world since a decade ago, isn’t it?), written in F3 script. Runs in Java plugin.

AJAX, Flex, Silverlight 2, JavaFX

AJAX : Heavy use of Javascript and abstraction libraries (e.g. YUI) for interactive web UI development, based on web standard and no plugin required.

Flex : Use ActionScript 3.0 (aka Javascript 2) and Flex framework for interactive web UI development, runs on Flash Player plugin.

Silverlight 2 : Able to use .NET languages like C# for development, back-ed by rich .NET runtime libraries, runs on Silverlight 2 plugin.

JavaFX : Rebranded Java Applet (first RIA platform in the world since a decade ago, isn’t it?), written in F3 script. Runs in Java plugin.

Adobe Flex Adobe Flex = Brand Name Technically, ActionScript 3.0 is the language (compatible with EMCAScript 4.0), while Flex is the application development Framework written in ActionScript 3.0 calling Flash API. Flash API (package prefix with flash.*) provides low-level functions, such as graphic, networking, event processing, printing, text processing, XML processing etc. Flex framework provides high-level application controls, such as Button, DateChooser, List, DataGrid, Tree etc. These controls are written by calling low-level Flash API. The outcome of Flex Development is SWF file, which runs in Flash Player 9.0.

Adobe Flex = Brand Name

Technically, ActionScript 3.0 is the language (compatible with EMCAScript 4.0), while Flex is the application development Framework written in ActionScript 3.0 calling Flash API.

Flash API (package prefix with flash.*) provides low-level functions, such as graphic, networking, event processing, printing, text processing, XML processing etc.

Flex framework provides high-level application controls, such as Button, DateChooser, List, DataGrid, Tree etc. These controls are written by calling low-level Flash API.

The outcome of Flex Development is SWF file, which runs in Flash Player 9.0.

ActionScript 3.0 – Language Wise Object-Oriented Supports inheritance, interfaces, packages, error handling like Java. Supports properties like C#. Optional Dynamic Typing Function is the first class object. Event Processing is baked into the language.

Object-Oriented

Supports inheritance, interfaces, packages, error handling like Java.

Supports properties like C#.

Optional Dynamic Typing

Function is the first class object.

Event Processing is baked into the language.

Flex Development Model MXML + ActionScript 3.0 Describe UI using MXML, code controller logic using ActionScript 3.0. MXML is translated into ActionScript before compiled to binary. MXML => ActionScript => SWF

MXML + ActionScript 3.0

Describe UI using MXML, code controller logic using ActionScript 3.0.

MXML is translated into ActionScript before compiled to binary.

MXML => ActionScript => SWF

Custom Controls, 3 rd Party You can create custom controls by writing it from the ground up using ActionScript 3.0, subclass existing controls, or combine few controls into one new control. There are numerous custom control written by 3 rd party, some open source, free, some commercial. You can write your own and sell.

You can create custom controls by writing it from the ground up using ActionScript 3.0, subclass existing controls, or combine few controls into one new control.

There are numerous custom control written by 3 rd party, some open source, free, some commercial.

You can write your own and sell.

Talking to Server Web Service XML JSON AMF HTTP Socket

Web Service

XML

JSON

AMF

HTTP

Socket

Ruby on Rails MVC web framework. Good support for agile development methodology. Promote Convention over Configuration Boost developer productivity by code generation (scaffolding), less code to write and maintain.

MVC web framework.

Good support for agile development methodology.

Promote Convention over Configuration

Boost developer productivity by code generation (scaffolding), less code to write and maintain.

JRuby on Rails Ruby interpreter implemented in Java Use OS Thread instead of green thread Use unicode support in Java Java Integration Compile to byte codes

Ruby interpreter implemented in Java

Use OS Thread instead of green thread

Use unicode support in Java

Java Integration

Compile to byte codes

A Simple Blog Application Build User Interface via Flex Build Middle-tier via JRuby on Rails Makes then talk via XML and HTTP A little bit of AIR - Make the same code to run both in Web Browser and Desktop

Build User Interface via Flex

Build Middle-tier via JRuby on Rails

Makes then talk via XML and HTTP

A little bit of AIR - Make the same code to run both in Web Browser and Desktop

Blog Editor Easy backend via JRuby on Rails Create Blog Editor UI via Flex Add flex_create action in controller Flex to call flex_create action

Easy backend via JRuby on Rails

Create Blog Editor UI via Flex

Add flex_create action in controller

Flex to call flex_create action

Blog Viewer Add flex_list action to controller Create Blog Viewer UI via Flex Flex to call flex_list to get blog data Data type serialization -> converting date Formatting data

Add flex_list action to controller

Create Blog Viewer UI via Flex

Flex to call flex_list to get blog data

Data type serialization -> converting date

Formatting data

Using 3 rd Party Control Use SearchGrid to filter data. The processing is done at the Client side, the Server does not need to handle everything, thus help improve scalability.

Use SearchGrid to filter data.

The processing is done at the Client side, the Server does not need to handle everything, thus help improve scalability.

A little bit of AIR… Adobe Integrated Runtime (AIR) platform makes your Flex application to run on Desktop Platform Reuse code written in Blog Editor and Viewer to create Desktop version of them.

Adobe Integrated Runtime (AIR) platform makes your Flex application to run on Desktop Platform

Reuse code written in Blog Editor and Viewer to create Desktop version of them.