HTML5 Mug

Should You Be Learning a HTML5 Mobile Application Framework?



·

Image credit: slavik_V

At the beginning of the age of the smart phone and mobile applications the choice was pretty clear; if you’re developing an Android application you use Java and if you’re developing an iOS application you use Objective C. Today, that choice is not so clear. The mobile development landscape has fragmented into three distinct areas: native, hybrid and web. Arguably, hybrid development is not exactly a distinct area since it’s more like a blurring between native and web. If you’re unfamiliar with these three terms I’d recommend taking a look at this article for some clarification.

To give you a quick overview though: native applications are coded using the native language of the device and have full access to the device’s API’s, mobile web applications are displayed through the browser and use HTML5 UI frameworks (usually) to mimic the native look and feel. Hybrid applications are somewhere between these two, for example you could package a HTML5 mobile application with PhoneGap which will allow you access to more native API’s as well as the ability to install the application on devices and distribute through app stores – this would make it a hybrid application.

What is a HTML5 Mobile Application Framework?

As I mentioned above, a HTML5 mobile framework allows developers to create a native feeling application using web technologies such as HTML, CSS and JavaScript. Mobile applications generally feature user interface elements like smooth scrolling lists with acceleration and deceleration, animations for switching between screens, pop-up pickers and scrolling selectors. As well as the user interface elements, mobile applications also typically store data locally as well as connecting to a remote data source to store or pull data from.

We could implement all of these features ourselves in our mobile web application (it is essentially just a normal web page running through a browser), but it would be an immense amount of work and would probably end up functioning awfully. Smooth scrolling lists are not easy to achieve. These HTML5 frameworks provide an easy and consistent way to implement all of these features, to a level where the difference in performance to native is not noticeable. Some frameworks are better than others in certain areas of course. My favourite framework is Sencha Touch – it is fast, stable, established and has an active development team and community. There is a ton of frameworks out there though, and those consistently mentioned among the best include:

What are the benefits?

With smart phone platforms becoming more fragmented, a one size fit’s all solution is ideal. Currently we have iOS and Android with a majority of the market share, but then there’s also the Windows Phone to worry about and now even Amazon is throwing their hat into the smartphone ring. It can make a lot of sense to use a HTML5 approach, here is a summary of the main benefits:

  • You can create your application once and deploy it to multiple platforms
  • You can utilize existing JavaScript libraries and other web resources
  • It’s easier to start creating mobile applications from a web development background

What are the downsides?

Of course, if it was always rainbows and sunshine then everybody would create HTML5 mobile apps in every situation. There are downsides to not using the native language of the device, some of the most common concerns are:

  • If the app is poorly designed, it could suffer from performance issues including slow / jagged animations
  • You have less access to device features (accelerometer, contacts etc.). Although in most cases you can gain access to these through using a hybrid solution, it may be more difficult to implement
  • You will have to wait for the platforms you are using to update to access some new features (i.e: when iOS8 is released)

Adoption of HTML5 for Mobile

HTML5 took a big blow when some big names including Facebook and LinkedIn dropped HTML5 for their mobile applications and opted for native instead. Mark Zuckerburg claimed that HTML5 was not ready yet. This fueled the fire of online debate for a long time, and without the backing of big companies like Facebook and LinkedIn a lot of people stuck to their guns and stayed with the tried and true native approach. Zuckerburg’s claim that HTML5 was not ready was a very broad statement, and the Sencha Touch team took exception to it. The engineers at Sencha even developed an application with Sencha Touch which mimics the native Facebook application called ‘Fast Book’, check out the demo below:

An attitude common among developers is to heavily criticize and to be skeptical of anything new. This can be a good thing when it leads to making sure products are stable before jumping in head first, but it can also stifle innovation and the advancement of new products. Bringing up the HTML5 vs. Native debate can evoke a harsh and bitter response, analogous to that of PC vs Mac.

Each side has proponents that will defend their side to the bitter end. I think in some cases there are emotions involved, as people may have spent years mastering their technology and when something new comes a long, perhaps with the potential to overtake it at some point, people will naturally want to stomp it into the ground. Some people will claim that HTML5 applications perform poorly in general when compared to native which is absolutely not the case today.

TJ VanTroll provided some interesting insights into the state of hybrid mobile development and people’s reactions to new technology. He links to the Gartner hype cycle and likens it to the uptake of HTML5 and hybrid technologies. He points out that the rapid spike at the beginning is consistent with developers attitudes around the time when PhoneGap was acquired by Adobe, and then the following trough of disillusionment when HTML5 was dumped by Facebook and LinkedIn. It would be accurate to say that HTML5 is past the hype now and is steadily improving and seeing practical use on a wide scale.

There’s new tools pushing the boundaries of JavaScript and the web constantly, and this same cycle could even be likened to the recent release of famo.us. There was a huge amount of hype around famo.us pre-release, especially with regard to its native like animation capabilities and performance. The release left quite a bit to be desired, another trough of disillusionment, as developers realised it wasn’t the polished product it was hyped to be. I’m certain the famo.us developers will continue to improve the framework though and reach that “Plateau of Productivity” – it has a huge amount of potential.

Looking to the future

Since the Facebook and LinkedIn debacle, HTML5 continues to make long strides of improvement. The ‘Browser Wars‘ have ensured that JavaScript has, and continues to be, pushed to its limit and continually improved. The way technology is going at the moment paints a very bright picture for the future of HTML5 mobile application development. I interviewed Phil Merrell for my eBook, and asked for his opinion on the future of HTML5 apps and his thoughts accurately reflect mine:

I think we’ll start to see more applications migrate away from native code to the web as mobile devices and browsers become more capable. Similar to how many desktop applications started off as native apps (e.g., email, documents applications), I think eventually the majority of apps will live on the web rather than on clients with native code. For this to become a reality we will also need platforms to treat web apps as a first class citizen similar to native apps, i.e., equal access to the home screen as an icon, more native device APIs, and easy fullscreen, browser-less viewing options. iOS has always flirted with this, but clearly prioritizes the consumption of apps through their app store. There will always be a place for native applications, of course, but there will be less of a need for the low level processing power that’s currently an advantage when developing apps natively. – Phil Merrell
As well as being a cool guy in general, Phil is an awesome mobile developer – when you get the chance you should check out his blog. There seems to be more and more support for HTML5 from the market leaders as well. Amazon now allows paid web applications to be sold in their Amazon store, with the release of iOS8 web apps can now utilise the full power of Safari, and Google, which has always been a web first company, blurred the lines between web and native apps by announcing their intention to blend native apps with web tabs.

Should I learn a HTML5 mobile framework?

The premise of this article is whether now is the time to start learning a HTML5 mobile framework. In answer to that, in general, I would say: yes. Of course, there’s no one size fits all solution for everybody and you’re going to have to do a little research to see what option is best in your particular circumstance.

If you’re already a Java or Objective C (or Swift) developer then I would say no. Unless you’re looking to deploy to multiple platforms or want to try your hand at something new, then there is no immediate need to learn a HTML5 framework.Whichever way the future goes, native applications are going to be around for a long time.

If you’re new to mobile application development, and especially if you have a web development background then learning a HTML5 mobile framework would be a sound choice. In the majority of cases HTML5 will perform just as well as native, and it’s only going to continue to get better in the future. It is my view that, assuming the preferences of the developer and other business factors aren’t considered, if all features of the intended mobile application can be achieved with HTML5, then HTML5 is the better choice for the obvious benefit that it can be created once and deployed to multiple platforms.

If you’re interested in learning more about HTML5 mobile application development, then you should grab the free sample chapter from my Beginners Guide to Sencha Touch eBook to see if Sencha Touch is for you.

What to watch next...