Hybrid Mobile App Development: Use case and Lessons learnt

Nowadays, working in hybrid mobile application development makes life easier for developers as they are able to write once and build mobile applications that run on the main platforms with no extra effort. The application will run on Android, Windows phone, iOS and the code can be reused for Progressive Web Applications and even desktop applications. In this post, we show a use case of the development of an hybrid application using cutting-edge technologies.   The ultimate goal is to build a client side mobile app for the Simple Web Crawler App.

In this second blog, we would like to share with you what we have learned, the general knowledge and some useful good practices when working with hybrid mobile application development

General Knowledge

Hybrid mobile app development requires a minimal knowledge of some languages, frameworks, tools and JavaScript runtime platforms. As it is based on Web development, you need to learn some languages. Hence a basic knowledge of Web development languages is at the core of hybrids apps development, using standards such as HTML5, JS, CSS.

 

JavaScript runtime environment: Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world, and it is usable through its rich CLI libraries addressing mobile development.

 

Frameworks

It does not take long when diving into hybrid app development to realize that you cannot go very far, without using good frameworks.  You could see that when you start dealing with issues among which: data binding, form and input handlings, internalizations. Development from scratch here, could be very tedious, error-prone, and a real nightmare…

Client side framework

  • Some free ones: Angular.js [2] from Google, seems to be the most famous in that category. It relies itself on TypeScript. We also have Vue.js.
  • Some proprietary ones: Sencha Touch, seems leading the way for enterprise mobile app development.

UI/Ux framework

  • Ionic.io which includes its own ready to use UI/UX widgets, and is built upon Angular.js framework’s components.
  • Onsen UI [3] which client-side-app-framework agnostic, it can be combined with Angular.js [3], Vue. Js, jquery, or even Ionic.

Building native mobile app from an hybrid one

  • PhoneGap, which run exclusively on mac but target many platforms
  • Apache Cordova: Forked from PhoneGap, it targets almost every known OS mobile platforms. Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies – HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s capabilities such as sensors, data, network status, etc.

Some recommended Tools

  • Editors: Visual Studio Code
  • IDE: Visual Studio
  • Debugger and emulator: Monaca Debugger
  • App testing framework: Selenium [10]
  • Many other stuffs

Good/Best practices

Here we list some good practices when choosing the environments and the templates for your project.

Using of preconfigured environments, case of Monaca.io

Monaca.io makes html5 hybrid mobile app development with PhoneGap/Cordova [5] simple and easy.

Monaca is the most open hybrid app development platform available and ready to be immediately plugged into your existing workflow and development environment. From Cloud IDE, CLI to debugger and remote online build, everything you need for your hybrid app development is here.

For example, for our Client App, we choosed the following technologies with Monanca.io :

  • Client side framework: Angular.js
  • UI/Ux components : Onsen.ui
  • Editor/IDE : Visual Studio Code
  • Debugging: Monaca debugger
  • Remote building and deploying: Monaca Cloud,
  • Source control: Monaca Local Kit [7]

 

Using of existing templates

There are existing preconfigured templates that combine all the basic technologies you would like to use. Many examples can be found publicly on GitHub [8, 9].

 

References:

[0] http://digtransformations.com/2017/11/27/a-web-crawler-automates-and-facilitates-the-search-for-real-estate-properties/

[1] https://blog.jscrambler.com/10-frameworks-for-mobile-hybrid-apps/

[2] https://angular.io/guide

[3] https://onsen.io/v2/guide/

[4] http://ionicframework.com/

[5] https://cordova.apache.org/

[6] https://nodejs.org/; www.npmjs.com

[7] https://monaca.io/guide/

[8] https://github.com/monaca-templates/onsenui-v2-angular2-minimum

[9] https://github.com/monaca-templates/onsenui-v2-angular2-splitter

[10] https://www.guru99.com/creating-keyword-hybrid-frameworks-with-selenium.html

Leave a Reply

Your email address will not be published. Required fields are marked *