Archive for the ‘GUI: Flash, Flex, Ajax, Silverlight’ Category

09
Feb

What is Flex?

Flex is a way to make SWF files!
At the heart of Flex is the ability to create SWF files that run in Adobe Flash Player. Distill all the features down and it is a development paradigm that compiles to SWF. It really is that simple, but we often make the definition much harder. Just like Flash can create SWF files, so can Flex, but the way you develop it is completely different.

Flex is for developers.

Flex was not built for animators, writers, accountants; it was written for software developers and the paradigm matches the development methodology you already know. If you know Java, C, C++, C#, Delphi, VB, PHP, ColdFusion, Python, Ruby, you can learn Flex with little effort. The goal when Flex was created was to make a development paradigm that developers could learn easily matching the methodology they already know, yet create SWF files for Flash Player (and now AIR). Flex has classes, components, a compiler, a debugger, class libraries, and uses XML (MXML) for declarative markup of components. The ActionScript programming language is based on ECMAScript 4 (the language standard behind JavaScript) and has full support for the ECMA XML scripting standard, E4X. It also has most of the UI components that you already use (like button, list, datagrid, combobox, and tree) but it also supports containers like HBox, VBox, TabNavigator, TitleWindow and many others. If you have written software before, you can learn Flex easily. But better still, Flex is compatible with all HTTP servers, version control systems, and any server side programming language, so the knowledge you have of servlets, php, ASP.net, or JSP is really handy. Flex just lets you program the client side in a paradigm you already know and understand.

Flex is for making applications…

Flex was built for making rich client side application behavior. It wasn’t built for making web pages, banner ads, or server side logic. It was built for creating client-side applications that run over the Internet talking to remote servers. Flex has been used to make some really great apps like Buzzword (Document Editor like Microsoft Word but in the web) or Picnik (Photo Editor/Manager for touching up your best snapshots) or SlideRocket (Presentation software like Apple Keynote but in the web) or Oracle Sales Prospector (An enterprise ERP application. Yes Oracle uses Adobe Flex! ) or many other applications you can see at Flex.org. The real key is that all these examples provide an application experience just like desktop software.

…that run on the web (Adobe Flash Player)…

Flash Player 9 is installed on more than 95% of computers that use the Internet and has been installed more than 3,500,000,000 times at a rate of over 10,000,000 times per day. When you develop software, you want it to run compatibly in as many places as possible. Adobe Flash Player provides a solid foundation to build these experiences without the need to install or update anything on the end user’s computer. If you were running a store you would want that store to be available to as many customers as possible and choosing Flash Player allows you to provide a great experience (rich) to 95% of the web (reach). Make sure you look at the reach of the technology you select. If you choose something not widely installed or incompatible, you are simply turning away customers and business.

…on the desktop (Adobe AIR)…

Adobe AIR is a new runtime in development by Adobe and we are very close to releasing Adobe AIR 1.0. AIR allows you to write desktop software that runs on 3 operating systems (MAC, WIN, LINUX) with the same file. This allows your application to be a true desktop application rather then just a website and allows you to do much more than the web allows today. AIR applications are real native desktop applications and provide APIs for writing files, drag-drop, system notifications, network detection, and more. AIR empowers developers to write desktop software that leverages the Internet.

…on mobile devices.

Adobe is working to enable Flex to build applications for mobile platforms and support a wide range of devices. Just as Flex can be used to write a web based application or desktop application, it can be used to write software for mobile devices. The fact is that devices are becoming ever more powerful and more plentiful. It is just a matter of time before we enable developers to leverage Flex to deliver mobile applications on Flash Lite or AIR on mobile.

In summary, Flex is a development paradigm that allows you to write software for the web and desktop that many people can use compatibly today. It leverages the tools, servers, and development models that you already know and allows you to write the next generation of software compatibly. At Adobe we are working around the clock to make this ecosystem of software better and provide you with the best tools and platforms to make your projects a success.

I encourage you to take a fresh look at Adobe Flex and discover the opportunity in learning a new language and ecosystem. Developers around the world are embracing it to create all sorts of new applications and I think you should jump in too.

If you are looking forward to learn Flex then here are some useful links

Adobe Component Explorer:

Describes various components available in Flex.

Adobe Style Explorer:

Helps defining styles for your Flex application.

Handling XML Data:

Tricks and techniques of using XML data in Flex.

Its fun to play around and learn Flex. Try it…you will definitely enjoy it :-)

by Saagar Shetty

,

23
Oct

Microsoft Silverlight 3 is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. It extends the web development experience far beyond the limitations of plain HTML and JavaScript. Silverlight with its short hist ory of three versions now also includes many new features and functionality.

Silverlight has definitely raised the bar for browser plug-ins and development environments. Unlike Flash, Silverlight offers us a real IDE, true separation between design and development (the best designer isn’t necessarily the best programmer, and vice versa), real programming languages, and an efficient, high-performance, almost infinitely versatile browser plug-in.

Interesting features of Silverlight 3

· Fully supported by Visual Studio and Expression Blend

This massively changes the way a programmer looks at the code. There is negligible learning required with regard to programming language. A C# programmer can certainly write a code behind and easily create a XAML. Visual Studio 2008 incorporates designing a Silverlight application up to a certain limit, but designers looking for profound ‘looks’ can definitely seize help of an advanced IDE like ‘Expression Blend 3’ to create a attractive looking Plug-in.

· Out of Browser support allowing web applications to work on desktop

The Out of Browser support in Silverlight 3 enables developers to create Silverlight applications which can run both inside and outside of the browser.  By making some minor level changes to APPMANIFEST.XML, an application can be successfully run out of browser.

· Significant graphics improvements including 3D graphic support

Perspective 3D support in Silverlight will now allow developers to use 2D elements to create a 3D experience.  Perspective 3D is also a great way to better utilize screen real estate making the application user interface immensely attractive.

· Smooth video Streaming

Silverlight Streaming are services that allows users and developers to host their Silverlight content and apps with Microsoft, taking advantage of their extensive global network of datacenters and their content delivery network. Best of all, this service is free, and while currently it is only in alpha it allows users to upload up to 4GB of content, and to stream up to 1 million minutes of online video delivery at 700kbps of around DVD quality.

· Improvement in RIA development productivity

Silverlight 3 has over 60 high-quality, fully skinnable and customizable out-of-the-box controls such as charting and media, new layout containers such as dock and viewbox, and controls such as autocomplete, treeview and datagrid. Attention-grabbing element being that these controls come with nine professional designed themes and the source code can be modified/recompiled or utilized as-is. This means less development time and better looking app.

Silverlight has certainly made RIA simpler & as Microsoft puts it, it can surely “Light up the Web”

— Pranav Deo

, , , , ,

29
Oct

Adobe Flash vs. Silverlight 3

Till now ‘Adobe Flash’ has been the de-facto standard for most streaming activity be it CNET, You Tube or BBC. We find that most of the times Adobe Flash player fails to deliver speed, audio capability, and video consistency. Microsoft promises to break these shackles by introduction of Microsoft Silverlight 3.0. Some advantages of Silverlight 3.0 over Adobe Flash

· Silverlight supports the WPF animation model, which is not only time based instead of frame based, but lets you define the start and end conditions , it will figure out how to get there for you. No need to deal with matrixes like in flash. Also no need to calculate positions on various frames. It just works.

· Silverlight lets you embed true type font information directly into your projects, and download that information with the downloader object.

· In addition to supporting a rich set of development languages (VB.Net, C#), debugging too has become relatively simpler.

· XAML is declarative while ActionScript is imperative. Using imperative languages to build UIs goes back to the early days of DOS and Windows, when developers had to manage all of the API nuances when interacting with graphical panes.

· Silverlight does not require video codec to run industry standard videos like .WMV

· Silverlight supports scalable video formats from HD to mobile and Hardware-assisted editing and encoding solutions. It also supports Scalable full screen video.

· Silverlight provides End-to-end server and application platform.

Moonlight = Open Source Silverlight 3

After coming to spotlight recently for donating around 20,000 lines of code to open source community, Microsoft has started with the open source foundation called ‘CodePlex’ (not to confuse this to their open source code sharing website of the same name).

This being the driving force behind an open source implementation of the Silverlight browser plug-in called Moonlight. Moonlight which is based on Mono (an open source implementation of .Net) is being jointly developed by Microsoft and Novell to:

  • Allow Silverlight applications to run on Linux
  • Offer a Linux SDK(software development kit) for Silverlight applications
  • Use the existing Silverlight engine to develop desktop applications.

Like Silverlight, Moonlight manifests as a runtime environment for browser-based rich Internet applications (RIAs) and, similarly, adds to animation, video playback and Vector Graphics capabilities. Developers are also creating desktop Widgets called “dekslets” to extend Moonlight applications beyond the browser.

Silverlight is not only emerging as competition to Flash, but is also revolutionizing browser plug ins with continual changes. 

Watch this space for more ……..

— Pranav Deo

, , , , ,

22
Jul

Almost everyone today must have seen science-fiction and action movies with hi-tech special effects. These effects are a culmination of not only the developments in computer science and technology in the last two decades, but also the accompanying developments in computer animation and graphics technologies.

In this blog we take a tour of the world of computer graphics and special effects and see the types of effects that are in use today as well as some behind-the-scenes action that goes into making these scenes appear as real as they do on the screens.

What are special effects?

Special effects are a combination of detailed art and high-level technology. It consists of understanding how human begins perceive the world through sound and visual sensory parts of their body and their brain.

Persistence of Vision: When a related sequence of still images is passed at a particular speed (minimum 15 frames/sec.) in front of human eye, the human brain perceives it as a single image with motion, i.e., it perceives the second, third images as a continuation of the first image. This is because a human’s nerve impulses are slow as compared to speed of light.

Principle of Motion Pictures: Persistence of vision of the human eye is the principle behind motion pictures in which camera, lights, audio, computer generated objects (CG) and other visual media are employed to exploit this phenomenon.

What is motion: Motion of an object is the continuous displacement of the object in space with reference to another object. This phenomenon forms the basis for compositing technology.

Types of special effects:

Computer Effects:

Some of the popular computer generated special effects are:

  • A complete blue or green screen
  • Computer animations or cartoon films
  • Compositing
  • Morphing/Warping

Humanized Effects:

These are some of the effects generated by a computer and used in films:

  • Use of Latex
  • Creating the illusion of rain, snow, wind and fire
  • Showing realistic on-screen blood bags/bullet hits
  • Explosions
Computer Effects:

These are effects generated with the help of computer technologies. Some of these effects are as follows:

Showing a complete blue/green screen: In this technique, a blue/green background screen is used in a scene. This scene is then made to overlap on another and the blue/green colored background removed with the help of compositing software’s. This technique needs a special kind of compositing, where the mask is calculated from the foreground image.

Below is an excellent example of action photo compositing, sometimes referred to as transitional photography (source: http://www.photosfan.com).

Photo compositing

Photo compositing

Computer Animation: For generating computer animations, real footage is first shot and is then converted to animation using compositing software. A good example of this technique would be Gollum, a computer generated character in the movie ‘The Lords of the Rings’.

Cartoons Frames: For displaying real characters with cartoons, cartoon character is used with real footages. The best example of this technique is the movie ‘SpaceJam’ (shown below, source: http://animatedviews.com/)

Cartoon Frames

Cartoon Frames

Using Physical Models for Animation: In this technique, a physical model (mechanical robot) is used to depict the character on screen. Good examples of this technique would be the films ‘Jurassic Park’, ‘Godzilla’ etc

Morphing: This is a special-effects technique that creates a smooth, controlled transformation of one image, character or movie into another.

Morphing

Morphing

The figure above shows the morphing of a person’s face to that of a tiger (source: http://www.blorge.com)

Warping: Warping is also the same as morphing, except that it uses only one image or movie. An example of warping created using Adobe Photoshop is shown below.

Humanized Effects:

These are effects which are generated manually. They are generated as follows:

Using latex: Latex is a material used in commercial make-ups. It can add scars on faces, extra eyes on ‘monster’ heads, and can also make young people look old and vice versa. A good example of this would be the movies ‘The Nutty Professor’ (as below), ‘Lord of the Rings’ etc.

Rain: Computer generated rain makes it difficult to give the realistic look and feel of real rain since it does not wet the actors’ clothes. Hence, film makers arrange for artificially created rain-like effects.

Snow: Snow machines are available which help in creating snow for the shots.

Wind: Production staff uses large fans and high speed blowers to create good wind effects.

Fire: For creating massive fires, experts are called, who create huge fire shots with fire machines, and which can easily be turned on for massive fire scenes, as well as off just be pressing a button.

Blood bags/bullet hits: The blood bursting out from a person in the movies is achieved by a small, battery-triggered explosive charge, causing a blood-filled bag to burst out. A small, 9V battery is used to burst a squib (fireworks consisting of a tube filled with powder that burns with a fizzing noise), which has to place under the character’s costume.

Explosions: At times when computer generated explosions are not effective, and for realistic looks, a pyrotechnic machine is used to achieve the explosive effects.

Technology used to create special effects (Software):

The following are some of the software used to create special effects:

  • Autodesk Combustion
  • Autodesk Inferno
  • Autodesk Flame
  • Autodesk Flint
  • Adobe After Effects
  • Digital Fusion
  • Elastic Reality
  • Boris FX
  • Hollywod FX

In summary, we have seen in this blog post that advancements in special effects have revolutionized entertainment and have made movies seem life-like. This may just be the beginning of special effects in movies; the best is yet to come.

30
Jul

Animation is the illusion of movement created by a rapid display of a sequence of images. Scientifically, this occurs due to the persistence of vision experienced by the eye. The most common and everyday example of animation is a video program.

3D animation came into existence with advancements in computing software and technology. 3D animation creates graphics using a 3D representation of 2D geometric data stored in a computer.

Examples of 3D graphics or animation would be cartoon films and 3D models used in engineering and architecture.

How Does Animation Work

The basic principle of animation is the same for all media – displaying a rapid sequence of images which are slightly different than each other creating the illusion of movement before the eye.

However, this is how regular, 2D animation is created (or rather, was created until a few years ago). Nowadays, for both creating 2D as well as 3D animation, computer software from several vendors such as Adobe, Xara, Strata and Corel are available.

The Thaumatrope was one of the earliest devices designed to understand the persistence of vision (Source: http://www.aranpa.com)

Thaumatrope

Thaumatrope

The various steps involved in generating 3D animation are described next.

Concepts and Storyboarding

Storyboarding is the process of creating a visual representation of the actual screenplay of the animation’s story. It basically consists of a series of illustrations or images presented in a sequence for pre-visualizing an animation. It is usually an intricate and tedious process as it is supposed to visually convey the actual story of the animation.

Modeling

3D modeling is usually done using specialized computer software and involves developing a mathematical model of any surface of a three dimensional object. This is actually done using 2D images of the object using a process called 3D rendering. Models may be created automatically or manually; the latter is usually done by an artist and is similar to sculpting. An example of a computerized 3D model of a human head is shown next. (Source: http://pabs.us/graphictutorials/wp-content)

3D model of a human head

3D model of a human head

Layout

To render objects on the media being used, they must first be placed within a scene, a process known as layout. In this process, the physical and spatial interrelations between the objects contained in a scene are first decided. Next, several techniques such as motion capturing and keyframing are used to capture their movement and deformation over time.

Just as in modeling, layout may also involve physical movement of the objects in the scene, similar to sculpting. An example of the use of layout is shown below in a promotional poster for the film ‘Shrek’.

Layout

Layout

Positioning the Cameras and Lighting

For the scene to provide a realistic feel to the viewer, the lights and cameras must be positioned correctly. This ensures that minor details, such as shadows, also appear authentic in the final results. As an example, the following image shows the results of correctly positioning the cameras and lights in the making of a promotional poster for the Ford Focus car. (Source: http://www.leblogauto.com/images/focus_cc2.jpg)

Positioning the Cameras and Lighting

Positioning the Cameras and Lighting

Rendering

This is usually the last step in creating the illusion of motion between the objects in the scene. This step also involves complex interaction of different light sources of varying intensities and positioned at different places to get the desired effects in the scene.

This step is most commonly performed using 3D computer software. A technique known as 3D projection, which allows a 3D image or object to be viewed in 2 dimensions is also used in the process of rendering.

Visual Effects (VFX)

Visual effects are the combination of various processes in which live action footage is combined with computer generated static imagery. It is used to create realistic looking environments which may be costly or dangerous to create artificially and then capture on film.

Visual effects are most commonly part of a film’s post-production, and have now become accessible to amateur filmmakers with affordable animation software.

An example of visual effects is the use of Computer Generated Imagery or CGI, which consists of developing scenes, first shot with real actors and then processed using computer software to render a computerized 3D equivalent of that scene, as shown in the image below from the movie ‘Avatar’ (Source: http://images2.fanpop.com)

Computer Generated Imagery

Computer Generated Imagery

In summary, we have seen in this blog that 3D animation involves several steps, starting from the concept right up to post-production with each of these steps involving technical as well as creative expertise in equal measures. Thankfully, advances in technology have made this field simpler and more productive for the professionals, and within reach for the amateurs.

Amit Sheth
Amit Sheth– Sr. Technical Writer

11
Aug

Introduction to Technology Stack

In general terms, a technology stack consists of the parts or sections of any set of components or services that are used to deploy or provide any technical solution or application.

When applied to the software industry, technology stacks might be examples such as the TCP/IP protocol stack and the seven layer OSI model.

User Interface Technology Stack

User Interface Technology Stack, as the name suggests, comprises of the technologies that are used for UI development. For the purpose of this blog, we will extend the same definition and call it technologies that could be used to develop the UI and need not primarily be UI technologies. The UI technology stack could be different for different kinds of applications. Hence, we will discuss the three most common kinds of applications being developed, which an ordinary user commonly gets to use:

  • Web applications
  • Desktop applications
  • Mobile applications

In the following subsections, we shall cover these three kinds of applications and the UI technology stacks that are most prevalent in their respective areas.

The figure below depicts the UI technology layer separation across Web and desktop applications (mobile applications have been intentionally left out in the diagram).

UI technology layer

UI technology layer

Web Applications

Web applications are the ones which can be accessed from a standard Internet browser, such as IE, Firefox or Google Chrome, on a desktop or laptop computer. This excludes ‘browser on a device’, which is covered later in mobile applications.

The first and foremost thing coming to mind about Web applications is terms such as HTML, DHTML, JavaScript and CSS from a technology point of view, which have been there from the early days of browser based applications.

Earlier, browsers could only render HTML and process JavaScript and CSS. But with the help of different plug-in components such as applets, Macromedia Flash, ActiveX, SilverLight and Flex, browser-based applications can now provide a very rich user experience. We shall now see a short overview of the different technologies available to develop Web applications.

HTML/DHTML

HTML today is the language all other programming languages render into after performing complex backend operations. HTML has transformed into a powerful language that can actually open sockets to server (HTML5). In January 2008, HTML5 was published as a working draft. It contains a set of new tags, CSS enhancements and JavaScript APIs.

DHTML allows developing better-than-browser experience with features such as drag/drop, fading, animation effects etc. As a result, applications will continue to provide such user interfaces for years to come.

AJAX

Ajax (Asynchronous JavaScript and XML) is a standards-based technique/design pattern for developing better-than-browser user experiences for server-deployed applications. It is a server side technology, but invoked from the client side. Ajax is primarily used to make interactive Web applications by retrieving data from the server asynchronously in the background without interfering with the display and behavior of the existing Web page. Features such as auto-complete, submitting a form without page reload and displaying the success/failure of submission, performing local user input validations are some basic examples of the usage of Ajax. Google Maps is one of the best examples of the use of Ajax to resolve complex issues.

JavaScript

Like HTML, the decade-old JavaScript has become the most popular programming language on the Web. JavaScript is object oriented and has support for classes, callbacks, events, run-time evaluation and much more. Third parties have come up with libraries that let ordinary users to develop applications with ease. A few of them are listed below:

  • Prototype – Prototype is a JavaScript framework that aims to ease development of dynamic Web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the code-base of choice for Web application developers everywhere.
  • JQuery – JQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid Web development. JQuery is equally powerful and easy to use as Prototype, plus the library also supports animation, giving developers an additional tool to add more style and features. It may be a tough call for anyone to decide between Prototype and JQuery.
  • Both Prototype and JQuery are open source and free to use. There is an equally powerful paid JavaScript library called Ext JS, described next.
  • Ext JS – Ext JS is similar to the above two JavaScript libraries but with enhanced capabilities of providing an interface and features more similar to those traditionally associated with desktop applications. Ext JS, unlike JQuery and Prototype, is governed under the LGPL style license.
  • Java Server Faces – Java Server Faces (JSF) is a Java EE 1.4 component, allowing developers to develop user interfaced for their Java EE applications without much expertise on the UI technologies. It is a framework with a huge set of tag libraries and support for Apache MyFaces (Tomahawk) and many others, maximizing the developers’ productivity. Think about a traditional JDBC operation and displaying a record set using JSP on a webpage: JSF could do that by mapping a bean on the server side and the JSF DataTable widget would render the same results with using a simple tag, rather than iterating over the result set using JSP scrip-lets. The code looks neat and the objects are mapped on-the-fly to server-side managed beans. JSF also integrates seamlessly with CSS and JavaScript.

However, it does come with its own limitations and complexities. Though the configuration is very simple, one has to design the implementation to minimize frequent changes. JSF being very easy to develop, many tend to ignore the performance aspects and use tags very loosely. Once a decision to use JSF is taken, it may be difficult to change the application development to any other framework midway.

  • Flex and OpenLaszlo – Flex and OpenLaszlo are similar declarative approaches to creating better-than-browser interfaces for Java EE applications. Flex and OpenLaszlo both are open source; Flex is Adobe’s product and also comes with a proprietary, license-based Charting supporting component. Both of them use scripts – either ActionScript (Flex) or JavaScript (OpenLaszlo).

While the two technologies have many similarities, one key difference is the runtime environment they require. Flex requires Flex Data server running for the client to interact with the server. Alternatively, the server could be any as long as the interaction points are exposed as Web-services. OpenLaszlo requires its own server to be running for client-server interactions. OpenLaszlo version 3 introduced SOLO deployment mode, which eliminates the requirement for a presentation server in some configurations. While some components of Adobe Flex are licensed, the cost of the overall application could become an issue. OpenLaszlo being open-source, many companies have firm policy restrictions on usage of open source software for application development.

Microsoft SilverLight

SilverLight is a Web application framework that provides functionalities similar to those in Adobe Flash, integrating multimedia, graphics, animations and interactivity into a single runtime environment. It is supported by multiple browsers on Microsoft operating systems as well as mobile devices running Windows 7. Novell, in association with Microsoft, have come up with MoonLight to bring out the most of SilverLight functionalities on Linux and other open source platforms. Like any other Microsoft technology, SilverLight stands alone as the only technology that tightly binds with .Net and requires Windows for development purposes. If the overall technology stack is independent of Microsoft technology offerings, then SilverLight may not be an option.

If the OS and .Net platforms are not a restriction, SilverLight stands in parallel to Adobe’s Flex and OpenLaszlo.

Discussed next are UI technologies for desktop and mobile application development.

Desktop Applications

Java Swing

Along with APIs from Java for Web development, Java AWT/Swing is a platform-independent, Model-View-Controller GUI framework for Java. Swing lost its edge with the introduction of many other GUI technologies, but is still in use by many products common in software development, typically IDEs such as Eclipse, BlackBerry (JDE), JBuilder etc.

Adobe AIR

Adobe Integrated Runtime (AIR), also known as Adobe AIR, is a cross-platform runtime environment developed by Adobe Systems for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax, that can be deployed as desktop applications.

Typically when we talk about RIA (rich internet applications) we immediately think of browser based applications, but AIR gives Adobe an edge to have RIA applications to be browser-less. One of the interesting facts is that AIR gets installed with Adobe Acrobat reader v9.3 without user knowledge, making most of the desktops that have Acrobat reader installed ready to run AIR apps and not requiring any additional software to make AIR apps run. Adobe AIR has not really caught up in the market space to be recognized as a popular desktop application technology, but certainly it is gaining attention in developing light weight applications. Also, JavaScript frameworks such as JQuery, Ext JS and Dojo Toolkit have been updated to support Adobe AIR’s application sandbox.

.Net(VB), .Net(C#) and VC++

Like Java, Microsoft also has .Net, VC++ and VB to develop desktop applications, though they have existed for quite some time and are the technologies preferred by developers on Microsoft’s platforms. Barring VB, both .Net(C#) and VC++ allow applications to utilize core system functions, e.g., kernel level access, device drivers etc. Developers on VB find it very easy to switch to .Net(VB) as the coding syntax and style are almost similar.

Mobile Applications

For mobile application development, two things have to be kept in mind. Like the desktop and Web, the mobile platform in itself has two kinds of applications:

  • Native applications
  • Browser based applications

Native Applications

These applications primarily use the APIs and frameworks supported on the operating system, and to a certain extent, the particular Java Specification Request (JSR) implementation for a particular model. For e.g., for Bluetooth programming, the device manufacturer may or may not have all capabilities/support for Bluetooth communication on all his models. This could vary on different models from the same company. Hence, when it comes to mobiles, one needs to study the brand, model and the support for features that the application is going to use. The security aspects are also important to study and evaluate before deciding on the model and brand. One key point is that there cannot be the same application code that can run on iPhone (Objective C), Blackberry (J2ME) and Windows Mobile (.Net Compact Framework) primarily because these platforms have support for different programming languages.

Browser Based Applications

For the mobile platform, when a native application is not an option, the immediate solution is to have a browser based application developed in XHTML, and along with CSS and proper design, the application could be made compatible to most of the devices (from different manufacturers and with different screen sizes etc). But, this is easier said than done.

There are far more technologies present than those discussed above to keep the article concise. The key is that none of these technologies is ‘one size fits all’ and hence not perfect for all situations. Each of these technologies has its own merits and demerits and can be a good fit depending on the requirement and expectations. So, how do we decide on the UI technology for the application?

For starters, the best way to reach out maximum users is HTML and technologies that generate HTML before it hits the client’s browser. For the opposite, when it is essential to install the application on user’s machine, then AIR, Microsoft VC++, VB .Net and Swing are the options.

The decision on which one to select is rather easy for desktops than for Web applications. Desktop UI technology is driven primarily by the technology used on the server side; rarely the UI technology would be on a different platform than that on the server side. If it is a stand-alone desktop application, the deciding factors are the features and extent of OS level operations that the application needs to perform. Microsoft technologies are the most preferred when it comes to low level programming. For RIA desktop applications, Adobe AIR and the Out of Browser solution from SilverLight could be an option.

For Web applications, there are many options, and all are equally powerful in terms of functionality, usability and providing a rich user interface. The key to selecting the right technology is to let the application requirements drive the technology choice for the best user experience. This may look like a very generic and obvious recommendation. In many cases, developers tend to miss the obvious and jump into considerations that are best known to them rather than what should be the best.

Some of the key points/suggestions that could be followed are:

  1. Knowing the technology/framework well is not always enough to decide on the UI technology to use. The best approach is to walk through the requirements and then evaluate by prototyping some complex features, which should give an early indication of the efforts and challenges lying ahead.
  2. Never hold on to a technology that you are most comfortable with. Experimenting with the newer versions, newer open source APIs, building sample UIs using newer technologies will always keep you a step ahead of competition. Many developers are still using Java Applets assuming that is the best for displaying graphics and dynamic data updates from server, whereas JavaScript libraries have been there for years now which lets them achieve far better results and in a very short development time.
  3. Always remember: It is the user who uses the application and so, providing a rich and friendly UI to the user is the only objective of the UI. Select the technology that works well with the backend binding and allows you to develop some really cool GUIs and the user would certainly keep coming back for more!

So, we saw in this blog the ideal combinations of deployment technologies that can be used for each of the three primary application software platforms discussed – Web, desktop and mobile. Finally, it goes without saying that for any application to remain popular, it not only has to be technically robust, but also functionally easy and intuitive to use, and has to continuously evolve with emerging trends and technologies.


Pawan Sachdeva
Pawan Sachdeva– Technical Architect