Seguimiento de clases

Clase que viene

17

Hoy cerramos la cursada haciendo un balance de lo aprendido y conociendo tres variantes para desarrollar UI:

16

React Native. Video de la clase.

15

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
  • 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

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

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:

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:

1

El jueves comenzaremos con la Unidad 2 Desarrollo Web Estático.


Cursadas históricas