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 (2019)|;

|Introducción al lenguaje ECMASCRIPT6 con ejemplos (2019)|;
|Introducción al marco VUE.JS con ejemplos (2019)|. Este es el documento actual;
|Introducción al marco de trabajo NUXT.JS con ejemplos (2019)|;

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

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 de 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, es decir, las de la versión 6. Por lo tanto, el documento [2] está dirigido 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á, en ocasiones, consultar el documento [1];
una vez que se domine ECMASCRIPT 6, se puede abordar el marco VUE.JS, que permite crear clientes de 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]. Quien lea el documento [3] necesitará, en ocasiones, consultar los documentos [1] y [2];
una vez que se domine el VUE.JS, se puede abordar el marco de trabajo NUXT.JS, que permite crear clientes de 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 de JavaScript independiente creado en [2], así como a la aplicación [vue.js] desarrollada en el documento [3]. El lector de [4] necesitará, en ocasiones, consultar 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 descrita se centra en el servidor. La tendencia actual (septiembre de 2019) es hacia el modelo cliente/servidor:

el servidor opera 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 generarse mediante la combinación de fragmentos, ya sean 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. Al aligerarse la carga del servidor, este puede atender a más usuarios.

La arquitectura correspondiente a este modelo es la siguiente:

JS: JavaScript

El navegador es cliente de:

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

Por lo tanto, el código JavaScript es un cliente de jSON y, como tal, puede organizarse en capas [UI, métier, dao] (UI: Interfaz de usuario), tal como lo fueron 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 son obtenidas y generadas por el JavaScript. A este tipo de aplicación se le denomina SPA: Aplicación de página única o también APU: Aplicación de una sola página.

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 mantuvo el acrónimo AJAX;

En este documento analizaremos este tipo de arquitectura. Del lado del cliente, utilizaremos el marco de trabajo de JavaScript [Vue.js] [https://vuejs.org/] para escribir el cliente de JavaScript del servidor jSON PHP que hemos desarrollado en el documento [1].

[Vue.js] es un marco de trabajo JavaScript. Ya presentamos el lenguaje JavaScript en el documento [2]. No realizaremos un análisis exhaustivo del marco de trabajo [vue.js]. Nos limitaremos a presentar los conceptos que se utilizarán posteriormente en la programación 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 con 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.

La aplicación de servidor PHP 7 se puede probar |aquí|.

Serge Tahé, octubre de 2019