Quasar Framework: Tutorial part 1 — Introduction

So, this is my first ever article as I always wanted to help the community by providing meaningful content regarding the programming in easiest way. I thought to give a try writing this article in my free time during this quarantine period and also learn some creating things out there. Before we get started let me introduce myself, I am Jaldhi Bhatt, currently working as a Software developer at Samcom Technobrains Pvt Ltd, India.

So in this part of the tutorial we’re gonna go through the introduction of the Quasar framework, let’s just divide them into the list

• What is Quasar framework? On which platform it is based upon?
• Comparing Quasar Framework (VueJS), Angular, React JS (In my opinion)
• Why choose Quasar Framework over Angular and React (In my opinion)
• And obviously some code to not make this article boring 😄

What is Quasar Framework?

• Quasar framework is mainly based upon VueJS. Okay this is fine, but what’s next?
• We can use single codebase for multiple platform. In detail, Quasar framework have support for mobile (Android + iOS), desktop and web application. It support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app)😮 😮 WHAT? I mean WHAT!!! Seriously?
• Quasar framework has it’s own architecture that we can easily customize CSS and JS in the way we want.
• If you are web developer, then you can quickly develop responsive, fast and multi platform apps in less time with quite good productivity. Quasar’s motto is write code once and simultaneously deploy it.
• Quasar provides support for App extension, RTL, own responsive material design components, multiple language support and Quasar CLI.

Comparing Quasar Framework (VueJS), Angular, React JS (In my opinion)

• Vue is the youngest family of Javascript framework hence it has less followers comparing to React and Angular. Nowadays, React has the highest popularity among all of the above.
• Performance of the Javascript framework is highly dependent upon the DOM type, either it is Virtual DOM or Real DOM. Vue and React uses Virtual DOM while Angular uses Real DOM. This ensures faster and bug-free performance for VueJS. Vue and React are less complex for developers comparing to Angular because the use of Virtual DOM.
• Vue came after Angular hence it eliminates most of the problems developers facing in Angular and also it provides high performance comparing to Angular.
• One of the most advantage I found is the Single File Component (SFC). Vue uses single file component that contains template, script and style without containing unnecessary setup code. That’s it. HOWz that simple? 😆
• References

Comparison of most loved framework according to survey

Why choose Quasar Framework?

• According to my opinion, there are many advantages I found to choose Quasar framework and the main reason is the support for multi platforms.
• Responsive material design based UI framework with lots of prebuilt component library is another best thing which helped me to choose Quasar framework. You may take a look and explore the component library https://quasar.dev/vue-components
• Quasar has quite good app architecture that has multi language support and store structure. I was not aware about the store first while learning but when I came to know about the structure of store and it’s simplicity, I always recommend and use store in every Quasar app. https://quasar.dev/quasar-cli/cli-documentation/vuex-store
• With Quasar, one can also create shared component to use in another Vue or Quasar project. For this, using Quasar, one can separate complex logic, template and UI and make own library and add it to boot file in the Project.

Enough talking, let’s code.

Okay so we’re not gonna install anything in this part and I guess this is meaningless but we will just take a look at what made me excited while first looking at the Single File Component of Vue and that will also keep you excited to see next part ! 😄

Single File Component (SFC) mainly contains three part: Test.vue

• HTML

<template>
   <div>{{ text }}</div>
</template>

• JS

<script>
  export default {
    name: 'ComponentName',
    data: (){
      return {
       text: 'Some content...'
      }    
    }
  }
</script>

• CSS (style)

<style lang='css'>
</style>

SFC (Single File Component)

Now that was quite simple. Quasar framework also uses SFC and keep everything separate in the web application and load only necessary component that needed.

• Quasar uses routes.js in their structure to handle routing. While there is another VueJS framework is NuxtJS which does routing based upon the folder structure only. So, when I went deep down into the VueJS I always found exciting stuff to learn and explore the possibilities of next generation development.

Contact:

Jaldhi Bhatt - Software Developer - Samcom Technobrains | LinkedIn

Email : bhattjaldhi27@gmail.com

References:

Why Quasar? | Quasar Framework

Vue Components | Quasar Framework