Vue.js – El framework Javascript progresivo

Bienvenidos queridos lectores una semana más a nuestros dominios. Hace unos días escuché hablar de Vue.js, un nuevo framework javascript – vaya, qué novedad – y decidí compartirlo en nuestra página. Este framework tiene por principales características ser accesible, versátil y eficiente.

Introducción a Vue.js

Durante los últimos 5 años han surgido una cantidad de librerías y frameworks javascript para facilitar el desarrollo de aplicaciones para el frontend. Entre las más famosas se encuentran Angular.js, Ember.js, Knockout.js y recientemente React.js desarrollado por el equipo de Facebook.

Hoy vamos a presentar vue.js, una librería que promete mucho y que tendrá un gran auge en el 2017.

Vue.js es una librería javascript para construir interfaces web interactivas. La documentación dice que no es un framework porque sólo se especializa en la capa de vista (VM – ViewModel). Sin embargo, sí puede considerarse como tal.

¿Entonces es sólo otro framework Javascript?

La respuesta corta es sí, pero desde ohmyroot! te invitamos a conocerlo mejor.

Las características que considero más sobresalientes de Vue son:

  • Aprenderlo es facil.
  • Hace el código mas fácil de escribir, de entender y de mantener.
  • Su sistema de data binding.
  • Su sistema de componentes.
  • Plugins increíbles para hacer peticiones http, validación de formularios, routing y soporte para transformadores como Browserify (vuefy) o WebPack para escribir javascript moderno.

Si alguna vez has intentado desarrollar alguna característica para el frontend de tu proyecto, seguro que lo primero que viene a tu mente es jQuery, y seguramente, has terminado con un inmantenible e incompresible gran archivo lleno de $('#elemento'). Nuestro código sería mucho más limpio y sostenible si pudiéramos librarnos de todo esto.

¿Ya tengo un poco mas de tu atención?

Vue.js es javascript para el resto de nosotros, ¡así es!, para los que somos más backends o los que tienen poco contacto con el frontend y javascript. Será muy fácil si ya estas familiarizado con los conceptos básicos de javascript, y si no, comenzar será sencillo también.

Este framework te permite poder hacer algo que antes era muy complicado en algo muy simple y sobre todo en pocas líneas y fácil de entender. Podr´sa desarrollar una interfaz de usuario que sea más interactiva y reactiva, así como mejorar las acciones del usuario para mejorar su experiencia con tu producto.

Lo común para estos propósitos es empezar con jQuery, hasta que descubres que existen otros nuevos conceptos tecnológicos. No quiero confundirte, jQuery sigue estando muy bien y  fue la libreria que comenzó a revolucionar javascript, pero con el javascript moderno es posible dejar de usarlo.

Lo bueno de Vue es que no implica dejar de lado jQuery; pueden combinarse entre sí.

vue.js
Data Binding Reactivo

Como se puede ver en el diagrama de esta imagen, Vue es la parte central que se encarga de mantener en sincronía los datos del modelo y la vista, este concepto es llamado data driven view.

En palabras simples, si los datos cambian, la vista cambiará también. Es por eso que en muchos lugares de la documentación verás que se refiere a Vue como el vm (view-model).

Para lograr esta sincronización, Vue utiliza directivas que se escriben como atributos html en los elementos que necesites enlazar al vm. Cuando los datos del modelo se modifiquen, todos los elementos enlazados serán actualizados también.

En este ejemplo, la directiva es v-model, y como esta, existen otras y se escriben de forma muy parecida, primero v- y después el nombre de la directiva.

Vue esta inspirado por Angular, y esto se debe a que su creador lo utilizó mucho durante el tiempo que trabajó para Google.

 

Hasta aquí la introducción a VueJS, espero poder ampliar esta información con ejemplos prácticos y más teoría próximamente.

¡Un saludo y que paséis buena semana!

Deja un comentario

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