Would you use Vue + Quasar to build a Marketing site?
-
I wanted to see how you guys approach the following case. Vue + Quasar provide a great system to build Applications. But we also need Marketing site eventually to promote our application(s).
Instead of building just a static site with some templates or HTML or Site Builders (i.e. Wix), I’m thinking of using Vue + Quasar. Because my marketing site will need to extract live data from out backend server to show live data in marketing site.
That’s my first question. Is this a wise idea to use Vue for this purpose?Secondly, if this approach makes sense, should we develop it as SPA or as SSR?
The SPA doesn’t require any server side rendering process, however SSR does.What are other options that you guys use for a case like this?
Thank you in advance!
…Ben -
@Ben-Hayat nice challenge
Let’s choose some constraints for this marketing style site:
1- loading speed
2- extremely easy integration with 3-rd party analatics, affiliates, ads, a/b testers, etc.
3- live data - option 1 - the data are loaded with initial page opening and then no loading
4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
5- live data - option 3 - the data are analyzed/displayed in real time (stock ticker, server load)
6- easy and fast changes to content
7- easy and fast changes to structure of the site (links, navigation, etc.)
8- app - option 1 - there is no need to login, authenticate, keep session for purposes other than analytics
9- app - option 2 - there is a need to authenticate users and show them personalized content/data
10.- … ok, there could be more criterions… especially organisational/logistics ones… but let’s stop here…Lets evaluate 3 options for Quasar: UMD, SSR, SPA. I assume that every option will have a classic stack of:
- front server with reverse proxy (nginx, openresty)
- backend for API/www server
- and database/mq/data store
I will give those 3 options points in scale 1-5 - more points better, always scaled to best option:
1- loading speed
UMD - 5
SSR - 4
SPA - 1
2- extremely easy integration with 3-rd party analatics, affiliates, ads, a/b testers, etc.
UMD - 5
SSR - 2
SPA - 1
3- live data - option 1 - the data are loaded with initial page opening and then no loading
UMD - 4
SSR - 3
SPA - 5
4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
UMD - 3
SSR - 2
SPA - 5
5- live data - option 3 - the data are analyzed/displayed in real time (stock ticker, server load)
UMD - 2
SSR - 1
SPA - 5
6- easy and fast changes to content
UMD - 5
SSR - 2
SPA - 1
7- easy and fast changes to structure of the site (links, navigation, etc.)
UMD - 2
SSR - 4
SPA - 5
8- app - option 1 - there is no need to login, authenticate, keep session for purposes other than analytics
UMD - 5
SSR - 2
SPA - 1
9- app - option 2 - there is a need to authenticate users and show them personalized content/data
UMD - 1
SSR - 3
SPA - 5
10.- … ok, there could be more criterions… especially organisational/logistics ones… but let’s stop here…
UMD - is a quite viable solution. It is extremely easy to integrate with anything “marketing” style
SSR - wouldn’t go that way - there are too much quirks in integrations with 3rd party solutions
SPA - if you need app functionalities, if you think about mobile app, if you consider using PWA then this is the way to go. The only drawback is initial loading time. -
@qyloxe
Man, what an awesome answer. THANK YOU!!!So, if I understand UMD correctly, I’ll be plugging Quasar components into a Website.
Based your your assessments and my needs, the UMD seems to be my best choice.
Then my next question would be , what tool/framework would you use to build a modern looking website so I won’t face all those constraints you brought up?Based on your full understanding of this challenge, your reply deserves to be publish as a blog on Quasar site. It will help a lot of current and future users.
Thank you again.
-
@qyloxe
I’m also thinking of using Webflow.com as it provides a nice designer and allows custom JS coding too.https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site
What do you think?
-
@Ben-Hayat thanks
Anyway, the modern marketing sites are quite complicated beasts. In those kind of projects I would strongly relied on the business goals, metrics, cta’s, content. So, one would need the initial content, the initial message and expected business value.- content - it would be a bad descision to firstly choose theme/template and then get content from business side. The content (initial of course) should be first. The narrative, the language, the images, video and audio will drive the selection of html template.
- business goals - this will give a hint not about those goals but about the place where we are now, and what metrics we should use and how. We can only make better what we can count. So what will be a metric of successful marketing campaign? Visits, clicks, actions, what is the funnel, what are the long term goals, how we can measure that?
- look and feel - this is where the designers comes. Without them the target won’t “click”. They need to be separated from business but be aware of the content. Only after the consensus between designers and business, it is meaningful for developers to come and do some work.
There were so many projects where developers were the first ones to decide, to have fun with new shiny technologies and after that, the people just didn’t come.
About webflow.com - well, I do not put any emotional value with any current tool of trade. If it will present yout content, if it will be easy to integrate, if it will be open to change in the future then it will be probably
ok.Where is the place for Quasar in this? Quasar gives you a freedom of platform. Choosing Quasar you are SURE, that your today work can and will be used in the future in more than one context. What is this context? It is a set of technologies, which will be relevant to your current users in 18 months in the future. Why in the future? Because when you make business project with past data in current context, then you are already loosing. You need to build business value now for the future needs, because when you will finish this project, the future will be present. Quasar needs some investment initially and then comes the moment, when suddenly, making a mobile solution, integration with backend, with other tools - even - desktop - is extremely easy. Quasar gives excellent ROI. Quasar is rising and more and more people will be using it. You can’t be wrong with Quasar haha
Summary - get the initial content, set business goals, think about metrics, get all that to the designers and after all this put some developers into mix. That is my point of view on “marketing projects”.
-
@qyloxe
Well, you made me adjust my perspective from 60,000 feet above before jumping into the technical coding. I thank you for your wisdom and your great advice. -
The answer is “yes”. You can use Quasar to build any website application. The question is, how much time do you have to invest in building it? Quasar helps a lot, when it comes to building any kind of application. However, it is just (and I mean just lovingly as that “just” is a huge amount of savings in effort for you) the building blocks for the frontend for a number of application types and platforms, i.e. web, mobile, desktop, browser extension, etc. If you are building a static site, like Quasar’s docs page, then you can run with just Quasar and be very happy. However, if you wish to run with something even slightly more advanced, like you want user interaction, or better management of your content, then you need a backend. Now your effort has just doubled. There are pre-built backends like Firebase. They can and should save you a lot of time and effort. Once you’ve made those technical decisions, then it’s off to work to build your app.
Or, you can use something “ready built”. Like Wix or Wordpress… (yuckola
, if you ask me)So, it’s not a matter of “should I use Quasar for a marketing site”, but rather, do I want to build it from what Quasar has to offer to that of what I need (and you need to be clear on what it is you need)? Or, do I want to go with something that is more inline (as in already built for me to save time) with offering content management and a built in site design tool, etc.? Quasar doesn’t offer content management or a site design tools directly. A CMS is an application. So, if you do want something more advanced, your question would be more like, should I build something to manage my content with Quasar or should I take something already finished? This in turn means, I’ll go back to my first question made. How much time do you have to invest in building your application? Do you want to build the application? Do you have the knowledge to build the application? Or do you want to save time and just get something done and out there?
About initial loading time mentioned above and making that a decision criteria. The Quasar site loads fast, doesn’t it? It’s a PWA, meaning you can use it like a web app on mobile too and go offline and still be able to use it (aint that cool?), yet it is searchable via Google and co. Quasar is built to perform. I highly doubt the UMD will get you better (initial) loading time, because it is Quasar’s kitchen sink UI package (i.e. all the components). Also, if you go the UMD route, you are tying your hands a lot and if your app gets to any decent size, you’ll end up not happy. UMD is mainly meant to offer a softer implementation path to adding Quasar to an existing frontend code base. It’s NOT meant for building out full apps with a future. If you go the CLI route, which I highly recommend, then you get tree shaking of the components and a smaller app package in the end (i.e. optimized load times) and you’ll still have the true power of Quasar at your finger tips. With UMD, you lose that option. In other words, if you are starting off from scratch and want to build an application, DO NOT go with UMD. It shouldn’t even be considered.
Scott
-
@s-molinari
Scott, I can’t agree more. I’m now struggling with all those decisions. Website is just a part of a bigger picture.The full solution:
1) Web API REST service (or I might go wth GraphQL server) developed .Net Core. This is my backend data service.2) A backend Cron server that connects to the same DB server to run all background processes and jobs.
3) The actual Application is a multi tenancy app (Consumers & Vendors). The front end will be written in Vue + Quasar. For data it’s either using REST or GraphQL.
4) I need a System Admin app to manage tenants, subscriptions, payments and basically managing a full SaaS solution. For this I’m debating in ASP.Net core razor or Blazor (similar to Vue) or in Vue. ASP is the fastest to get there.
5) Then comes last and that is the Marketing site that has lots of static content, but needs to show live and real data from the SaaS solution as part of daily content. I can write it as a server-side app in ASP.Net or Blazor. Vue was a consideration that I opened this discussion.
Hope this gives you a better picture.
And thank you for engaging and helping. -
Sounds like a lot of work.
Is ASP in the picture because of you or your teams’ current knowledge? Just wondering.Scott
-
The world of ASP, offers a lot. For front end, for backend, for building REST servers, for building background services. ASP is based on .Net
I have a lot of experience in .Net and ASP world. This experience will help me doing all the backend much faster than if I start with something new.
ASP is basically is a big investment I’ve made in. But ASP can’t match the frontend power of Vue. So I’m trying to integrate the two. -
Ok. Got it. Thanks for the explanation.
Scott
-
@s-molinari said in Would you use Vue + Quasar to build a Marketing site?:
PWA
You said that the Quasar website is a PWA and yet it is searchable via Google and co.
Why is that? Is the Quasar website a combination of PWA and SSR?
-
-
Update;
AS I spent more time to see what tools I can use that gives total flexibility without spending too much time, I found a special Editor in Wix that gives you total flexibility to do design & code. It is called Corvid by Wix
https://www.wix.com/corvidThey’re also coming out with a newer editor called Editor X. This one is going to be more advance.
https://www.wix.com/editorxThis will allow to build the marketing site without using bloated templates and design it my way visually and code it with JS.
Here is a series of Videos showcasing Editor X if you want.
https://www.youtube.com/watch?v=1khQPRQVCbM&list=PL0y_aclKYoYg8L9xRbIoD0qhr7GfqEP2yI thought I share these with people in the same boat as I am.
Enjoy! -
I think the flexibility and the lack of a ‘ready-built’ system is a problem with OSS in general. All those ready-built systems are great if you use them exactly like prescribed. Something like Wordpress works great for a simple blog. If you want it to look different you will have to add a theme. If you want functionality X, you add a plugin. What you end up with is a big ball of plugin spaghetti and the corresponding security concerns (https://www.cvedetails.com/vulnerability-list/vendor_id-2337/product_id-4096/).
The ‘best’ solution is to built your own system starting from scratch and thinking everything through. But who has the time or money for that? People just want something that works, and thus they resort to Wordpress. I have no experience with Wix, but personally I would like to be in control of my own website and know what web technologies it uses. And of course it is a commercial business, so after you assembled your free website and lack feature Y, it is probably available for some extra costs.
Personally, Quasar is the best I’ve come across yet. It provides the building blocks with clear instructions on how to use them (and maybe more importantly, how NOT to use them). And I am probably biased, but I am pretty sure that the quality of Quasar and Vue is higher than that what Wix offers, but there is no way to know because Wix seems to be closed source.
Anyways, there will always be the dilemma of full flexibility vs simplicity. The average person wants something that just works, the experienced developer want to be able to use things his way. In any case, you should use the tool that fits you best, but in current times you have to think about security. With the new regulations you have to take responsibility for any data leaks caused by using a ‘simple’ option.
-
Well my friend, everything you said, is what has been going on in my head. Discussing it here has certainly helped to clear my head.
Here are my recent findings:
Wix - for developers has a new editor called Editor X (in Beta). Which allows you to build sophisticated UI fully visually, than coding HTML & CSS.
For developers, they also allow you to write JS code and access outside REST APIs, build collections and use it in your UI. You can even do full CRUD with backend. So they give you “some” components for that.
Unfortunately, since Wix backend system servers millions of users on virtual machines, Wix overall experience IS VERY SLOW, especially on Mobile. This is a huge turn off to consumers going to your Marketing app where the marketing app also provide live data from REST service.
Their tooling and Dev framework is nice, but they’re over utilized.WebFlow - A much more advanced platform to build UI, CMS and eCommerce. You get a great editor, API access, Live CMS from DB or your REST service.
The issue is, it has a steep learning curve. It’s great for those who want to become “WebFlow” masters and freelancer. Webflow is perfect for those group.
In my case, I’m a software engineer who builds backend & frontend systems as a full solution. And sometimes the marketing CMS that is not fully static. For example my new project, the marketing site needs to fetch live data to show to prospects who visit the marketing site. IT IS THE DATA that attracts the prospects, not static content.
This post was mainly to address this case, where marketing site is like half marketing and half app.And that brings us to your last point, which was my original question. How about building a hybrid marketing/application system using Vue and Quasar. Vue & Quasar, provide all the components we need to build such system. Logically makes sense. But is there something out there that is faster to build? To me Wix & Webflow would derail my main path of building LoB solutions. I’m not a freelancer to website designer.
A very good example of such Hybrid system is amazon.com. If you study it carefully, you see how they blend marking info with live data from their Ecom. where you learn about products and shop at the same time.
My projects needs consumers to go to the site, to experience a “Marketing site” and if they’re logged in, they get a lot of “Application” features.My latest thought is merge my App with Marketing all built with Quasar, using Lazy loading to differ loading when needed. This is my ultimate desire.
Thanks for reading…
-
@qyloxe
I’m interested in why you rate this:4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart) UMD - 3 SSR - 2 SPA - 5For an SSR site, doesn’t Vue take over after the initial load of the page from the server side?
Eg. after the initial load an SSR page becomes the exact same thing as the SPA.Therefore I would rate this category the same for SPA and SSR…
Or do you disagree?
-
I agree with your point. I was thinking of the same. The initial load of static content would take longer, but if I underestand it correctly, for live data should be the same as SPA.
-
@mesqueeb said in Would you use Vue + Quasar to build a Marketing site?:
@qyloxe
I’m interested in why you rate this:4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart) UMD - 3 SSR - 2 SPA - 5For an SSR site, doesn’t Vue take over after the initial load of the page from the server side?
Eg. after the initial load an SSR page becomes the exact same thing as the SPA.Therefore I would rate this category the same for SPA and SSR…
Or do you disagree?
option 2 - with SSR you have to reload pages because there is seldom a need to just watch on one q-table
so with every page you will need to download whole dataset, there is non trivial reverse proxy confguration in terms of cache etc., in result your backend/API will be much more complicated and tied to your production solution.With SPA you can have many data categories kept locally (In memory), you can denormalize them with vuex-orm, you can refresh, reload only single records or data changes or new data after user action, you have access to more client oriented data libraries - even GraphQl or pouchDB or anythin, you have very trivial reverse proxy configuration and production server, you have simpler rules for access control because basically you just need to authorize simple endpoints of API calls and there are also more technologies to choose - oauth, jwt, own tokens etc.
Please remember - this is my observation in the specific context of OP question - I can easily think of different situations where I’m totally wrong ha ha
Anyway, Quasar is great because you just have those options. It is amazing, that even if you choose one option, changing your business in the future to the other will not be a total nightmare (ok, should not). -
I think @mesqueeb is right. You shouldn’t have to reload a SSR page. Any data could be changed reactively and you won’t need to rerender or reload the page.
@Ben-Hayat
I think using Quasar with a proper backend is definitely a good option, but probably a lot of work for a single developer. The ‘best’ way would be to collaborate with other developers needing the same functionalities and create an OS project.
For example, I’d guess that a CMS built with Quasar is something a lot of people could use, but someone has to do the heavy lifting to set something up.
