BlogArticles over here were reposted from different websites with content improvements or any adjustment to the content originator website for better understanding. Please look for the actual author website about content creation.

  User Interface Technology Stacks


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.



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.