Web Application Development - A General Overview

When the World Wide Web burst into public attention, creating websites and web pages was a novelty. It wasn't particularly difficult; it was just something a bit different. Web pages were created using HTML (Hypertext Markup Language), a format especially created for academic uses where documents often contained references to other documents.

HTML files were no more than text files that included special character sequences, called tags, used to indicate how specific portions of the documents content should be displayed. In fact, in 1994 Windows Notepad was one of most widely used applications for editing HTML content. This extreme simplicity was key to the Web's rapid growth.


First Generation web applications

first-gen.png The first generation of applications developed for the Web were very, very basic. These applications generally consisted of a few forms that the user would fill in and submit to the server. Once the data arrived at the server, it was processed and a new page was generated in response. All processing was done on the server, as the browser was only able to display documents—allowing no logic to be implemented locally. This, of course, wasted a lot of time, especially since there was no such thing as broadband.

If you entered incorrect data, it would be sent to the server, checked, found to be in error and returned with an appropriate message. Often the forms would return to their initial state—with all fields blank—and you would have to enter everything again. Not all applications even checked for errors, so often incorrect information would be stored and later processed.

Things improved when it became possible to handle small processing chores within the browser. To protect against malicious code, any execution was done within a very controlled and restricted environment with no access to the computer's private data. Any code embedded within a page was limited to accessing information only within that page. The small executable scripts were in the form of a language called JavaScript. This quickly grew in popularity due to the overall improvement in the user experience, and soon became an almost de facto requirement for good websites.

Ajax enters the scene

New browsers brought new features, many of which were unique and not supported by rival products. Two main players—Microsoft and Netscape—tried to win over users by offering new and frequently incompatible features is what is now know as the 'Browser War'. During this time browsers were given all the features required to implement techniques for allowing the code inside web pages to communicate with the server without having to do a full page reload. This is what is today known as Ajax, or Asynchronous JavaScript and XML programming.

Not a new technology

Ajax had therefore been around, nameless, years before receiving widespread attention. Morfik itself had been working on the development of its flagship product—the world's first Ajax development environment—long before the term 'Ajax' was first used to describe a specific technique.

Ajax gets noticed

It wasn't until 2005, when Google released two services that made extensive use of asynchronous requests to send XML fragments between the browser and server, that Ajax received its name. Already a giant in the search engine field, Google was in a unique position to attract attention to any service it chose to launch, and the applications were in fact quite impressive.

Google Maps

google-maps.png The impressive Google Maps was a stunning first example of what was truly possible within a browser environment. All previous attempts at bringing high quality satellite imagery to the Web had been burdened by the need to load huge images every time the user wanted to look at a different location. Google Maps broke with that by fragmenting the images into small pieces that were dynamically requested and received by the page within the browser.

These fragments loaded much faster than a large picture and also allowed the user to move around the map and zoom in and out. The experience was amazing, compared to what was previously considered possible, even though the underlying technology had been available in the major browsers for quite some time.

GMail

gmail.png Google's GMail, a free email service, had simplicity of use, and an impressive responsiveness made possible by Ajax. GMail was implemented as a single web page that transforms to meet the user's request. Emails appeared in a list, and if one was clicked the page transformed to show the full text of that message. The message body appeared within the space previously occupied by the message list.

The page transformations required smaller amounts of data to flow through the Internet connection; this was much faster than a full page reload. Not only that, but it also avoided the 'blinking' sensation that occurred when an entire new page replaced one that displayed much of the same content.

While GMail did not replace other established players such as Hotmail and Yahoo Mail, its improved online experience set a new standard to which all such services would be measured. Most importantly, Google demonstrated that Ajax-powered pages could provide the end user with a better browsing experience.

The evolution of web applications

In the wake of the impression left by GMail and Google Maps, developers started to sprinkle Ajax though many other websites and online applications. Even a little bit of Ajax code, cleverly used, could improve the responsiveness of an existing application.

Ajax is now commonly used in massively accessed web sites such as Twitter, Facebook and LinkedIn. These days the only place without at least a little bit of Ajax is in static informational pages, but even those are being touched as more and more HTML editing tools offer ready-made code snippets for adding a touch of the Ajax 'magic'.

Google has made usage of Ajax in its Google Documents suite of online productivity applications, as has Zoho—a smaller company with an impressive portfolio of Ajax-enabled web applications. These examples have definitively raised the bar for new web-based applications and made users crave for more sophistication.

The server side evolves

While all these changes were visibly affecting the browser side of web applications, development on the server side was not standing still. The very need to provide information to the browser component of the application, and not just serve full HTML pages, helped move the web server towards becoming more of a generic application server. To support this, new standards for service definition were created in the form of Web Services.

As Web Services entered widespread usage, efforts to define how this new environment should be modeled and managed started to coalesce and were given the term Service Oriented Architecture (SOA). This is now widely used to describe how enterprises should build and use Web (and even non-Web) Services.

Front-end alternatives

The number of Internet users continued to grow, and soon there were several different approaches to providing the richer, more interactive experience that users wanted. Of these, three have distinguished themselves through wide adoption, the size of the effort put into them and by the size of their respective vendors.

Adobe Flex and Flash

flex-logo.jpg The fact that users wanted more responsive applications didn't go unnoticed. Adobe, who already had in its portfolio the Flash plug-in for browsers, decided that it could increase responsiveness by replacing the browser's rendering engine with its own, reducing the role of browser to simply a launcher of applications. For years, the Flash plug-in had been widely used for creating animations and charts. It could now also be used for creating small games that could be played over the web without needing to install anything on a local machine.

Adobe promoted Flash as a better platform for creating interactive and responsive Internet applications. Not only that, but it created a whole set of extensions to Flash and eventually revamped the whole engine behind the plug-in, introducing Flex—essentially a layer that sits on top of the Flash engine and is geared towards the creation of applications.

Flash and Flex allow the creation of very attractive applications, but they can be perceived as 'foreign' to the web experience unless they fulfill a particular role within a normal HTML page. The videos on YouTube, for example, are presented with Flash, but the page itself is still created using basic web standards such as HTML and CSS. If the entire YouTube page was created with Flash it might look better, but would in subtle ways seem 'different' to the end user. Also, movie titles, author, comments and other information displayed on the page would not be accessible by search engines.

Flash plug-ins are also automatically blocked by firewalls in many businesses and schools because of the abundance of Flash online games that are now available. This practice restricts developers who want to use small touches of Flash to enhance the overall experience of a website.

Plug-ins are also a problem for sites that are likely to be accessed through mobile devices. The Apple iPhone for example, which is currently one of the most used web-enabled phones, does not support plug-ins.

More recently Adobe has pushed forward with an additional technology set called Air, a runtime that supports the execution of Flash and Flex-based applications outside of the web browser.

Despite these advances, there seems to be no widespread movement to adopt Flash-based technology outside of its traditional role of providing graphics and animation within the context of a web page. In fact the increasing number of users with mobile devices running Apple's iPhone OS such as the iPod Touch, the iPad and the iPhone itself has been increasingly discouraging companies from adopting or even maintaining that technology.

Microsoft Silverlight

silverlight.png As Flash moved from being tightly focused on graphics and animation to becoming a platform for applications, Microsoft reacted to counter what it perceived as a threat to its overall dominance in this area. Its response came in the form of Silverlight, which creates interactive content like Flash and Flex, but allows such applications to run outside the web browser like Air.

Silverlight has so far shown no signs of becoming the standard interface for the Internet applications of the future that Microsoft had hoped. It is used on several websites for video streaming, but this usage is similar to that of Adobe's technologies; it is used to complement the features in the browser rather than fully replacing them. Not surprisingly, as a plug-in it suffers from the same inconveniences as Flash and Flex, but it does have a much smaller installed base than its direct competitor.

Ajax and web standards

Ajax and the technologies that represent the web standards are taking a comfortable lead as the technologies of choice for building more interactive and responsive websites. These technologies are implemented directly by the browser and do not require the installation of a plug-in.

This makes a huge difference to the accessibility of a website. Anyone with web access can interact with a web application built using Ajax techniques, but the competing technologies all require the end user to install supporting runtime.

Rich Internet Applications

Applications that use the Internet as a medium for communication and distribution are known as 'Rich Internet Applications' or RIAs. This term encompasses applications built with non-standards based technologies such as Flash, Flex, Air and Silverlight, and other examples such as Skype and instant Messaging software.

These applications are important in our everyday lives and are certainly deserving of recognition, but increasingly sophisticated and dynamic browser-based RIAs point to a new era in computer usage. They are immediately available on any computer equipped with a modern browser and are very easy to use. Many are currently available, and there are certainly more on the way.

The technology that you choose ultimately depends on your goals. Do you want your site to be widely accessible? Do you want it to show up in search engine results? There are a number of things you must consider.

Independence of runtime

The major weakness of plug-in based technologies is a dependency on a specific runtime, and there is no guarantee that this will be present in the end user's computer. Many enterprises impose very tight controls on the installation of plug-ins and other runtime environments out of concern that they may be used to run code designed to bypass security measures. Educational organizations such as schools and universities often block access to plug-in based applications, so the best option is to develop for only the default capabilities of the browser. This will ensure that your application will be accessible from the organization's network.

Tightly controlled environments

There are a small number of organizations that are so concerned about protecting their intellectual property that they even disable JavaScript within pages. This will prevent Ajax applications from working, but as Ajax is now so widespread the number of organizations that go to this level of restriction is very small.

iPhone

iphone.png In the two years since its introduction the iPhone has become a web access platform to be reckoned with; most polls indicate a slice of over 50% of all mobile web access.

iPhone sales continue to grow and show little sign of slacking off, so it would seem foolish to create online applications or websites that could not be accessed from such devices. Mobile browsing is likely to become even more important in the future, and while Adobe and Microsoft are trying to get their RIA platforms supported in these devices, they are unlikely to become standard.

Making a choice

Morfik has always aimed to provide the best way to create sophisticated applications that can be accessed through the browser. After careful analysis and consideration of existing technologies, Morfik developers have concluded that it would be beneficial to embrace a broader, less restrictive idea of standards.

Both Adobe's and Microsoft's RIA solutions rely on plug-ins, which can be blocked and whose content cannot be indexed by search engines. As such, they are a poor choice for projects that aim for information visibility and accessibility. Plug-ins however, can still play an important role; they can be imbedded and used within standards compliant content to help address specific problems where the standards are inadequate.

Ajax, while a good alternative, still has its problems in mainstream usage as the content it generates is not considered search engine friendly. Morfik has recognized this and has developed a tool set to work around this issue.

The coding of Ajax applications

The only way to execute actions on the browser side of a web application, without using plug-ins, is to describe them in JavaScript. It is no surprise that as the complexity of these applications has grown, writing them has become increasingly more difficult.

Unlike strongly typed compiled languages, which have a rigorous programming model, interpreted languages such as JavaScript do not offer the benefit of compilers to enforce the application integrity. Compilers are the preferred tools for building large, complex languages; without them, small changes to an otherwise perfectly working program can cause unpredictable runtime crashes.

JavaScript Synthesis Technology

jst-webos.png Morfik recognized the need for compilers that could generate JavaScript from high-level language such as C#, Object Pascal and BASIC and developed its JavaScript Synthesis Technology to do just that. Developers can write code in their language of choice and enforce the rigorous type checking and referential integrity that is lacking in JavaScript.

The advanced compiler architecture analyzes an application in its entirety before starting to generate the desired output. An interesting side-effect of this is that it also allows the conversion of high-level language code into the other high-level languages supported.


Morfik's innovative approach to the development of complex and sophisticated Ajax-based web applications has been followed by products from other companies such as Google, with its Web Toolkit (GWT), and Microsoft's Script#. The entry of these industry giants into the game seems to ratify the approach already taken by Morfik and confirm that higher-level languages will undoubtedly play a significant role in the future development of browser executable code.

GWT and Script# follow similar lines for compiling higher-level languages into executable script, but Morfik's aim is much greater in scope and it has been developing in this area for a lot longer. Morfik offers a much broader tool set capable of much more than just language translation.

Language is just one issue to consider when empowering developers to become more productive. Morfik believes that by raising the abstraction layer—both in regards to JavaScript and to many other underlying web protocols and formats—developers are freed from having to worry about the nuts and bolts of a web application much in the same way that they seldom need to worry about how the Windows GDI or the ODBC APIs work.

The Morfik compiler not only generates the JavaScript code, but it also produces supporting HTML, CSS and even images during the compilation process. A high-level language developer using Morfik does not need to worry about how the HTML and CSS work; similarly the visual design aspects of the tool allow developers to create visually impressive applications without the need for a graphic designer.

The Web as an operating system

When the World Wide Web (or Web) exploded into the homes and offices of people around the world, developers were faced with a fundamental change in the way applications could be built for use by distributed groups of people.

For many years, applications were designed as a simple visual display that presented the user with the required functionality. As Windows-based application development matured, user interfaces grew in sophistication and complexity.

The Web introduced a totally new way of creating interfaces; applications were created to generate pages—the standard form of presenting information on the Web. Much of development went from creating Windows-based applications to creating page-based applications—a real paradigm shift in the world of application development.

The introduction of the web server into the basic infrastructure meant applications shifted from being two-tier (client/database server) to being based on three or more tiers when a separate application server was involved. Eventually, web servers became de facto application servers, furthering the concept of Service Oriented Architecture.

A method of creating simple applications to take advantage of the physical distribution made possible through the Internet had evolved into a more complex software development process than the one it was exploiting.

In an era dominated by the development of MS Windows-based applications, the popularity of websites exploded and the Web started dislodging Windows as the preferred interface for corporate applications. A crop of visual development tools brought great flexibility and enhanced productivity for developers. These visual tools were introduced in the first half of the 1990s and took development to a whole new level of productivity.

The capabilities and functionalities provided by the browser and the corresponding server component increased to the point where they can now be considered new application platforms. Just as Windows became an application platform running on top of the old DOS, the browser has become an application platform running on top of Windows or other operating systems such as Linux and Mac OS X.

Morfik calls this the WebOS, and Morfik was created to enable applications to be construction as easily for this platform as they can be for Windows. The visual tools featured in Morfik are actually reminiscent of those used for creating Windows applications.

Sophisticated applications can now be developed for the feature-rich WebOS platform, regardless of the underlying operating system, bringing a whole new paradigm shift in the development of web applications. A few tweaks to a configuration parameter and the same applications can be deployed to a server as a centralized application for a department or small business; or to a server farm to handle huge amounts of traffic and concurrent usage for a high traffic website or corporate intranet environment, and Morfik even allows web applications to become desktop applications with virtually no additional work.

The future

Current work in defining new and more powerful standards for the browser hint that in the future, more powerful and sophisticated applications will be delivered by the Web.

chrome-os.png Recently, Google showed the first screenshots and released details of of its ChromeOS. This only runs on specifically designed hardware, providing the necessary services for the Chrome browser, inside which all applications will be run. While this is not the first attempt at this type of system, it is relevant that it is pushed by one of the largest companies in the Web landscape.

It is still too soon to tell how things will play out for this initiative and others which will undoubtedly follow. Will the future will be one in which we continue to use local applications alongside web-based one? Will all data reside in the cloud and all applications work in the browser? As we travel towards this undiscovered territory, one thing seams clear: Ajax-based applications are here to stay.


Related Topics

Back to top