How Quasar Framework enabled to build a full app in 3 weeks

A feedback from the field

First: sorry for my english, I am not native — Feel free to correct me if I made any grammatical mistake :-)

Each project is the opportunity to search (again) for the perfect stack

When I built EmailBatch — a web app enabling to create infinite email addresses and to bundle emails together into one email — the first question that I had in mind was: “hmm, which frameworks will I choose this time?”.

I discovered Quasar Framework almost randomly, and it was unexpected. After a reading of the manual, I had immediately a good feeling about it: an impressive list of components, a few lines to describe the deployment. Good sign. In addition, it is using VueJS, which was perfect for me as I feel more comfortable with this language than React.

So, I started to code with Quasar for the frontend, and with Laravel for the backend, which is usual for me as I like Laravel. The API was made with Laravel Dingo, with a MySQL database.

The main difficulty of Quasar: the start!

Objectively I must admit that it was a pain to start with Quasar. Just for one reason: the authentication. I wanted to implement JWT to protect the backend API, and it was not so easy. I selected a few articles but I modified some stuff as it turns that none of them — at least in July 2018 when I looked at it — were complete enough. I can provide the code for those who can be interested, and despite there is nothing fancy, it is time-consuming to develop it almost from scratch on the client side. In addition, it is not very intuitive, and relatively ugly (a standalone JS module named “auth.js”, a function in the Router file, two layouts — one for the the logged users, the other for the unauthenticated users).

Well. This start was a bit difficult, and I think that for a beginner it can and should be improved. Definitely, what I would expect from a client-side framework is an integrated optional authentication supporting all major standards and third-party authentication systems (Google, Social media, and so on).

The big surprise

After this laborious start, it was the paradise. Really. I didn’t feel lost at all, it is only VueJS on steroids. The components are extremely well designed, and the online documentation very good so you don’t lose your time Googling the net.

Difficulties? None. Even when the app has been set up in production. One command followed by a Rsync of the dist folder. That’s it. Done.

The Stats

At the start, before starting coding, I expected to pass more time on the frontend than the backend, which is a relatively simple API / CRUD things. But the statistics just show the opposite:

Development time per language — EmailBatch

As you can see, VueJS — and so Quasar — counts for a relatively small part of the overall project, despite it is the whole frontend. Cumulatively, the frontend was developed in 26 hours only. These hours contain the learning of the framework! And now that I know it a bit more, I suppose it can be a lot quicker. Amazing.

You can see in the screenshot above that I used Perl. It was at the end of the project, to make some scripts to update/deploy easily the backend (merging the git dev branch to master, tag it and pushing it, connecting to SSH, fetch the right version, clearing cache, and so on). Yes, I know, I can use bash but I am more comfortable with Perl :-)

The project (a bit better than a MVP) was achieved in 3 weeks.

That’s good, but what is your frontend?

Surprisingly, this is not a “very small application”. I qualify it as a medium one — at least for a Indie Hacker. It contains more than 10 different screens, several dialog to configure things, and so on.

Some screenshots

In the screenshot below you can see a DataTable, with a custom format for one column, and a sub-label for the first column. In the below half-part, the email clicked in the datatable is displayed, with the usual information (sender, recipient, date, etc.).

EmailBatch — The emails view, using the DataTable component

The screenshot below shows the dashboard. Charts are not included in the Framework, but are easy to install and at least you can choose the library you want. Here, I selected vue2-frappe

The dashboard using vue2-frappe for the charts

Next screenshot, so you will know another Quasar Framework component ;) Here, we see a List component, with icon, label and sub-label, and various buttons which are part of the Quasar Framework. Yes, you can choose exactly the button you want, everything is ready: a round button, a flat button with an icon, the color, etc.

Customizing the colors — and therefore providing an identity to your application — is very simple: you just have to override Stylus variables ($primary, $secondary, etc.). In short, if the green is ugly (is it?) I can change everything to blue if needed in 20 seconds.

The categories using the Quasar Framework List components

Here you can see some “cards”, available in the Framework. The grid is made manually in VueJS (nothing fancy), but there is a new feature for the version 0.17 where you can set up a DataTable in Grid mode.

The Newsletters library, using the Quasar Card component

And here, it is a simple modal with some form elements and buttons, everything being integrated components, so very easy to implement.

The “Crontab” for the email bundle, using a Quasar Modal

Conclusion

The conclusion is clear for me: this framework is fantastic for those who like VueJS. I am far to be an expert of the Quasar framework and there are probably some small bugs in my code, but the learning curve has been extremely fast and it enabled to achieve good results in a short amount of time.

Will I use it again? 100% sure.

And you know the best? I made a responsive web app, but I am a very few commands away to build a mobile app that I can publish to the Apple or Android Store. This is Quasar.