Desarrollo Frontend con VueJS

Diego Antonio Momotic Montesdeoca

Estudiante de Ingeniería en Ciencias y Sistemas - USAC

Palabras Clave:
Desarrollo web, Front-end, Vue, Cliente, Servidor, JavaScript, Framework.

Vue es un framework JavaScript de código abierto, enfocado completamente al desarrollo de interfaces, creado por el ex empleado de Google Evan You y lanzado en el año 2014[1].

Una de las principales razones que me motivaron incursionar en Vue luego de interesarme en el desarrollo web frontend, fue la impresionante cantidad de artículos y tutoriales que existen en internet sobre Vue, esto me llevo a investigar un poco más y a realizar comparaciones de Vue con el framework Angular y con la librería React, los 2 gigantes para el diseño de interfaces. Mi sorpresa fue grande al notar que, en muchos artículos con relación al tema, posicionan a Vue entre los mejores en cuanto a su rendimiento y curva de aprendizaje donde claramente destaca sobre Angular y React.

Imagen 1: Logotipo de VueJS,

¿Qué debo saber antes de utilizar Vue?

Lo único que necesitas, es tener conocimientos en HTML y JavaScript. Adicionalmente es un “plus” conoces sobre CSS, sin embargo, no es del todo necesario ya que existen algunas herramientas que facilitan el proceso de estilización en nuestras aplicaciones hechas con Vue de una manera sencilla, sobre estas herramientas hablaremos un poco más adelante.

¿Qué beneficios obtengo al utilizar Vue?

A continuación, detallaré el conjunto de Característica que me han convertido en un gran fan de este poderoso y magnífico framework.

  • Debemos preocuparnos únicamente por los datos y no por la renderización. Nosotros necesitamos enfocarnos específicamente en la lógica de procesamiento de datos y será Vue, el encargado de renderizar la información en pantalla cada vez que detecte un cambio

  • Integración sencilla. Desde mi primer proyecto con Vue (el típico “Hola mundo”), fue grande mi sorpresa al notar lo extremadamente fácil que es integrarlo a nuestros proyectos, ya que, basta con añadir el CDN a nuestra página y ya estaremos listos para iniciar a trabajar con el framework. Otras herramientas requieren mucho más esfuerzo para su integración.

Imagen 2: Adición de Vue a nuestro proyecto,

  • No necesitas aprender ningún lenguaje adicional. Como lo mencioné anteriormente, solo debemos tener buenas bases en HTML y JavaScript, estos lenguajes son los que, por lo general, todos necesitamos aprender antes de incursionar en el maravilloso mundo del desarrollo web. Esta es una de mis características favoritas ya que otros frameworks requieren un lenguaje adicional para poder aprovechar sus características al máximo.
  • El código completo de un componente puede colocarse en un solo archivo. Vue nos permite agregar todo el código HTML, JavaScript y CSS que conforman un componente, en un mismo archivo con extensión vue, lo que facilita la lectura y compresión del componente como tal.
  • El framework es modularizado. Esta característica nos da una versatilidad impresionante conforme nuestro proyecto va creciendo, ya que nos permite integrar funcionalidades a nuestro proyecto, hasta que la necesitamos y todas estas características se encuentran divididas en una serie de librerías las cuales han sido diseñadas por el mismo equipo de desarrollo de Vue.
  • Soporta diseños para páginas webs complejas. Actualmente Vue cuenta con su propia consola llamada vue-cli, la cual también incluye una interfaz gráfica. Esta herramienta está un poco más enfocada al desarrollo de aplicaciones avanzadas con Vue, gracias a la integración de las distintas librerías de este framework como vue-router, vuex o vue-server-rendering.
  • Existen herramientas que facilitan estilizar nuestros componentes. Estas son de gran ayuda para quienes no dominamos CSS en su totalidad y nos apoyan a lograr diseños amigables y atractivos a la vista de los usuarios. Dentro de estas herramientas podemos destacar BoostrapVue y Vuetify las cuales podemos utilizar de forma gratuita y son un complemento que agilizarán un poco más nuestro desarrollo.
  • Permite la creación de SPA (Single Page Application). Estas aplicaciones son construidas una única vez por el servidor y la interacción del usuario junto con el poder de Vue, permiten la renderización de los cambios de una manera sumamente rápida y solo cuando es necesario, haciendo que las peticiones al servidor sean de un tamaño menor y logrando aplicaciones mucho más rápidas que las tradicionales.

Seguramente existe un sinfín de características adicionales las cuales han hecho de Vue uno de los frameworks más populares y queridos por la comunidad en estos últimos años. Ha demostrado estar a la altura de los gigantes y en ciertos aspectos ha salido como ganador al comparar este framework con los demas. El objetivo de este artículo no es demostrar que el resto de frameworks son peores o malos “porque no lo son”, sin embargo, personalmente he encontrado en Vue la elegancia, potencia y sencillez, que me ha llevado a elegir este framework como mi favorito.

Si te encuentras interesado en el desarrollo web frontent te extiendo una cordial invitación, para que puedas conocer un poco más sobre esta magnífica herramienta y seguramente quedaras igual de impresionado que yo.

Conclusiones

  • El desarrollo web en la actualidad es sumamente complejo y debemos dominar las tecnologías y herramientas que se utilizan para su construcción.

  • Todos los frameworks son sin duda de gran ayuda, no existe ninguno mejor que otro.

  • Puede hacerse una carrera muy completa en el desarrollo frontend con Vue.

  • Debemos tener criterio personal para elegir las herramientas a utilizar en el desarrollo de cualquier proyecto.

Referencias