Quasar Framework for front-end development

By jPablo Caballero | January 10, 2020

Quasar is an open-source framework based on vue.js that facilitates the creation of responsive websites and apps of various types.

With Quasar you get a complete set of visual components that will speed up the creation of your app. The same codebase can be deployed in different ways:

  • Single Page App (SPA)
  • Server-Side Rendered app (SSR)
  • Progressive Web App (PWA)
  • Android, iOS, etc. mobile app (through Cordova or Capacitor)
  • Multi-platform Desktop App (using Electron)

On most web developments I focus on the backend, architecture, deployment, etc. If I could, I would only work on that part. Unfortunately, more often than not, I have to do frontend development also. Even though it’s not my favorite part, I understand it is utterly important, since it’s the point of contact between the user and the whole system.

For small projects, prototypes, proof of concept type of systems, many times I’ve gotten away doing extremely simple front-ends with plain JS and some libraries (jquery, underscore, etc.) or smaller frameworks (Backbone). But those approaches don’t help much with the visual organization and general looks of the app. Unless you put a lot of time into hand-tweaking the html and css, they look way too lame, particularly if you have to show that frontend to somebody else.

That is why I thought it was time to research and pick a framework that would help me take care of the frontend. My requirements were: a not-too-steep learning curve, decent tooling and code/app organization, good documentation, and pre-made components for the widgets you usually see in web/mobile apps. I was particularly interested in not having to set up a complex toolchain by hand in order for everything to work.

There is no shortage of frameworks for JavaScript, and it can be hard to pick one, particularly when you’re not really interested in js frameworks and you just want to get it over with. So, I only read about the most prominent frameworks (Angular, Ember, React, Vue, etc.), to get an initial idea.I was not really into learning a lot of new and complex abstractions, so some, like Ember and Angular, were discarded pretty soon. Additionally, Angular’s version 2 was coming out at that time, and I read it was incompatible with v1, so that didn’t sound reassuring to me. The thing was pretty much between React and Vue. At the time, I didn’t find a React component library that I liked, and basically I ran into Quasar. I read Vue’s documentation, and found it easy enough to understand in one sitting.

Once I downloaded and tried Quasar, and I knew it was very close to what I wanted. With the Quasar command line tool I could make a build very easily. When things didn’t work, error messages were descriptive. Not even for a second I had to worry about Babel, Webpack, Lint, or any of those other things I didn’t really want to learn about. Things worked. The underlying framework, Vue.js, was well documented and easy to understand. Quasar’s documentation itself is very good too. In many cases, copying examples from the documentation and pasting them in your app is enough to get started using Quasar components.

You can get something that looks like a decent, modern interface fairly easily and in little time. This is exactly what I wanted. For prototypes or ’exploratory’ apps, you can start adding components to a page (which is also a component), and then reorganize and create reusable custom components as you see fit. Or you can architect your interface from the start. The thing is, you have enough base components to create your custom panels, dialogs, etc. easily.

Of course, as your app becomes larger, you will need to learn more about Vue to solve different things, like connection with the server side, state management (with Vuex, probably), etc. But that’s just the nature of front-end apps. For the types of frontends I am likely to develop, I don’t mind getting my hands dirty solving those problems. But I don’t want to spend time creating visual components from scratch, or tweaking a lot of CSS for positioning things. If I get all of that done for me -and with Quasar, I do- I’m satisfied.