How to make Hybrid mobile applications with Ionic, Monaca, React, Vue, Angular

edited January 27 in English

Hi all.
Making mobile application today is very simple using modern tools like Apache Cordova and derivatives. You just make once modern html and JS application and then run it on different popular platforms. I've tried to use different tools such as PhoneGap, Ionic and Monaca. Let's get started.

Make application using Ionic. The simplest way, i think.

First install ionic framework using npm

$ npm install -g cordova ionic

Then create application using ionic command.

$ ionic start myApp tabs

Run application in browser

cd myApp
ionic serve

Connect your device to computer and then run application on device.

cordova platform add android
ionic cordova run android --device

You'll get something like that

Ionic Hello, World app

Second simple way is use Monaca

Monaca is a modern platform, that helps make hybrid application in simple way. Monaca has cloud IDE and CLI and other tools. Everything you need for your hybrid app development is here. For example you can build Ionic app with monaca. I'll use only monaca CLI.

Installing Monaca

npm install -g monaca

Create your application using Monaca

monaca create MonacaHelloWorld

You will see options in command line. Most options are about making application using OnsenUI. OnsenUI is modern UI framework, that can be used with Angular, React, Vue. I will chose React, because size of React application is more lighter that others in case of creating app with monaca.

Monaca creation options

After you will have to select some template of your application. And monaca will create application.

Run application in Browser

cd MonacaHelloWorld/
monaca preview

Run application on your device

monaca platform add android
monaca run android --device

You will get cordova application with React and Webpack.
Cordova React application

Making application with Vue JS

I'll use OnsenUI and Vue JS to make that kind of application. You can find more information about that here.
And see more information about Onsen, Vue and Monaca tools here

Installing components using npm

npm install onsenui vue-onsenui --save

Make application

vue init OnsenUI/vue-cordova-webpack onsen-vuew-app

Run application

cd onsen-vuew-app
npm install
monaca preview

Run application on connected device

monaca platform add android
monaca run android --device

You will get that

Onsen, Vue, Monaca

Framework7

You also can use Framework7 to do that.

Creating application

cordova create Framework7Tamplte --template cordova-template-framework7-vue-webpack

Run on browser

cd Framework7Tamplte
npm install
cordova platform add browser
cordova run browser -- --lr

Run on device

cordova platform add android
cordova run android --device

And you will get this

Framework 7 Vue Cordova app

Comments

Sign In or Register to comment.