Esta página encontrarás una Introducción y Características de VUE que te permitirán desarrollar proyectos de frontend en este framework famoso y versátil, a medida que avance en este mundo de la Programación Web encontrará lo fascinante que es, bienvenido!

Para aprender backend en Java siga este vínculo

1. Aplicaciones en SPA

En esta Introducción y Características de VUE lo primero es entender las Single Page Application o SPA es la forma de programar páginas web interactivas en la actualidad, estas páginas web se caracterizan por no requerir la actualización de todo el contenido cada vez que se realiza una acción por parte del usuario.

Para entender este concepto usemos la siguiente imagen como referencia. Aquí se aprecia que el usuario en el computador de la izquierda realiza una petición HTTP en el momento de escribir una URL, por ejemplo midominio.com, esta URL es traducida por el sistema DNS a una IP la cual a la larga corresponde a una máquina o servidor, este servidor a su vez procesa la solicitud y devuelve el correspondiente a la Página Web usando HTML, JS y CSS.

En las Páginas Web tradicionales cada acción del usuario implica que el servidor envíe toda la Página Web y el navegador tenga que renderizar todo lo cual produce un parpadeo de la página, lo cual además de afectar la experiencia del usuario termina siendo muy ineficiente.

Modelo de Páginas Web Tradicionales
Figura 1. Modelo de Páginas Web Tradicionales

2. Algunas definiciones

Antes de continuar es conveniente contar con algunas definiciones de terminología que se han visto hasta el momento.

  • CSS: Hoja de Estilos en Cascada, permite aplicar estilos gráficos para darle diseño a los diferentes componentes que se encuentran en una página web, entre otras acciones comunes se encuentran la definición de estilos de texto, posiciones, colores, etc.
  • DNS: Servicio de Nombres de Domino, es un sistema o base de datos que funciona para realizar traducciones de un nombre de dominio por ejemplo google.com a su correspondiente IP a fin de ubicar una máquina en una red de datos como Internet.
  • JSON: Notación de Objetos de JS, permite dar formato a datos usando una cantidad mínima de overheading y que a la vez sea fácil de entender por parte de los seres humanos, a diferencia por ejemplo de formatos binarios.
  • HTML: Lenguaje de Marcas de Hypertexto es utilizado para escribir Páginas Web y es interpretado por navegadores que luego permitiran mostrar este contenido en el propio navegador
  • HTTP: Protocolo de Transferencia de Hypertexto utilizado para transmitir paquetes que en su contenido tendrán HTML correspondiente a páginas web o peticiones de navegadores web.
  • JS: Javascript es el lenguaje utilizado por los programadores del frontend para escribir la lógica y el comportamiento de las Interfaces Gráficas de usuario mostradas en los navegadores.
  • URL: Localizador Uniforme de Recursos o simplemente la dirección de una página web como google.com
  • XML: Lenguaje Extensible de Marcas, es el conjunto universal de todos los lenguajes de marcas que permiten formatear datos a fin de hacerlos legibles tanto por humanos como por máquinas. En estos formatos se puede describir prácticamente cualquier dato o incluso bases de datos.

3. SPA vs Web Tradicional

La principal diferencia entre el SPA y el Web Tradicional queda establecida en la misma forma en que se crean comunica la página web con el servidor y para ellos vamos a entender por partes la comunicación:

  1. Lo primero que ocurre es que el usuario navega a una URL ya sea escribiendo la dirección en la barra de direcciones del navegador o dando clic en un enlace.
  2. Esta navegación involucra una petición que por ser la primera vez implica diferencia entre la Web Tradicional y SPA, puesto que para ambas se tiene una respuesta consistente en HTML, JS y CSS.
  3. En la interacciones posteriores del usuario y el navegador es que se nota la diferencia, mientras que la web tradicional sigue devolviendo HTML, JS y CSS, un página SPA solo devuelve contenido de datos normalmente formateados con JSON o XML haciendo que no se recargue toda la página sino simplemente la zona de la página que requiere la actualización.

Por lo anterior, el paradigma de SPA y programación reactiva implica actualizaciones más rápidas y eficientes, una mejor experiencia del usuario y comunicaciones optimizadas en tamaños y tiempos. La siguiente imagen ilustra una página web actualizándose en un solo punto producto de una respuesta en JSON.

Actualización de Página web después de la segunda petición usando SPA
Figura 2. Actualización de Página web después de la segunda petición usando SPA

4. Componentes del Framework

Para desarrollar Páginas Web usando SPA se cuenta con muchos framework y uno de los más populares por su facilidad de aprendizaje es VUE que permite trabajar con los lenguajes que el programador de frontend ya conoce como HTML, JS y CSS.

Este framework está diseñado pensando en la experiencia de usuario está muy bien documentado y existen miles de componentes que permiten extenderlo y realizar desarrollos confiables manteniendo la simplicidad necesaria para mantener el código.

La página oficial de VUE la puedes encontrar aquí

5. Artículos de Interés

Listas Enlazadas en Java
Matemáticas
Tipos Nativos Objetos Variables y Constantes en Java