From 4b3282e409f9764c831b1bf93cdb5caebda65b5d Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Mon, 20 Feb 2023 19:00:16 +0100
Subject: Start with JS in client side

---
 contenidos.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 65 insertions(+), 11 deletions(-)

diff --git a/contenidos.md b/contenidos.md
index 2372f69..182ecf7 100644
--- a/contenidos.md
+++ b/contenidos.md
@@ -577,6 +577,8 @@ El JavaScript aquí mencionado cubre casi todo el uso básico. La [guía
 profunda][js-deep] explica todo en mucho más detalle y añade más información
 
 
+# Programación del lado de cliente
+
 ## Web APIs
 
 Las Web APIs del navegador aportan a JavaScript infinidad de funcionalidades
@@ -586,16 +588,68 @@ que le permiten operar con éste.
 > disponibles, pero hay otras que realizan tareas más relacionadas con el lado
 > del servidor: acceso al sistema de archivos, sockets, etc.
 
-> TODO:
-> - Asíncronía. Promesas (+async/await) y Workers.
-> - Web APIs:
->     - DOM
->     - Canvas
->     - fetch
->     - Sistema de Eventos
->     - ...
+Un gran ejemplo del uso de la API Canvas, gestión de eventos y la API de audio
+es la implementación del [Space Invaders de Susam Pal][space-invaders].
 
-## Resumen
+[space-invaders]: https://github.com/susam/invaders
 
-El JavaScript aquí mencionado cubre casi todo el uso básico. La [guía
-profunda][js-deep] explica todo en mucho más detalle y añade más información
+
+### DOM
+
+El DOM (*Document Object Model*) es la representación del documento en la
+memoria. Esto es, la forma en la que el navegador entiende el documento HTML,
+su estilo y funcionalidad.
+
+> Esta API no se limita al navegador, sino que puede implementarse en otros
+> entornos y lenguajes. Simplemente describe una forma de interactuar con este
+> sistema de representación.
+
+La API del DOM permite acceder al DOM e interactuar con él de forma imperativa.
+
+El DOM es un árbol de elementos. Para que algo se visualice es necesario
+añadirlo al árbol principal, el método `document.createElement(tag)` crea un
+nuevo elemento, pero aislado del árbol. Este elemento deberá engancharse al
+árbol para que se procese y visualice.
+
+La [introducción de MDN sobre el DOM es bastante accesible][dom-mdn]. La
+documentación de referencia puede ser demasiado complicada.
+
+[dom-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
+
+### Peticiones Web: fetch
+
+La API fetch es el método moderno para realizar peticiones Web. Anteriormente
+esta funcionalidad se realizaba mediante una API mucho menos amigable conocida
+como XHR (*XML HTTP Request*).
+
+La API fetch está basada en promesas y su uso básico se muestra en el apartado
+previo sobre éstas.
+
+También puede realizar peticiones complejas, procesar datos en streaming, y
+un largo, etc.
+
+[La documentación de MDN describe el uso básico de fetch en la guía
+correspondiente][fetch-mdn]
+
+[fetch-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
+
+## Librerías Front End comunes
+
+### Mithril
+
+Es un mini-framework basado en componentes. Extremadamente sencillo pero muy
+potente. Dispone de funcionalidades para:
+
+- Routing
+- Peticiones Web simplificadas basadas en promesas (similares a `fetch`)
+- Renderizado de componentes
+- Actualización de componentes automática cuando su estado cambia
+- Soporta sintaxis JSX mediante plugins
+
+Es diminuto (~1kLoC) por lo que puede estudiarse con facilidad.
+
+### React
+
+[Tutorial de react en video][react-tutorial]
+
+[react-tutorial]: https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=1
-- 
cgit v1.2.3