Una descripción general de Vue.js

Vue es un proyecto muy impresionante. Es un marco de JavaScript muy popular, uno que está experimentando un gran crecimiento. Es simple, diminuto y muy eficaz. Aprenda más sobre esto


Vue es un marco de interfaz de JavaScript muy popular, uno que está experimentando un gran crecimiento.

Es simple, pequeño (~ 24 KB) y muy eficaz. Se siente diferente de todos los demás marcos frontend de JavaScript y bibliotecas de vistas. Averigüemos por qué.

Primero, ¿qué es un marco de interfaz de JavaScript?

Si no está seguro de qué es un marco de JavaScript, Vue es el primer encuentro perfecto con uno.

Un marco de JavaScript nos ayuda a crear aplicaciones modernas. Las aplicaciones modernas de JavaScript se utilizan principalmente en la Web, pero también impulsan muchas aplicaciones de escritorio y móviles.

Hasta principios de la década de 2000, los navegadores no tenían las capacidades que tienen ahora. Eran mucho menos poderosos, y la construcción de aplicaciones complejas dentro de ellos no era factible en términos de rendimiento, y las herramientas ni siquiera eran algo en lo que la gente pensara.

Todo cambió cuando Google presentó Google Maps y GMail, dos aplicaciones que se ejecutaban dentro del navegador. Ajax hizo posibles las solicitudes de red asincrónicas y, con el tiempo, los desarrolladores comenzaron a construir sobre la plataforma web, mientras que los ingenieros trabajaban en la plataforma misma: navegadores, estándares web, API de navegador y lenguaje JavaScript.

Bibliotecas como jQuery y Mootools fueron los primeros grandes proyectos que se basaron en JavaScript y fueron muy populares durante un tiempo. Básicamente, proporcionaron una API más agradable para interactuar con el navegador y proporcionaron soluciones para errores e inconsistencias entre los distintos navegadores.

Frameworks como Backbone, Ember, Knockout, AngularJS fueron la primera ola de frameworks JavaScript modernos. La segunda ola, que es la actual, tiene como actores principales a React, Angular y Vue.

Tenga en cuenta que jQuery, Ember y los otros proyectos que mencioné todavía se utilizan mucho, se mantienen activamente y millones de sitios web dependen de ellos. Dicho esto, las técnicas y herramientas evolucionan y, como desarrollador de JavaScript, es probable que ahora deba conocer React, Angular o Vue en lugar de esos marcos anteriores.

Los marcos abstraen la interacción con el navegador y el DOM. En lugar de manipular elementos haciendo referencia a ellos en el DOM,declarativamentedefinirlos e interactuar con ellos, a un nivel superior.

Usar un marco es como usar el lenguaje de programación C en lugar de usar el lenguaje ensamblador para escribir programas del sistema. Es como usar una computadora para escribir un documento en lugar de usar una máquina de escribir. Es como tener un automóvil autónomo en lugar de conducir el automóvil usted mismo.

Bueno, no tan lejos, pero entiendes la idea. En lugar de utilizar las API de bajo nivel que ofrece el navegador para manipular elementos y construir sistemas enormemente complejos para escribir una aplicación,utilizas herramientas creadas por personas muy inteligentes que nos facilitan la vida.

La popularidad de Vue

¿Qué tan popular es Vue.js?

Vue tenía:

  • 7600 stars on GitHub in 2016
  • 36700 stars on GitHub in 2017

y tiene más de 100.000+ estrellas en GitHub, a partir de junio de 2018.

Su recuento de descargas de npm aumenta cada día, y ahora es de ~ 350.000 descargas por semana.

Yo diria que Vue esmuy popular, dados esos números.

En términos relativos, tiene aproximadamente el mismo número de estrellas GitHub de React, que nació años antes.

Los números no lo son todo, por supuesto. La impresión que tengo de Vue es que los desarrolladoresamoreso.

Un punto clave en el tiempo del surgimiento de Vue ha sido la adopción en el ecosistema Laravel, un marco de aplicación web PHP enormemente popular, pero desde entonces se ha extendido entre muchas otras comunidades de desarrollo.

Por qué los desarrolladores aman Vue

Primero, Vue se llamamarco progresivo.

Esto significa que se adapta a las necesidades del desarrollador. Mientras que otros marcos requieren la aceptación total de un desarrollador o equipo y, a menudo, quieren que reescriba una aplicación existente porque requieren un conjunto específico de convenciones, Vue aterriza felizmente dentro de su aplicación con un simplescriptetiqueta, para empezar, y puede crecer junto con sus necesidades, extendiéndose desde 3 líneas hasta administrar su capa de vista completa.

No necesitas saber sobre webpack, Babel, npm ni nada para comenzar con Vue, pero cuando estés listo, Vue te facilita confiar en ellos.

Este es un gran punto de venta, especialmente en el ecosistema actual de bibliotecas y marcos frontend de JavaScript que tiende a alienar a los recién llegados y también a los desarrolladores experimentados que se sienten perdidos en el océano de posibilidades y opciones.

Vue.js es probablemente el marco frontend más accesible que existe. Algunas personas llaman a Vue elnuevo jQuery, porque ingresa fácilmente a la aplicación a través de una etiqueta de script y gradualmente gana espacio desde allí. Piense en ello como un cumplido, ya que jQuery dominó la Web en los últimos años y todavía hace su trabajo en una gran cantidad de sitios.

Vue elige entre las mejores ideas. Se creó seleccionando las mejores ideas de marcos como Angular, React y Knockout, y eligiendo las mejores opciones que tomaron esos marcos, y excluyendo algunos menos brillantes, comenzó como un conjunto de "lo mejor de" y creció desde allí.

¿Dónde se posiciona Vue.js en el panorama de los frameworks?

Los 2 elefantes en la sala, cuando se habla de desarrollo web, sonReaccionaryAngular. ¿Cómo se posiciona Vue en relación con esos 2 marcos grandes y populares?

Vue fue creado por Evan You cuando trabajaba en Google en aplicaciones AngularJS (Angular 1.0) y nació de la necesidad de crear aplicaciones de mayor rendimiento. Vue eligió parte de la sintaxis de plantillas de Angular, pero eliminó la pila compleja y obstinada que Angular requería, y la hizo muy eficiente.

El nuevo Angular (Angular 2.0) también resolvió muchos de los problemas de AngularJS, pero de formas muy diferentes, y requiere una aceptación paraMecanografiadoque no todos los desarrolladores disfrutan usando (o quieren aprender).

¿Qué pasa con React? Vue tomó muchas buenas ideas de React, lo más importante, Virtual DOM. Pero Vue lo implementa con algún tipo de administración automática de dependencias, que rastrea qué componentes se ven afectados por un cambio de estado para que solo esos componentes se vuelvan a representar cuando esa propiedad de estado cambia. En React, por otro lado, cuando una parte del estado que afecta a un componente cambia, el componente se volverá a renderizar y, por defecto, todos sus hijos también se volverán a renderizar. Para evitar esto, debe usar el método shouldComponentUpdate de cada componente y determinar si ese componente debe volver a renderizarse. Esto le da a Vue un poco de ventaja en términos de facilidad de uso y ganancias de rendimiento listas para usar.

Una gran diferencia con React es JSX. Si bien técnicamente puede usar JSX en Vue, no es un enfoque popular y, en su lugar, se usa el sistema de plantillas. Cualquier archivo HTML es una plantilla de Vue válida, mientras que JSX es muy diferente a HTML y tiene una curva de aprendizaje para las personas del equipo que quizás solo necesiten trabajar con la parte HTML de su aplicación, como los diseñadores. Las plantillas de Vue son muy similares a Moustache y Handlebars (aunque difieren en términos de flexibilidad) y, como tales, son más familiares para los desarrolladores que ya usaban frameworks como Angular y Ember.

La biblioteca de gestión oficial del estado, Vuex, sigue la arquitectura Flux y es algo similar aReduxen sus conceptos. Nuevamente, esto es parte de las cosas positivas de Vue, que vio este buen patrón en React y lo tomó prestado para su ecosistema. Y aunque puede usar Redux con Vue, Vuex está diseñado específicamente para Vue y su funcionamiento interno.

Vue es flexible, pero el hecho de que el equipo central mantenga dos paquetes muy importantes para cualquier aplicación web, como el enrutamiento y la administración del estado, lo hace mucho menos fragmentado que React, por ejemplo:vue-routeryvuexson clave para el éxito de Vue. No necesita elegir ni preocuparse si la biblioteca que eligió se mantendrá en el futuro y se mantendrá al día con las actualizaciones del marco, y siendo oficiales, son las bibliotecas canónicas de referencia para su nicho (pero puede elegir usa lo que te gusta, por supuesto).

Una cosa que coloca a Vue en un cubo diferente en comparación con React y Angular es que Vue es unindieproyecto: no está respaldado por una gran corporación como Facebook o Google. En cambio, está completamente respaldado por la comunidad, que fomenta el desarrollo a través de donaciones y patrocinadores. Esto asegura que la hoja de ruta de Vue no se rija por la agenda de una sola empresa.

Descarga mi gratisManual de Vue


Más tutoriales de vue: