Looks like HTML5 is the next buzz technology that every software consultancy company is desperately trying add their competence list. For some reason, it’s something that is predicted and announced to be in the next generation mobile devices. For example Tizen is said to support HTML5 and Samsung Bada mobile OS’s SDK/IDE already provides project templates to create HTML5 mobile apps. In addition to all this, web is full of different frameworks, which provide ways to build HTML5 based applications. I think one of the biggest expectations is that HTML5 is the “real cross platform technology for mobile application development”. Unfortunaly, I disagree.

I’ve been playing with HTML5 for couple of weeks now and I thought that I should share my view of HTML5 based mobile application development. My background is on traditional software development, programming languages and toolkits such as C/C++, Qt, iOS/Objective C, Python and Java. There is also a good reason, why I have never been interested in web technologies and reason is I don’t like the way web sites are built. For example I think the mix of HTML, Javascript and PHP looks confusing and structuring the code is rarely looks nice.  Another a big obstacle for me is that, I don’t like Javascript. I think, it’s more like a “toy programming language” for kids when comparing it to C++, Objective C, Java and Python.

But as I said, I’m not a web developer. It might be that I just haven’t seen a well structured web site or my inner resistance is just too much to let me to learn these technologies well enough.

What is HTML5?

Personally, I think that HTML5 is just a next version of HTML standard, which introduces a couple of new tags like <video>, <audio>, and 2d <canvas> elements, but also enables offline functionality and a web storage to store data locally. For styling there is CSS(3), which brings more cool things like animations/transitions among other things. CSS is used for layout and to style HTML elements so that you can have for example one CSS for mobile browsers and other for desktop browsers.  In the end, the work is done  mostly using Javascript. Javascript is used for creating and modifying HTML elements dynamically and to implement required logic. HTML5 has also been said to replace flash at some point. This is pretty much how I understand what HTML5 is. Of course I didn’t list everything here, but this is it in a nutshell.

Designing HTML5 Mobile Application

HTML5 for mobile application development is where all the buzz comes in at the moment. I think, we can thank mostly media and marketing people  for this. They are trying to sell this technology as the next big thing. I think no one asked that from the mobile app developers, but let’s try to understand how you can build a mobile app using HTML5. To be honest, HTML5 itself doesn’t help much if you want to make a mobile applications. Here is a picture how I see what you need for your web app (Note: the blocks should be right, but not sure about the order):

• Native API – It’s very rare case that your application doesn’t need anything from the platform. It needs at least one thing – a platform specific application wrapper. This means that your application needs also a native API. If the application uses platform services, through a Javascript API, then it needs to have access to native APIs too.
• “Web Engine” – HTML5 application needs an instance of a some kind of rendering engine to show the UI of the HTML5 mobile app. On iPhone, Android or Qt based platforms, it is WebKit based engine. Web engine provides the main view for the application.
• UI Framework – HTML5 doesn’t provide components like “Views”, which you can use for doing transitions between application views. A view usually contains buttons, lists, labels etc, which are organized using CSS to define a layout. Because views and other platform specific components are not provided by HTML5, you need to pick a one framework for that or implement it yourself.
• Platform Service API - HTML5 doesn’t provide platform specific services e.g. getting a list of contacts or list of captured images from a phone, but HTML5 provides geolocation, if that has been implemented by the Web Engine.  For platform services you need a yet another 3rd party API.
• Application Code i.e. the HTML5 code - The actual application code, which usually is couple of lines HTML and too much Javascript and CSS.
• Platform specific application wrapper – In order to be able to run your HTML5 application, it must be packaged properly for the target platform. There must be a binary that can be executed to start the application. Usually, this also creates the web engine instance for showing a “WebView, which loads the actual HTML5 content.

UI Frameworks

When starting to create a mobile application, you need one or more views and a way to navigate between views. You can of course do this like web pages do i.e. using links between pages, but this approach looks just like a website. Other option is to do it like mobile apps do, using views, navigation bars, tabs, split views, fragments and so forth. If you decide to go with the latter case, you need a 3rd party framework to do the trick. There are couple of options like Sencha Touch, jQuery Mobile or Dojox Mobile. (I bet there are even more frameworks…) I have tried both Sencha Touch and Dojox Mobile and I can’t say that I’d love those. Please, post a comment if you are experienced of jQuery Mobile and share your thoughts about it.

Personally, I think that Dojox Mobile is a pain to use. It’s buggy and when trying to create dynamic UI instead of set of predefined views and transitions and it’s quite difficult to use. Dojox Mobile lacks of documentation, especially when it comes to dynamic view management and styling Dojox items using CSS.

Platform Services

It’s quite a rare case (I think) that mobile application doesn’t need anything from a platform. But if it needs, then it need to have access to the services provided by the platform. For this, the access point is Javascript API for HTML5 app. For example you can use Phonegap for this. Phonegap’s goal is to provide unified Javascript API for platform services between different platforms such as iOS or Android.

I did a Contact application tutorial based on Phonegap and Sencha Touch and the result was that I was quite amazed how much code it required to create a simple two view app. It only listed iPhone contacts in a list and when tapping a contact, it showed the contact details on another view. Only implementing a list of the contacts required quite a lot of work. If I’d need to display contacts using iOS and native Objective C API it takes only 6 lines of code! For me, it is quite a big difference to achieve the same goal using HTML/Javascript or using Objective C.

Even though Phonegap provides Javascript access to the platform services, there are few things to remember. Phonegap implements quite a many APIs, but some of them are not available for all the platforms. Also a Phonegap based application is only cross platform for all the platforms supported by the Phonegap. If you want to run app on a desktop, then you’re stepping outside to the cross platform world.

Making a Real HTML5 Application

So the biggest thing, why HTML5 is the next big thing is the promise of a cross platform. This is sort of true, if living in a fantasy world, but in the end it doesn’t apply to the real world. You can create cross platform HTML5 application, if you keep using plain HTML5 and not using any of the 3rd party frameworks… Wait no, it’s not a case after all. Depending on which web engine runs your application, it might lack some of the HTML5 features or you need to make sure to check all the browsers specific features by yourself. This is especially true when using CSSs where it’s not so rare case that you need to set browser specific styling attributes for each browser separately.

If you are using Phonegap, your application depends on the Phonegap API. This naturally means that you can’t port your application to the desktop  or other platforms not supported by Phonegap without modifications. I admit, that Phonegap supports different mobile platforms quite well. Also depending on Phonegap APIs that you use, it might or might not work on another platform.

If you are trying to access a file outside of your application’s sandbox, you might encounter a problem. For security reasons HTML5 apps can’t access outside of the app root directory. In iOS you are able to access Documents outside your application bundle, if using native APIs/Objective C, but afaik, this is not possible using HTML5. File access might became a problem depending on the application.

I’ve have used to use certain set of tools for mobile application development. For Qt, I use Qt Creator, XCode for  iOS development and I’d use Eclipse for Android development. For HTML5 development there are also options like a free visual editor Maqetta for building UIs and I bet there are bunch of commercial tools too. The most of the web browsers include or can include add-ons like Firebug for web development. Still, I think that the tooling support for Web development is really poor. Depending on your application, you might not have any static views and everything needs to be built dynamically using Javascript. In other words, this means that tools like Maqetta, is actually quite useless, at least in my case.

World would be a better place, if Javascript wouldn’t exists. I personally like programming languages that are typed languages and you can use them in object oriented way. And before you say, that you can use JS in a OO way, I know that, but it’s far from the true OO languages. Yet, another annoying feature of web development is that errors are sometimes really hard to catch. My humble opinion is that javascript belongs to the “toy” category and can’t be considered as a good programming language. It’s interesting to see, how Google’s Dart will change web development in few years.

Fast application development with HTML5

I said in the beginning that I’ve been using HTML5 only a few weeks now, so I can’t say that I’m a HTML5 specialist. But I can say, that I have an opinion of HTML5 mobile app development. If you read the previous chapters, you noticed that HTML5 is not really a cross platform, but is it a fast technology to develop applications?

The answer is no. I can’t compare it to Android development, but I can compare it to Qt/QML and iOS development. QML is definitely the fastest tool to create UIs and to build really complex applications in very short time. Even, if doing it from scratch and without using things like Qt Quick Components, I still consider it’s very fast toolkit. When speaking of Qt and QML it’s not fair to compare it to HTML5 because I’ve been doing Qt development so long, but how about iOS development then?

I published my first iOS application about six months ago and I started to develop it from scratch. I mean, that I didn’t have any previous experience of Objective C, iOS UiKit or Core Data. It took few days to learn Objective C in a way that I could really start to build my application and after that, it was really easy to create quite complex set of views. I can truly say, that after a few days learning of Objective C, I really felt that I knew how I can build my application and it started to progress fast.

After few weeks of learning HTML5, I can’t say that I feel as confident as I felt when learning Objective C. Actually, I can say that my opinion is that HTML5 is slow way of developing apps. Comparing HTML5 development to iOS development or Qt/QML development I’d say that I rather create two native apps instead of a one HTML5 application.

 HTML5, Is it Good for Anything?

Don’t get me wrong here. Even though, I’m not a big fan of HTML5 or web technologies, I’m not saying that you shouldn’t use it. I think, it might be a good solution for a simple mobile application, which contains only a few views and mostly depends on data originated from a web service. Sounds familiar? Yes, it’s called a web page. It doesn’t matter if the “page” looks like a native app with views, but in the end it’s a web page and nothing else.

I also think, that HTML5 mobile applications are best for web service clients, but as soon as you start dealing with a content originated from a device, it might become a problem. I also have doubts how well HTML5 apps perform on mobile devices. Usually, native apps and APIs are quite well optimized for the platform requirements. Now, if you take a HTML5 app and run it on a mobile web browser, I bet it won’t have the same performance as an equivalent native app would have.

Games. I think games are one HTML5 application category that we will see grow fast. The reason for this is 2d canvas element, which makes making HTML5 games much easier. If you are familiar with Qt’s Painter, then you know pretty well what you can do with the canvas element.

Convince Me!

I need someone to convince me that HTML5 is the next big technology to develop mobile apps in the future. Now, I’m challenging you to comment this blog post and add there links to cool mobile applications, which are implemented using HTML5. I want to see apps, which are smooth with good performance and they run on two or more mobile platforms, with the same codebase. I would also like to hear how long it took to develop it.

I still have my doubts. I wonder why for example Facebook, didn’t implement HTML5 based Facebook client when they introduced new apps for iPhone and iPad? Same question goes for Twitter app. I guess, this is just a one indication that HTML5 is not mature enough technology for mobile application development yet.

So take this challenge and convince me! Thanks for reading my blog.

 

Tags: development, html5, mobile apps

This entry was posted on Sunday, December 18th, 2011 at 6:06 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.