Eight Easy-to-Use Open Source Hy­brid Mo­bile Ap­pli­ca­tion De­vel­op­ment Plat­forms

Mo­bile ap­pli­ca­tions are ei­ther pre-in­stalled on phones by the man­u­fac­turer, or de­liv­ered as Web ap­pli­ca­tions us­ing server-side or client-side pro­cess­ing to pro­vide an ap­pli­ca­tion­like ex­pe­ri­ence within a Web browser. De­vel­op­ing apps for dif­fer­ent plat­forms

OpenSource For You - - Contents -

For a large num­ber of peo­ple, de­vel­op­ing a high-end mo­bile ap­pli­ca­tion is a cum­ber­some task that re­quires a lot of pro­gram­ming skills and ef­fort. To­day, it is more im­por­tant that the app you de­velop runs on all pop­u­lar mo­bile op­er­at­ing sys­tems. Hy­brid mo­bile app de­vel­op­ers are now able to write code once and build mo­bile ap­pli­ca­tions that run on the main plat­forms with no ex­tra ef­fort. The same code for the mo­bile ap­pli­ca­tion that runs on An­droid and iOS can be reused for pro­gres­sive Web ap­pli­ca­tions and even desk­top ap­pli­ca­tions.

A frame­work is re­garded as a com­plex soft­ware de­vel­op­ment en­vi­ron­ment. It in­cludes many sub-com­po­nents that help de­vel­op­ers to cre­ate their re­spec­tive apps. Sub­com­po­nents may in­clude tool sets, com­pil­ers, de­bug­gers, ap­pli­ca­tion pro­gram­ming in­ter­faces, dif­fer­ent code li­braries and many other com­po­nents. A frame­work cre­ates a strong base for mo­bile ap­pli­ca­tions. Its pro­fes­sional us­age sim­pli­fies the en­tire app de­vel­op­ment life cy­cle. De­vel­op­ers these days pre­fer to use frame­works to write apps in­stead of writ­ing an ap­pli­ca­tion from scratch and deal­ing with thou­sands of lines of code to make the app multi-plat­form com­pli­ant.

In or­der to de­velop a mo­bile app that runs on mul­ti­ple mo­bile op­er­at­ing sys­tem plat­forms, choos­ing the de­sired frame­work can be a com­plex task. Here is a list of some of the best open source mo­bile ap­pli­ca­tion de­vel­op­ment frame­works which are highly ef­fec­tive, help­ing de­vel­op­ers to write apps in an easy man­ner.

1. Frame­work 7

Frame­work 7 is re­garded as a full-fea­tured mo­bile app de­vel­op­ment frame­work for iOS. It is a free and open source mo­bile HTML frame­work for de­vel­op­ing mo­bile apps. Now it also of­fers An­droid app de­vel­op­ment sup­port and has be­come an in­dis­pens­able pro­to­typ­ing apps tool that builds a work­ing app pro­to­type very quickly.

Frame­work 7 gives app de­vel­op­ers the op­por­tu­nity to cre­ate iOS and An­droid apps with HTML, CSS and JavaScript in an easy and con­cise man­ner. It is not com­pat­i­ble with all plat­forms; rather, it mainly fo­cuses on iOS and Google Ma­te­rial De­sign to of­fer the best-in-in­dus­try ex­pe­ri­ence. Fea­tures

Easy to use: Frame­work 7 is easy to un­der­stand. It re­quires just ba­sic knowl­edge of HTML, CSS and JS. It doesn’t re­quire de­vel­op­ers to write cus­tom tasks that will be con­verted by JavaScript to some­thing else. You can write the en­tire app in sim­ple HTML, and ex­pect to get what you write. iOs­Spe­cific: Frame­work 7 is iOS-spe­cific. It pro­vides an in­cred­i­ble plat­form for de­vel­op­ers to re­alise all its fea­tures, which range from UI el­e­ments vi­su­al­i­sa­tion to com­plex an­i­ma­tion and touch­screen in­ter­ac­tions.

UI com­po­nents: Frame­work 7 is bun­dled with ready-touse UI el­e­ments and wid­gets like modals, pop-ups, ac­tion sheers, pop-overs, list views, me­dia lists, tabs, side pan­els, lay­out grids, pre-load­ers, form el­e­ments, etc.

Easy to cus­tomise: Frame­work 7 pro­vides ev­ery­thing in a sim­ple man­ner — all styles are di­vided into smaller units. Lesser files are re­quired to bring out cus­tom lay­out styles. Other fea­tures: Frame­work 7 pro­vides many other fea­tures. It has na­tive scrolling, is li­brary ag­nos­tic, and has page-tran­si­tion an­i­ma­tion and mul­ti­ple views sup­port. It has hardware ac­cel­er­ated an­i­ma­tion us­ing CSS3, and routes pages by us­ing a com­bi­na­tion of XHR, caching, browser his­tory and preload­ing.

Of­fi­cial web­site: https://frame­work7.io/ Lat­est ver­sion: 1.6.4

2. Ionic Frame­work

Ionic Frame­work is an open source soft­ware de­vel­op­ment kit (SDK) for hy­brid mo­bile app de­vel­op­ment. It is de­vel­oped on top of An­gu­lar.js and Apache Cor­dova, and pro­vides de­vel­op­ers with state-of-art tools and ser­vices for de­vel­op­ing apps us­ing var­i­ous Web lan­guages like CSS, HTML5 and Sass. Ionic of­fers a li­brary of mo­bile-op­ti­mised HTML,

CSS and JS CSS com­po­nents, ges­tures and tools, and comes with pre-loaded com­po­nents. Users can de­velop apps and cus­tomise them for An­droid or iOS, and de­ploy them via Cor­dova. Ionic in­cludes mo­bile com­po­nents, ty­pog­ra­phy, in­ter­ac­tive par­a­digms and an ex­ten­si­ble base theme.

The Ionic Frame­work is a 100 per cent free and open source project, re­leased un­der the MIT li­cence. It will al­ways re­main free to use, and is pow­ered by a mas­sive world-wide com­mu­nity. The frame­work has over 120 na­tive fea­tures like Blue­tooth, HealthKit, fin­ger­print au­then­ti­ca­tion, and more, with Cor­dova and PhoneGap plug­ins, and TypeScript ex­ten­sions. Of­fi­cial web­site: https://ion­icframe­work.com/ Lat­est ver­sion: 2.0.0

3. jQuery Mo­bile

jQuery Mo­bile is re­garded as a ro­bust frame­work to de­velop cross-plat­form mo­bile apps. It sup­ports a wide range of plat­forms for app de­vel­op­ment like desk­tops, smart­phones, tablets and e-book read­ing de­vices like Kin­dle. It even in­te­grates var­i­ous fea­tures like se­man­tic mark-up, pro­gres­sive en­hance­ment, themable de­sign and PhoneGap/ Cor­dova sup­port. One of the many fea­tures this frame­work of­fers is The­meRoller, which helps you to cre­ate a unique de­sign for your app.

jQuery of­fers many doc­u­ments that will help you get in touch with this flex­i­ble frame­work. jQuery Mo­bile is built on the jQuery base. There­fore, you will have no prob­lems with this frame­work if you are fa­mil­iar with the jQuery syn­tax.

The frame­work is pow­ered by the Ajax nav­i­ga­tion sys­tem. It en­sures smooth an­i­ma­tion of pages with­out any er­rors.

jQuery is a mod­ule-based frame­work, which al­lows you to cre­ate as many cus­tom builds as you need.


Com­pat­i­ble with all ma­jor desk­top browsers as well as all ma­jor mo­bile plat­forms, in­clud­ing An­droid, iOS, Win­dows Phone, Black­Berry, We­bOS and Sym­bian.

As it is built on top of jQuery core, it has a min­i­mal learn­ing curve for peo­ple al­ready fa­mil­iar with jQuery syn­tax.

Has a them­ing frame­work that al­lows users to cre­ate cus­tom themes.

Limited de­pen­den­cies and light­weight; hence, op­ti­mises speed. The same un­der­ly­ing code base will au­to­mat­i­cally scale to any screen.

HTML5-driven con­fig­u­ra­tion for lay­ing out pages with min­i­mal script­ing.

Ajax-pow­ered nav­i­ga­tion with an­i­mated page tran­si­tions that pro­vide the abil­ity to cre­ate se­man­tic URLs through pushS­tate.

UI wid­gets that are touch-op­ti­mised and plat­for­mag­nos­tic.

Of­fi­cial web­site: http://jquery­mo­bile.com/ Lat­est ver­sion: 1.4.5

4. Kendo UI

De­vel­oped by Telerik, Kendo UI is ba­si­cally an HTML5 based mo­bile app de­vel­op­ment frame­work for de­vel­op­ing hy­brid mo­bile ap­pli­ca­tions. It pri­mar­ily makes use of jQuery and has over 70 jQuery wid­gets built-in. It has a sim­ple UI for pro­gram­ming, a rock-solid data source, out-of-the-box themes, an MVVM frame­work, and a lot more. Kendo UI is an open source frame­work for de­vel­op­ing Web ad mo­bile apps.

Kendo UI Com­plete in­cor­po­rates many prod­ucts like Kendo UI Pro­fes­sional, as well as UIs for ASP.net

MVC, JSP and for PHP. Fea­tures

In­cludes 70+ UI com­po­nents like data grids, drop down menus, but­tons to ad­vanced com­po­nents like Gantt Charts, spread­sheets, Piv­otGrid and Maps.

Easy and pow­er­ful data bind­ing to lo­cal and re­mote data, off­line stor­age and sup­port for pop­u­lar Web ser­vices like REST and OData.

In­te­grates and sup­ports An­gu­lar JS di­rec­tives.

In­te­grates grid-lay­out frame­works like Boot­strap and Zurb Foun­da­tion for de­vel­op­ing cross-plat­form Web apps cus­tomised to the desk­top, phone and tablet.

Easy to learn and use, and works with all the lat­est Web browsers.

Of­fi­cial web­site: http://www.telerik.com/kendo-ui Lat­est ver­sion: 2017 SP1

5. Na­tive­Script

Na­tive­Script is a pow­er­ful open source frame­work for de­vel­op­ing An­droid and iOS apps. Mo­bile apps based on Na­tive­Script are built us­ing var­i­ous pro­gram­ming lan­guages like JavaScript and TypeScript. It di­rectly sup­ports the An­gu­lar JS frame­work. Na­tive­Script is ba­si­cally de­signed to al­low de­vel­op­ers to re-use sig­nif­i­cant amounts of code when switch­ing be­tween de­vel­op­ing Web and mo­bile phone apps.

Na­tive­Script and all the re­quired plug­ins are in­stalled us­ing the pack­age man­ager, npm. Projects are cre­ated, con­fig­ured and com­piled via the com­mand line. Plat­form in­de­pen­dent user in­ter­faces are de­fined us­ing XML files. Na­tive­Script then uses the ab­strac­tions de­scribed in the XML files to call the na­tive el­e­ments of each plat­form. Ap­pli­ca­tion logic de­vel­oped in An­gu­lar2 and TypeScript can be de­vel­oped in­de­pen­dent of the tar­get plat­form as well. A Na­tive­Script mo­bile ap­pli­ca­tion is built us­ing the Node.js run­time and tool­ing.


Pro­vides sup­port for the de­vel­op­ment of ro­bust and pro­fes­sional charts, cal­en­dars and graphs.

In­te­grates XML for rich ap­pli­ca­tion de­vel­op­ment.

Has full TypeScript sup­port for .NET de­vel­op­ers to en­able them to use gener­ics, enums, in­ter­faces, static anal­y­sis and com­pile-time er­rors.

De­vel­op­ers can choose their own ar­chi­tec­ture to use ei­ther JavaScript, TypeScript or An­gu­lar based ap­pli­ca­tion de­vel­op­ment. Of­fi­cial web­site: https://www.na-tive­script.org/ Lat­est ver­sion: 3.0

6. Onsen UI

Onsen UI is an open source frame­work for HTML5 based hy­brid mo­bile app de­vel­op­ment based on PhoneGap/ Cor­dova. It is also com­pat­i­ble with An­gu­lar and jQuery. Onsen UI pro­vides a com­pre­hen­sive set of Web-based UI com­po­nents and fea­tures like a two-column view of ta­bles and ma­te­rial de­sign for unique app de­vel­op­ment. It also has a drag-and-drop GUI tool which is un­der de­vel­op­ment at Tokyo-based Asial, which has also de­vel­oped Monaca. Fea­tures:

Fastest plat­form to de­velop HTML5 based hy­brid mo­bile apps us­ing JavaScript, HTML and CSS and also in mak­ing real-time use of Cor­dova.

Has tools like a pow­er­ful CLI and Lo­calKit to per­form de­bug­ging tasks.

Sup­port for An­droid Ma­te­rial De­sign with au­to­matic styling, in­clud­ing full sup­port for mak­ing rich qual­ity iOS apps.

Of­fi­cial web­site: https://onsen.io/ Lat­est ver­sion: 2.0

7. Re­act Na­tive

Re­act Na­tive is an open source spin off of Face­book’s Re­act JavaScript frame­work, which fa­mously re­placed the ear­lier HTML5 Foun­da­tion. As the name sug­gests, this high-end, iOS-fo­cused pro­gram is more of a na­tive app pack­age than a cross-plat­form frame­work. But with its new An­droid sup­port, it loosely fits our re­quire­ments, as you can essen­tially write once in JavaScript and port to both plat­forms. Cur­rently, only OS X desk­tops are fully sup­ported, although there are ex­per­i­men­tal Linux and Win­dows ver­sions for An­droid de­vel­op­ment. Fea­tures:

Full in­te­gra­tion and strong plat­form sup­port for de­vel­op­ing An­droid and iOS apps. Face­book used Re­act Na­tive to build its own App Man­ager app, both for An­droid and iOS plat­forms. Re­act Na­tive’s build­ing blocks are reusable ‘na­tive com­po­nents’ that com­pile di­rectly to it.

It is easy to in­cor­po­rate Re­act Na­tive com­po­nents into ap­pli­ca­tions code.

Re­act Na­tive is more UI fo­cused, mak­ing it more like a JavaScript li­brary rather than be­ing a sim­ple frame­work. En­ables ef­fi­cient app de­vel­op­ment and has strong sup­port for third party plug­ins, in ad­di­tion to less mem­ory util­i­sa­tion. Of­fi­cial web­site: http://www.re­act­na­tive.com/ Lat­est ver­sion: 0.43

8. In­tel XDK

In­tel XDK al­lows you to build cross-plat­form apps for each and ev­ery store. It in­cludes Web ser­vices and plug­ins for con­tent- rich, in­ter­ac­tive and re­spon­sive apps that run on any de­vice. This frame­work of­fers a com­plete range of tools that sup­port de­vel­op­ment, em­u­la­tion, test­ing, de­bug­ging and pub­lish­ing. Re­cently, the de­vel­op­ers made some big changes by sup­port­ing all the ca­pa­bil­i­ties like de­vel­op­ing mo­bile HTML5 apps (in­clud­ing Apache Cor­dova) for An­droid, iOS and Win­dows 10 UAP. They have now in­cluded soft­ware de­vel­op­ment ca­pa­bil­i­ties for Node.js-based, on-board, IoT apps too.

In­tel XDK pro­vides a live pre­view of the app on the con­nected de­vice while you are de­vel­op­ing it, along with many other use­ful tools. You can cre­ate apps us­ing a drag-and-drop ap­proach, although this does cre­ate a lot of un­nec­es­sary code. Fea­tures:

Code hint­ing, code com­ple­tion, em­u­la­tor and de­vice test­ing via In­tel App Pre­view Mo­bile app.

Cor­dova and third party plug­ins sup­port, as well as sup­port for tem­plate and ex­panded de­vice APIs. Drag-and-drop UI lay­out builder, one-click store de­ploy­ment and re­mote server com­pil­ing.

Of­fi­cial web­site: https://soft­ware.in-tel.com/en-us/in­tel-xdk Lat­est ver­sion: Ver­sion 3977

Fig­ure 5: Na­tive­Script

Fig­ure 4: Kendo UI

Fig­ure 2: Ionic Frame­work in­ter­face

Fig­ure 3: The jQuery user in­ter­face

Fig­ure 1: Frame­work 7 GUI

Fig­ure 8: In­tel XDK user in­ter­face

Fig­ure 7: Re­act Na­tive UI

Fig­ure 6: Onsen UI

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.