Primeros pasos con Vue.js

A lo largo de estos últimos años el desarrollo web ha aumentado su complejidad de forma considerable, alcanzando unos niveles de dificultad que exigen un gran esfuerzo por parte de los desarrolladores, tanto para familiarizarse con todas las tecnologías implicadas como para adaptarse a los cambios que dichas tecnologías van experimentando.

Hace ya mucho tiempo que los desarrollos monolíticos fueron abandonandos para ser reemplazados por un modelo de dos capas: Por una parte tenemos un backend que se encarga de recuperar y modificar la información manejada por la aplicación web y por otra parte hay un frontend que se encarga de la presentación visual de los contenidos al usuario, además de interaccionar con éste, enlazando los eventos generados por el mismo con las correspondientes llamadas al backend.

En lo que respecta al backend, parece que hay un amplio consenso con respecto a la forma de realizar la comunicación. La mayor parte de los desarrollos se basan en APIs de tipo RESTful, que pueden ser implementadas de forma relativamente sencilla y con una gran variedad de opciones en lo que respecta a lenguajes de programación y las tecnologías a utilizar. Es decir, cada desarrollador puede continuar trabajando con el lenguaje o el entorno en el que se sienta más cómodo, ya que prácticamente todos ofrecen librerías o frameworks que permiten el desarrollo de este tipo de APIs.

Es cuando nos toca ocuparnos de la parte de frontend cuando las cosas se empiezan a poner un poco más complicadas y las decisiones ya no son tan obvias. Si deseamos una interface de usuario dinámica, en la que los componentes puedan ser modificados y vayan evolucionando en función de los contenidos a mostrar en cada momento, respondiendo a los eventos e interacciones con el usuario, tendremos que utilizar alguna herramienta que nos permita conseguir nuestros objetvos de dinamismo y de usabilidad.

A continuación mostramos cómo crear un componente en vue.js y cómo incluirlo en una página mediante un sencillo ejemplo:

En el código se define el componente ClickCounter. Este componente consta de los siguientes elementos:

Por último, si modificamos la parte de código HTML que contiene la aplicación vue, podemos comprobar la ventaja que nos aporta la utilización de componentes. Fácilmente podemos utilizar tantos componentes como sean necesarios, y éstos mantendrán su independencia sin interferir entre sí.

El resultado:

En definitiva, vue.js es un framework para desarrollo de frontend que está experimentando un enorme auge por sus características. Ofrece muchísimas funcionalidades y sin embargo requiere una curva de aprendizaje más sencilla que la de sus alternativas. Absolutamente recomendable para todos aquéllos que deseen inicarse en el desarrollo de frontend, o estén utilizando otro tipo de tecnologías y busquen alternativas más actuales.

Si te ha parecido interesante el artículo, puedes continuar con la siguiente parte: Acceso a servicios web desde Vue.js

Related posts:

Before going further, I’d like to put a disclaimer that I don’t think only labeled or committed relationships are worth the time; everyone has different goals and are happy with different types of…

The room was uncomfortable. Resembling an asylum cell or hospital operating theater, it was white from floor to ceiling and lit with a single fluorescent tube light set right in the middle of the…

Desintoxicar ou limpar significa livrar o corpo de toxinas — aquelas feitas internamente ou que entram — e resíduos de produtos que ficam presos e não conseguem encontrar seu caminho para fora. Essas…