Choosing the right Rich Internet Application technology path

Choosing the final RIA path Web 2.0 Expo - Berlin Marco Casario CTO - Comtaste www.comtaste.com

Who I am Choosing the final RIA path

CTO of Comtaste , RIA Development, Consulting and Training firm

www.comtaste.com

My Books

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers

Advanced AIR Application

My Blog and my contact

http://casario.blogs.com

http://blog.comtaste.com

Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Agenda

We will move very quickly  A lot of things to show and share !

A look at the Rich Internet Application

How to choose a RIA technology

Overview of RIA technologies

AJAX

Adobe Flex

Laszlo

Microsoft Silverlight

JavaFX

XUL

The 6th factor: the RIA domain chart

A real case study: YouThru.com

Choosing the final RIA path Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Before starting.. We’ll start from this assumption : It’s a fact that Rich Internet Applications give developers and web users innumerable benefits respect HTML applications The problem is to decide the path to take Choosing the final RIA path Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path What is a RIA Excerpt from : Banks Eye Rich Internet Applications to Replace Web Applications Gartner, Stessa B Cohen, Mark Driver, Dec 05 RIA technology is a distributed Web application that breaks the model of "coarse-grain" HTTP request/response . RIA applications handle content with visual interaction to deliver dynamic data to the client faster , while providing a richer user experience . Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path What makes a RIA

Choosing the final RIA path Benefits of a RIA

It allows the user to access a Web site or application without a separate installation process.

It offers a rich user interface that matches the look and feel of a native graphical user interface (GUI) over a browser.

The applications themselves are small , providing reasonable performance for slower dial-up users as well as broadband connectivity.

Let’s start

Let’s start having a look at RIA technologies’ features and benefits, pros and cons of each.

We’ll examine the following technologies :

AJAX

Adobe Flex

Laszlo

Microsoft Silverlight

JavaFX

XUL

Choosing the final RIA path Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Factors Choosing the final RIA path

When choosing a RIA technology you should consider the following factors:

The reach (browsers, plugins …)

Open Source over Commercial product

Internal knowledge

Development time (time to market)

Community and Support infrastructure

Choosing the final RIA path AJAX AJAX (Asynchronous JavaScript and XML), is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes so that the entire web page does not have to be reloaded each time the user requests a change. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path AJAX, how it works

AJAX uses a combination of:

XHTML and CSS, for styling information.

DOM accessed with a client-side scripting language (usually JavaScript)

The XMLHttpRequest object, used to exchange data asynchronously with the server.

XML is sometimes used as the format for transferring data between the server and client ( any format will work, including preformatted HTML, plain text and JSON)

Choosing the final RIA path AJAX, Advantages

Easy to learn. It’s all just JavaScript + HTML + CSS

Huge number of developers

Many free frameworks to use to speed up development

A lot of resources on the web

For a start up it’s very fast to adopt AJAX

Choosing the final RIA path AJAX, Disadvantages

AJAX could require a consistent time in testing and debugging

Choosing a commercial AJAX solution means adopting a proprietary framework and tool

The AJAX market is very fragmented

The community is big but has caused a lot of confusion. There’s no official voice to follow.

Choosing the final RIA path Adobe Flex Adobe Flex is an application development solution for creating and delivering rich Internet applications across the web using the Flash Player Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Adobe Flex

The following components are part of the Flex product line:

Flash Player 9 : the latest high-performance client runtime for engaging Web experiences

Flex SDK : the core programming model and component library for Flex

Flex Builder : an Eclipse-based IDE for developing rich Internet applications with the Flex SDK

LiveCycle Data Services — essential data services and an open adapter architecture for delivering data-intensive rich Internet applications and deeply integrating with enterprise service-oriented infrastructure

Flex Charting Components — extensible components for advanced data visualization

Choosing the final RIA path Adobe Flex, MXML language

MXML stands for Macromedia eXtensible Markup language.

Declarative programming that comes from XML

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical"> <mx:WebService id="webService" wsdl="http://localhost:8700/f2ria/services/SimpleWebService?wsdl" load="webService.outMethod()" showBusyCursor="true"/> <mx:Panel title= ="{webService.outMethod.result}"> <mx:Label text="{webService.outMethod.result}"/> <mx:Button label="Get Static Data" click="webService.arrayOutMethod()"/> <mx:DataGrid dataProvider="{webService.getSandwichList.result}"/> </mx:Panel> </mx:Application> Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Adobe Flex, ActionScript language

Targeting 100% compliance with ECMA-262 specification

Simple to learn, very powerful and Object Oriented

package com.flexsolutions.chapter2 { import mx.controls.ComboBox; import mx.controls.DataGrid; import mx.core.UIComponent; [Event(name="change", type="flash.events.Event")] public class Chapter_2_Sol_6 extends UIComponent { private var myDG:DataGrid; private var myCB:ComboBox; // It contains the data provider for Data Grid private var _dataDG:ArrayCollection; // It contains the data provider for Combo Box private var _dataCB:ArrayCollection; public function Chapter_2_Sol_6() { super(); addEventListener(FlexEvent.INITIALIZE, init); } Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Adobe Flex, Advantages

Penetration of Flash Player (more than 98%)

Flex Builder is a Rapid Application Development enviroment

ActionScript 3.0, XML and CSS supported.

Flex developers community is huge. A lot of resources

Flex 3 SDK will be released as Open Source

SOAP/AMF/HTTP: Easy data in/data out.

Integration with JavaScript and AJAX applications

Integration with the enterprise world (LiveCycle DS)

Choosing the final RIA path Adobe Flex, Disadvantages

The learning curve for Flex is higher than HTML+JavaScript

Flex is tied to Flash Player (no DHTML)

The Flash Player is not open but is proprietary of Adobe

Choosing the final RIA path Microsoft Silverlight Silverlight is a cross platform, cross browser .NET plug-in that enables designers and developers to build rich media experiences and RIAs for browsers. The currently released version supports Firefox, Safari and IE browsers on both the Mac and Windows. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Microsoft Silverlight, how it works

Silverlight framework library is a subset of the full .NET Framework class library (used for WPF) and enables developers to easily re-use your existing skills and knowledge.

Built-in codec support for playing VC-1 and WMV video, and MP3 and WMA audio within a browser.

It supports playing high-quality video up to 720p (high definition).

Silverlight supports the ability to progressively download and play media content from any web-server. No special server software is required.

Choosing the final RIA path Silverlight, how it works

Using XAML language to define UIs + JavaScript for programming

<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" /> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" Opacity="0.6" /> </Canvas> Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Microsoft Silverlight, Advantages

Microsoft gives you different tools: Expression Studio for designers and Visual Studio for developers.

Huge community of .NET developers

Support of VC-1 video format that gives a robust content protection through a native DRM solution.

Choosing the final RIA path Microsoft Silverlight, Disadvantages

Features of Silverlight 1.1 are very poor. Just oriented to video playback

Penetration of the plugin is low

Far away from what you can now develop with Flash / Flex and other Flash Player based technology

At the moment Silverlight does not support Linux (using Momo you can have some positive results)

Choosing the final RIA path Laszlo Laszlo is a platform (compiler, tools, and libraries) for developing RIA created by Laszlo Systems and released as an open source project. Laszlo is a client/server technology. Like Flex it can be used with any server side language. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Laszlo, how it works

Laszlo uses a declarative XML language to define user interface (*.lzx files)

Advanced functionalities, data binding etc. are added using JavaScript/ActionScript

LZX files are compiled by Laszlo into SWF files and run by the Flash Player

Laszlo is capable of exporting in AJAX (using the DOJO framework)

Choosing the final RIA path Laszlo, how it works

The scripting language is JavaScript

Simple to learn, very powerful

<canvas> <window> <panel> <checkbox>Left</checkbox> <checkbox>Right</checkbox> </panel> <button>Okay</button> <button>Cancel</button> </window> </canvas> var w = new Window(); var p = new Panel(); w.addChild(p); p.addChild(new Checkbox(“Left”)); p.addChild(new Checkbox(“Right”)); w.addChild(new Button("Okay")); w.addChild(new Button("Cancel")); Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path Laszlo Advantages

Penetration of Flash Player (more than 98%)

Laszlo is open source

Zero-install user experience (exporting in AJAX)

Using JavaScript to program component

Open Laszlo IDE is based on Eclipse

Support J2ME for mobile devices

Choosing the final RIA path Laszlo Disadvantages

The learning curve for Laszlo is higher than HTML+JavaScript

Laszlo is not based on the latest version of the Flash Player ( Laszlo will always lag Flex on Flash platform)

That means less performance respect to Flex applications.

Developer Community is not so big and there are not many resources

Choosing the final RIA path JavaFX

JavaFX is a new family of Sun products based on Java technology and targeted at the high impact, rich content market. JavaFX is based on the Java Virtual Machine and can access the whole Java Runtime

Choosing the final RIA path JavaFX, how it works

JavaFX Script is a a highly productive scripting language for content developers to create rich media and content for deployment on Java technology.

Choosing the final RIA path JavaFX, Advantages

Strong and robust language

Statically typed - retains same code structuring,reuse, and encapsulation features of Java

Mobile support : JavaFX Mobile is a complete mobile operating and application environment built around Java and Linux open source technologies.

Huge community of Java developers who could start to develop JavaFX apps

Choosing the final RIA path JavaFX, Disadvantages

Lack of a RAD enviroment to develop applications faster

It’s not a mature project. We’re in an early stage

Applications are currently interpreted (a compiler coming soon)

If you are new to Java world the learning curve will be high

Development productivity is low (until a powerful IDE will come out)

Choosing the final RIA path XUL

XUL refers to the user interface language for the XML for creating user interfaces. XUL is a presentation specification for creating lightweight, crossplatform, cross-device user interfaces.

Choosing the final RIA path XUL, how it works

XUL is supported and used by Mozilla.

For example the Preferences dialog window of Firefox is developed using XUL

Choosing the final RIA path XUL, how it works

Like XHTML, XUL uses markup to define a user interface

Markup language provides access to many rich components, at par with programmatic frameworks

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="Hello XUL"> <description style="font-size: 22pt;">Hello XUL</description> </window> Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Choosing the final RIA path XUL, Advantages

A technology produced by the Mozilla open source project and supported in the Mozilla browser

Many open source tools to use

It’s integrated to Gecko engine that allows the use of many Web Standards

Large community of developers

Choosing the final RIA path XUL, Disadvantages

It’s not an official standard and specifications seam not to be complete. No strong support from Mozilla

It is not backed by a major commercial vendor

It’s not easy to find resoruces on the web

The learning curve is high

Development productivity could be slow

Choosing the final RIA path How can I choose Disclaimer : Each RIA techonology is GOOD .... Not GOD ! Don’t think that there is the perfect technology that fits all your needs for every projects. “ With great power comes great responsibility.” by Benjamin Parker, Spiderman’s Uncle Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Bla bla bla bla Tips Usability For its nature a RIA can easily fall into bad usability. When developing and designing a RIA pay attention to usability aspects. Add visual clues, icons, graphics, error handling, user messages and so on. Choosing the final RIA path One page app A RIA is able to embed many task flows in a single page. This is great but can cause a lot of problems. It requires a deep understanding of the technology you are using. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Bla bla bla bla Desktop runtime Choosing the final RIA path

Adobe AIR : is a cross-operating system runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s. It integrates SQLite

Google Gears : Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using the following JavaScript APIs

Prism : has been announced on Mozilla Labs as an experiment that tries to create desktop-based applications using web technologies. It allows you to create shortcuts on desktop or start menu to your favorite web applications.

Dojo Offline : is an open-source toolkit based on Google Gears that makes it easy to create offline web. It extends GG with important functionality and creates a higher-level API

XULRunner : Full desktop application runtime with an embedded browser engine that allows developers to access file system

Choosing the final RIA path Web 2.0 Expo - Berlin Raffaele Mannella – CEO Comtaste

When choosing a RIA technology you should consider the following factors:

The reach (browsers, plugins …)

Open Source over Commercial product

Internal knowledge

Development time (time to market)

Community and Support infrastructure

Need to manage

Rich media content

User interaction

The 6th Factor Choosing the final RIA path Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

The 6th Factor Choosing the final RIA path The RIA domain Rich Media content (videos, complex controls, charts etc.) User interaction (drag&drop, slider, date chooser, accordion etc.) Flex Lazlo Silverlight 1.1 Ajax Java FX Xul Important Notice: this chart corresponds to the authors’ personal view and perception Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

Use Indeed.com for a better understanding of market trends :

Search for developers

Search for Salary

Make your calculation 

Use web tools Choosing the final RIA path Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

Who can make it possible The team you need Backend Developers ActionScript / JavaScript Developers Creative UI Designers Choosing the final RIA path Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

Bla bla bla bla Co-existing technologies www.youthru.com Youthru is a web-based software solution which enables users to: - create mulimedia messages (text+audio+video+attached file) - manage their sent messages and track each single message sent - collect the relevant feedback messages through an internal message board. Youthru is also a good example of co-existing RIA technologies (Ajax, Flash, Flash Media Server) Choosing the final RIA path Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

CONTACTS Web 2.0 Expo - Berlin Comtaste – www.comtaste.com | blog.comtaste.com Marco Casario - m.casario@comtaste.com Raffaele Mannella - r.mannella@comtaste.com