Yet another VueJs Framework
¿Ya no tenemos demasiados frameworks? ¿Qué es quasar? ¿Por qué es diferente?
Estas fueron algunas de las primeras preguntas que me hice cuando un amigo me comento sobre Quasar (/ˈkweɪ.zɑɹ/). Creo que uno va conociendo el verdadero potencial con el paso del tiempo al usarlo cotidianamente y encontrando los atajos que hacen que las tareas rutinarias sean mucho más sencillas, de la performance de sus componentes, de la excelente documentación, de la versatilidad de adaptarse a las necesidades permitiendo crear SPAs, SSR, PWAs, Aplicaciones mobile (por debajo usa Cordova) y multiplataforma (usando electron). Existen muchas otras cosas pero mi intención no es aburri por lo que no haré la lista extensa y solo destacar las mejores (en mi opinión) características, y si te convenzo podrás encontrar muchas más facilidades por tu cuenta.
1. Command Line Interface
Gracias al CLI que nos proporciona podemos agilizar el setup de los proyecto con un simple cuestionario (ya lo veremos en la siguiente sección), levantar un servidor y actualizar las dependencias de Quasar en futuras revisiones. Si usamos el comando dentro de un proyecto Vue (construido a partir del CLI) tendremos muchas otras funcionalidades como:
- dev: Levanta un servidor para desarrollo
- build: Ejecuta ciertas tareas para optimizar el proyecto para producción
- new: Permite crear páginas, layouts, componentes base (una de las mejores funcionalidades).
- run: Facilita el uso de comandos que se incluyen en extensiones de quasar que podemos instalar
- test: Lanza una serie de test incluidos en el proyecto
Existen algunos otros comandos que pueden conocer más ejecutando quasar --help
2. Un solo código, múltiples plataformas
La posibilidad de escribir un código y poder usarlo en diferentes entornos es una de las mejores cualidades de Quasar y por lo que me emociona tanto este framework. Es verdad que este tipo de versatilidad conlleva desventajas de performance, limitaciones, etc pero como siempre digo "Todo depende de los requisitos y nuestras expectativas". Más allá de esto último este es un listado de los que podemos conseguir con solo una aplicación:
- SPA (Single Page Application/Website),
- SSR (Server-side Rendered App/Website),
- PWA (Progressive Web App),
- Mobile App (through Cordova),
- Electron App
3. Componentes
Los muchachos de Quasar no se detuvieron con crear una estructura de proyecto, crear comandos para facilitarnos la vida, sino que también ofrecen una basta lista de componentes que en mi opinión es una de las mejores del mercado. Podemos encontrar componentes siemple como los típicos buttons, cards o tabs y algunos otros que generalmente son incluidos como librerías externas, por ejemplo: knob, WYSIWYG, Uploaders, etc.
Me gustaria tambien destacar el esfuerzo que hicieron que los cambios de estilos y funcionalidad de cada uno de los componentes. Gracias a esto con solo unos caracteres adaptamos cualquiera de ellos a nuestras necesidades.
4. Integración con proyectos existentes
Si estás pensando que ya tenés el proyecto funcionando o una gran parte desarrollada y que no queres perder tiempo comenzando todo desde cero, este punto es para vos. Quasar provee un modo llamado UMD/Standalone (Unified Module Definition) que permite agregar las funcionalidades (mediante librerías) que necesitemos. En la siguiente tabla se muestran las características habilitadas en cada MODO.
Hello World Quasar!!
Para terminar quiero dejar unos simples pasos para crear tu primer proyecto. En primer lugar hay que saber que requerimos tener en nuestra máquina instalado una versión igual o mayor a 8.9.0 de NodeJs que podemos encontrar en su sitio oficial (https://nodejs.org/es/).
Instalación quasar
// Instalamos de forma global el CLI de Quasar $ npm install -g @quasar/cli // Podemos checkear si Quasar fue instalado correctamente con el siguiente comando $ quasar -v // Creamos nuestro proyecto cambiando por el nombre que querramos $ quasar create
El comando comenzará un proceso de consultas base para configuración del proyecto
? Project name (internal usage for dev) hello-quasar
? Project product name (official name; must start with a letter if you will build mobile apps) Hello Quasar App
? Project description A Quasar Framework app
? Author FZAMUDIO
? Check the features needed for your project: ESLint, Axios
? Pick an ESLint preset Airbnb
? Cordova id (disregard if not building mobile apps) org.cordova.quasar.app
? Should we run `npm install` for you after the project has been created? (recommended) NPM
Levantamos la aplicación con
// Corremos el proyecto en modo desarrollo $ quasar dev
Se abrirá un sitio con la dirección http://localhost:8080/#/ para que podamos probar nuestro proyecto y así de sencillo es trabajar con Quasar.
TL;DR
Configurando Visual Code
En el caso que estés usando VS Code sugiero seguir los siguientes pasos para tener un desarrollo más placentero. La idea es instalar varias librerías y mejorar la configuración para aumentar la calidad del código. En primer lugar instalaremos ESLint que nos provee una gran set de reglas que se aplicaran a nuestro código para asegurar que cumpla con ciertos criterios, esta es una de las mejores herramientas que podemos contar los desarrolladores para evitar bugs producidos por esos ; perdidos. Luego instalaremos Vetur que nos ayuda agregando Emmet, formatting, IntelliSense y muchas otras cosas más. Estos paquetes necesitan una configuración base que explicita cuando debe actuar y en qué tipo de archivo hacerlo. Por último recomiendo usar Prettier para agregar ciertas cuestiones de estilo al código. Para finalizar dentro del Visual Code utilizaremos CTRL/CMD + SHIFT + P y escribiremos Open Settings (json) y lo seleccionaremos para agrgar las siguientes líneas al archivo abierto.
{ "editor.formatOnPaste": true, "editor.formatOnSave": true, "eslint.autoFixOnSave": true, "eslint.validate": [ { "language": "vue", "autoFix": true }, { "language": "html", "autoFix": true }, { "language": "javascript", "autoFix": true } ], "prettier.eslintIntegration":true, "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.js": "prettier-eslint" }
Puedo sugerir otros paquetes pero dejo a criterio del lector ver cuál se adapta mejor a sus necesidades y gustos.