Us­ing the Onsen UI with Monaca IDE for Hy­brid Mo­bile App De­vel­op­ment

To­day, a mo­bile app is a must for or­gan­i­sa­tions that want to en­sure a strong pres­ence in a chal­leng­ing mar­ket. There are dif­fer­ent pop­u­lar mo­bile op­er­at­ing sys­tems and each has its own user base. To de­velop mo­bile ap­pli­ca­tions sep­a­rately for all these dif

OpenSource For You - - Contents -

Cross-plat­form mo­bile apps work on mul­ti­ple op­er­at­ing sys­tems with a sin­gle code base. There are two types of cross-plat­form apps. Na­tive cross-plat­form apps: Most mo­bile op­er­at­ing sys­tems have their own SDKs to cre­ate mo­bile apps.

These work on spe­cific pro­gram­ming lan­guages. An­droid de­vel­op­ers, for ex­am­ple, pre­fer the Java lan­guage while de­vel­op­ers work­ing on iOS pre­fer the Ob­jec­tive C and Swift pro­gram­ming lan­guages. In cross-plat­form app de­vel­op­ment, we use the APIs pro­vided by the na­tive SDK in an­other pro­gram­ming lan­guage which is not sup­ported by other ven­dors. With uni­fied APIs, code writ­ten in one par­tic­u­lar lan­guage will work on mul­ti­ple plat­forms -- that’s how the na­tive cross-plat­form app works.

In this kind of ap­proach, the fi­nal app still uses the na­tive APIs, and it achieves nearly the same per­for­mance as na­tive apps. Nowa­days, the GUI plays a ma­jor role in mo­bile app de­vel­op­ment. It is some­what com­plex to im­ple­ment rich GUIs us­ing uni­fied APIs in na­tive cross-plat­form apps. For this rea­son, many de­vel­op­ers pre­fer hy­brid HTML5 cross-plat­form apps.

Hy­brid HTML5 cross-plat­form apps: Al­most 60 per cent of the code of any mo­bile ap­pli­ca­tion deals with the GUI. An­droid, iOS and Win­dows all have browser com­po­nents in their SDKs. By lever­ag­ing these com­po­nents, de­vel­op­ers can use HTML5 to de­sign mo­bile ap­pli­ca­tions. So the fi­nal ap­pli­ca­tion is built us­ing the na­tive frame­work and HTML/JavaScript in a Web view. This is the rea­son why it’s called a hy­brid cross-plat­form app.

Fig­ure 1 gives a com­par­i­son be­tween na­tive apps and hy­brid apps.

One of the lim­i­ta­tions of hy­brid HTML5 based mo­bile ap­pli­ca­tions is that their look and feel is not as good as that of na­tive apps. Onsen UI is a UI frame­work that re­solves this is­sue by pro­vid­ing a rich UI, which pro­vides a look and feel that’s very sim­i­lar to that of a na­tive app.

Onsen UI is a Web com­po­nent driven UI frame­work for Cor­dova/PhoneGap apps. It sup­ports all kinds of JS frame­works and works with An­gu­larJS 1 and 2.

Pop­u­lar hy­brid frame­works

There are many hy­brid mo­bile frame­works avail­able in the mar­ket but none of them pro­vide ex­actly the same look and feel as the na­tive apps. All do the same things based on the re­quire­ments, so de­vel­op­ers can choose from these frame­works.

Let’s take a look at how a few pop­u­lar hy­brid frame­works com­pare with each other.

Ionic: This is a new en­trant, and is quick and re­li­able. It is based on the An­gu­larJS frame­work. It can be used just for hy­brid mo­bile ap­pli­ca­tions, while a few func­tion­al­i­ties will also work with or­di­nary Web ap­pli­ca­tions. It does not have a very large com­mu­nity

back­ing it, yet it is a some­what sta­ble frame­work now. How­ever, as An­gu­larJS 2 has come out into the mar­ket, de­sign­ers are con­tin­u­ally rolling out im­prove­ments and new fea­tures.

Onsen UI: To a great ex­tent, this is very sim­i­lar to

Ionic. Ev­ery­thing said about Ionic also ap­plies to Onsen UI. One of its plus points is that it can be used for clas­sic Web de­vel­op­ment. Cur­rently, it has a small com­mu­nity, which is grow­ing slowly.

Kendo UI: Kendo UI is built around the JQuery frame­work. It can also be used with An­gu­larJS. There are two ver­sions -- one is free and the other is the com­mer­cial ver­sion. It also has theme builder sup­port, of­fer­ing many themes that look sim­i­lar to na­tive themes. It is used for mo­bile and clas­sic Web de­vel­op­ment.

Sen­cha Touch: Sen­cha Touch uses vanilla JavaScript as the core (Ex­tJS). It used to be faster, but re­cent Ex­tJS changes are mak­ing it slower. It is a com­mer­cial prod­uct with a very good IDE.

JQuery Mo­bile: This is an HTML5 mark-up driven frame­work. JQuery is the ad­di­tional layer of JavaScript. It is very easy to un­der­stand and im­ple­ment. It is very slow com­pared to other frame­works, though, but has the sup­port of a very large com­mu­nity.

Famo.US: Famo.US is built around An­gu­larJS and fol­lows a com­pletely dif­fer­ent ap­proach for mo­bile de­vel­op­ment. It is a 2D/3D en­gine for game de­vel­op­ment and cur­rently is one of the faster frame­works. But there are very few sam­ples avail­able and very lit­tle com­mu­nity sup­port.

An­gu­larJS is dif­fi­cult to un­der­stand com­pared to JQuery. Many peo­ple like the JQuery frame­work, but it is slow com­pared to other frame­works.

Monaca IDE, a great tool for Onsen UI

Monaca is a de­vel­op­ment plat­form for hy­brid mo­bile app de­vel­op­ment with PhoneGap/Cor­dova. It is very easy to use and in­te­grate with ex­ist­ing work­flows. It also sup­ports Cloud IDE, re­mote on­line build and CLI de­bug­ger.

In­stalling Onsen UI

There are dif­fer­ent ways to work with Onsen UI. Let’s first de­ploy it with the Monaca CLI.

First, we need to in­stall Node.js from The next step is to in­stall the Monaca CLI us­ing npm.

npm in­stall -g monaca

By in­stalling the Monaca CLI, we will get a com­mand line in­ter­face for Onsen UI de­vel­op­ment. For GUI mode, in­stall the Monaca Tool­kit from the link https://monaca. io/lo­calkit.html

Now, let’s cre­ate a project based on Onsen UI:

monaca cre­ate hel­loon­senUI

Choose any frame­work that you want for de­vel­op­ment. Once you have se­lected one, down­load the ap­pro­pri­ate tem­plate and cre­ate the project.

We will now run this project on the de­vice by us­ing the fol­low­ing com­mands:

cd hel­loon­senUI monaca pre­view # pre­view in the browser

monaca de­bug # Run on the de­vice in de­bug­ger monaca re­mote build # Build the app monaca re­mote build an­droid # Build the an­droid app (Choose any OS, which you want to build)

Fig­ure 1: Na­tive apps vs hy­brid apps

Fig­ure 2: In­stalling Monaca CLI, an Onsen UI tool­kit

Fig­ure 4: Choos­ing a frame­work and ver­sion

Fig­ure 5: App pre­view

Fig­ure 3: Cre­ate a project

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.