HTML5 vs Flash

Recently there have been quite a lot of debates about HTML5 versus Flash, with the recent introduction of the Apple iPad and the announcement that Apple will not be supporting Flash throwing up a lively debate about the merits and drawbacks of each technology. In this post we are going to look at what HTML5 offers and if it realistically can replace Flash altogether anytime soon.

Flash technology is currently the best way of delivering interactive and graphics rich content in web browsers. The almost universal availability of the Flash plugin in web browsers, coupled by the good development tools and support around it currently make Flash the number one choice for developers who want to provide quick interactivity and offload processing to the client side. The rising popularity of features such as Flash Video (FLV) made sites such as YouTube possible and easy to use.

With the advent of AJAX / JavaScript and dynamic HTML integration, around 2003-2004, notions of pure HTML / JavaScript / CSS based interactive experiences started taking shape. HTML5 addresses these notions and takes them further by providing support for richer user experiences and support for multimedia right in the browser, such as H.264 video codec support in HTML5.

The current issue does seem to be based on two underlying themes: strategic and technical. We will mainly focus on the technical issues here, but there are strong strategic reasons for favouring HTML5 support over Flash and vice-versa. An HTML5 based future will favour Google and its dominance in web search and advertising, while enabling Apple to continue its role as primary arbitrer, platform operator and app gatekeeper on its various hardware platforms. Microsoft can try to acquire market share from Adobe by providing better tools for HTML5 development and promote its own Silverlight solution. Adobe obviously will try to promote Flash, and so on...

HTML5 can be used to provide a similar experience to using Flash, given the right support from additional JavaScript libraries and proper use of AJAX techniques. Admittedly, it is still much harder to achieve a Flash like experience using HTML5 - developers need to be much more experienced and need to overcome many more obstacles than simply using the Flash development tools. Certain initiatives like SVG and 3D open source visualisation formats and data on the web have not been as widely supported as expected, although this may change in the future.

We have recently saw the Wii Mario Kart Round site which provides a good example of a graphical interactive experience that can be achieved in the browser itself without using any form of Flash.

The drawback of web browser compatibility and support is evident when using a non-compliant browser. This is how the Wii Mario Kart site looks like on a non-compliant browser:

This is something that will not happen when using Flash as long as there is a recent Flash plugin installed in the web browser. Developers so far are thus guaranteed consistency with Flash but will be taking a chance on committing completely to HTML5.

Some other good examples of HTML5 usage are those of Ben Joffe's torus game (screenshot below), and Google's Quake II port to HTML5 (see the YouTube video below).

YouTube Quake 2 Video

Many comments about Flash and H.264 seem to be overlooking the fact that H.264 is not such an open content format as people are assuming it to be. The consortium behind H.264, MPEG LA,  may impose licensing restrictions and royalties in the future and own patents that expire in 2028. While we hope that MPEG LA will try to avoid another fiasco like the old GIF patent royalty issues, it does mean that the choice of H.264 as a standard open web video format is questionable. It is likely that an open source format with an open source, unfettered license will eventually emerge as a real open alternative that everyone can use without licensing problems. Until then, it is likely that the Flash Video format will remain widely supported and remain the preferred format of choice for delivering multimedia content over the web.

In the future we expect more sites and web based applications to increasingly support HTML5, while possibly seeing Flash being used less over time. Charonite is working towards having full HTML5 support in our Obulus Platform to ensure that our customers benefit from the latest technology implemented in web browsers. Legacy support for Flash will always remain for the time being, especially in components that depend on Flash displays such as the interactive chart / graphing tool in web based reports.

Will HTML5 ever replace Flash entirely? Possibly - but over a longer period of time than Apple would like us to think. One of the main problems that will face HTML5 is to ensure that all independent browser manufacturers implement support in a consistent manner - something that Adobe can ensure in Flash since it controls all distribution and release of Flash technology, while web browser compatibility always has been a headache for developers aiming to release web applications that work consistently across different browsers and browser versions. Better JavaScript support in web browsers is also needed: tests at Charonite using Google Maps and a fairly complicated JavaScript AJAX code shows a staggering 1500% speed difference between loading time in Chrome and Internet Explorer / Firefox, for example. Such speed differences and compatibility issues have to go away before the HTML5 / AJAX combination becomes a truly viable alternative for rich media web applications to tightly controlled technology such as Flash.

Deployment issues will also be made easier with a consistent HTML5 / JavaScript deployment model - currently Flash offers a lot of advantages to developers due to its consistent Flash runtime environment. Offline applications are also much easier to develop using Flash than pure JavaScript, which currently requires writing entire applications using JavaScript and using something like Google Gears for deployment. Geolocation and additional services will eventually become standard in both, so this is not likely to make much difference towards HTML5 adoption.

Our opinion is that HTML5 will be increasingly used to provide a significant amount of functionality that is currently being offered by Flash, while on the other hand, Flash will still be utilised to provide rich interactive applications that need to be deployed in a consistent manner across various browsers and hardware platforms.

p.s. To check the HTML5 compatibility ratings of your browser use the HTML5 Test being developed at Github. Internet Explorer 7 got a score of 11/160, Google Chrome 4.1 scored 118/160 and Firefox 3 scored 31/160. We have not tested the Safari and Opera score, although these are likely to be somewhere between Firefox and Chrome.

Recommended related book:

Achieving Fast Performance in Web Based Applications

Fast performance is absolutely necessary when serving web-based applications to thousands of users simultaneously. Performance issues can arise at different points, including the network level (due to congestion caused by network traffic loads and bandwidth issues), application level (due to inefficiencies or bottlenecks in code), web server level (due to overload), the user interface level (due to unresponsive web-based interfaces) and the platform level (due to overload and large datasets).

At Charonite we are constantly researching new ways of improving the performance of web-based applications. We have found from experience that measuring and logging performance is absolutely critical to troubleshooting performance problems efficiently.

At the network level, congestion can often be reduced by having applications that prioritise data communications automatically, using intelligent "rationing" of bandwidth and giving priority to smaller, critical data over larger, less critical data. For example, our intelligent transport system applications give priority to small pieces of data like vehicle license plates, and give lower priority to routine images and videos coming from monitoring applications. Intelligent caching and layers of proxies can help in reducing the number of overall queries and internal data transfers that need to be handled by the system. Reducing the amount of disk bound I/O also helps to increase data throughput significantly. Using simple network settings like enabling GZIP compression for HTML data in the webserver can also significantly reduce the amount of bandwidth usage needed.

At the application level, using profiling tools and good algorithm design and appropriate choice of suitable data structures generally produce the best improvements in performance. Profiling helps find bottlenecks easily and ensure that yet unnoticed problems are proactively found and fixed. Often, simple fixes in algorithms, such as reducing the number of unnecessary loops and disk reads can provide significant performance boosts. Good knowledge of data structures and their behaviour under different real-life loads For database bound applications, analysing slow query logs and the structure of SQL statements can improve performance literally by hundreds of times with intelligent query modifications and rewrites. Asynchronous events are also generally useful for fast reaction times, while synchronous polling cycles limited to a max number of items for processing per cycle are useful in realtime environments where data throughput and processing times need to be guaranteed and modelled formally.

At the web server level, various strategies can be employed to improve performance, including having multiple separate web server farms to serve dynamic and static content. Dynamic content that does not change often can also be cached and later on served via a simple web server that offloads some of the demand on more complicated portions of the web application automatically. We recommend the use of the Apache web server with a customised configuration that keeps just the necessary modules loaded in the server.


At the user interface level, using techniques such as AJAX will ensure a faster and more responsive user interface. Newer technologies such as HTML5 support look promising and will provide an even better user experience in the near future. Using thicker clients such as Flash or Java applets can also provide faster performance, especially for graphics intensive uses, however we generally try to use such techniques as a last resort - proper use of HTML and CSS can give a lot of performance without sacrificing compatibility and standards based development. A well designed user interface can also workaround performance issues by reducing the amount of work needed by the user - auto-completion, auto-suggestion of data, intelligent highlighting and hiding/showing of whole sections of forms, and so on.



At the platform level, we have been doing research on using massively parallel computing clusters and parallel algorithms to speed up performance and be able to handle large amounts of data simultaneously. The Obulus Platform has been designed with large datasets in mind, and uses features like federation and column oriented databases to speed up the handling of datasets going up in the terabyte ranges.

Performance issues are critical to providing a good end user experience. We hope that the issues discussed briefly here and the tips given will help out in achieving better performance in web based applications.

p.s. Charonite is hiring: if you're passionate about achieving performance on a large scale and want to work in a focused team, drop us an email.

Scaleable Solutions

Scaleable software solutions ultimately determine what applications remain limited to a few hundred users and a couple of thousand transactions and those that can truly support millions of users and transactions. Scaleability is essentially the software equivalent of "separating the men from the boys" (and the women from the little girls too!) *. One of the criteria that many companies unfortunately do not consider when buying off the shelf software or ordering a bespoke custom solution is the medium and long term growth of their business. The applications that are chosen need to be able to grow along with growth in business and the client base - or otherwise companies end up being faced with expensive migrations to new systems that can handle their new requirements.

Our way of ensuring that this does not happen is to have a scaleable design from the ground-up, with a well-thought data model that can be distributed amongst multiple servers, and possibly federated and sharded if need be. The software itself also needs to be capable of running in a distributed fashion, with algorithms that are friendly towards parallel processing techniques and frameworks such as MapReduce. Some choices in large scale algorithm design can be counter-intuitive, as such systems tend to optimise for maximum consistent data throughput rather than unpredictable short bursts of speed followed by long delays and waits.

Naturally, the data processing itself needs to deliver high performance over huge datasets - at Charonite we are generally not happy with anything that cannot process a couple of Terabytes of data without failing. Ideally without users even noticing the underlying complexity that goes on behind the scenes!

The Obulus Platform offers a variety of techniques and technologies that facilitate the creation of scaleable applications that can be distributed over multiple servers and server farms. And when things do fail (as they inevitably will in any large scale real-life installation), the platform design makes it possible to recover gracefully and turn parts of the application on and off and even paused / resumed in a flexible manner.

Our experience has shown us that by using profiling and measurement and focusing on the processing bottlenecks that cause the vast majority of slowdowns, an application can be significantly improved even in the face of large datasets. Often, a simple tweak such as an SQL query rewrite or the introduction of a buffer layer to reduce client spoon-feeding effects, can have an enormous positive effect on performance. The use of application level logging in such cases is very important. Testing - to the point of almost becoming obsessive with shaving off milliseconds from important processes - can also be extremely helpful in pinpointing the relevant areas where improvements need to be made. Constant minor tweaks and improvements are a daily aspect of life when dealing with large scale complex installations supporting millions of users.

Have a look at our Obulus Platform presentation at: http://www.charonite.com/resources/obulus.php

* And if you're someone passionate about multi-threading, high performance processing, distributed algorithms, etc. drop us an email at jobs@charonite.com.

Simple User Interfaces

One aspect of software development that is unfortunately often overlooked in the rush to get the application released on time is the user interface. Simple user interfaces take up more time to design than a complicated looking user interface. An analogy exists in writing: it is sometimes easier to write a couple of pages on a particular topic than a brief and concise one pager.

At Charonite we particularly like clean interfaces such as those on Google's homepage and products, the Apple iPhone app home screen, Microsoft's ribbon in the Office suite of products, 37 Signals' web-based applications, the Netherland's train kiosk user interface and many others. Our software needs to run in a variety of different environments and hardware platforms including web-based applications running inside a normal Internet browser, specialised PDAs such as the SmarTerminal or the Motorola MC75, and indoor / outdoor touchscreen based kiosk interfaces such as the Park and Go terminals.

The Charonite User Interface design process has been refined over the years and generally consists of the following steps:

• Initial meetings with the client to identify the different features and functions together with the context in which the applications will be used
• Reusing existing screens and user interface solutions that may exist in our products, while ensuring that the resulting interface conforms to the Charonite User Interface guidelines
• Sketching the initial set of screens and use cases and getting rapid feedback from the client
• At this stage the actual intended deployment platform of the application needs to be considered:
• Web-based Obulue Platform applications need to load fast and have as much interactivity as possible using Ajax techniques and Flash based interactive graphs and charts
• PDA applications need to fit in information in a very constrained space on devices that may have different capabilities (for example, finding a solution to neatly display a form that has 80 fields mandated by law, in a tiny rugged PDA screen)
• Touchscreen kiosk based applications need to be simple and easy to use in a highly modal manner (our quick evaluation method is to see if you can use the kiosk application while wearing gloves)
• Vehicle based user interfaces for our future IDITES technology and law enforcement applications require special considerations in mind, especially when information needs to be displayed to a driver in a manner that does not distract drivers when the vehicle is in motion or in pursuit of another vehicle
• Refining the sketches and creating more polished mockups using rapid diagramming tools such as Visio or SmartDraw
• Creating initial prototypes and designs that the end clients can play around with and give feedback
• Iteratively refining the screens of the initial prototypes to get at the final application screens

And then repeating the above for the next version!

We recommend the following resources on UI design and usability:

- Jakob Nielsen's Web Usability Website
- Alan Cooper's About Face
- Bill Buxton's Sketching User Experiences

Are you passionate about user interface design and want to work on a variety of different platforms and interesting new projects? Charonite's hiring - drop us a mail on jobs@charonite.com.

Reliable Applications

Reliability and 24x7 accessibility are one of the most valued attributes of software, especially web-based applications that need to be available on demand without interruption. Charonite has gathered a lot of operational experience over the years that enables us to minimise downtime while increasing the overall reliability of our web-based applications.

Some practical tips on what we found to work in increasing the reliability of applications during development:

• Process data in steps that can be handed over to another machine (see MapReduce for more information)
• Research data structures and associated algorithms appropriately, keeping in mind that when dealing with large datasets, some non-obvious choices may be the most appropriate (for example, use Merge Sort rather than Quick Sort)
• Have resume and rollback facilities for each data processing step
• Split large data sources into manageable chunks, giving calling applications the chance to have pre-defined breakpoints and pause opportunities, while giving rise to a predictable processing pattern
• Follow good software engineering practices to modularise code and reduce dependencies via the use of appropriate parameter structures
• Use workflow automation tools to define processes accurately and with less error
• Use ready-made platform components and solutions (such as those available on the Obulus Platform)
• Utilise test automation extensively to reduce the risk of errors creeping in code
• Use REST parameters as much as possible and spread out distributed applications over as many servers as practical to reduce load and increase overall protection from single points of failure
• Favour APIs and repeatable design standards over ad-hoc one-off designs
• Monitor resource usage intensively for signs of increasing memory usage or excessive CPU usage together with peak resource usage levels: it is very rare to have an application that needs to use 100% of CPU time for extended periods of time

We are also currently working on perfecting the Charonite Smart SaaS solution offers seamless integration of online and offline working modes, with automatic realtime data replication and graceful failover when a network connection fails. All Obulus applications in the future will automatically benefit from these features via the distributed data layer.

Our goal is to help developers create reliable and robust web-based applications that run without interruption, while enabling customers to have the confidence to switch over from more traditional desktop based applications to network hosted applications in full knowledge that their application and data will be available at critical times.

Intelligent Software Design

At Charonite we believe that software developers and designers should always provide an intelligent solution to the user's needs, no matter how small or big the problem that needs to be solved. Intelligent design requires more effort and attention to detail, but keeps the end user satisfied.

The Obulus Platform was designed in a manner that encourages intelligent software design by providing ready-made solution templates, code and database design patterns that have been tested and designed in a flexible and scaleable manner.

The use of design patterns is encouraged by using the Obulus Platform, which utilises a loose Model-View-Controller pattern (with the Model and Controller generally coded in C/C++ and the View using PHP/C#) together with support creational, structural, behavioural and concurrency patterns.

A set of naming and coding conventions and emerging Quality Assurance documents that aid in guiding the whole development process ensure that the resulting solutions are of high quality and inbuilt intelligence. Software testing, adopted from Agile methodologies, is extensively used, and support for synthetic data generation capabilities is being added in the next generation of the Obulus Platform to help developers test their applications thoroughly with minimal test environment and test case setup effort.

Essentially the whole process boils down to incessantly answering a simple question: How can our application serve the customer intelligently?

Annual Winter Holiday 2009

At Charonite we take pride in doing our best to keep the whole team happy and productive, by providing an incentives-based environment for growth and personal development, while showing appreciation towards our work colleagues. One of the ways that we encourage team spirit is to take everyone on a short break during December (with a similar short break in August, when the weather in Malta is always guaranteed to be sunny). Our winter holiday tradition now goes back to 2007, when we went to Pisa and Florence, and to Venice in 2008.

This year we decided to go to the vibrant capital city of Spain, Madrid. Madrid was literally packed full of people and you can say that we saw the "mad" in Madrid first-hand! Madrid has a lot of nice open air markets, a rich architectural heritage and various shops.

A nice tradition in Madrid is to gather around at open air food markets to eat tapas, a practice that evoked our memories of Asia. The tapas were delicious, albeit a bit difficult to get hold of at times - balancing a glass of wine, a plate of oysters, some bread and cheese and whatever else is on offer from the stalls while gently elbowing your way to a coveted seating place is an art of its own.

The first place we visited was the Museo Reina Sofia, which houses various important works of art by Spanish artists including Dali, Picasso, Gris, Miro, Gonzelez, Gargallo and others. The auestere, black and white "Guernica" painting by Pablo Picasso is one of the main highlights of this museum, commanding almost a whole room on its own - a reminder of the tragedies that war can inflict on people.

One of the highlights was a Flamenco show at Cardamomo, a cosy Flamenco bar that was packed full of people watching the beautiful display of guitar music (toque), dancing (baile) and singing (cante). The show proceeded in different stages with male and female dancers taking turns and finally coming together in a nicely orchestrated show. We definitely recommend watching a Flamenco show whenever in Spain to savour the culture and traditions of the country.

Another highlight of our visit was an evening out at the Restaurante Botin, the world's oldest restaurant according to the Guiness Book of Records, founded in 1725 (which also claims to have had the painter Goya working as a dishwasher there!). We ordered a delicious suckling pig, cooked in the traditional Castilian way for the whole party, all washed down with caraffes of Sangria. Of course, vegetarians in our group also had plenty of food choices but Madrid does seem to be a mini-paradise for meat-lovers (especially with the numerous "Museo del Jamon" shops everywhere).

No trip to Madrid could be considered complete without a visit to the Museo Nacional del Prado, which hosts one of the worls largest collection of fine art, including El Greco, Goya, Velazquez, Bosch, Titian, Rubens, Raphael, Botticelli, Caravaggio, Durer, Rembrandt and many others. The long queue to get inside the museum was definitely worthwhile and it was interesting to see how people on our team interpreted the art in different manners.

In all, it was an enjoyable trip to Madrid, and we'd like to take this opportunity to wish you all a happy new year!

p.s. Interested in joining our team? Drop us an email on careers@charonite.com. See you next year!