De­vel­op­ing HTML5 and Hy­brid Apps for Mo­bile De­vices

HTML5 is a mark-up lan­guage that is used to struc­ture and present con­tent on the World Wide Web. Mo­bile apps de­vel­oped with HTML5 have a dis­tinct ad­van­tage over na­tive apps. They can be used on any plat­form and are com­par­a­tively in­ex­pen­sive to de­velop. Th

OpenSource For You - - Contents - By: Vi­nayak Vaid The au­thor works as an au­to­ma­tion en­gi­neer at In­fosys Limited, Pune. He has worked on dif­fer­ent test­ing tech­nolo­gies and au­to­ma­tion tools like QTP, Se­le­nium and Coded UI. He can be con­tacted at vinayak­vaid91@gmail.com.

Web traf­fic anal­y­sis tool StatCounter in­di­cated that as on March 2017, In­di­ans ac­cessed the In­ter­net through their mo­biles nearly 78 per cent of the time com­pared to us­ing their desk­tops to go on­line just 22 per cent of the time. This has al­tered the way in which com­pa­nies, con­tent providers and firms in­ter­act with their cus­tomers.

They are now shift­ing more to­wards mo­bil­ity to usher in new trends in their busi­nesses and to reap the max­i­mum prof­its. But there is one bot­tle­neck that can hurt the tran­si­tion to mo­bile phones and that is the preva­lence of dif­fer­ent mo­bile op­er­at­ing sys­tems. Though Ap­ple’s iOS and Google’s An­droid OS are the mar­ket lead­ers, other op­er­at­ing sys­tems like Black­Berry and Win­dows can’t be writ­ten off straight away. Dif­fer­ent OSs re­quire the use of dif­fer­ent lan­guages that the re­spec­tive plat­forms sup­port (iOS uses ob­jec­tive C whereas An­droid uses Java). This also im­plies de­vel­op­ers and testers must have the skills needed to work in the dif­fer­ent lan­guages. Ad­di­tion­ally, up­dates have to be rolled out sep­a­rately for the in­di­vid­ual OSs, which adds to the cost borne by the app de­vel­op­ment com­pa­nies.

HTML5 has proven to be a boon to the mo­bile ap­pli­ca­tion de­vel­op­ment mar­ket. HTML5 apps have many ad­van­tages over na­tive apps. They are cheaper, eas­ier to cre­ate and main­tain, and can be de­ployed on dif­fer­ent plat­forms with­out any ad­di­tional costs. Also, users do not need to in­stall new up­dates to use the lat­est func­tion­al­i­ties in­cor­po­rated in the app. Or­gan­i­sa­tions, these days, are look­ing at HTML5 mo­bile app de­vel­op­ment to stream­line im­ple­men­ta­tion, as well as to

re­duce costs and com­plex­ity. Also, Cas­cad­ing Style Sheets (CSS) and JavaScript can be com­bined with HTML5 to pro­vide a high-end UI ex­pe­ri­ence and val­i­da­tion sup­port.

How HTML5 mo­bile ap­pli­ca­tion de­vel­op­ment works

HTML5 is a mark-up lan­guage used to struc­ture and dis­play con­tent on web­sites.

It pro­vides ‘write-once-run-any­where’ method­ol­ogy, which makes dis­tri­bu­tion much eas­ier than the na­tive apps. It con­tains a set of Web pages op­ti­mised for mo­bile de­vices and to de­liver high-end video and au­dio data ma­nip­u­la­tion ca­pa­bil­i­ties, graph­ics han­dling and off­line sup­port.

It also adds el­e­ments like form con­trols, mul­ti­me­dia com­po­nents and other APIs that sup­port geo lo­ca­tion ser­vices and drag-and­drop op­er­a­tions. Al­most all pop­u­lar browsers sup­port HTML5, which en­ables de­vel­op­ers to im­ple­ment this lan­guage across dif­fer­ent plat­forms and de­vices.

Although HTML is sup­ported by al­most all browsers, a slight dif­fer­ence in the mo­bile de­vices and browsers may af­fect how an ap­pli­ca­tion works and its look and feel. To over­come this, apps are de­vel­oped at the level of the low­est pos­si­ble de­nom­i­na­tor so that they can work ef­fort­lessly on high-end ver­sions. Now let’s look at how the de­vel­op­ment of HTML5 pow­ered mo­bile ap­pli­ca­tions takes place.

Gen­er­ally, the de­vel­op­ment takes place with the help of var­i­ous frame­works avail­able in the mar­ket, each with its own pros and cons, which we will dis­cuss later. These frame­works con­tain var­i­ous li­braries of CSS and JavaScript files that app de­vel­op­ers can use for rapid de­vel­op­ment. Some frame­works also have the ca­pa­bil­ity to han­dle most of the is­sues aris­ing out of the apps on their own. HTML is based on the Doc­u­ment Ob­ject Model (DOM), which you can think of as a tree-like log­i­cal struc­ture used to ac­cess and ma­nip­u­late a doc­u­ment or Web page. Some­times, nav­i­gat­ing through a com­plex and lengthy DOM can slow the ap­pli­ca­tion; so these frame­works can help pro­gram­mers to im­prove the per­for­mance by re­cy­cling and reusing dif­fer­ent DOM com­po­nents. The use of a frame­work also makes it ef­fort­less to im­ple­ment var­i­ous func­tion­al­i­ties such as screen tran­si­tions or list scrolling, which de­pend on JavaScript. As a re­sult, it be­comes eas­ier for begin­ners also to de­velop apps that can pro­vide a high-end user ex­pe­ri­ence (UX).

Hy­brid apps: The fu­ture

Although HTML5 mo­bile app de­vel­op­ment is catch­ing on fast and has come a long way, it still can­not com­pete with some of the ca­pa­bil­i­ties pro­vided by na­tive apps, like multi- touch ges­tures and smooth in­te­gra­tion with built-in mo­bile com­po­nents, such as GPS, cam­eras, ac­celerom­e­ters and con­tacts. Off­line stor­age and se­cu­rity are the other lim­i­ta­tions of HTML5 apps, which also lose out to na­tive apps on per­for­mance be­cause the lat­ter are usu­ally pack­aged with ma­chine code.

To get the best of both worlds, we can com­bine both HTML5 and na­tive apps to build hy­brid apps. A sim­ple hy­brid app is built us­ing HTML5, JavaScript and CSS, but is wrapped in­side a thin na­tive con­tainer known as We­b­view (which you can think of as a win­dow­less browser that’s con­fig­ured to run full screen). This en­ables mo­bile ap­pli­ca­tions to ac­cess a de­vice’s hardware ca­pa­bil­i­ties like the cam­era, etc, through JavaScript APIs like PhoneGap. Hy­brid apps can also sup­port off­line op­er­a­tions and mul­ti­touch ges­tures.

Though they look and feel like na­tive apps due to be­ing wrapped in­side con­tain­ers, hy­brid apps still lag be­hind na­tive apps a lit­tle bit in terms of per­for­mance due to the ex­tra lay­ers of ab­strac­tion in­volved in build­ing them. You al­ready know that na­tive apps are in­stalled on the de­vice from the OS’ app store and HTML5 apps are viewed through Web browsers. But it may in­ter­est you to know how hy­brid apps are in­stalled or used. There are ac­tu­ally two ways -- lo­cal and server -- to im­ple­ment hy­brid apps in the de­vice.

Lo­cal: Just like a na­tive app, one can pack­age the source code con­tain­ing HTML and JavaScript files in­side the mo­bile bi­nary.

Server: Al­ter­na­tively, one can also use a server to im­ple­ment the mo­bile ap­pli­ca­tion.

If hy­brid apps are well writ­ten, it is ex­tremely dif­fi­cult to de­ter­mine how they have been de­vel­oped. Since these apps com­bine the best of two worlds, they are def­i­nitely the fu­ture in mo­bil­ity and can help or­gan­i­sa­tions re­duce the costs and li­a­bil­i­ties as­so­ci­ated with de­vel­op­ing na­tive apps.

Frame­works for hy­brid app de­vel­op­ment

Hav­ing looked at HTML5, na­tive and hy­brid apps and their pros and cons, let’s take a look at the top eight frame­works that you can use to de­velop your own hy­brid mo­bile ap­pli­ca­tions. The fol­low­ing top eight have been se­lected based on my own ex­pe­ri­ence and us­age.

1. Ionic: If you are a be­gin­ner in the world of hy­brid mo­bile ap­pli­ca­tion de­vel­op­ment, then the Ionic frame­work is the way to go. It is an open source frame­work (pro­tected un­der the MIT li­cence) with a fo­cus on per­for­mance and gets reg­u­larly up­dated, keep­ing it ahead of its com­peti­tors. It can sup­port iOS, An­droid and Win­dows plat­forms. One of

its strik­ing fea­tures is the pres­ence of An­gu­larJS at its core and sup­port for the Syn­tac­ti­cally Awe­some Style Sheets (SASS) CSS ex­ten­sion. To in­ter­act with mo­bile hardware and other de­vice ca­pa­bil­i­ties, it makes use of Apache Cor­dova. To learn more about this frame­work, you can visit https://ion­icframe­work.com/.

2. Onsen UI: This is a com­par­a­tively new frame­work that is mov­ing up on the de­vel­op­ment scene very fast. It is also open source and li­censed un­der Apache, and has two ver­sions -- Onsen UI and Onsen UI2. It is some­what sim­i­lar to the Ionic frame­work in terms of how it works with An­gu­larJS, but Onsen UI2 is re­ally use­ful be­cause it is plat­form ag­nos­tic. If you are com­fort­able with jQuery, you can use jQuery too. It is a very flex­i­ble and per­for­mance driven frame­work. For more in­for­ma­tion, you can go to https://onsen.io/. 3. jQuery Mo­bile: This is one of the old­est frame­works still in use, hav­ing been first re­leased in 2010. It is an HTML5 mark-up based frame­work. This means that most of the work is done through HTML5. Apps de­signed us­ing this frame­work will run on any­thing that sup­ports the HTML5 stan­dard. It has a lot of doc­u­men­ta­tion and on­line sup­port avail­able. Though it has some per­for­mance con­cerns, it still is the most widely used af­ter the Ionic frame­work. You can read more about it on https://jquery­mo­bile.com/.

4. Sen­cha Touch: This is one of the old­est li­censed tools and is mostly used by en­ter­prises for build­ing cross­plat­form, high-per­for­mance mo­bile apps quickly and ef­fec­tively. It uses Apache Cor­dova and PhoneGap to sup­port de­vice hardware. It comes pack­aged with readyto-use wid­gets that can work on all pop­u­lar plat­forms like iOS, An­droid, etc. You can visit https://www.sen­cha. com/ for more in­for­ma­tion on Sen­cha Touch.

5. In­tel XDK: This is new in the hy­brid mo­bile app frame­work space but due to its or­dered work­flow and ready-to-use tem­plates, it is be­com­ing the favoured choice for de­vel­op­ing cross-plat­form apps. It con­tains all the tools re­quired, from the de­vel­op­ment to the test­ing of HTML5 hy­brid apps.

6. Kendo UI: This is sup­ported by Telerik. It makes use of jQuery for de­vel­op­ment. It can also in­ter­act with An­gu­larJS and the Boot­strap UI frame­work. It is avail­able as an open source as well as a com­mer­cial ver­sion, though the for­mer has fewer fea­tures. Do visit http://www.telerik. com/kendo-ui for more in­for­ma­tion on Kendo UI. 7. Frame­work 7: This is a to­tally free and open source frame­work li­censed un­der MIT and used only for de­vel­op­ing iOS and An­droid apps. It is not a cross-plat­form frame­work but due to its look and feel, seems like a na­tive app. It is be­ing widely used nowa­days. You can find a num­ber of apps on the Ap­ple App store and Google Play store that have been de­vel­oped us­ing Frame­work 7. If you wish to read more about it, visit https://frame­work7.io/. 8. Famo.us: This frame­work is mostly used when you have to deal with high-end ren­der­ing and graph­ics for games. It is an open source frame­work and can pro­vide hy­brid apps with the look of na­tive apps. Visit https://fa­mous.co/ for more in­for­ma­tion.

Mak­ing the right choice

Mo­bil­ity is def­i­nitely the fu­ture of tech­nol­ogy. With the en­try of so many tech­nolo­gies and frame­works, the is­sue is of mak­ing the right choice when de­vel­op­ing mo­bile ap­pli­ca­tions. This choice de­pends on var­i­ous as­pects such as the mo­bile plat­forms to tar­get, the dis­tri­bu­tion of the ap­pli­ca­tions, cost con­sid­er­a­tions, the tech­ni­cal com­pe­tence of the de­vel­op­ment team, mo­bile hardware ca­pa­bil­i­ties, se­cu­rity, the tar­get au­di­ence, the user ex­pe­ri­ence and the time to mar­ket. Watch­ing how HTML5 has ad­vanced over the past few years, one can def­i­nitely spec­u­late that the fu­ture is bright for Web de­vel­op­ers who want to break into the world of mo­bile ap­pli­ca­tion de­vel­op­ment.

Fig­ure 4: Source code in the jQuery Mo­bile frame­work with the ‘data-role’ and ‘data-theme’ mem­bers

Fig­ure 3: Source code snip­pet in the Ionic frame­work

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.