1. Introducción al marco VUE.JS

El PDF de este documento está disponible |AQUÍ|`.

Los ejemplos de este documento están disponibles |AQUÍ|.

Este documento forma parte de una serie de cuatro artículos:

|Introducción al lenguaje PHP7 con ejemplos| ;
|Introducción al lenguaje ECMASCRIPT 6 con ejemplos|;
|Introducción al marco VUE.JS con ejemplos|. Este es el documento actual;
|Introducción al framework NUXT.JS con ejemplos|;

Todos ellos son documentos para principiantes. Los artículos siguen una secuencia lógica, pero están poco interrelacionados:

el documento [1] presenta el lenguaje PHP 7. El lector que solo esté interesado en el lenguaje PHP y no en el lenguaje JavaScript de los artículos siguientes se detendrá aquí;
los documentos [2-4] tienen como objetivo construir un cliente JavaScript para el servidor de cálculo de impuestos desarrollado en el documento [1];
los marcos de trabajo de Javascript [vue.js] y [nuxt.js] de los artículos 3 y 4 requieren conocer el Javascript de las últimas versiones de ECMASCRIPT, las de la versión 6. Por lo tanto, el documento [2] está destinado a quienes no conocen esta versión de JavaScript. Hace referencia al servidor de cálculo de impuestos creado en el documento [1]. El lector de [2] necesitará, por tanto, consultar en ocasiones el documento [1];
una vez dominado ECMASCRIPT, se puede abordar el marco VUE.JS, que permite crear clientes JavaScript que se ejecutan en un navegador en modo SPA (aplicación de página única). Se trata del documento [3]. Hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1] como al código del cliente autónomo JavaScript creado en [2]. El lector de [3] necesitará, en ocasiones, consultar los documentos [1] y [2];
una vez dominado VUE.JS, se puede abordar el marco NUXT.JS, que permite crear clientes JavaScript que se ejecutan en un navegador en modo SSR (renderizado del lado del servidor). Hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1], al código del cliente JavaScript autónomo creado en [2], así como a la aplicación [vue.js] desarrollada en el documento [3]. El lector de [4] necesitará, por tanto, consultar en ocasiones los documentos [1], [2] y [3];

La última versión del servidor de cálculo de impuestos desarrollada en el documento [1] (véase el documento |https://tahe.developpez.com/tutoriels-cours/php7|) puede mejorarse de diversas maneras:

la versión escrita se centra en el servidor. La tendencia actual (septiembre de 2019) es hacia el modelo cliente/servidor:

el servidor funciona como servicio jSON;
una página, ya sea estática o no, es el punto de entrada de la aplicación web. Esta página contiene HTML /CSS, pero también JavaScript;
las demás páginas de la aplicación web se obtienen dinámicamente mediante el JavaScript:
- la página HTML puede obtenerse mediante el ensamblaje de fragmentos estáticos o no, proporcionados por el mismo servidor que proporcionó la página de inicio, o bien construidos por el JavaScript del cliente;
- estas diferentes páginas muestran datos que se solicitan al servicio jSON;

De este modo, el trabajo se distribuye entre el cliente y el servidor. El servidor, al verse así aliviado, puede atender a más usuarios.

La arquitectura correspondiente a este modelo es la siguiente:

JS : JavaScript

El navegador es el cliente:

un servicio de páginas o fragmentos, ya sean estáticos o no (no representado arriba);
un servicio de datos jSON;

El código JavaScript es, por lo tanto, un cliente jSON y, como tal, puede organizarse en capas [UI, métier, dao] (UI: Interfaz de usuario), al igual que nuestros clientes jSON escritos en PHP. Al final, el navegador solo carga una única página, la página de inicio. Todas las demás se obtienen y construyen mediante el JavaScript. A este tipo de aplicación se le denomina SPA: Single Page Application o también APU: Aplicación de página única.

Este tipo de aplicación también forma parte de las denominadas AJAX: Asynchronous Javascript y XM:

Asíncrono: porque las llamadas del cliente JavaScript al servidor jSON son asíncronas;
XML: porque XML era la tecnología utilizada antes de la llegada de jSON. Sin embargo, se ha mantenido el acrónimo AJAX;

En este documento vamos a estudiar una arquitectura de este tipo. En el lado del cliente, utilizaremos el framework de JavaScript [Vue.js] [https://vuejs.org/] para escribir el cliente JavaScript del servidor jSON PHP que hemos escrito en el documento [1].

[Vue.js] es un marco JavaScript. Hemos presentado el lenguaje JavaScript en el documento [2]. No realizaremos un estudio exhaustivo del marco [vue.js]. Nos limitaremos a presentar los conceptos que se utilizarán posteriormente en la escritura de un cliente [Vue.js] para la versión jSON de la versión 14 del servidor de cálculo de impuestos (véase |Introducción al lenguaje PHP7 a través de ejemplos (2019)|).

Los scripts de este documento están comentados y se reproduce su ejecución en la consola. En ocasiones se proporcionan explicaciones adicionales. El documento requiere una lectura activa: para comprender un script, es necesario leer tanto su código como sus comentarios y los resultados de su ejecución.

Serge Tahé, octubre de 2019