Seguimiento de clases

Clases 2025

16

Y llegamos a la última clase que será virtual! Veremos cómo implementar tests e2e con Playwright en base al ejemplo de tareas en Svelte.

Material: Diapositivas. Link a la explicación en el ejemplo de Svelte.
Videos de youtube: Cypress

Gracias por la atención y esperemos que te haya gustado tanto como a nosotros!

15

Veremos React Context, que nos permite compartir estado entre componentes React de cualquier nivel y también la alternativa más simple, React Router Context. Para eso tenemos
- el ejemplo de Tareas con los últimos cambios aplicados, que utiliza el contexto de React Router para no perder el estado de la paginación al navegar a la asignación de una tarea
- el ejemplo Contador: tiene la explicación de Provider, Context y Consumer. Diapositivas Context.
- como BONUS, pueden ver Mundial FIFA (2022 Qatar Edition)
- Videos de youtube: React - Routing. React - Context.
Si queda algo de tiempo, veremos un ejemplo de Performance con listas en React, lo que nos permitirá repasar la importancia de las keys para un conjunto de componentes nuestros, el useEffect y el cuidado que debemos tener cuando involucra renderizado de varios componentes, y para qué nos puede ser útil conocer los hooks useCallback y useMemo.

14

Veremos en profundidad

Tareas de un equipo de desarrollo contra un backend REST. Llamada a servicios asincrónicos, actualización del estado de componentes padres a hijos. Listas y keys. Routing en React. Diapositivas: Tareas de un equipo de desarrollo. Videos de youtube: Integración de app React con un backend.
De paso vamos a ver cómo paginar los datos cuando tenemos muchas tareas, para eso
- vamos a cambiar el backend a Node, con paginación: ejemplo de Tareas en Node
- y tenemos este commit con la paginación en React
Si hay tiempo como tema BONUS veremos React Context, que nos permite compartir estado entre componentes React de cualquier nivel. Para eso tenemos
- el ejemplo Contador: tiene la explicación de Provider, Context y Consumer. Diapositivas Context.

13

Mails, maneja comunicación entre componente padre (que hace llamadas asincrónicas mediante useEffect y maneja el estado con el hook useState) y sus componentes hijos que reciben props (objetos o funciones). Conditional rendering. Diapositivas: Diseño de componentes.
Tareas de un equipo de desarrollo: en este caso solo nos interesa contar el routing. Diapositivas: Routing.
Videos de youtube: Diseño de componentes en React. React - Routing.

12

- Input disabled: composición de componentes (props children, slot). Diapositivas: Formulario dinámico, render condicional, children.
- Y por último veremos Pedidos de helados, que permite ver cómo invocar a un pedido asincrónico, relacionado con el ciclo de vida de un componente React. Diapositivas - useRef/useEffect.
- Videos de youtube: Diseño de componentes en React.

11

Comenzaremos a conocer React (en el link encontrarás las herramientas que tenés que instalar),

- primero conceptualmente con una intro teórica, y luego con ejemplos:
- Hola-mundo: el primer ejemplo en React, contiene dos componentes, la diferencia entre state y props, el manejo de eventos simple. El plugin React Developer Tools nos va a servir para ayudarnos a entender los cambios.
- Conversor: el tradicional conversor de millas a kilómetros: explica el ciclo de vida, mutación de estado y posterior render.
- Luego veremos el testeo unitario de componentes con React Testing Library, la diferencia entre state y props, el manejo de eventos simple. El plugin Reactime nos va a servir para ayudarnos a entender los cambios.
- Videos de youtube: Introducción a React. Tests de frontend en React.

10

Terminaremos de ver el ejemplo de Tareas, la parte del front-end en Svelte. Dejamos las Diapositivas del ejemplo de Tareas (front) y vamos a hacer cambios en la página inicial para trabajar CSR con mecanismos de invalidación.

9

Para mirar antes de la clase podés estudiar el primer ejemplo didáctico: Saludo con Spring Boot.

La clase se centrará en las diapositivas de la clase de Springboot y en el ejemplo Tareas de un equipo de desarrollo.
y sobre el final estaremos volviendo al front-end en Svelte. Empezaremos a ver las Diapositivas del ejemplo de Tareas (front)

8

Comenzaremos viendo el ejemplo de Países: asincronismo mediante 1. llamadas a una API con axios, 2. debouncing en la UI para demorar las llamadas asincrónicas. Introducción a routing client-side rendering. Testeo end to end con Playwright. Diapositivas llamadas a un backend, debounce.

Luego pasaremos a explicar el componente de backend en base a lo que construimos en Algo2, para lo cual

Estudiaremos como ejemplo las Tareas de un equipo de desarrollo.
Para la materia, tenés que armar el proyecto de backend utilizando como base este proyecto (seguí las instrucciones)
Te dejamos el link a la página de Spring Boot
Diapositivas de la clase
Videos de youtube: Intro a Springboot.

7

Jueves

Vamos a terminar de ver asincronismo en JS: Promise.all + await expect.toThrow de vitest.

Luego vamos a reforzar el taller de routing que darán el martes en la práctica con Routing: ejemplo básico que cuenta las letras de un input CSR (client-side rendering) vs. SSR (server-side rendering). Diapositivas SSR vs. CSR.

Martes

Vamos a ver el ejemplo de cursos , para demostrar cómo funciona lo básico de las rutas en SvelteKit.

6

Veremos asincronismo, concurrencia y paralelismo en la VM de JS:

Promises - Ejemplo electrodomésticos
Diapositivas de Promises
Videos de youtube: Asincronismo en JS / Promises.
BONUS: Yendo del yield al async/await. Video: Asincronismo en JS - Parte II: del yield al async/await.

5

Terminaremos el ejemplo del Carrito de compras con el testeo de stubs sobre una fecha.
Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario, objetos de dominio complejos. Testeo unitario de frontend. Diapositivas: formularios, validaciones, testeos con spies.

4

Comenzaremos repasando los conceptos de binding con el ejemplo Twitter: runas $state y $derived. Testeo unitario de frontend.

Luego veremos cómo implementar tests de frontend. Diapositivas tests de frontend.

Y por último trabajaremos en el Carrito de compras: runas $state, $derived, $bindable (manejo de eventos entre componentes), $props. Definición de componentes propios en Svelte. Testeo unitario de frontend. Diapositivas componentes + runas $props y $bindable.