Choosing the right Rich Internet Application technology path

Slide 1: Choosing the final RIA path o - Berlin b 2.0 Exp We Marco Casario CTO - Comtaste www.comtaste.com

Slide 2: Choosing the Who I am 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

Slide 3: Choosing the Agenda final RIA path • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 4: Choosing the Before starting final RIA path .. 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 5: Choosing the What is a RIA final RIA path 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. Excerpt from: Banks Eye Rich Internet Applications to Replace Web Applications Gartner, Stessa B Cohen, Mark Driver, Dec 05 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 6: Choosing the What makes a final RIA path RIA

Slide 7: Choosing the Benefits of a final RIA path 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. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 8: Choosing the Let’s start final RIA path • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 9: Choosing the Factors 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 10: 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

Slide 11: Choosing the AJAX, how it w final RIA path orks 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) Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 12: Choosing the AJAX, Advanta final RIA path ges • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 13: Choosing the AJAX, Disadva final RIA path ntages • 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. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 14: 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

Slide 15: 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 16: Choosing the Adobe Flex, M XML language final RIA path • 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

Slide 17: Choosing the Adobe Flex, A ctionScript lan final RIA path guage • 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

Slide 18: Choosing the Adobe Flex, A final RIA path dvantag es • 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) Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 19: Choosing the Adobe Flex, D final RIA path isadvantages • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 20: Choosing the Microsoft Silve final RIA path rlight 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

Slide 21: Choosing the Microsoft Silve rlight, how it final RIA path 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. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 22: Choosing the Silverlight, ho w it works final RIA path • 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

Slide 23: Choosing the Microsoft Silve rlight, Advant final RIA path ages • 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. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 24: Choosing the Microsoft Silve rlight, Disadva final RIA path ntages • 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) Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 25: 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

Slide 26: Choosing the Laszlo, how it final RIA path 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) Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 27: Choosing the Laszlo, how it works final RIA path • 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

Slide 28: Choosing the Laszlo Advant final RIA path ages • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 29: Choosing the Laszlo Disadva final RIA path ntages • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 30: 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 31: Choosing the JavaFX, how i final RIA path t works •JavaFX Script is a a highly productive scripting language for content developers to create rich media and content for deployment on Java technology. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 32: Choosing the JavaFX, Advan final RIA path tages • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 33: Choosing the JavaFX, Disad final RIA path vantages • 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) Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 34: 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. Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 35: Choosing the XUL, how it w final RIA path orks •XUL is supported and used by Mozilla. •For example the Preferences dialog window of Firefox is developed using XUL Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 36: Choosing the XUL, how it w final RIA path orks • 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

Slide 37: Choosing the XUL, Advantag final RIA path es • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 38: Choosing the XUL, Disadvan final RIA path tages • 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 Comtaste Srl – www.comtaste.com – Marco Casario m.casario@comtaste.com

Slide 39: Choosing the How can I cho final RIA path ose 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

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

Slide 41: Choosing the Desktop runtim final RIA path e • Adobe AIR: is a cross-operating system runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to Bla bla bla bla 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

Slide 42: Choosing the final RIA path o - Berlin b 2.0 Exp We Raffaele Mannella – CEO Comtaste

Slide 43: Choosing the The 6th Facto final RIA path r 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 Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

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

Slide 45: Choosing the Use web tools final RIA path Use Indeed.com for a better understanding of market trends : • Search for developers • Search for Salary • Make your calculation  Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

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

Slide 47: Choosing the Co-existing tec hnologies final RIA path Bla bla bla bla 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) Comtaste Srl – www.comtaste.com – Raffaele Mannella r.mannella@comtaste.com

Slide 48: CO NTACTS Comtaste – www.comtaste.com | blog.comtaste.com Marco Casario - m.casario@comtaste.com Raffaele Mannella - r.mannella@comtaste.com o - Berlin b 2.0 Exp We