When one talks about hybrid applications in HTML5 it is usually done in a negative way by referring to the failure that Facebook and Linkedin experienced with theirs using that technology. Because these two apps have many functions, the strategy of programming them in HTML5 may not be the appropriate one to achieve the maximum performance that a native application can have. However, other more simple applications can definitely be programmed in HTML5 and be made into hybrid applications (installed on the device but programmed in a language different from that of the platform, being run within a native “WebView” container).
There are tools which make it possible to create hybrid applications such as Phonegap, Sencha, etc. Their main functions are to allow the installation of an app programmed in HTML5 and distribute it to different platforms such as iOS, Android and Windows Phone, among others. As well as to allow the use of functions native to the devices such as push notifications, native alerts, social networks, camera and gallery. It is necessary to know that although these tools allow you to distribute your app easily to several platforms, it is not as easy as it seems.
Points that should not be overlooked when developing hybrid applications in HTML5:
- The design for each platform is different. If you want your application to be successful, you must follow the design guidelines for that specific platform. A serious error would be to use the design with the UI from iOS for the Android platform. This is very important if you want your application to be approved by Apple, in the case of iOS, since if it doesn’t make use of any native tools and the design is from a mobile web, you will have a 99% chance of it being rejected.
- Try to use the least amount of images for the design, you have the possibility of using CSS3 to make the entire UI without graphics. This will make your application load faster and thus make its use as close to that of a native application as possible. A very common error that occurs when opening an application is to see how the images are being loaded because they are not optimized or stored locally within the application.
- It is advisable to use touch events (touchstart, touchend) instead of the click event, since the latter involves a delay of several milliseconds and makes it seem like the application takes long to respond. There are also libraries such as FastClick that solve this problem.
- Tests, tests and more tests. HTML5 is a recent technology and old versions of different platforms are not compatible with some elements or simply don’t work as expected. I would suggest in the case of iOS to develop applications for iOS versions 6.1 or higher, and for Android starting with 4.0. It can sometimes happen that something does not work the same between different platforms (other than those recommended), and that is why you need to run tests of everything.
In conclusion, there have been many hybrid applications developed in HTML5 lately due to the ease with which they can be distributed to different platforms and the advantage of using only one programming language, which is a huge positive point! One just needs to remember what I mentioned before about designing them for the target platforms and verify that they work correctly not only in each of the different platforms, but also in the different versions of each platform.
