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

http://casario.blogs.com	206
http://jucagi.wordpress.com	171
http://blog.newitfarmer.com	37
http://www.slideshare.net	32
http://blogpro.toutantic.net	22
http://localhost	4
http://www.linkedin.com	3
http://10.122.250.121	3
http://static.slideshare.net	3
http://blog.cooooo.co	3
http://www.socialeyes.com:8010	3
http://static.slidesharecdn.com	2
http://www.netvibes.com	2
http://fronter.com	1
http://74.125.47.132	1
http://browser.grik.net	1
http://localhost:3001	1
http://wireless-watch.com	1
http://testing.cyl0n.com	1
http://help.biocommunity.kr:8080	1
http://www.wireless-watch.com	1
http://www.casario.blogs.com	1

Choosing the right Rich Internet Application technology path

by marcocasario

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 500

Statistics

Choosing the right Rich Internet Application technology path Presentation Transcript