¿Qué es Vue.js? Resumen de un principiante

Aranzulla de Los Pobres

Vue es un marco de interfaz de usuario moderno que puede ayudar a cualquier persona a crear un sitio web o una aplicación web. Es ligero, flexible y fácil de usar. Pero también es un marco completo y rico que puede crecer para satisfacer las necesidades del creador de aplicaciones web más avanzado.

Echemos un vistazo a Vue.js y lo que necesita saber para comenzar a usarlo.

Vue es el marco más versátil actualmente disponible para JavaScript. También es el más fácil de entender para programadores y no programadores.

Vue es fácil de aprender para personas nuevas en el desarrollo de sitios web. Casi todos los que han trabajado con HTML se han encontrado con un muro en el que quieren hacer algo que HTML no puede.

Por ejemplo, ¿qué sucede si desea agregar un interruptor para cambiar el tema del sitio web de modo claro a oscuro? ¿Qué tal agregar un menú simple escondido detrás de un botón de hamburguesa? Ahí es cuando es posible que necesite aprender algo de Javascript .

Estas son tareas bastante fáciles de realizar en JavaScript. Puede agregar un fragmento de JavaScript a una etiqueta de secuencia de comandos y listo. Así es como se ve la entrada de texto con JavaScript vanilla:

La forma en que JavaScript hace referencia a los elementos de la página puede resultar confusa para los principiantes. Agregar JavaScript con Vue es tan fácil como agregar JavaScript vainilla. Pero con Vue, obtienes más funcionalidad y acceso a técnicas modernas de JavaScript. Así es como ingresa texto con Vue:

Analicemos un poco estos ejemplos. En JavaScript, el código tenía que buscar el elemento, elegir una apariencia y modificarlo. En Vue, le dijimos a HTML dónde esperar el texto variable. Luego creamos un objeto JavaScript, lo asignamos al elemento y configuramos el texto variable.

Este sencillo ejemplo ilustra un punto importante. Es mejor mantener el código separado de su HTML. En el ejemplo de Vue, Vue no manipula HTML directamente. Solo dirige su propio negocio. Y le dio a HTML más funcionalidad sin agregar ningún código.

Si está familiarizado con otros marcos, es posible que sepa que, por lo general, necesitan que cree una aplicación desde cero utilizando su tecnología. Por lo general, esto implica crear una aplicación desde la línea de comandos e iniciar un servidor. Pero en el ejemplo anterior, agregamos Vue a un sitio web estático sin toda esa complejidad.

Sin embargo, Vue es un marco. En su página de introducción, dice: "A diferencia de otros marcos monolíticos, Vue está diseñado desde cero para ser adoptable gradualmente". Esto significa que puede usar el poder de Vue que desee en sus aplicaciones.

Puede usar Vue para administrar una presentación de diapositivas de imágenes o puede crear una aplicación completa de una sola página con todas las campanas y silbidos. Esto incluye pruebas, enrutamiento, administración de salud, seguridad y más.

Gracias a su potencia y versatilidad, Vue atrae a una gran audiencia.

JavaScript es un ecosistema en rápida evolución con muchos abandonos. Puede disfrutar de una colección de herramientas y verlas quedar obsoletas dos años después. JavaScript también agrega complejidad a los sitios web por sí solo. La instalación de un marco y una enorme pila tambaleante de paquetes de Node solo empeora las cosas.

Algunas personas prefieren ceñirse a lo básico por esta razón. HTML funciona bien, CSS tiene sus peculiaridades y JavaScript es un poco raro. ¡Pero todos son sólidos como una roca! Siguen cambiando y evolucionando, pero de forma lenta y constante. Muchos frameworks terminan agregando cambios que romperán el código.

Sin embargo, hay algunos scripts, como jQuery y Handlebars, que te hacen la vida más fácil como programador front-end. jQuery comienza muy bien, pero se convierte en espagueti cuando su código base se vuelve demasiado complejo. El manillar también es agradable, pero no hace mucho para que el JS sea más fácil de usar.

Vue puede reemplazar ambas herramientas y resolver sus problemas. Y lo hace sin tener el control total de su sitio web. Introduce prácticas de JavaScript modernas sin problemas de JavaScript modernos.

Vue es un marco ligero con capacidades de marco mucho más pesadas. Si tiene experiencia con el desarrollo web front-end, puede aprender a usar Vue en días. Si no lo hace, solo puede comenzar con lo que necesita.

Una de las principales razones para usar un framework es que las herramientas que te brindan hacen que el desarrollo sea más rápido y fácil. Por ejemplo, una aplicación web progresiva se basa en la navegación programática, el diseño personalizado y la estructura que cambia sobre la marcha. Los marcos de front-end hacen que este desafío sea casi trivial. Y Vue no es una excepción.

Ahora puede completar proyectos que solían llevar meses o semanas, gracias a los marcos modernos. Y debido a que Vue es tan liviano y fácil de trabajar, puede completar prototipos en horas o días.

Los desarrolladores esperan algunos beneficios de los marcos frontales modernos. La sustitución de cadenas para HTML, la arquitectura basada en componentes y las herramientas son buenos ejemplos. Vue tiene todas estas ventajas, así como las mencionadas en la sección del marco anterior.

Los desarrolladores de aplicaciones web a menudo quieren que sus productos estén disponibles como aplicaciones móviles. Tradicionalmente, hacían esto contratando desarrolladores adicionales para crear para iOS y Android. Entonces tendrían que encontrar una forma de coordinarse entre las tres plataformas. Pero hoy existen otras opciones.

Una opción es utilizar NativeScript para crear aplicaciones móviles, lo que permite a los desarrolladores crear para Android e iOS con el mismo código JavaScript. Los desarrolladores de Nativescript pueden incluso llevar su código web a dispositivos móviles sin tener que contratar nuevos desarrolladores. Y tiene un gran soporte para Vue.

Vue, Angular y React son los tres marcos más populares según la encuesta State of JS de 2019 . Aquí hay algunos puntos a considerar sobre ellos:

  • Angular fue el primer framework web front-end de renombre. Es publicado por Google y existe desde 2010. Introdujo el mundo HTML dinámico a través de directivas y enlace de datos de tres vías que hace que el código se actualice mágicamente en la página sin una actualización.
  • React fue lanzado por primera vez en 2013 por Facebook y es una alternativa más accesible a Angular. React es mejor conocido por usar JSX y componentes.
  • Vue fue lanzado en 2014 por Evan You, un ex empleado de Google. Vue no ha introducido nada demasiado innovador. Pero introdujo una forma de trabajar mucho mejor y más limpia.

Beneficios de los tres grandes

  • Angular es una bestia de marco de nivel empresarial. Ha existido por más tiempo y está construido y mantenido por Google.
  • React fue el más adoptado de los tres grandes marcos, según el estado de JavaScript de 2019 . Se conoce como fácil de trabajar y flexible.
  • Vue es subjetivamente el marco más fácil de aprender e implementar
    . Y sigue siendo tan fácil como es sin sacrificar un rico y poderoso conjunto de funciones.

Crítica de los tres grandes

Angular

Angular ha sido muy difícil de aprender en el pasado. La versión 1 (AngularJS) utilizó mucha jerga informática de nivel universitario en su documentación. Sin embargo, la versión 2 (angular) se ha simplificado y optimizado enormemente.

  • Cuando Google lanzó Angular, mantuvo los conceptos de nivel superior de AngularJS. Pero la compañía cambió tanto los detalles que muchos desarrolladores todavía lo encontraron confuso.
  • Hubo muchos cambios en los primeros días de Angular, con cambios innovadores en casi todas las versiones. Angular es mejor ahora, pero sigue siendo muy formal, rígido y difícil de aprender para algunos desarrolladores.

Reaccionar

Uno de los aspectos mejores y más desafiantes de React es JSX. Condensa HTML, CSS y JS en un solo idioma. Esto hace que todo sea más fácil para los desarrolladores, pero más difícil para los diseñadores.

  • JSX también hace que sea más difícil trabajar con bibliotecas existentes. Además, se considera anti-patrón poner diseño, maquetación y código en el mismo lugar. Esto puede crear un código confuso e ilegible.
  • React maneja esto elegantemente usando componentes para separar el código. Pero depende de los desarrolladores individuales utilizar los componentes correctamente.
  • React es técnicamente un marco. Pero carece de algunas características importantes como la navegación y la gestión del estado a nivel de la aplicación.

Vue

Vue resuelve todos los problemas mencionados en los otros dos grandes. A diferencia de Angular, es fácil de aprender. Y a diferencia de JSX, los componentes de Vue separan HTML, CSS y JS.

  • Es mucho más fácil para los diseñadores trabajar en un componente de Vue. Y mantener todo limpio no depende totalmente del desarrollador.
  • Los mayores desafíos que enfrenta Vue son la adopción relativamente baja y la falta de "asesino de aplicaciones". Muchas empresas usan Vue, pero probablemente ninguna de ellas tenga reconocimiento de marca.

¿Vue es otra moda?

A pesar de que Vue ha existido durante varios años, sigue siendo el chico nuevo de la cuadra. Tampoco cuenta con el respaldo corporativo de los otros dos. Y como ya se mencionó, no hay aplicaciones excelentes que muestren lo que puede hacer.

Lo que le falta a Vue en soporte a nivel empresarial, lo compensa con pasión y soporte básico. Evan You dirige una campaña de Patreon para mantenerse a sí mismo y a otro desarrollador. En cierto modo, Vue se gestiona de forma democrática. Siempre que haya suficiente interés en Vue como para que las empresas estén dispuestas a respaldarlo, Vue se quedará.

Las mejores partes de Vue

Vue ofrece las mejores partes de los otros marcos frontales, así como muchas otras características exclusivas de Vue. Aquí hay solo una lista parcial:

  • Vue utiliza una arquitectura basada en componentes para estructurar y reutilizar.
  • Mantiene HTML, CSS y JS separados en sus componentes.
  • Vue les resultará familiar tanto a los desarrolladores como a los diseñadores.
  • Ofrece una GUI completa para servir, construir y crear proyectos.
  • Vue usa la recarga en caliente cuando se ejecuta como una aplicación. La recarga en caliente solo actualiza lo que ha cambiado en una página sin una actualización.

Vue es un proyecto de propiedad privada sin gastos generales ni políticas de la empresa. Esto podría hacer que sea menos deseable para las iniciativas empresariales. Pero es fácil de aprender y divertido de jugar, lo que lo hace perfecto para las nuevas empresas.

Quizás la mejor característica es que está diseñado por pragmatismo, no por un comité, que es todo lo que concierne al software de código abierto .