RIA Technologies Comparison

RIA

Technologies

Comparison

Focus

∙

Since the subject is huge I will first present a general view and then focus on more ( hopefully ) interesting parts

∙

Also, some key points need to be established:

∙

Technologies

The Plug-In Model

∙

A more flexible approach to extending browser functionality than ‘single function’ plugins is to

provide a plugin which acts as a separate runtime.

∙

Application code can be written that targets the plugin runtime providing an alternative to HTML / JavaScript technologies for web application

The Plug-In Model

∙

This is the approach that was used to bring Java

applications to the web, with a Java Virtual Machine plugin providing the runtime for Java Applets.

∙

This is also the approach used by the Flash and

Silverlight plugins, each providing a runtime for their native content.

The Plug-In Model

∙

The biggest advantage of the plugin model is that it gives the plugin developers a sandbox free from the browser itself.

∙

Free from the constraints of web standards

∙

Issues of cross-browser standards support.

∙

Allowing plugins to provide much more ‘power’ than the HTML page that hosts them.

The Plug-In Model

∙

But…

∙

Plugins need to be downloaded by the end user.

∙

Plugins create ‘islands’ of interactivity within a HTML / JavaScript page

∙

They have an associated load-time; HTML is much more immediate.

∙

In portal applications, JavaScript is still needed to

RIA Technology Timeline

Silverlight 1 (WPF/E ) Silverlight 3 Silverlight 5

JavaFx

∙

JavaFX Script is a very powerful language supporting JSON format, it is expresive and easy to use.

∙

Can easily get very nice effects

∙

JavaFX is basically a nicer way to write applets

∙

Like original Java Applets, fails in deployment, acutually inhereted all of the original applets problems…

JavaFx

∙

First the JavaFx plug-in is needed ( But so is for Flash & Silverlight )

∙

Then, for quite along time there is a loading notification…

∙

Many times it does not load and it is possible to

know what has happened only via the Java Console, and that too, would be meaningfull for developers only.

Silverlight

∙

Silverlight technology, althought somewhat similar to Flex, has some advantages:

∙

IDE, Visual Studio

∙

.NET based language, C#, VB.NET

∙

Silverlight 2 integrates very well with other

Enterprise Microsoft .NET based technologies, WCF , LINQ

Silverlight

∙

Silverlight is a relatively complex framework when compared

to other .NET technologies such as Windows Forms and has not matured to the point of having the same level of tool support for rapid application development

∙

Was plagued with problems upon release, specially memory,

performance and resource consumption

∙

Microsoft is “shifting away” from Silverlight as a cross-platform development framework:

Microsoft: “HTML is the only true cross platform solution

HTML5

∙

HTML5 itself defines an updated standard of the previous HTML 4.01 version.

∙

By introducing additional markup and objects like <canvas>, the HTML5 itself is still the web

document markup language.

∙

In the middle of this technology stack, which HTML5 term refers to, lies the updated CSS3, which now

provides a additional abilities for web developers like animation, transition effects and image filters.

HTML5

∙

The controlling part of this takes Javascript and its high level application libraries such as JQuery or

Node.js, allowing also a complete ability to interact with backend using asynchronous data requests

∙

HTML5 still relies on the same set of HTML, CSS and JavaScript that was known for decades and more

HTML5

∙

One of the biggest advantages that HTML5 has over Silverlight and Flex is that it does not require a

plugin.

∙

This means that the user does not have to install any other software to view a HTML5 page, and also

results in faster load times

∙

Out of all three technologies, HTML has the farthest potential reach, with newer form factors like mobile and tablet quickly adopting the latest HTML5

HTML5

∙

A webpage written in HTML is far more likely to still be useable in a decade, than one written in Flex or Silverlight.

∙

Flex and Silverlight need to bridge the technology divide to communicate with the JavaScript / HTML that forms the rest of the page. With HTML5 the application does not sit within the page, it is the page.

Flex

∙

Solid, extensive and mature framework.

∙

Extensive set of API for all aspects of development: Graphics, Communications, Logic, XML, etc…

∙

Reliability, ability to adapt to different the screen sizes and densities

Flex

∙

Technically it remains the best environment for development of Web application, but politically it became the product of the past

∙

Adobe: "In the long-term, we believe HTML5 will be

the best technology for enterprise application

development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles."

( http://blogs.adobe.com/flex/2011/11/your-questions-about-flex.html)

Flex vs HTML5, Little Deeper ...

∙

We will focus on comparison between the current leaders,( at least by popularity …)

∙

Flex-Plugin based, HTML5- Markup based

∙

This will be done by comparing qualities that are important in GUI development technology:

∙

Openness

∙

UI Components/ Widgets

∙

Forms and Validation

∙

Graphics: Vector, Bitmap,

Video

∙

History: Back, Favorites,

etc…

∙

Development

Flex vs HTML5: Openness

∙

Adobe has submitted the code for its Flash-based Flex framework to the Apache Software Foundation (ASF) to be managed as an independent project.

∙

Flash Runtime is closed, yet.

∙

Open HTML5 spec, but most browser runtimes are closed.

Flex vs HTML5: UI Widgets

∙

Flex provides many different built- in UI widgets (containers,

lists, menus, navigators, Charts ).

∙

Additionally there are many libraries providing additional

quality widgets for Flex applications, both commercial and open source

Flex vs HTML5: UI Widgets Flex

Free

∙

Axiis (http://www.axiis.org/index.html)

∙

birdeye (http://code.google.com/p/birdeye/ )

Flex vs HTML5: UI Widgets Flex

Commercial

∙

IBM ILOG Elixir Enterprise (

Flex vs HTML5: UI Widgets HTML5

∙

HTML5 is a spec ,therefore depends on browser implementation of it’s tags

∙

Adds several presentation/ structure tags:

section aside hgroup header footer nav figure

video and audio for multimedia content. canvas … and more

Flex vs HTML5: UI Widgets HTML5

Flex vs HTML5: UI Widgets HTML5

∙

Prototype (http://www.prototypejs.org/)

∙

Flotr (http://solutoire.com/flotr/)

Flex vs HTML5: UI Widgets HTML5

Flex vs HTML5: Forms

∙

HTML5 brings some big improvements, both for the developers creating forms and for the users filling them out.

∙

New form elements, attributes, input types,

browser-based validation, CSS3 styling techniques, and the FormData object make it easier to create forms.

Flex vs HTML5: Forms

∙

HTML5 forms support validation, by requered attribute and pattern validation ( email, url… )

Flex vs HTML5: Forms; Flex Forms

and Validation

∙

Flex 4 has extensive support for forms and validation where it is also, possible to define custom validation ( Using, for example back-end query )

Flex vs HTML5: Vector Graphics

∙

Vector graphics means drawing lines and

shapes of different styles. Flash has always

had graphics as its focus and it remains it’s

strong point

∙

HTML used various incompatible specs like

SVG and VML.

∙

Finally, HTML5 introduces the canvas

element which gives us fast vector graphics.

Flex vs HTML5:Bitmap

Manipulation

∙

Flex lets you change the individual pixels, or easily apply different filters, effects, and transforms.

∙

Canvas only gives you raw pixel access, bit map manipulation is possible but harder

Flex vs HTML5: Video

∙

Flash has always been the obvious choice for

displaying videos on the web, YouTube is the big example of that and Flex makes it even easier with more controls.

∙

HTML5 introduces native browser support for videos via a video tag

Flex vs HTML5:History

∙

HTML5, like previous versions support browser back button

∙

History API, new in HTML5:

∙

Allows manually to add a value to the history

stack without making the browser load any new page.

∙

Capture navigation in case we want to change some content when it changes

Flex vs HTML5:History

∙

Flex4 can support browser back button, although

this is not trivial and requires JavaScript libraries that are part of Flex SDK distribution

Flex vs

HTML5:Communication/Real-time

∙

WebWorkers API: defines an API for running scripts in the background independently of any user

interface scripts. ( Like BackgroundWorker in WinForms 2.0 )

Flex vs

HTML5:Communication/Real-time

∙

WebSockets

∙

Uses WebSocket protocol instead of HTTP

∙

True full-duplex communication channel

∙

Both UTF-8 strings and binary frames can be sent in any direction at the same time

∙

Server Implementations:

∙

Jetty WebSocketServlet

∙

phpwebsockets

Flex vs

HTML5:Communication/Realtime

∙

HTTPService: Any kind of server-side technology,

including PHP pages, ColdFusion Pages, Javaserver Pages (JSPs), Java servlets, Ruby on Rails, and

Microsoft ASP pages. Additionally, you use

HTTPService to access REST-based web services.

∙

WebService: SOAP-based web services that define

their interfaces in a Web Services Description Language (WSDL)

Flex vs

HTML5:Communication/Realtime

∙

RemoteObject: RemoteObject components use the

AMF protocol to send and receive data, while

WebService and HTTPService components use the HTTP protocol. AMF is significantly faster than

HTTP, however server-side coding and configuration is typically more complex.

Flex vs

HTML5:Communication/Realtime

∙

3rd _{Party server components that support AMF3:}

∙

Zend Framework http://framework.zend.com/

∙

AMFPHP http://amfphp.sourceforge.net/

∙

SabreAMF http://www.osflash.org/sabreamf

∙

BlazeDS http://sourceforge.net/adobe/blazeds/wiki/Home/

∙

BlazeDS easily integrates with Spring to provide full backend solution

Flex vs HTML5: Persistent

Connections/ Push

∙

It’s always been possible to do this by connecting to sockets in Flash, which is why we see so many

games and collaborative apps in Flash.

∙

Flex/ LCDS/BlazeDS Provides built-in messaging

∙

There are various hacks for how to do this in HTML, such as COMET, but HTML5 makes it infinitely

Flex vs HTML5: Development

∙

For Flex there is IDE like Flash Builder, IntelliJ IDEA (

Commercial ) Flash Develop (http://www.flashdevelop.org/)

,Less popular with Flex developers ( Free )

∙

Requires compilation, that in some cases may take a lot of

time ( Large files, Modules … )

∙

Less intuitive programming model based of Flash objects

lifecycle events ( Deferring )

∙

Flex framework generates A LOT of code during compilation,

to avoid misuse of Flex features one must understand this code witch if often not trivial …

Flex vs HTML5: Development

∙

Flex provides a developer-designer paradigm in witch the designer actually contributes ‘pieces’ of code

Flex vs HTML5: Development

∙

IDE: Eclipse, NetBeans (Free), IntelliJ IDEA, WebStorm ( Commercial )

∙

New tools: Adobe Edge () , a tool for designers that is using HTML5, JavaScript CSS3

(http://labs.adobe.com/technologies/edge/)

∙

The designer-developer interaction is yet to be determined.

Flex vs HTML5: Development

∙

Does not require compilation, however it is likely that time saved on the compilation will be spend on testing during the runtime

∙

Better Web adaptability, easier implementation of full text search and mashups. The integration with other technologies will also become easier with HTML/JavaScript

Flex vs HTML5: Development,

Component creation

∙

HTML5 presents a simpler model for creating components.

∙

Flex component have an elaborate creation model: ‘Life-Cycle’, following witch is crucial for successful implementation

∙

HTML5 components are “native” and will always have device-specific UI

Flex vs HTML5: Testing

∙

Unit testing is easy in both Flex and HTML5 via ASUnit and JSUnit. Integration (or end-to-end) testing is a bit trickier.

∙

There are popular options both for HTML5, and Flex.

∙

ASUnit, JSUnit

Flex vs HTML5: Compatibility

∙

Flex developers need to worry about the version of Flash Player installed, while HTML developers need to worry about all the different browsers and

different versions of browsers.

∙

In the HTML5 Spec, there’s a legend next to each section indicating browser support.