Quasar framework introduction

Quasar Framework a set of code, multi terminal operation, brief clear design style, elegant writing, extremely flexible component expansion, source code is an art, and greatly save the development cost.

Quasar is an open source framework based on vue.js that allows Web developers to quickly create multiple types of websites/applications:

  • SPAs (Single page application)
  • SSR (server-side rendering application) (+ optional PWA client takeover)
  • PWA (Progressive Web Application)
  • BEX (Browser Extension)
  • Build mobile Apps (Android, iOS…) using Cordova or Capacitor
  • Multi-platform Desktop Application (using Electron)

Quasar allows developers to write code once and deploy to a website, PWA, Mobile App, and Electron App simultaneously using the same code base. Design applications using state-of-the-art CLI and provide well-written, very fast Quasar Web components.

What is the SSR

Quasar and vue.js are frameworks for building client applications. By default, the Quasar Vue component generates and processes the DOM as output in the browser. However, you can also render the same component as an HTML string on the server, send it directly to the browser, and finally “mix” the static markup into a fully interactive application on the client side.

Quasar applications rendered by servers can also be considered “isomorphic” or “generic,” which means that most of your application code can run on both the server and the client.

Why SSR

The main advantages of SSR over traditional SPA (single page application) are:

Better SEO because search engine scraping tools will see the fully rendered page directly. Faster content display times, especially when Internet speeds are slow or devices are slow. Server-rendered markup can be displayed without waiting until all JavaScript has been downloaded and executed, so your users will see a fully rendered page faster. In general, this leads to a better user experience and is critical for applications where content presentation time is directly related to conversion rates. There are some trade-offs to consider when using SSR:

  • Development restrictions. Browser-specific code can only be used within certain lifecycle hooks; Some external libraries may require special processing to run in a server-rendered application.
  • More server-side load. Rendering a complete application in Node.js will obviously take up more CPU resources than just serving static files, so if you expect high traffic, be prepared for the corresponding server load and use caching strategies wisely.

The first question you should ask before using SSR for your application is whether you really need it. It depends on how important content display time is to your application. For example, if you’re building an internal dashboard, it doesn’t matter if it takes a few hundred milliseconds to load initially, then SSR might seem too big. However, SSR can help you achieve optimal initial load performance in situations where presentation time is absolutely critical.

SSR build commands

$ quasar dev -m ssr # .. Or longer form: $quasar dev --mode SSRCopy the code

Build the production version

$ quasar build -m ssr # .. Or longer form: $quasar build --mode SSRCopy the code

SSR deployment

Distributable folders generated by the Quasar CLI can be provided by static Web servers when deployed as SPA or PWA. However, this is not the case with SSR (Server-side rendering) versions. In this case, your distributable content also includes your production WEB server — which can be adjusted from/src-SSR.

After building the application in SSR mode ($Quasar build-m SSR), the generated folder contains a separate WEB server tuned for use with SSR.

You’ll notice that it contains its own package.json file, which your NPM startup script might look like after installing PM2 on the server

"scripts": {
  "start": "pm2 start index.js"
}
Copy the code

summary

After the successful implementation of several projects of Quasar development, I think That Quasar is a better framework. I only need to focus on business, and the control library is very rich, which greatly improves the development efficiency.

The resources

Quasar official website address

Making the address