Using Quasar Framework instead of Flutter for the-Hive-Mobile.App

Why?

Familiarity

I have been building apps with Flutter for a while.
On Hive, I have observed that, most of the developers are familiar with JavaScript & different frameworks.
Not just hive, I guess, it's applicable everywhere.
If it's a little different javascript library/framework e.g. Quasar Framework, VueJS, ReactJS etc., the learning curve required is very low.
But If we talk about a complete different language (e.g. Dart) & framework (e.g. Flutter), the required learning curve is high compare to above.

The lonely Journey

So far building app with Flutter, it's a lonely journey.
If I were to get my code reviewed, I find it hard to get it reviewed from hive community members.
Yes, we have @tibfox who also has expertise on Flutter/Dart, but I guess two of us are not enough.
If I were to re-write everything in javascript, code visibility to HiveDevs get higher.
They can not only review my code but also suggest new changes.

Dev Adoption

Today, I want to build open-source project which should be easily maintained by community.
I guess, based on my experience, Flutter isn't a good choice.
With Quasar, I strongly believe, I can have more engagement in development for the-hive-mobile.app

What's next?

I am putting aside the gitlab project which is written with Flutter / Dart - https://gitlab.com/sag333ar/the-hive-mobile.app
I'll try to learn as fast as possible & start building the app with Quasar framework
Here is the link to new repo - https://github.com/sag333ar/the-hive-mobile-app

How would you set up a Quasar project?

Here are the steps which I've followed to setup the project with Quasar framework.

Step 1. Open Following link

https://quasar.dev/start/quick-start

Step 2. Navigate to directory

Navigate to directory where you want to create project.

Step 3. Enter following command.

npm init quasar

Step 4. Select This option

App with Quasar CLI, let's go!`

Step 5. Enter Project Folder to be created.

In this example/tutorial, it's the-hive-mobile-app

Project folder: › the-hive-mobile-app

Step 6. Pick Quasar Version.

Pick Quasar V2 or whichever is latest.

Pick Quasar version: ›
❯   Quasar v2 (Vue 3 | latest and greatest)

Step 7. Pick Script Type.

Pick Typescript.

? Pick script type: › - Use arrow-keys. Return to submit.
❯   Typescript

Step 8. Pick Quasar App CLI Varient.

Pick Quasar App CLI with Vite

? Pick Quasar App CLI variant: ›
❯   Quasar App CLI with Vite

Step 9. Provide Package Name.

In this example/tutorial, it's as follows

Package name: › the-hive-mobile-app

Step 10. Provide Product Name

In this example/tutorial, it's as follows

Project product name: (must start with letter if building mobile apps) › The Hive Mobile App

Step 11. Provide description.

Project description: › The Hive Mobile Application with Quasar

Step 12. Set Author.

Author: › Sagar <sagar@sagar.sagar>

Step 13. Pick a Vuew Component Style.

Select Composition API

? Pick a Vue component style: ›
❯   Composition API

Step 14. Pick CSS Preprocessor

Select Sass with SCSS

? Pick your CSS preprocessor: ›
❯   Sass with SCSS syntax

Step 15. Select Features

Select Features as indicated below

Check the features needed for your project: ›
◉   ESLint
◉   State Management (Pinia)
◯   State Management (Vuex) [DEPRECATED by Vue Team]
◉   Axios
◉   Vue-i18n

Step 16. Pick an ESLint preset

Pick an ESLint preset: ›
❯   Prettier

Step 17. Install project dependencies with NPM

 Install project dependencies? (recommended) ›
❯   Yes, use npm

Step 18. Navigate to project directory.

cd the-hive-mobile-app

Step 19. Start the Dev Server

quasar dev

Step 20. To Start Dev with Mobile app

Enter CTRL+C to stop previously started server & now start with followings.

You can use cordova too. But I recommend capacitor.

quasar dev -m capacitor -T ios

Step 21. Provide App ID.

What is the Capacitor app id? app.thehive.theHiveApp

Step 22. Select IP Address

What external IP should Quasar use? (Use arrow keys)
❯ 192.168.1.9
  192.168.1.2

Step 23. Select Device / Simulator

Now, it will start Xcode. Select a device / simulator & Hit run button.

Step 24. Open VS Code

Switch Back to Terminal, Open New tab in terminal.
And open VS Code

➜  the-hive-mobile-app > code .

Step 25. Start Developing.

Open src Folder from Left - project explorer.

And start developing some cool stuff.

VSCode with iOS Simulator

Wish me luck for this new journey.

Support me

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD