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
- Ejemplo de apuestas
- 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.
- Mundial 2018 Rusia
- 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.
- Video de la clase
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.
- Video de la clase
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
- Diapositivas de la clase
- Video de la clase
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 jueves estaremos viendo
- 06 - Display Grid
- 07 - Flexbox vs. Grid
- 09- Variables - Custom properties en CSS.
- 10 - Media Queries. Selectores avanzados.
- 12 - Transiciones y Animaciones
- Si tenemos tiempo: 11 - Accesibilidad.
Links a los videos de clase:
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:
- 04 - Medidas espaciales: em, rem, px
- 05 - Display Flexbox
- 08 - Reutilizacion. BEM.
- Consulta sobre dudas del taller de maquetado web: Amigos y dudas generales.
- Link a las diapositivas
- Videos de la Clase
1
El martes hablaremos de
- Mi Cursada. Script Clase Introducción:
- Introducción a las interfaces de usuario.
El jueves comenzaremos con la Unidad 2 Desarrollo Web Estático.
- En la página CSS te podés ir instalando el entorno recomendado
- En la clase charlaremos sobre:
- Introducción a la arquitectura web. HTML
- Introducción básica a CSS
- Y luego empezaremos a desarrollar la unidad con ejemplos:
- 01-Especificidad
- 02-Box Model
- 03 - Elementos de línea y de bloque. Position. Z-Index.
- Ejemplo de Maquetado Web, para leer en casa: