Building Rich Internet Applications with Frameworks

Jul 24 2010 by Eric Rowell | 21 Comments

Building Rich Internet Applications with Frameworks

JavaScript libraries, ICEfaces, Adobe Flash 4, Microsoft Silverlight, and now, HTML5 have been competing for web dominance as the world wide web is thrown into a new era — an era dominated by rich internet applications (RIA for short).

The purpose of this article is to define what RIAs are, explain why the web has been moving towards RIAs, explore the different RIA frameworks that exist today, give an overview of the pros and cons for each framework, and discuss how these new technologies might coexist in the future.

What’s an RIA?

An RIA, or rich internet application, is a web application that behaves like a desktop application. Before RIAs began popping up, most web applications were composed of static pages.

What's an RIA?Sumo Paint is an Flash-based RIA, functioning like a graphics editor software such as Photoshop.

Unlike desktop applications, any interaction with a web page usually resulted in reloading a whole new page. Desktop applications, on the other hand, had much better user interactivity because all of the processing was being done natively on the user’s machine, resulting in a more seamless user experience.

As a result, software developers began to ask themselves, "Should my product be a desktop application or a web application?"

It has always been a fair question, because both types of applications have very strong pros and cons.

Desktop applications have smoother user interactivity, but require distribution and dealing with software updates when the software has shipped.

Web applications, on the other hand, are easily accessible from the web, freeing it from the problems related to software distribution and updates, but were very lacking in user interactivity.

So how can we have the best of both worlds?

RIAs are the best of both worlds. RIAs are distributed through the web, and have very rich user interactivity. Since the advent of Ajax, a method for web applications to make server requests with JavaScript without reloading a web page, new technologies have been popping up left and right to join the RIA movement.

Among these technologies are frameworks that help developers build and deploy rich internet applications, such as JavaScript libraries, ICEfaces, Adobe Flash 4 (formerly Flex 3), Microsoft Silverlight, and HTML5.

Let’s talk about these RIA frameworks one by one.

JavaScript Libraries for Web Application Development

JavaScript libraries like jQuery and MooTools were one of the first technologies to really help deploy slick and interactive rich web apps. They provided a framework for an RIA application that leveraged client-side scripting to handle front-end interface functions. They are basically JavaScript files that comprise of a collection of useful, cross-browser-tested functions for doing things with Ajax and dealing with common user interactions like hiding and showing content based on a user-driven event.

Some of the most popular ones today are jQuery (especially with jQuery UI), MooTools, YUI (Yahoo! User Interface library), and ExtJS. All these libraries include RIA components like grids, graphs, and complex form elements, as well as utilities to handle Ajax. Best of all, most great JavaScript libraries for web development are open source.

JavaScript libraries are good to use if you don’t want to pay for an integrated development environment (IDE) but still want great-looking and professional RIA functionality in your website.

Sites using JavaScript libraries include Google, Digg, Yahoo, Amazon, Microsoft, Twitter, and Best Buy.

ICEfaces

ICEfaces extend the standard JavaServer Faces (JSF) framework and is intended to simplify the programmer’s workflow by removing JavaScript from the equation. In other words, ICEfaces handle all of the JavaScript/Ajax for your web application via Java APIs. This greatly simplifies the task of creating rich internet applications by removing some of the complexities introduced by building custom JavaScript functions.

ICEfaces is good to use if your team is made up mostly of Java developers, if your web application doesn’t require other complex components that ICEfaces doesn’t offer, or if your web application is event-driven. If your app is event-driven, make sure that you understand that ICEfaces doesn’t offer true "server pushes" in the sense that HTML5, Flash Builder 4, and Silverlight can. Instead, it uses a long polling method to simulate server push.

Sites using ICEfaces include Boeing, NASA, Union Pacific, T-Mobile, and Bank of America.

Adobe Flash Builder 4

Flash has been around for a long time, but building entire web applications out of Flash used to be more trouble than it was worth until the introduction of Flex, which is an extension to Flash that provides RIA web components.

What makes Adobe Flash Builder 4 so exciting is its cross-platform and cross-browser nature, allowing it to run exactly the same way across all operating systems and all browsers. Comparing it to JavaScript, where browsers have varying JavaScript engines that handle and process your code, Adobe Flash has one engine that your users install via the Adobe Flash browser plugin (which more often than not, they would already have).

Flash Builder 4 applications can do this because they are embedded into HTML pages, meaning that the browser itself has no effect on the application’s performance. This means that you can run even the most complex web applications correctly in IE6 if you wanted to (this is of course a simplification because the Flash plugin/engine regularly gets updated, so it would slightly depend on the user’s version of the plugin).

These applications are usually accompanied by server-side processing like a Java backend and need the Flash Builder 4 IDE for development.

Adobe Flash Builder 4 is good to use if your web application requires complex graphics, if your team is made primarily of Java developers (because it works well with Java), or if your application uses an event-driven architecture.

Sites using Flash for web applications include Mint.com, Flickr, and Hyundai.

Silverlight

Silverlight is basically Microsoft’s version of Adobe Flex/Adobe Flash. It has been gaining some traction, but doesn’t seem to be catching up to Adobe Flash in terms of popularity.

Silverlight applications are obviously bound to have a .NET backend because it’s a Microsoft product. This means, though, that you’ll have tighter Silverlight/.NET integration versus Adobe Flex/[some server-side scripting language like PHP].

Silverlight is a good option if your web application requires complex graphics, if your team is made primarily of .NET developers, or if your application uses an event-driven architecture.

Sites that use Silverlight include Netflix.

HTML5

HTML5 is the latest development in the RIA movement. HTML5 is, in essence, the result of merging the best of HTML4, JavaScript, CSS, JavaScript libraries, and Flash into a single specification that leverage the API model. HTML5 is an open technology, which means there isn’t going to be a single governing body like Adobe for Flash or Microsoft for Silverlight.

Since HTML5 specifications is not yet complete, and IE9 has not yet been released (read about new IE9 features), you’ll need to wait a little bit before building a production-ready HTML5 web app.

Currently, all major browsers support HTML5 except for IE8 (go figure). Since IE8 has a major portion of the browser market, HTML5 really won’t go mainstream until IE9 is released.

Once HTML5 becomes widely supported, it will be good to use if you don’t want to buy or learn an IDE (which you would need for frameworks like Flex and Silverlight), your application uses an event-driven architecture, or if you would rather use built-in HTML functionality and JavaScript APIs rather than using third-party JavaScript libraries for basic RIA functionalities. 

Although HTML5 can handle graphics very well, using Flash and Silverlight for complex graphics and animation is still easier/faster at the moment.

The Future of RIAs

Are HTML5 apps the future of the internet? Not exclusively. As long as there are creative and innovative web developers out there who are driven to create something special, there will always be new technologies that can provide amazing things that HTML5 or any other web technology won’t be able to offer.

Creativity and innovation are the reasons why JavaScript libraries, ICEfaces, Flash, Silverlight, and HTML5 came into existence in the first place. The future of the web will be made up of many coexisting technologies, just like it is today.

Related Content

About the Author

Eric Rowell is a professional web developer and designer who is fascinated with everything related to the web, including RIAs, emerging technology, and social media marketing. He is the Founder and Chief Editor of Web Krunk and loves HTML, HTML5, CSS, JavaScript, Ajax, jQuery, Flash, PHP and Java. You can follow him on Twitter at @webkrunk.

21 Comments

tdtcm

July 24th, 2010

I believe that flash is the best ria there is, HTML5 won’t replace the beauty of flash and animation,even if it supports animation.

Pedant

July 24th, 2010

Howdy,just a small error I noticed:

What you’re referring to as Adobe Flash 4 throughout this post is actually called “Adobe Flash Builder 4″.

- end of pedantry.

Tyler Dawson

July 24th, 2010

So there’s no confusion, I believe the actual product is called Adobe Flash *Builder* 4. That aside, I’ve enjoyed working with Flash Builder. It’s pretty easy to pick up and is very useful to rapidly develop rias.

Thanks for the article, I’ll have to check out the other methods and programs you suggested!

Pradeek

July 24th, 2010

Its not Flash 4 but Flex 4. Only the authoring environment (Flex Builder) was renamed(to Flash Builder)

Tyler Chesley

July 24th, 2010

It’s completely possible to develop Flex applications without Flex Builder or Flash Builder. The flex SDK is open source and comes with a command line compiler. And they are still calling the it Flex not Flash. The IDE is called Flash Builder now because many people use it to write Flash applications without using the Flex SDK.

Jacob Gube

July 24th, 2010

Thanks for that everyone, the article has been updated.

Peter29

July 24th, 2010

Adobe flash 4 is good but I really think that HTML5 is better.Can you please provide more updates.

Patzee

July 24th, 2010

Thanks. Very informative article.

MatejL

July 24th, 2010

I have never seen the point in these apps. Too many try to imitate photoshop, while I can open the original software faster than this RIA thing loads. On which users does this apps target anyway? It sure looks nice and all but still …

Gehasia

July 24th, 2010

And what about JavaFX ;)
The flash problem is mainly the shitty proprietary plugin (yes i’m mainly running under linux, but windows support is bad too), and RIA are finally web “hype” in 90% of the use case.
The other problem is that everything get confused now. Http port is like a shit pipeline, it’s a total mess, where everybody encode is own proprietary stream and flush the water (unfortunaly with the shit inside), this is a network babel tower. RIA doesn’t help in that sense. I hope we’ll stop the madness in few times before network administrators start to jump from 10th floor.
(sorry for this post, i don’t want to offense, i’m just running mad seing what web is becoming now with all those proprietary fucking things invading what should have been a free standard…sorry too for my english level ;) )

sarfraz raza

July 25th, 2010

Today as we know there is so much demand of designing, in every IT field designing is very necessary. And Photo shop is great tool for this. It is really very helpful and easy to use also. I had used this and from my experience i ca say it is totally mind blowing. This is really a amazing work.

Luke

July 25th, 2010

Great post :-) Learned something today!

Olivier Refalo

July 25th, 2010

I read this article and I am surprise to see missing references and wrong market directions. Today it would be crazy to consider a RIA without Javascript at its center: Adobe Flash is well positioned (but is about to be taken over by html5), M$ Silverlight has tried, JavaFX is almost inexistent.

They all failed because of one reason: they are not open technologies. All these solutions are proprietary solution and won’t get commitment from the masses.

On the other hand: HTML5, CSS and JS are standard open technologies.

Two of the major RIA initiatives (both take Javascript as the corner stone) are:

GWT the google web toolkit – Elegant solution which dynamically translated Java code to Javascript.
http://code.google.com/webtoolkit/

and even more important is the Cappuccino framework
http://cappuccino.org/

Cappucino provides a rich component model to build applications. Applications can be run from the browser or as standalone applications (yet using the same internet technologies).

Here are a few example of applications built with it:
http://280slides.com/
http://almost.at/
http://githubissues.heroku.com/

Eric Rowell

July 26th, 2010

Great point Oliver! For regular web applications, I totally agree that they should probably be built using a JavaScript library like jQuery, YUI, or ExtJS. However, if you are creating a very rich application that uses a lot of graphical components (like a game or graphical planning tool) I have found that Flash can sometimes be more appropriate.

Good point on Silverlight and JavaFX also. I agree that these two technologies don’t have enough traction to compete with JavaScript libraries, HTML5, and Flash, so I didn’t spend as much time covering them.

Sami BOUSSACSOU

August 1st, 2010

thank you for this great article , i like it, you didn’t mention all RIA frameworks beacause i know another RIA technologies such as zk (http://www.zkoss.org) I used it in my last project it’s good, very easy and popular.

David Wheatley

August 1st, 2010

Thanks, Great Article…

Gregory

December 18th, 2010

JavaScript Libraries making web development process much easier,I just can’t imagine creating complex effects without using jquery. Regarding xml handling with javascript I have developed small Library called softxpath.

web informer

January 19th, 2011

is that right as i heard RIA is not only about technology and RIA technology offers more user interface components. Developers need not rely on typical HTML conventions to build their applications.

simple developer

March 3rd, 2011

Yes I agree it is true that javascript is the prefered solution for most people. Sorry but I believe that javascript is not required. Just an another ecmascript like…
I prefer ActionScript :)

Ged

November 15th, 2011

I think this article deserves an update, after the news that Adobe has kille mobile flash and will abandon Flex to open source community.

Lorena

November 18th, 2011

This explanation its great to understand ria, and i believe everything will be useful more and more to develop websites. Thanks!

Leave a Comment

Subscribe to the comments on this article.