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 ECMASCRIPT6 con ejemplos (2019)]. Este es el documento actual;
- [Introducción al marco VUE.JS con ejemplos (2019)];
- [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 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á 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 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]. Este hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1] como al código del cliente JavaScript independiente creado en [2]. El lector de [3] necesitará, en ocasiones, consultar los documentos [1] y [2];
- una vez que se domine 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 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] 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 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 generan dinámicamente mediante JavaScript:
- la página HTML puede generarse mediante la combinación de fragmentos estáticos, proporcionados por el mismo servidor que proporcionó la página de inicio, o bien construirse íntegramente mediante JavaScript;
- estas diferentes páginas muestran datos que se solicitan al servicio jSON;
De esta manera, el trabajo se distribuye entre el cliente y el servidor. Al aligerar la carga del servidor, este puede atender a más 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;
Por lo tanto, el código JavaScript es un cliente jSON y, como tal, puede organizarse en capas [UI, métier, dao] (UI: Interfaz de usuario), tal como lo han sido 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 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: 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 mantuvo el acrónimo AJAX;
Estudiaremos este tipo de arquitectura en los próximos capítulos. 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 escrito en el documento [1].
[Vue.js] es un marco de trabajo de JavaScript. Para entenderlo, 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. Se puede consultar la historia y la función de ECMAScript en Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].
Este documento ofrece una lista de scripts de consola en JavaScript para diferentes ámbitos (estructuras del lenguaje, acceso a bases de datos, a la red de Internet, programación en 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];
Aquí tenemos una aplicación cliente/servidor en la que el cliente es una aplicación de consola. Se desarrollará 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 marcos de trabajo 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, 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