diff options
| -rw-r--r-- | contenidos.md | 76 |
1 files 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 |