Introduction to Quasar & Hybrid Mobile Apps

Created by Divya Sonara

Agenda

  • What is Hybrid apps?
  • What is PWA apps?
  • What is Quasar Framework?
  • Features of Quasar Framework.
  • Installation and setup project
  • Folder Structure of project
  • Layout and Pages
  • Vue component
  • Style & Identity
  • Quasar Framework in Web, Mobile & Desktop
  • Demo App
  • Q&A
What is Hybrid apps ?
  • Hybrid apps are like any other apps you find in your phone.
  • Hybrid apps are built with a combination of web technologies like HTML, CSS and JavaScript
  • The key diffrence is that Hybrid apps are hosted inside a native application that utilizes a mobile platform's WebView

Example of Hybrid apps

What is PWA?
  • Enhanced Web App
  • Add to home Screen
  • Improved Performance & Speed
  • Offline Capabilities
  • Background Sync
  • Push Notifications
  • Native Device Features:
    • Camera
    • Location

why quasar exists?

History of QUasar
  • Razvan Stoenescu, the person who created the Quasar framework, tells us story how he came up with this amazing all-in-one tool.
  • This happened around 2015 when he was using different software tools for different projects.
  • He was working on iPhone apps, Android apps, desktop apps for Apple and Windows, websites, and more.
  • Each project required a different software solution.
  • He longed for a hack to reduce all the complexities and develop different app flavors using a single codebase.
  • He couldn’t find any such tool, so he started to build it from the starch.
  • Razvan knew it wouldn't be easy, so we wanted a strong base on which he could build a robust framework.
  • He came across Vue.js that was quite in demand at that time. He overlooked the structure and decided to develop a framework on top of Vue.js.
  • And that's how the Quasar Framework was born.

what is quasar?

What is Quasar Framework?

Quasar Framework is a framework build on top of Vue.js , that allows you to build Modern Website (SPA, PWA, SSR), Mobile App (iOS, Android), and Desktop App (Windows, MacOS, Linux)

Web
SINGLE PAGE APPLICATION
(SPA)
Client side routing, Vuex, IE11 support, i18n
SERVER SIDE RENDERING
(SSR)
Node.js, Express
PROGRESSIVE WEB APP
(PWA)
Service Worker, manifest.json
Mobile App
Android
ios
Desktop App
Windows
mac
Linux
What is Quasar Framework?
  • an open-source vue.js based framework.
  • can create responsive Websites and apps.
  • can deploy in multiple flavors

Without Quasar

With Quasar

Quasar's motto

“write code once and simultaneously deploy it.”

Fetures of quasar

Installation

There are three ways to start using Quasar:

  • Quasar CLI
  • Vue CLI Quasar plugin
  • Embedding into an existing project through a CDN

installing using the Quasar CLI.


						yarn global add @quasar/cli
						# or
						npm install -g @quasar/cli

Project Set-Up

Run the following command in your CLI:


						yarn create quasar
						# or
						npm init quasar

Following this, you are going to be asked some questions. Here is my full configuration for the app we will be building.

configuration

Now we can move into the project folder and start up the application using the following commands:


						cd folder_name
						quasar dev

With the steps above complete, our app should be running on http://localhost:9000.

configuration

Quasar’s Folder Structure

configuration
The source folder consists of
  • quasar.conf.js
  • src/assets
  • src/components
  • src/css
  • src/layouts
  • src/pages
  • src/router
quasar.config.js
  • appConfig: This option is used to configure various settings related to the application, such as its name, description, and icon.
  • build: This option is used to configure the build process for your app, including settings for each platform (e.g. web, Android, iOS, and desktop).
  • devServer: This option is used to configure the development server that is used when running your app in development mode.
  • framework: This option allows you to configure the various components, directives, and plugins that are included in your app.
  • animations: This option allows you to enable or disable certain animations and transitions in your app.
  • extras: This option is used to configure additional Quasar components and plugins that are not included in the default installation.
  • electron: This option is used to configure the behavior of your app when running as an Electron desktop application.
  • cordova: This option is used to configure the behavior of your app when running as a Cordova mobile application.
  • capacitor: This option is used to configure the behavior of your app when running as a Capacitor mobile application.
  • ssr: This option is used to configure server-side rendering for your app.
  • pwa: This option is used to configure the behavior of your app when running as a Progressive Web Application.

Layout and Pages

App Layout and Pages

Quasar provides several app layout options to help you create responsive and flexible user interfaces.

Vue components

Vue components

Quasar is a popular UI library for Vue.js that provides a comprehensive set of pre-made components to help developers quickly build beautiful and responsive web applications.

Style & Identity

Style & Identity

Quasar's Style & Identity system allows developers to easily customize the look and feel of their web applications using predefined themes, CSS variables, and other powerful features.

MOBILE APP SETUP


						quasar mode add capacitor
						# and then 
						quasar dev -m capacitor -T [android|ios]

to get more details on this check: Mobile Apps

DESKTOP APP


						quasar mode add electron
						# or 
						quasar dev -m electron

to get more details on this check: Desktop Apps

PROGRESSIVE WEB APP


						quasar mode add pwa
						# or 
						quasar dev -m pwa

to get more details on this check: PWA Apps

Demo

SPA, PWA, Desktop, Mobile
Notes App

Q & A