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];

[Introducción a ECMASCRIPT 6 a través de ejemplos]. Este es el documento actual;
[Introducción al framework VUE.JS a través de ejemplos];
[Introducción al framework NUXT.JS a través de ejemplos];

Todos estos son documentos para principiantes. Los artículos siguen una secuencia lógica pero están vagamente conectados:

documento [1] introduce el lenguaje PHP 7. Los lectores interesados sólo en PHP y no en el JavaScript cubierto en los siguientes artículos deben detenerse aquí;
Los documentos [2-4] pretenden construir un cliente JavaScript para el servidor de cálculo de impuestos desarrollado en el documento [1];
Los frameworks JavaScript [Vue.js] y [Nuxt.js] de los artículos 3 y 4 requieren el conocimiento de las últimas versiones de ECMAScript, concretamente la versión 6. Por tanto, el documento [2] está dirigido a quienes no estén familiarizados con esta versión de JavaScript. Hace referencia al servidor de cálculo de impuestos incorporado en el documento [1]. Por lo tanto, los lectores de [2] a veces tendrán que consultar el documento [1];
una vez dominado ECMASCRIPT 6, podemos pasar al framework VUE.JS, que permite crear clientes JavaScript que se ejecutan en un navegador en modo SPA (Single Page Application). Se trata del documento [3]. Se refiere tanto al servidor de cálculo de impuestos construido en el documento [1] como al código del cliente JavaScript autónomo construido en [2]. Por lo tanto, los lectores de [3] a veces tendrán que referirse a los documentos [1] y [2];
Una vez que domine VUE.JS, puede pasar al framework NUXT.JS, que le permite construir clientes JavaScript que se ejecutan en un navegador en modo SSR (Server Side Rendered). Se refiere al servidor de cálculo de impuestos construido en el documento [1], al código del cliente JavaScript autónomo construido en [2], y a la aplicación [vue.js] desarrollada en el documento [3]. Por tanto, los lectores de [4] tendrán que referirse ocasionalmente a 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 varias formas:

La versión actual está centrada en el servidor. La tendencia actual (julio de 2019) es hacia una arquitectura cliente-servidor:
- el servidor funciona como un servicio JSON;
- Una página estática o dinámica sirve como punto de entrada para la aplicación web. Esta página contiene HTML/CSS así como JavaScript;
- las demás páginas de la aplicación web son generadas dinámicamente por JavaScript:
  - la página HTML puede ser generada ensamblando fragmentos estáticos, proporcionada por el mismo servidor que sirvió la página de inicio, o construida enteramente por JavaScript;
  - estas diferentes páginas muestran datos solicitados al servicio JSON;

De este modo, el trabajo se distribuye entre el cliente y el servidor. El servidor, al ver reducida su carga, puede atender a más usuarios.

La arquitectura correspondiente a este modelo es la siguiente:

JS: JavaScript

El código JavaScript es del lado del cliente:

de un servicio que proporciona páginas o fragmentos estáticos o no estáticos;
un servicio JSON;

El código JavaScript es, por tanto, un cliente JSON y, como tal, puede organizarse en capas [UI, lógica de negocio, DAO] (UI: User Interface), al igual que nuestros clientes JSON escritos en PHP. En última instancia, el navegador sólo carga una única página: la página de inicio. Todas las demás páginas son obtenidas y renderizadas por JavaScript. Este tipo de aplicación se llama una SPA (Single Page Application) o APU (Single Page Application).

Este tipo de aplicaciones también forman parte de lo que se conoce como Aplicaciones AJAX: JavaScript asíncrono 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;

Exploraremos esta arquitectura en los próximos capítulos. En el lado del cliente, usaremos el framework JavaScript [Vue.js] [https://vuejs.org/] para escribir el cliente JavaScript para el servidor PHP JSON que describimos en el documento [1].

[Vue.js] es un framework de JavaScript. Para entenderlo, hay que dominar este lenguaje. En este documento, presentamos el estándar ECMAScript 6, que es la estandarización más reciente (a partir de 2019) de este lenguaje. La historia y el papel de ECMAScript se pueden encontrar en Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].

Este documento proporciona una lista de JavaScript scripts de consola en diversas áreas (estructuras de lenguaje, acceso a bases de datos, acceso a Internet, programación por capas y 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 construido en el documento [1]. Este cliente tendrá la misma arquitectura que el cliente de consola PHP construido en el documento [1]:

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

Aquí tenemos una aplicación cliente/servidor donde el cliente es una aplicación de consola. Se escribirá una segunda aplicación donde se portará el código de las capas [7-9] a un navegador. Entonces estaremos preparados para abordar los frameworks JavaScript de navegador en los documentos [3] y [4].

Los scripts de este documento están comentados, y se reproduce su salida de consola. A veces se proporcionan explicaciones adicionales. El documento requiere una lectura activa: para entender un script, debe leer su código, sus comentarios y los resultados de su ejecución.

Los ejemplos de este documento están disponibles |aquí|.

Se puede probar la aplicación del servidor PHP 7|aquí.

Serge Tahé, octubre de 2019