1. Introducción al lenguaje ECMASCRIPT 6

El PDF de este artículo está disponible |AQUÍ|.

Los ejemplos de este artículo están disponibles |AQUÍ|.

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

[Introducción al lenguaje PHP7 a través de ejemplos (2019)];
[Introducción al lenguaje ECMAScript 6 a través de ejemplos (2019)]. Este es el documento actual;
[Introducción al marco VUE.JS a través de ejemplos (2019)];
[Introducción al marco NUXT.JS a través de ejemplos (2019)];

Todos ellos 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 crear 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á 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á, en ocasiones, consultar el documento [1];
una vez dominado el documento ECMASCRIPT, se puede abordar el marco de trabajo 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 JavaScript autónomo 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 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 JavaScript autónomo 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] puede mejorarse de diversas maneras:

la versión descrita se centra en el servidor. La tendencia actual (julio de 2019) es hacia el modelo cliente/servidor:
- el servidor funciona como servicio jSON;
- una página, ya sea estática o no, constituye 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 JavaScript:
  - la página HTML puede obtenerse mediante la combinación de fragmentos estáticos, proporcionados por el mismo servidor que ha proporcionado la página de inicio, o bien construirse íntegramente mediante JavaScript;
  - 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 un mayor número de usuarios.

La arquitectura correspondiente a este modelo es la siguiente:

JS: JavaScript

El código JavaScript se ejecuta en el cliente:

de un servicio de páginas o fragmentos, ya sean estáticos o no;
de un servicio jSON;

El código JavaScript es, por 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 se construyen mediante JavaScript. A este tipo de aplicación se le denomina SPA: «Single Page Application» (aplicación de página única) o también APU: «Application à Page Unique» (aplicación de página única).

Este tipo de aplicación también forma parte de las denominadas AJAX: «Asynchronous JavaScript» y XML

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;

Estudiaremos este tipo de arquitectura en los próximos capítulos. En el lado del cliente, utilizaremos el framework de JavaScript [Vue.js] [https://vuejs.org/] para escribir el cliente de JavaScript del servidor jSON PHP que hemos descrito en el documento [1].

[Vue.js] es un marco de trabajo de JavaScript. Para comprenderlo, es necesario dominar este lenguaje. En este documento presentamos la norma ECMAScript 6, que es la estandarización más reciente (en 2019) de este lenguaje. La historia y la función de ECMAScript se pueden consultar en Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].

Este documento ofrece una lista de scripts de consola en JavaScript en diferentes ámbitos (estructuras del lenguaje, acceso a bases de datos, a Internet, programación por capas, programación mediante interfaces). El documento concluye con dos aplicaciones:

Una aplicación de consola que actuará como cliente del servidor de cálculo de impuestos creado en el documento [1]. Este cliente tendrá la misma arquitectura que la del cliente de consola PHP creado en el documento [1]:

las capas [7-9] serán las del cliente JavaScript que se ejecuta en una consola;
las capas [1-4] son las del servidor PHP 7 creado en el documento [1];
a diferencia del cliente de consola PHP creado en el documento [1], no habrá interacciones con el sistema de archivos local [6];

Se trata de una aplicación cliente/servidor en la que el cliente es una aplicación de consola. Se escribirá una segunda aplicación en la que el código de las capas [7-9] se trasladará a un navegador. Entonces estaremos listos para abordar los frameworks de JavaScript de los navegadores en los documentos [3] y [4].

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, hay que 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