Multiple layouts, desktop/mobile?
-
I’m currently evaluating different options for the re-development of an extremely large project dating back 15 years. The project is an existing desktop browser based game which is getting completely re-coded from the ground up. I only just found Quasar but it has peaked my interest for a variety of reasons, so please bear with me if the answers to my questions are obvious.
This project uses Laravel as it’s back-end RESTful API. I found Quasar due to my interest in using Vuejs for the front-end SPA. I like what I see in Quasar due to it’s approach with using a singular framework for the responsive website and hybrid mobile apps.
My big concern right now is that this project is primarily intended as a Desktop web/browser application. I want to bring in full support for mobile devices as this segment accounts for about 30% of my users and is only growing. I’m sure it would grow even faster if we supported it. I need the ability to be able to keep the focus on desktop while bringing in this additional functionality. I like what Quasar offers for it’s mobile theming, however I’m not sure about the desktop side.
My thought on the approach is to serve the application with multiple layouts, based on Quasar’s built in platform detection. There would essentially be a desktop layout and a mobile layout, each with it’s own assets. The desktop layout would need to be re-coded with Quasar’s CSS grid system for responsive functionality and to fully support it’s components.
Is this a sound approach?
-
I’ll say upfront, I am not the most experience developer, when it comes to Quasar or reactive UIs. Though, I’d like to offer my views on your question.
I see four “realms of application” that Quasar can currently cover (with more coming, like PWAs
).- Native Mobile applications through Cordova
- Native Desktop applications through Electron
- Desktop Web applications through a normal web server
- Mobile Web application through a normal web server
Where Quasar helps with a lot of the work and even logic for the “View” of all of these applications is it standardizes and componentizes standard UI elements across all of these application realms. In other words, Quasar offers the large benefit of code reuse!
However, depending on what the application should do and in what realm, you are still going to be building different applications to certain extents. The only real possible “cross realm” application you can build might be between Desktop Web and Mobile Web applications. Still, I’d venture to say, that can be questionable. For instance, I’d really not want to build a large website administration application for smart phones or rather, I’d not worry about making sure that administration system works 100% on smart phones. I’d only want it to work 100% properly as a Desktop Web app.
So, to answer your question, it’s the applications you need to develop, which will determine the layouts you need. If you want an application for Desktop Web and Mobile Web, then you’ll probably need only one layout. However, to make it progressive, i.e. adding features for Desktop that a mobile device won’t be able to use, you’d be talking a good bit of juggling of the view logic. If your application isn’t too involved, that might be fine. However, if your applications are very involved, you might be better off going with two separate applications and thus, two separate layouts.
I hope that makes sense.
Scott
-
Hi,
Would love to see something like you are trying to rebuild done with Quasar, which can definitely can handle what you want. Got a few points to make:
- You can use separate layouts for mobile and desktop by configuring the routes along with Platform checks. Use as many layouts as you want (you’re not bound to using only one per app/website).
- For the desktop version you can make it both as an Electron app (so standalone app) and as a website which I think it’s a plus.
- I recommend waiting for v0.14 to get out (really really soon, check the forum on Announcements section) before you start porting the code. Big improvements ahead.
Side note: when you got quick questions, use the Gitter channel for faster responses.
Cheers and drop a link when you got everything working. Would be nice to showcase your work
-Razvan -
This post is deleted! -
@rstoenescu Appreciate the info. Project was delayed a bit but I intend on making a decision this month. Hopefully v0.14 is available by time that happens. I’ll let you know if we end up going with it.
