Seguimiento de clases
Clases
17
La cursada 2021 terminó, pero te dejamos las clases BONUS del 2020:
Videos de la clase
Material
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
Repasaremos el ejemplo Tareas de un equipo de desarrollo, en particular el 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: Testeo unitario + Estado global con React Context. Segunda parte: React Context funcional + ejemplo Mundial 2018.
15
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.
14
Comenzaremos repasando React y viendo las técnicas de testeo unitario automatizado que propone.
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.
Videos de clase: Parte 1: Unit Testing + Ciclo de vida de un componente React. Parte 2: useEffect.
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.
Conversor: el tradicional conversor de millas a kilómetros: explica el ciclo de vida, mutación de estado y posterior render.
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.
Videos de clase: Intro a React. Parte 1. Parte 2.
12
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.
Cómo desarrollar tests e2e con Cypress
Videos de clase: Cypress. Bulma + Chakra.
11
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.
10
Veremos el ejemplo completo de Tareas:
tiene el back-end construido en Spring Boot
y el front-end en Angular
9
En esta clase veremos asincronismo, concurrencia y paralelismo en la VM de JS:
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. Variante con custom serializers/deserializers
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 clase: Springboot - Parte 1. Springboot - Parte 2.
7
La clase del martes hicimos un repaso de los ejemplos de Angular que vimos hasta ahora, los diferrentes tipos de bindings, componentes y algunas directivas básicas. Les dejamos el link del video de la clase .
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 clase: Apuestas de una ruleta. Búsqueda de libros / Tareas routing.
6
El martes presentamos la entrega 3 del trabajo práctico en el que vamos a trabajar con Angular. Les dejamos el video de la presentación.
Haremos una breve resolución del ejercicio de Twitter, de los que propone la guía de binding. Repasaremos conceptos de testeo unitario y smoke test.
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
Para la vista se utiliza el framework Material Design.
Videos de clase: Ejemplo Twitter. Testeo unitario y diseño de componentes reutilzables.
5
El martes haremos un repaso y terminaremos de ver Diseño en Typescript.
Comenzaremos a ver el primer ejemplo de Angular, el Conversor.
Resumen de la clase; Diapositivas
Videos de clase: Repaso Typescript. Intro a Angular.
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:
Diapositivas: Diseño en Typescript
Videos de clase: Intro a Typescript - Parte 1. Parte 2.
3
El próximo jueves veremos:
BONUS:
Videos de clase:
2
El martes presentamos el TP de maquetado web para el dominio trabajando en la cursada 2021 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.
Suscribirse al canal de Discord .
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 cómo funciona.
Y luego empezaremos a desarrollar la unidad con ejemplos:
Ejemplo de Maquetado Web, para leer en casa:
Videos de la clase práctica
Videos de la clase teórica
Material extra: Tips for UI Design
Los temas para ver en la clase del jueves serán:
Consulta sobre dudas del taller de maquetado web: Amigos y dudas generales.
1
El jueves hablaremos de
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.