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.
Wish me luck for this new journey.
Support me
| Please 🙏 | Support Me |
|---|---|
| Vote me as Hive Witness | Donate Hive Or HBD |