Seguimiento de clases

Clases 2022

17

Y cerramos la cursada corrigiendo el TP de React el día jueves, donde además confirmaremos el acta en SIU Guaraní.

16

Repasaremos el ejemplo Tareas de un equipo de desarrollo, en particular el manejo de errores.
Luego comenzaremos a estudiar 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.
- Mundial FIFA (2022 Qatar Edition)
Diapositivas: React Context
Videos de clase: Testeo unitario + Estado global con React Context. Segunda parte: React Context funcional + ejemplo Mundial 2018.
Videos de youtube: React - Routing. React - Context.

15

Primero cerraremos el ejemplo de Mails, donde el componente padre le puede pasar una función para modificar su estado. Repasaremos cómo la aplicación parcial nos sirve para este fin.
Resolveremos el test de frontend de los Pedidos de helados, simulando el paso del tiempo como hemos hecho en Angular.
Input disabled: composición de componentes (props children, slot).
Por último comenzaremos a ver 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:
Videos de clase: Parte 1. Parte 2.
Videos de youtube: Integración de app React con un backend

14

Continuaremos estudiando React con el ejemplo Pedidos de helados, que permite introducir el hook useEffect, relacionado con el ciclo de vida de un componente React.
Y veremos el segundo ejemplo con componentes puramente funcionales con React Hooks: 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.
Videos de clase: Parte 1: Unit Testing + Ciclo de vida de un componente React. Parte 2: useEffect.
Videos de youtube: Diseño de componentes en React.

13

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 (uno funcional y otro con clases), 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.
- Veremos el ejemplo del Conversor como componente funcional, utilizando la técnica React Hooks > useState.
- Videos de clase: Intro a React. Parte 1. Parte 2.
- Videos de youtube: Introducción a React. Tests de frontend en React.

12

BONUS: hablaremos muy brevemente de los frameworks de CSS del mercado, en particular Bulma. Ejemplo: Login-Bulma.
Cómo desarrollar tests e2e con Cypress. Ejemplo introductorio de Cypress.
Si hay tiempo, 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 (uno funcional y otro con clases), 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.
- Conversor: el tradicional conversor de millas a kilómetros: explica el ciclo de vida, mutación de estado y posterior render.
Videos de clase: Cypress. Bulma + Chakra.
Videos de youtube: Cypress

11

Estudiaremos cómo trabajar con simulando los servicios para no acceder al backend "de verdad" para el ejemplo de Tareas de Angular. Diapositivas de Testeo avanzado de Angular.
Veremos el ejemplo Streaming - series y películas: componentes visuales reutilizables para agregar diferentes colecciones de una serie o película, uno para actores y otro para calificaciones de la película. También la serie y la película comparten un componente padre donde cargan la información compartida, solo se define una vez.
Videos de youtube: Angular - Testeo avanzado
Video de clase

10

Comenzaremos conociendo el syntactic sugar async/await como alternativa a las promises.
Veremos el ejemplo completo de Tareas:
- tiene el back-end construido en Spring Boot
- y el front-end en Angular
Videos de clase: Parte 1. Parte 2.
Diapositivas: Services de Angular. Del yield al async/await.
BONUS: Yendo del yield al async/await
Videos de youtube: Asincronismo en JS - Parte II (BONUS): del yield al async/await. Services de Angular.
Si querés aprender más de la interfaz Observable, te recomiendo este video de Never Ben Better

9

Primero vamos a cerrar el desarrollo del backend con Springboot mostrando cómo escribir tests de integración.

Luego veremos asincronismo, concurrencia y paralelismo en la VM de JS:

Promises - Ejemplo electrodomésticos
Diapositivas de la clase
Videos de clase: Asincronismo en JS - Parte 1. Asincronismo en JS - Parte 2.
Videos de youtube: Asincronismo en JS. Testeo de frontend en Angular.

8

Vamos a generar el componente de backend en base a lo que construimos en Algo2, para lo cual

veremos el primer ejemplo didáctico: Saludo con Spring Boot
Y luego estudiaremos 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 clase: Springboot - Parte 1. Springboot - Parte 2.
Videos de youtube: Intro a Springboot.

7

Tareas Routing: muestra un ejemplo de aplicación Master/Detail, donde se genera un Alta-Modificación de Tareas pendientes, y se introduce el framework de routing de Angular que permite definir la navegación de componentes. Diapositivas de Routing.
Búsqueda de libros: a partir de aquí vemos los services de Angular como objetos encargados de conocer un origen de datos y recolectar información. En principio el servicio es solamente local. El ejemplo cuenta también la definición de pipes custom para filtrar una búsqueda en forma local + el testeo unitario de un componente utilizando un stub del servicio de Angular. Para la vista se utiliza el framework Material Design for Bootstrap, que de aquí en adelante será nuestro estándar. Diapositivas de Pipes.
Videos de clase: Búsqueda de libros / Tareas routing. Springboot - Parte 1.
Videos de youtube: Angular - Routing. Angular - Pipes.

6

Componentes reutilizables: en este ejemplo se muestra cómo crear componentes que tienen su propio estado, en particular
- un componente que muestra un usuario dentro de una tabla HTML de usuarios
un componente contador que muestra un número y permite que el usuario sume o reste ese valor de a uno
Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.
Videos de clase: Testeo unitario y diseño de componentes reutilizables. Apuestas de una ruleta.
Videos de youtube: Angular - Componentes reutilizables.

5

El martes haremos un repaso y terminaremos de ver Diseño en Typescript.
Comenzaremos a ver los primeros ejemplos de Angular, el Conversor, luego Twitter
Resumen de la clase: Diapositivas
Videos de clase: Repaso Typescript. Intro a Angular.
Videos de youtube: Angular - Binding. Angular - Testeo de frontend.

4

El jueves comenzaremos a conocer Typescript, que nos servirá para trabajar con el framework Angular. Por lo pronto, seguí las instrucciones que están en la página Typescript para instalar las tecnologías necesarias y descargarte los ejemplos. En clase veremos: