Seguimiento de clases

Clase que viene

Seguimos con React:

13

Continuaremos aprendiendo React:

12

Comenzaremos a estudiar la programación Web reactiva, para lo cual veremos:

  • Hola-mundo: el primer ejemplo en React, contiene dos componentes
    • un contador al que podemos sumarle o restarle uno
    • un label que permite saludar a una persona (muestra cómo pasarle parámetros a un componente)
    • explica los conceptos componente, props, estado, y da una introducción al testeo unitario de componentes con Jest + Enzyme
  • Conversor: el tradicional conversor de millas a kilómetros.
    • Hay un branch conversor-inmutable que define un conversor con estado, más parecido a los ejemplos vistos anteriormente.
    • Explica el ciclo de vida mutación de estado y posterior render, testing y la arquitectura de ambas soluciones

Hay un Apunte introductorio a ReactJS que recomendamos leer para entender la filosofía de la programación funcional que vas a profundizar en la materia Paradigmas de Programación.

También tenés la documentación oficial de ReactJS para estudiar los conceptos principales.

11

  • Vamos a estudiar el mecanismo de trabajo asincrónico propio de javascript (y que NodeJS fuerza) a partir del ejemplo de promises.
  • Repasaremos el ejemplo de Tareas simplificando nuestra comunicación asincrónica con el backend utilizando la sintaxis async / await. Esto lo pueden descargar en el siguiente branch.
  • Y te dejamos un material interesante sobre los errores comunes al trabajar con promises
  • Y para ver cómo evitamos repetición de ideas 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.
  • Por último, veremos cómo migrar una aplicación web (la de tareas con routing) a una de escritorio mediante el framework Electron. Te dejamos el link al branch que explica paso a paso cómo hacerlo.

10

  • Comenzaremos conectaremos un frontend que permite actualizar la lista de tareas pendientes de un equipo de desarrollo utilizando como backend nuestro servicio XTRest: el ejemplo es Tareas. Le prestaremos especial atención a la comunicación y al manejo de errores.

9

  • Comenzaremos a estudiar servicios REST con XTRest:
    • Haremos una breve introducción a los servicios REST
    • Y luego empezaremos a ver el primer ejemplo en XTrest: Tareas, veremos cómo probarlo en POSTMAN
    • Repasaremos lo visto con el segundo ejemplo, Biblioteca
    • Tendremos una muy breve introducción a templates server-side con el ejemplo del Conversor

8

  • 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

7

Continuaremos conociendo Angular, en este caso

  • 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.
  • Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.

6

Ahora sí arrancamos la programación web client-side con Angular 6. En la página específica de Angular están las instrucciones para instalarte el entorno (esto lo haremos el martes) y después estudiaremos estos ejemplos:

  • Conversor: aquí aprenderás sobre cómo crear una aplicación desde cero con Angular CLI, el mecanismo de binding entre vista y modelo dentro de un formulario template, las validaciones, las transformaciones de datos (pipes built-in) y el testeo unitario. Para la vista se utiliza el framework Bootstrap Twitter.

5

Comenzaremos haciendo un Taller de maquetado Web, aprovechando para hablar de Responsiveness

Luego haremos una breve Introducción a SASS

4

Terminaremos de cerrar los conceptos de Arena

Y comenzaremos a entender cómo construir una aplicación Web, para lo cual iniciaremos la unidad 3: Web estática

En casa podés estudiar acerca de estos temas:

3

El jueves hablaremos de testeo unitario con view models, repasaremos el Binding avanzado de propiedades calculadas resolviendo dos requerimientos nuevos:

Para ayudarte con el TP tenés dos guías: Cómo crear un panel de edición y Cómo crear un panel de búsqueda

Y también material de consulta sobre: Repositorios y Homes. Application Context. Manejo de la transacción.

2

El martes terminarán de instalar Arena en sus notebooks y máquinas del LC4 y comenzarán diseñando vista y modelo de las pantallas más simples del TP.

Veremos otros tipos de controllers: transformers para adaptar diferentes valores en los inputs.

Luego continuaremos el taller con el segundo ejemplo: encuesta para votaciones en diferentes zonas. Hay una página similar que cuenta el ejemplo apuestas de un casino.

BONUS: Vamos a generar una tabla con los resultados de la encuesta, y para mostrar el candidato más votado en otro color veremos cómo trabajar con transformers para columnas de una grilla.

Material para ayudarte con el TP: Guía de Componentes. Bindings. Layouts

El ejemplo que muestra widgets es muy útil (fijate los otros ejemplos que hay para bajarse).

1

El martes hablamos de Mi Cursada. Script Clase Introducción: Introducción a las interfaces de usuario. Configuración del entorno cliente pesado en Arena. Descarga de ejemplos. Intro a Arena. Disclaimer.

El jueves comenzamos con la Unidad 2 Desarrollo de interfaces con componentes.

Haremos este taller para lo cual es importante tener el entorno configurado (bajá el taller en formato RTF o Word, no lo bajes como PDF porque te va a insertar caracteres raros cuando quieras copiar código). La clase se va a centrar en:

Cursadas históricas