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

∙ Frameworks based on technologies

Technologies/ Frameworks

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 development.

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 interact with the rest of the page

RIA Technology Timeline

Silverlight 1 (WPF/E ) Silverlight 3 Silverlight 5

April, 2010

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.

∙ Failed to gain popularity

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 for everything, including (Apple’s) iOS platform… “

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 often referred as DHTML or part of Web 2.0.

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 features.

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

∙ Considerable community

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

∙ Testing

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 (http://www-

01.ibm.com/software/integration/visualization/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

∙ JavaScript Libraries with various components

Flex vs HTML5: UI Widgets HTML5

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

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

∙ 52Framework http://www.52framework.com/

Flex vs HTML5: UI Widgets HTML5

∙ Ext JS 4.1 (http://www.sencha.com/products/extjs)

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.

∙ Along with elements like inline SVG

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

∙ mod_pywebsocket

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 easier by providing native support for web sockets.

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

∙ In practice this is not yet mature enough

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

∙ Selenium, WebDriver, QTP,

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.

QA

Thank You!