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.
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?
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):
- “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.
- 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.
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.
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.
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.
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.