At the beginning of 2018, I was faced with a hard choice. I needed to build an app and make it run on all main platforms (web, iOS and Android) without losing on user experience and interface. As I already have some HTML+CSS background, I stuck with a Hybrid Application.
It can be very difficult to tell how a mobile application is built. Hybrid mobile applications are no different. A well-written hybrid app shouldn’t look or behave any differently than its native equivalent. More importantly, users don’t care either way. They simply want an application that works well.
These plug-ins include APIs for accessing the device’s accelerometer, contacts, camera, and more. There is also a number of plug-ins that are built and maintained by the developer community at-large. These can be found in the Apache Cordova Plugins Registry.
So, if you want to make use of some hardware that does not have a plugin, maybe you may want to go with Xamarin or developing a real native app.
As that decision was settled, witch framework should I choose?
Actually, I spent about a week per new framework, trying to get it working and building a simple app with web requests. As this goes on, I must reveal that I hadn’t had any experience with React or VueJS prior to this. It was only plain JS and JQuery to me.
The following list was gathered together after reading various websites and collecting the best info of them. Source links are on the bottom of the page.
With a C# shared codebase, developers can use Xamarin tools to write native like Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms, including Windows and MacOS. It is the top hybrid mobile app development framework. It usually saves your time regarding re-utilizing abilities, tools, teams and the best significant part is code. As it is coded with C#, supported by Microsoft and had tons of plugins, it was a bit harder to get used to, but the results, albeit a little big, were good enough. Oh, and designing user interfaces was a nightmare.
As I didn’t know nothing about React, getting started took too long and the productivity was awful.
Ionic is the most popular & favorite framework on the list for the hybrid app development.It is an HTML5 mobile app development framework which is designed with native-styled UI elements. It is used to build hybrid mobile apps. The cool thing about it is that Iconic has a rich set of advanced features such as mobile components, interactive paradigms, typography, and an extensible base theme that makes the job easier.
Oh, and I didn’t know Angular too, regarding of its version (1 to ∞). As Angular seems to be losing the race, this one was tested and discarded within a day.
Framework 7 is known to make the web development process agile. The coolest thing about Framework 7 is, unlike other hybrid frameworks, it has no external dependency on tools like Angular or React.
Same thing as React Native, but this time I struggled to get the UI look the same on Android and iOS, as this framework uses natives components for both of them.
Phonegap development is one of the most popular application development frameworks. It is one of the most popular frameworks which is used by many experienced developers. With it, one can deliver robust and feature-rich applications which are fully customised hybrid applications that works efficiently across multiple platforms and reach large scale audience in lesser time.
This one was a pain in the a** to get started. Installation was awful, the launcher was only to get started, and some other little things that made me lose my hope that it would be the best.
Quasar is “SPA front-end on steroids.” Quasar includes its own CLI for creating and managing your projects. It looks to be inspired by or based on vue-cli and provides similar functionality. The project templates help alleviating some pain for the beginner. It defaults to Stylus for CSS, and uses flexbox for its grid system. It uses VueJS instead of React or Angular and it was really easy to understand and get used to it.
It relies on Cordova for building Android and iOS apps. The author has also created an Android application that allows you test Quasar apps directly on your phone with hot reload. Quasar gives the developer a number of utility APIs that are a common need when developing a mobile app, such as web storage, cookies, and platform detection.
Although it has the fewest GitHub stars of any of the projects reviewed, the author seems to be highly committed to Quasar’s continued development. The documentation is very thorough and well organised.
Quasar is a full-stack solution with which you can build responsive websites AND hybrid mobile apps AND electron apps with same base code. And that was what I was looking for.
The theming options in Quasar are especially robust. You can switch between Material and iOS themes without having to go through your application code and update your components.
Note: the author of Quasar is very responsive and helpful. He says that he is in talks with a high profile company to sponsor Quasar, which should lead to growing the development team.
Using the Main Starter Kit is the recommended way to go in order to benefit from all Quasar can do for it. You’ll be able to build:
Getting started was not painful, difficult or anything close to PhoneGap. As I already had npm installed, it was easy to get it settled.
After about a month, I had chosen Quasar, as the title reveals. Learning VueJS was not as difficult as EmberJS and a little easier than Angular/React. In about a week of coding, I was able to understand everything that was needed to build the first version of my app, thanks to the well written documentation of both Quasar and VueJS.
Oh, and the github page Quasar-Awsome has a lot of interesting links to get started.
First, we install Quasar CLI. Make sure you have Node >=8 and NPM >=5 installed on your machine.
$ npm install -g quasar-cli
Then we create a project folder with Quasar CLI:
$ quasar init <folder_name>
More information about Quasar CLI here. To make our new project run, we must enter the folder with:
$ cd <folder_name> $ quasar dev
If you want to use the Android or iOS hot reload app to see what your code will look like, just add the -p flag to the command. A QR code as bellow will appear. Use your mobile camera to scan it and instantly run your app. Of course, you can use the IP address of the host too. Also, the quasar dev command will run the app on localhost:8080.
To publish mobile apps, you will need cordova. Install it globally with
$ npm install -g cordova
And then use the quasar cli to make your code cordova-ready
$ quasar mode -a cordova
It will create a folder named src-cordova with everything already settled (nice!). Now that you have added cordova to your project, at every build, it will automatically update the files under src-cordova/www. So, no need to worry about building and copying!
To make it short, every build command to quasar and cordova is listed here.
Now, Android wise:
After that, just follow quasar already built documentation here.
To build iOS apps, you will definitely need a system running MacOSX and XCode (to build to newest iOS version, is recommended MacOS ≥ 11.12). Oh, also a signing key linked to your developer account.
Then, just follow quasar already built documentation here.
List obtained with ls -Rl
<style lang=”stylus” scoped> @import “../../themes/app.variables.styl” body background $primary </style>
To init the project, I’ve used “why” as the name, like the title :).
Some options that I personally use: ESLint and Axios, to format my code and provide Http requests, respectively.
And NPM, as I was using Docker’s Node container. You should use yarn as recommended.
./: -rw-r — r — 1 root root 20 Jun 28 18:16 README.md -rw-r — r — 1 root root 927 Jun 28 18:16 package.json -rw-r — r — 1 root root 3395 Jun 28 18:16 quasar.conf.js drwxr-xr-x 10 root root 4096 Jun 28 18:16 src ./src: -rw-r — r — 1 root root 142 Jun 28 18:16 App.vue drwxr-xr-x 2 root root 4096 Jun 28 18:16 assets drwxr-xr-x 2 root root 4096 Jun 28 18:16 components drwxr-xr-x 3 root root 4096 Jun 28 18:16 css -rw-r — r — 1 root root 1072 Jun 28 18:16 index.template.html drwxr-xr-x 2 root root 4096 Jun 28 18:16 layouts drwxr-xr-x 2 root root 4096 Jun 28 18:16 pages drwxr-xr-x 2 root root 4096 Jun 28 18:16 plugins drwxr-xr-x 2 root root 4096 Jun 28 18:16 router drwxr-xr-x 3 root root 4096 Jun 28 18:16 statics ./src/assets: -rw-r — r — 1 root root 12878 Jun 28 18:16 quasar-logo-full.svg -rw-r — r — 1 root root 8619 Jun 28 18:16 sad.svg ./src/components: empty ./src/css: -rw-r — r — 1 root root 18 Jun 28 18:16 app.styl drwxr-xr-x 2 root root 4096 Jun 28 18:16 themes ./src/css/themes: -rw-r — r — 1 root root 842 Jun 28 18:16 common.variables.styl -rw-r — r — 1 root root 255 Jun 28 18:16 variables.ios.styl -rw-r — r — 1 root root 260 Jun 28 18:16 variables.mat.styl ./src/layouts: -rw-r — r — 1 root root 2273 Jun 28 18:16 default.vue ./src/pages: -rw-r — r — 1 root root 374 Jun 28 18:16 404.vue -rw-r — r — 1 root root 211 Jun 28 18:16 index.vue ./src/plugins: -rw-r — r — 1 root root 90 Jun 28 18:16 axios.js ./src/router: -rw-r — r — 1 root root 602 Jun 28 18:16 index.js -rw-r — r — 1 root root 271 Jun 28 18:16 routes.js ./src/statics: drwxr-xr-x 2 root root 4096 Jun 28 18:16 icons -rw-r — r — 1 root root 7197 Jun 28 18:16 quasar-logo.png ./src/statics/icons: -rw-r — r — 1 root root 13156 Jun 28 18:16 apple-icon-152x152.png -rw-r — r — 1 root root 1355 Jun 28 18:16 favicon-16x16.png -rw-r — r — 1 root root 2604 Jun 28 18:16 favicon-32x32.png -rw-r — r — 1 root root 7197 Jun 28 18:16 icon-128x128.png -rw-r — r — 1 root root 10518 Jun 28 18:16 icon-192x192.png -rw-r — r — 1 root root 15048 Jun 28 18:16 icon-256x256.png -rw-r — r — 1 root root 23241 Jun 28 18:16 icon-384x384.png -rw-r — r — 1 root root 29707 Jun 28 18:16 icon-512x512.png -rw-r — r — 1 root root 12292 Jun 28 18:16 ms-icon-144x144.png
<style lang=”stylus” scoped> @import “../../themes/app.variables.styl” body background $primary </style>
Enter Performance Profiling
Vue.js and React utilize virtual DOM, but Vue’s virtual DOM implementation allows rendering of UI to be faster than that of React, because it involves less overhead. Let’s look at some performance statistics done by the Vue.js team. Check out the repo here.
This benchmark was run 20 times with results from the best runs on a 2014 MacBook Air.
Vue, React MetricsBy default, React triggers a re-render of an entire component subtree when state changes. To avoid unecessary re-rendering, you have to manually implement
shouldComponentUpdate. In Vuejs, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.
According to this benchmark, Vue 2’s app size is smaller than Angular 2.
What about JSON Web Token (JWT)?
There are a lot of existing projects that implement this definition on quasar, but I’ve selected two of them that I personally recommend:
Initially, I was using Sublime 3, but as a paid editor, I’ve recently switched to VSCode. It has a ton of packages as well but it is free, and runs on Windows, MacOS and Linux as well while maintaining consistent user experience (I use those OS to code and test). Pick the one that you like and best suits you.
This article is a preview. I’m currently making it bigger and better.
Currently under writing license.