Primeros pasos en VUE

Contenidos

¿Qué es Vue?

Vue es un framework para realizar front-ends, es decir, lo que se muestra cuando entras en una web, es uno de los tres más importantes junto Angular o React y el último en salir.

VUE framework
VUE JS

Ventajas de Vue

Una página web tiene tres componentes HTML, CSS y JavaScript, Vue digamos que está por encima de esos tres componentes y ayuda a crear aplicaciones web, es una herramienta para diseñadores y programadores, hace más fácil crear y mantener.

Vue VS Angular VS React

Angular fue e primer framework en salir y gracias a Google, realmente fue una revolución pasar de JavaScript puro o con Jquery a un framework tan potente, la desventaja era la dificultad para aprender a usarlo, es realmente un framework muy organizado utiliza por defecto Typescript, un superset de JavaScript algo que está por encima, digamos que es la versión Java para Front End.

Segundo aparece React de la mano de Facebook, en poco tiempo hizo temblar la hegemonía de Angular, es mucho más sencillo de aprender y soluciona problemas de Angular, pero es mucho más libre y permite crear códigos que pueden llegar a estar muy desorganizados.

Principalmente Angular es complejo pero muy organizado y React es fácil pero puede llegar a ser caótico.

Llega Vue y para mi gusto solventa ambos problemas, por un lado es muy organizado, permite separar y componetizar y tiene una estructura que es bastante límpia, por otro es sencillo no es tan complejo como angular y posiblemente es hasta más fácil de aprender que React.

Principales Aliados de Vue

A diferencia de Angular que es un paquete ya entero con todo lo que necesitas (aunque puedes usar otras librerías) Vue es más parecido a React y tiene una serie de librerías o componentes externos que le ayuda a dar funcionalidades.

Vue, Vuex y Vue Router
Vue, Vuex y Vue Router

Peticiones externas Axios

Axios es la librería preferida para hacer peticiones al back-end, es la forma de optener datos del servidor, esta librería esta muy estandarizada para React o para NodeJS si tiene que pedir datos de otro server o microservicio.

Vuex y almacenaje de variables

Vuex es una forma de almacenar todas las variables que vamos a usar en una aplicación, imagina una aplicación que hace una petición a todas las redes sociales publicas de un usuario (Twitter, Instagram, Grupo Facebook…) suma el numero de seguidores, las veces que se ha compartido… y da una serié de resulados. Cada resultado es un componente Vue, obtiene los datos del Store de Vuex y hace el calculo, si cambiamos de usuario hace de nuevo las peticiones al servidor (con Axios) y actualiza los datos.

Vue Router

Vue no tiene por defecto un sistema de enrutado, si deseas crear una aplicación con rutas debes usar Vue Router, identifica la ruta del navegador con una página, que es un componente vue.

NUXT

Nuxt SSR de Vue

Nuxt es la última herramienta y para mi la mejor, de hecho siempre empiezo un proyecto Vue con Nuxt y estoy pensando en hacer una serie de tutoriales de Vue pero directamente con Nuxt.

Pero ¿Qué es Nuxt? es un SSR, ¿Qué es eso? renderiza Vue en el Back End, ¿me suena eso no relentiza y es peor la experiencia de usuario? cierto pero Google no es capaz de leer páginas hechas directamente con JavaScript (Angular, React o Vue) entonces para que posicione debemos mostrar a Google un HTML y al usuario una web dinámica y Nuxt nos facilita la vida en eso.

Además Nuxt es un framework completo, aunque es configurable, viene con Vuex, Axios, Dotenv, Vuerouter, esLint… y mucho más. Genera una estructura de carpetas que facilita aun más la programación con Vue. Por ello es casi recomendable usarlo de cero para cualquier proyecto.

Summary
Introducción a Vue
Article Name
Introducción a Vue
Description
Introducción a Vue el mejor framework para front end
Author
Publisher Name
Drouiz
Publisher Logo

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.