Quasar Framework

Quasar Framework

Application and Data / Languages & Frameworks / Front-End Frameworks
Needs advice
on
BlazorBlazor
and
Quasar FrameworkQuasar Framework

The only two programming languages I know are Python and Dart, I fall in love with Dart when I learned about the type safeness, ease of refactoring, and the help of the IDE. I have an idea for an app, a simple app, but I need SEO and server rendering, and I also want it to be available on all platforms. I can't use Flutter or Dart anymore because of that. I have been searching and looks like there is no way to avoid learning HTML and CSS for this. I want to use Supabase as BASS, at the moment I think that I have two options if I want to learn the least amount of things because of my lack of time available:

  1. Quasar Framework: They claim that I can do all the things I need, but I have to use JavaScript, and I am going to have all those bugs with a type-safe programming language avoidable. I guess I can use TypeScript?, but that means learning both, and I am not sure if I will be able to use 100% Typescript. Besides Vue.js, Node.js, etc.

  2. Blazor and .NET: There is MAUI with razor bindings in .Net now, and also a Blazor server. And as far as I can see, the transition from Dart to C# will be easy. I guess that I have to learn some Javascript here and there, but I have to less things I guess, am I wrong? But Blazor is a new technology, Vue is widely used.

READ MORE
Reddit - Dive into anything (reddit.com)
21 upvotes·637.2K views
Replies (10)
Developer Consultant at Thinktecture AG·
Recommends
on
ASP.NET Core

First, Blazor Server is NOT a real SEO-capabale server-rendered approach. Its much more complex and in short it holds a copy of the HTML that should be shown in the Browser in memory on the server, all user input is sent to the server via websockets and the resulting diff in the HTML is sent back to the browser via websockets. That is generally not very SEO friendly.

When you need SEO capable real server-side rendering you should use ASP.NET MVC or ASP.NET Razor Pages, as these are real server-side-rendering technologies.

That said, OFirst, Blazor Server is NOT a real SEO-capabale server-rendered approach. Its much more complex and in short it holds a copy of the HTML that should be shown in the Browser in memory on the server, all user input is sent to the server via websockets and the resulting diff in the HTML is sent back to the browser via websockets. That is generally not very SEO friendly.

When you need SEO capable real server-side rendering you should use ASP.NET MVC or ASP.NET Razor Pages, as these are real server-side-rendering technologies.

That said,I think you can also use dart for server-side rendering, so that you don't need to learn a new language and especially a huge new ecosystem that is .NET.

READ MORE
12 upvotes·2 comments·31.8K views
jsakamoto
jsakamoto
·
September 25th 2022 at 11:20PM

> Blazor Server is NOT a real SEO-capable server-rendered approach.

That is incorrect!

Blazor Server has a real SEO capability server-side rendered, and it is out-of-box. When you create a new Blazor Server project, such as the `dotnet new blazorserver` command, that Blazor Server app already has server-side rendering without any additional working. You can verify it by yourself by sending an HTTP request to a Blazor Server app. For example, if you execute the `curl https://localhost:5001/counter` command, then you will see the server-rendered HTML content like `<p>count: 0</p>`.

Of course, the response from a Blazor Server for an HTTP GET request can include appropriate title and OGP meta header elements for SEO.

(see also "Control `<head>` content in ASP.NET Core Blazor apps" (https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0) )

Of course, once the Blazor Server runtime has been started after a web browser loads a pre-rendered initial HTML content, it works via a bi-direction connection with a server, as Sebastian Gingter mentioned. But anyway, it is not related with it can be pre-rendered or not.

Moreover, the pre-rendering capabilities for SEO are available not only for Blazor Server but also for Blazor WebAssembly. If the Blazor WebAssembly is hosted on an ASP.NET Core server, it can be pre-rendered on the server-side with the same mechanism as Blazor Server pre-rendering.

(see also "Prerender and integrate ASP.NET Core Razor components" (https://learn.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-6.0&pivots=webassembly) )

(You also can see the real world example: https://clickonceget.azurewebsites.net/ )

And Blazor WebAssembly can be pre-rendered into static files at the publishing time of it too. For example, the "Awesome Blazor Browser" site hosted on GitHub Pages static web host is pre-rendered at the publishing time of it, so it is SEO friendly, and it can be found by internet search engines.

(The URL is https://jsakamoto.github.io/awesome-blazor-browser/)

What you should do to pre-render a Blazor WebAssembly project at the publishing time of it is just only one that adds one NuGet package to the Blazor WebAssembly project.

(see also: "BlazorWasmPreRendering.Build" (https://github.com/jsakamoto/BlazorWasmPreRendering.Build) )

This technic also is used for the Microsoft's official exhibition site for Blazor Quck Grid,

(The URL is https://aspnet.github.io/quickgridsamples/)

and Microsoft Developer Blog mentioned it.

(The URL is https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-7-preview-6/#experimental-quickgrid-component-for-blazor).

To the best of my knowledge, Blazor is one of the easiest frameworks among any other SPA frameworks that have a server-side rendering capability.

·
Reply
jsakamoto
jsakamoto
·
September 25th 2022 at 11:45PM

> I think you can also use dart for server-side rendering, so that you don't need to learn a new language

I'm not familiar with Dart and Flutter but if that is correct, I feel that is a good suggestion.

·
Reply

With Blazor, depending on the UI you want to build, html and css may be unavoidable because you might have to use Bootstrap, flexbox, etc to properly position and customize the elements. You may be able to get away with using 3rd party component libraries, e.g. Radzen, Telerik, etc., but again it depends on your app. I haven't had to use Javascript much actually, a couple use cases where I've had to was for file downloads and window events.

READ MORE
11 upvotes·1 comment·32K views
Miharbi Hernandez
Miharbi Hernandez
·
February 8th 2023 at 2:22PM

Hi there!

I have been using Quasar for 4 years, at the beginning it was because the Vue UI components, they have a very good ones, but later it was because out of the box Quasar comes with a lot of features that make it a five stars framework.

https://quasar.dev/quasar-plugins/meta is the feature that you need to the SEO

·
Reply
View all (10)
Needs advice
on
Quasar FrameworkQuasar Framework
and
Vue CLIVue CLI

I am trying to build a Cordova app using Vue.js and Quasar Framework, should I use the Vue CLI or quasar CLI? Which would be better for extensibility?

READ MORE
4 upvotes·59.3K views
Replies (2)
Needs advice
on
Quasar FrameworkQuasar Framework
and
VuetifyVuetify

We want to build an e/m-learning platform, so please guide us on choosing Quasar Framework or Vuetify? Our preferred tech stack is - Vue.js, GraphQL, Apollo. Which is best suited for the production-level UI framework?

READ MORE
3 upvotes·76.3K views
Replies (3)

Quasar and Vuetify are two entirely different beasts - so your decision depends on what you need:

Quasar is a framework to develop multi-platform apps from the same code base. It supports mobile apps, websites (SPA or PWA if you want) and desktop apps. It comes with a build system and also with a UI framework (visible components).

Vuetify is a UI components library. So if you only need that, it might be the choice for you.

READ MORE
2 upvotes·988 views
Recommends
on
Quasar Framework

Both of these frameworks have too much baggage for me. My bundle size tends to be rather large with each option, though both support tree-shaking. I prefer Vuetify for content sites and ecommerce and Quasar for building actual applications, because the components are very intuitive and much easier to use together in odd combinations than Vuetify: everything "just works" together with very simple and consistent styling and APIs.

If it were me, I would use Gridsome or Nuxt with Tailwind and minimal dependencies. You get a great DX still with tailiwind, good "tree-shaking" through PurgeCSS and nothing you don't need, with full control over your own components.

READ MORE
2 upvotes·1.1K views
View all (3)
Founder/CTO at Bookla Foundation·
Needs advice
on
FlutterFlutter
and
Quasar FrameworkQuasar Framework

I'm evaluating Flutter right now, and it's taking a while. Also, Quasar Framework seems like a viable option to have 2 phone apps and a web app? What are your thoughts?

READ MORE
2 upvotes·24.4K views
Replies (1)

While they may not be the same "thing" to compare, yes Quasar is a very good option for building single code-based PWAs, SPAs, and even desktop applications.

READ MORE
1 upvote·726 views
Shared insights
on
PostgreSQL ModelerPostgreSQL Modeler

Vue.js vuex Vue Router Quasar Framework Electron Node.js npm Yarn Git GitHub Netlify My tech stack that helps me develop quickly and efficiently. Wouldn't want it any other way.

READ MORE
12 upvotes·1.6M views
Developer and Owner at Appurist Software·

I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

READ MORE
15 upvotes·1 comment·1.1M views
Paul Whittemore
Paul Whittemore
·
November 8th 2019 at 2:16AM

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

·
Reply