Uno de los principales frameworks Javascript a fecha de hoy es VueJS. Los más populares, según los resultados en varias páginas encontradas con Google, son Angular, React y VueJS. Y en concreto VueJS me ha sorprendido por lo sencillo de empezar a usarlo.
Es un framework progresivo para desarrollo del frontend, que hace que podamos comenzar a usarlo progresivamente. Es decir, podemos usarlo en parte para hacer algo muy concreto en una parte de la web, o más, incluso llegando a ponerlo a controlar el frontend al 100%. Es una librería muy ligera, que proporciona un sistema, a base de Javascript con el que con directivas y poco más, podemos hacer que la web sea mucho más interactiva sin tener que picar casi código Javascript.
Al grano, algo de código fuente
Lo primero para comenzar a usar VueJS es insertar su librería y crear el inicio de un programa Javascript. Por ejemplo un index.html inicial podría ser algo así:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>JnjSite.com: Testing VueJS</title>
<link rel="stylesheet" href="styles.css">
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="my-vue-app">
<h1>{{ title }}</h1>
<p>{{ text }}</p>
</div>
<script src="app.js" type="module"></script>
</body>
</html>En el pie de página se referencia al fichero app.js que va a ser un Javascript inicial en donde damos de alta una instancia de Vue y empieza a funcionar. Por ejemplo, puede ser algo como lo siguiente:
var app = new Vue({
el: '#my-vue-app',
data: {
title: 'My testing VueJS app',
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
}
});Esto en el navegador se tiene que ver como la imagen siguiente.
Unas explicaciones
VueJS necesita un contenedor como el div del index.html que es donde va a correr. Dentro de este div, va a poder pintar contenidos, además de que también va a poder escuchar eventos para hacer lo que queramos.
Tenemos unas cosas que se llaman directivas, los {{ }} para inyectar contenidos, y en el objeto Vue declarado en el fichero app.js podemos definir un monton de cosas. Estos objetos Vue pueden definirse varias veces, de forma que unos objetos pueden luego interactuar con otros, en diferentes contenedores.
Vamos a complicar un poco el hola mundo anterior.
Al grano, código fuente de otro hola mundo más elaborado
Lo siguiente añade dos campos de formulario, para preparar un nuevo título y un nuevo campo de texto. Luego hay un área de previsualización que simplemente mostrará el contenido según vayamos escribiendo en los campos de formulario.
Ahora el index.html actualizado:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>JnjSite.com: Testing VueJS</title>
<link rel="stylesheet" href="styles.css">
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style media="screen">
.preview {
border: 1px dashed black;
}
input, textarea {
width: 100%;
border: 1px solid black;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="my-vue-app">
<h1>{{ title }}</h1>
<p>{{ text }}</p>
<label for="form-new-title">New title</label>
<input type="text" id="form-new-title" v-model:value="formTitle">
<label for="form-new-text">New text</label>
<textarea id="form-new-text" rows="8" cols="80" v-model:value="formText"></textarea>
<h2>Preview area:</h2>
<div class="preview">
<h3>{{ formTitle }}</h3>
<p>{{ formText }}</p>
</div>
</div>
<script src="app.js" type="module"></script>
</body>
</html>Y el fichero app.js ahora añade sólo dos líneas para almacenar dos datos nuevos llamados formTitle y formText.
var app = new Vue({
el: '#my-vue-app',
data: {
title: 'My testing VueJS app',
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
formTitle: '',
formText: ''
}
});¿Sencillo verdad? Si lo visualizamos en el navegador se tiene que ver algo parecido a lo siguiente:
VueJS va viendo los cambios en tiempo real, y previsualizando simplemente al usar las directivas v-model:value=»formTitle» y v-model:value=»formText». Esto mismo a base de Javascript o con jQuery nos hubiera llevado mucho más tiempo. Y esto no es más que el comienzo..
Al grano de nuevo, otro hola mundo haciendo una petición API REST
Vamos ahora a hacer una petición a la API-JSON de WordPress y visualizamos los últimos posts en este Hola Mundo. Podemos entonces añadir en la cabecera del index.html la siguiente librería para hacer peticiones a API REST:
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>Ahora en el fichero app.js vamos a hacer una petición de los últimos posts en publicados en https://jnjsite.com consumendo la API JSON de WordPress, queda así:
var app = new Vue({
el: '#my-vue-app',
data: {
title: 'My testing VueJS app',
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
formTitle: '',
formText: '',
serverResponse: ''
},
created() {
this.$http.get('https://jnjsite.com/wp-json/wp/v2/posts').then(response => {
console.log(response.body);
this.serverResponse = response.body;
}, response => {
// error callback
});
}
});Lo siguiente es en fichero index.html de nuevo, añadir el código para que pinte el listado:
<h2>Latest posts into JnjSite.com:</h2>
<p v-for="item in serverResponse">{{ item.title.rendered }}<br>{{ item.link }}</p>Sí, dos líneas de código sólo, ya con esto se tiene que ver algo parecido a lo siguiente:
Terminando
En muy poco tiempo hemos sido muy productivos haciendo mucho. En fin, un buen framework Javascript, sencillo para empezar, y sin una curva de aprendizaje demasiado complicada. ¡Muy recomendable!
Página oficial de VueJS.org: https://vuejs.org/
