We are going to generate an android mobile app using Quasar/Cordova, the mobile app would have some differences than the browser version, and here are some of them:

• Some components would have a different UI
• Different design for the login page
• Different flow after a user logs-in
• We would have a bottom bar (contains some navigation icons)
• Some routes would be visible for mobile app only
• Navigation experience could be different for the mobile app

My concerns are:

• Is this even a valid approach and doable using the platform detectors, or it’s preferred to go with a separate project to serve the mobile app?
• Let’s assume we would have many components/pages that are specific for the mobile app only, will this affect the performance in general?
• In a such a case, should we utilize the current logic and use it for mobile app & browser version? or we should separate them? (for example user different methods, stores, computed functions for the mobile app only)?
• How to organize such a thing, and what should take it into consecration?

I need some thoughts & insights from your experience, so we can do it right.

Thanks.

@s-molinari Thanks for your tips.

isn’t the purpose of this forum is to post the “Why and How” questions and to help each other?
and I have not posted the question in vain, sure I have my reasons I just asked some help

We are going to generate an android mobile app using Quasar/Cordova, the mobile app would have some differences than the browser version, and here are some of them:

• Some components would have a different UI
• Different design for the login page
• Different flow after a user logs-in
• We would have a bottom bar (contains some navigation icons)
• Some routes would be visible for mobile app only
• Navigation experience could be different for the mobile app

My concerns are:

• Is this even a valid approach and doable using the platform detectors, or it’s preferred to go with a separate project to serve the mobile app?
• Let’s assume we would have many components/pages that are specific for the mobile app only, will this affect the performance in general?
• In a such a case, should we utilize the current logic and use it for mobile app & browser version? or we should separate them? (for example user different methods, stores, computed functions for the mobile app only)?
• How to organize such a thing, and what should take it into consecration?

I need some thoughts & insights from your experience, so we can do it right.

Thanks.

@dobbel appreciate your help!

@dobbel , okay this link seems it has good information. I ran it inside the postCSS file, and it enhanced the performance but it causes to lose some important styles which makes the page looks broken.

since @s-molinari says, the Quasar automatically miniseries the CSS itself, then why we have a big amount of unused CSS classes on the production mode?

@s-molinari Thanks for your tips.

isn’t the purpose of this forum is to post the “Why and How” questions and to help each other?
and I have not posted the question in vain, sure I have my reasons I just asked some help

@necmettin Thanks for your response.

Okay, as for your points:

1. As for the GZIP point, checked out the quasar.conf.js and gzip property is set to true, but I check the app to see if it’s really gzipped or not and it seems it’s not., so this point should be checked.

2. As for the components loading, yes you’re correct while I was creating a new quasar project, I had to choose an option among these three: [1] Auto-import needed Quasar components & directives [2.] Manually specify what to import [3.] Import everything from Quasar… and I chose the first option which is the recommend one.

3. To figure out what slows the app, I went to the dist folder, and I commented out the main quasar CSS file, and the performance result increased to 85% , I checked the CSS file, and it has all classes regardless they are used or unused. shouldn’t this file be minimized by Quasar? or it should be handled by my side using something like PURGCSS ?.

4. How can I figure out, if I am loading all fonts and icons? and is this can be controlled by Quasar?

5. Regarding preloading keys requests, I’ve searched the documentation, and unfortunately I found nothing talking about it

Thanks for you help!

Thanks @dobbel for the response.

Okay, I am good at VueJs and I have the basics, but really I am not sure what this and the Bootstrap relate to the main performance issue? could you please clarify this for me.

@dobbel @s-molinari thanks guys for your responses!!

Okay, I feel now comfortable about Quasar and I am pretty sure that my Quasar Web App should have gotten a high score, more than 45% !

But I need your assistance to figure it out, as my test was on a fresh quasar project, which comes with a drawer and a header I didn’t do anything,!

Is there a documentation/steps should be taken into consideration while creating Quasar project ? Am I missing something?

Please, excuse me, I am very new here.

@dobbel , sorry but what do you mean by the rest of the marks?

And yes, you’re right, the actual performance that we see and feel in our eyes differs than what the lighthouse records. but in my case, I need have a high score using the lighthouse, as it’s one of my client’s requests.

Have you tried to test the performance score of a fresh quasar project? I just need to hear that it’s from setup and configuration

Hi, @dobbel thanks for the response.

The requested from me is to have the application as PWA, which even has a lower score than SPA.

Just to confirm that my code is not the issue, I just created a fresh project with Quasar starter-kit (I didn’t touch the project), and I tested it on build mode and I got low score again : 53%. I believe there is something missing, can anyone replicate this step?