How to make Hybrid mobile applications with Ionic, Monaca, React, Vue, Angular
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
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.
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.
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
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
Comments
IMHO, i'll will use Ionic or Onsen + Vue mix, because it's simple and have good templates that i can easily modify for my goals. I don't want spent much time to configure webpack or gulp tasks. I want to get it out of the box.