Seguimiento de clases
Clase que viene
17
Hoy cerramos la cursada haciendo un balance de lo aprendido y conociendo tres variantes para desarrollar UI:
Vaadin, un framework con componentes híbridos Java/JS. Podés ver el ejemplo https://github.com/uqbar-project/eg-conversor-vaadin
Svelte, un framework minimalista que no trabaja con VDOM.
Video de la charla de su creador, Rich Harris
y una introducción a las PWA (Progressive Web Applications)
16
React Native. Video de la clase.
15
Vimos cómo desarrollar tests e2e con Cypress
Y una introducción a Arena.
14
Repasaremos el ejemplo Tareas de un equipo de desarrollo, en particular
manejo de estado vs. props, y su propagación a componentes hijos
definición de keys dentro de un loop de llamadas a componentes propios
definición de servicios como concern que dispara pedidos asincrónicos hacia el backend
testeo unitario de la aplicación, repasamos mock de servicios
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.
Videos de clase
13
Seguiremos 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.
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.
Videos de la clase
12
Repasaremos primero el ejemplo del Conversor, y por qué las arrow functions asocian this al scope en donde fueron creadas (a diferencia de los métodos), como cuenta este artículo. Más sobre las arrow functions.
Veremos el ejemplo del Conversor como componente funcional, utilizando la técnica React Hooks > useState.
Luego continuaremos con el ejemplo Pedidos de helados. Ciclo de vida de un componente React.
Si hay tiempo, 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.
11
Primero Jorge Luis nos contará sobre los frameworks de CSS del mercado, en particular veremos Bulma.
Repositorio del ejemplo visto en la clase: Login-Bulma.
Luego comenzaremos a conocer React,
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.
y por último la variante Conversor con React Hooks, utilizando la técnica useState.
Videos de clase
10
Estudiaremos cómo trabajar con simulando los servicios para no acceder al backend "de verdad" para el ejemplo de Tareas 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.
Después contestaremos dudas del TP.
9
Tareas:
tiene el back-end construido en Spring Boot
y el front-end en Angular
Videos de la clase
8
En esta clase veremos asincronismo, concurrencia y paralelismo en la VM de JS:
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
6
El martes hicimos el lanzamiento formal de la entrega 3 del trabajo práctico. Te dejamos el link al video de la explciación.
La clase del jueves se basará en
Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.
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.
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
Videos de las clases
5
Comenzaremos a ver el primer ejemplo de Angular, el Conversor.
Luego haremos una breve resolución del ejercicio de Twitter, de los que propone la guía de binding.
Y empezaremos a ver Componentes reutilizables: en este ejemplo se muestra cómo crear componentes reutilizables 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
Para la vista se utiliza el framework Material Design.
Resumen de la clase
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:
Yendo de OO a la programación funcional: Rápidos y Objetosos
Diapositivas: Diseño en Typescript
Resumen de clase
3
El martes presentamos el TP de maquetado web para el dominio trabajando en la cursada 2020 de Algoritmos II. Además recuerden:
Formar grupos de no más de tres personas e inscribirse en esta planilla.
Suscribirse al canal de Slack que vamos a utilizar para comunicarnos.
Instalar el entorno de desarrollo para maquetado.
Habitualmente cuando la cursada era presencial, podían intercambiar ideas en clase y codear entre varios sobre una PC. Si bien hoy no es posible, les acercamos una alternativa para que puedan tener una experiencia lo más similar posible. Hay un plugin llamado LiveShare para Visual Studio Code que permite transformar un IDE en algo similar a un documento compartido de google, pudiendo editar varias personas al mismo tiempo un archivo. Esta herramienta sumada a un meet, puede ayudarlos para hacer pair programming.
Les dejamos un tutorial para que puedan ver cómo se instala y como funciona https://www.youtube.com/watch?v=o41qXc-QTrQ&t.
Además acá está el link al video de la clase.
2
Los temas para ver en la clase del jueves serán:
Consulta sobre dudas del taller de maquetado web: Amigos y dudas generales.
Videos de la Clase
1
El martes hablaremos de
Introducción a las interfaces de usuario.