Why I have chosen Quasar-Framework:

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.
Hybrid mobile applications are built in a similar manner as websites. Both use a combination of technologies like HTML, CSS, and JavaScript. However, instead of targeting a mobile browser, hybrid applications target a WebView hosted inside a native container. This enables them to do things like access hardware capabilities of the mobile device.
Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code.
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.
TelerikDeveloper

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.

Xamarin

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.

React Native

React native is a rising open source platform & the future of Hybrid Mobile App Development. Basically, it’s based on JavaScript & allows you to build a mobile app using JavaScript. Primarily, it gives more attention to the view part of the app.

As I didn’t know nothing about React, getting started took too long and the productivity was awful.

Features :

  • Offers a lot of Plugins.
  • Great Response Time.
  • Extremely fast.
  • Compatible with iPhone & Android
  • Reusable Components.
  • React Native is open-source.
  • Saves the time of the developers.
  • Powerful Performance.
  • Less Memory Usage.
  • Just write once & Utilize react native UI components to an existing app code. You do not need to rewrite again.
  • Completely support Node.Js

Ionic

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.

Features :

  • Expertise in the advanced technologies such as CSS, HTML AngularJS or Javascript components.
  • Support for Angular material design.
  • Wrapping Angular Framework.
  • The Ionic framework is easily maintainable.
  • Scalable.
  • Easy to read.
  • Open source & free.

Framework 7

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.

Features :

  • Super easy & comfortable to use. You just have to know the CSS, HTML or JavaScript.
  • Open Source.
  • A Lots of UI elements and widgets.
  • Powerful performance.
  • Use a lot of animation.
  • Totally free from license fee.

PhoneGap

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.

Features :

  • Supports iOS, Android, Palm, BlackBerry, Symbian, and iPad &Single code development for all of the platforms
  • Built on technologies like HTML JavaScript and CSS3 that gives a rich experience
  • Open-source cross-platform.
  • Native Functionality.
  • Can be extended with native plug-ins & let developers add more functionalities.

And last:

Quasar Framework

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:

  • a SPA (Single Page Application/Website),
  • a PWA (Progressive Web App),
  • a Mobile App (through Cordova),
  • an Electron App,
    …sharing the same base-code.

Getting started was not painful, difficult or anything close to PhoneGap. As I already had npm installed, it was easy to get it settled.

Starting the project

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.

Environment

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:

To publish android apps, you will need Android SDK, that usually comes with Android Studio. After installing, be sure to follow this tutorial on how to properly install everything you need.

After that, just follow quasar already built documentation here.

iOS wise:

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.

Quasar 0.14

Project Infrastructure

List obtained with ls -Rl
  • README.md: a markdown file that usually contains info about the software, building flags, etc. A great markdown editor is Dillinger.
  • package.json: contains everything needed to build/publish your app. Used by npm/yarn to install dependencies and include/delete them.
  • build folder: every script needed to build your application, usually you don’t need to modify them.
  • config folder: this folder contains every environment variable, such as address, build settings and names.
  • src folder: your actual application, divided in files and folders. App.vue and index.html are your main files, where everything begins.
  • components folder: some pages and components already built as an example for the developer. You may want to use this folder to put all your custom components to make your structure clean and simple.
  • statics folder: static files, such as logos, images, backgrounds, can be accessed with /statics/file on every application file.
  • themes folder: using stylus as language, those files are responsible to define every style that your app may adopt. Pre configured with app.mat.styl (android material) and app.ios.styl (iOS design) styles. You may need to use a flag -t with your desired theme, as quasar builds with mat as default. It is a good practice to define some global variables here, such as background color, primary, secondary, text-color, etc. To use it in your components, just import it as stated bellow:
<style lang=”stylus” scoped>
@import “../../themes/app.variables.styl”
body
   background $primary
</style>
  • templates folder: this one contains more globally components. Think of them as a base to introduce another components. Usually, it contains sidebars, headers, layouts, backgrounds, etc. Everything that your components use to sit on.

Quasar 0.16

Initialising

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.

Project Infrastructure

./:
-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

  • README.md: a markdown file that usually contains info about the software, building flags, etc. A great markdown editor is Dillinger.
  • package.json: contains everything needed to build/publish your app. Used by npm/yarn to install dependencies and include/delete them.
  • quasar.conf: some global variables of your app, such as name, utilised components, icons, etc. Everything here is self explanatory. Config and build folders from quasar v0.14 got merged here.
  • src folder: your actual application, divided in files and folders. App.vue and index.html are your main files, where everything begins.
  • assets folder: some dynamics images, icons, such as vectors and svgs.
  • components folder: You may want to use this folder to put all your custom components to make your structure clean and simple. Be sure to read about VueJS components guide.
  • css folder: contains your global style settings, not related to themes. Note that it is written used stylus.
  • themes folder: using stylus as language, those files are responsible to define every style that your app may adopt. Pre configured with app.mat.styl (android material) and app.ios.styl (iOS design) styles. You may need to use a flag -t with your desired theme, as quasar builds with mat as default. It is a good practice to define some global variables here, such as background color, primary, secondary, text-color, etc. To use it in your components, just import it as stated bellow:
<style lang=”stylus” scoped>
@import “../../themes/app.variables.styl”
body
  background $primary
</style>
  • layouts folder: some files that may represent global layouts, such as side drawer, top toolbar, bottom navigation, etc. Those layouts usually wraps pages.
  • pages folder: contains files that looks like components. Usually wraps those in a organised way and applying some styles.
  • plugins folder: self-explanatory.
  • router folder: contains the directives to guide your navigation. Mapping urls to pages and layouts and implementing some transitions and browsing restrictions.
  • statics folder: static files, such as logos, images, backgrounds, can be accessed with /statics/file on every application file.

Some notes

Performance wise:

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.

https://auth0.com/blog/vuejs2-authentication-tutorial/

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:

Quasar-JWT by neatpro

Quasar-Starter-Fronted by XristMisyris

What editor?

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.

Error found?

___________________________________________________________________

This article is a preview. I’m currently making it bigger and better.

Currently under writing license.

https://matthiashager.com/vuejs-frontend-ui-frameworks-comparison

https://www.websoptimization.com/blog/hybrid-mobile-app-frameworks/


Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *