Embedded Files
Clases 2024
Clases 2024
Y cerramos el año! Espero que lo hayas disfrutado tanto como nosotros.
Y cerramos el año! Espero que lo hayas disfrutado tanto como nosotros.
15
15
Comenzaremos repasando el mecanismo de binding con reactividad con runas de Svelte
con el ejemplo de Twitter
y les dejamos el conversor en Svelte
Cómo desarrollar tests e2e con Cypress:
Y haremos el cierre de la materia
Videos de youtube: Cypress
14
14
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.
Mundial FIFA (2022 Qatar Edition)
Diapositivas: React Context
Videos de youtube: React - Routing. React - Context.
13
13
Repasaremos
las tareas de un equipo de desarrollo,
el routing
y el testeo
Luego 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.
12
12
Comenzaremos viendo el ejemplo de los Mails, donde analizaremos el hook useEffect.
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:
Diapositivas: Diseño de componentes.
Videos de youtube: Diseño de componentes en React. Integración de app React con un backend
11
11
Repasaremos cómo funciona el framework React
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.
Input disabled: composición de componentes (props children, slot).
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.
Videos de youtube: Introducción a React. Tests de frontend en React.
10
10
Después de repasar los mecanismos de testeo de frontend incluyendo asincronismo, 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.
Luego 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.
9
9
Vamos a continuar conectando el front y el back en el ejercicio de Tareas,
además de métodos de consulta, veremos las actualizaciones
el manejo de errores
cómo podemos utilizar RxJs con sus Observables
Diapositivas: Services de Angular. Testeo avanzado. BONUS: Del yield al async/await.
Videos de youtube: Services de Angular. Testeo avanzado de Angular.
Videos BONUS: Asincronismo en JS - Parte II: del yield al async/await. Si querés aprender más de la interfaz Observable, te recomiendo este video de Never Ben Better.
8
8
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:
Si hay tiempo haremos una intro al ejemplo de Tareas:
tiene el back-end construido en Spring Boot
y el front-end en Angular
Videos de youtube: Asincronismo en JS / Promises. Testeo de frontend en Angular.
7
7
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
Videos de youtube: Intro a Springboot.
6
6
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 youtube: Angular - Routing. Angular - Pipes.
5
5
Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario. También tiene una variante reactiva.
4
4
Comenzaremos repasando Angular con el segundo ejercicio: Twitter, en las variantes con templating y signals.
Luego veremos cómo son los tests de frontend.
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
y por último un componente que muestra una lista de productos de un carrito
Videos de youtube: Angular - Testeo de frontend. Angular - Componentes reutilizables.
3
3
El martes es el checkpoint, el jueves tenemos:
09- Variables - Custom properties en CSS. - Video de Variables en CSS - Youtube
10 - Media Queries. Selectores avanzados. Video Media Queries - Youtube
BONUS:
08 - Reutilizacion. BEM. Video de Reutilización - BEM - Youtube
12 - Transiciones y Animaciones. Video de clase: Transiciones y animaciones.
El jueves comenzaremos a ver los primeros ejemplos de Angular, el Conversor.
Te recomendamos que ya tengas instalado el entorno de Angular
Resumen de la clase: Diapositivas
Videos de youtube: Angular - Binding.
Y para familiarizarte con Typescript tenés la página específica de la tecnología.
2
2
El martes tenemos:
Presentación oficial del TP
El jueves se ve:
Bonus:
1
1
El martes será la presentación oficial de la materia:
Anotate en la lista
Unidad 1: Introducción a las interfaces de usuario.
Unidad 2 Desarrollo Web Estático.
Introducción a la arquitectura web. HTML. Introducción básica a CSS.
Diapositivas
Videos de clase
Los temas para ver en la clase del jueves serán:
03 - Elementos de línea y de bloque. Position. Z-Index. - Video de Display inline vs. block. Position - Youtube
Si querés podés ver cómo generar un proyecto web desde cero, y cómo importar fuentes de Google (Video youtube)
BONUS: Ejemplo de Maquetado Web, para leer en casa:
Cursadas históricas
Cursadas históricas
Google Sites
Report abuse