Seguimiento de clases

Clase que viene

15

Clases anteriores

14

Continuaremos aprendiendo React:

13

Continuaremos aprendiendo React:

12

Continuaremos estudiando la programación Web reactiva, para lo cual asegurate de instalarte el entorno.

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

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

Y por último comenzaremos a estudiar la programación Web reactiva, para lo cual asegurate de instalarte el entorno.

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

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

9

  • Terminaremos de explicar las Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario. Abriremos páginas para desarrollar
    • union types vs. interfaces
  • 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
  • Repasaremos los servicios REST con XTRest:
    • Qué eran servicios REST
    • 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

  • Terminaremos de explicar las Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario. Abriremos páginas para desarrollar
    • tipado nominal vs. tipado estructural
    • uso de constantes en lugar de variables estáticas
    • uso de funciones como forma de reutilización en los tests
  • 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

  • Continuamos nuestro recorrido por Angular, viendo 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.
  • Luego seguiremos con Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.
  • Para ayudarte con la tecnología de manejo de dependencias, te dejamos este artículo de npm

6

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

  • el 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. Y de yapa, conoceremos el lenguaje typescript, javascript con chequeo de tipos.

5

Continuaremos viendo el módulo 3: Web estático

  • Estilos y look & feel

Luego haremos el Taller de maquetado Web y la Introducción a SASS. El taller de maquetado finalmente fue una sesión iterativa de pasos:

  • Paso 0: introducción. Presentación del contenido de la página.
  • Paso 1: Elección de la tipografía.
  • Paso 2: Elección de la paleta de colores.
  • Paso 3: Manejo espacial de la página.
  • Paso 4: Refactorización del contenido y de los estilos.
  • Branch master: uso del framework Bootstrap.

4

  • Comenzaremos hablando de los formularios en Arena con objetos transaccionales
  • Tendremos un momento para consultar dudas generales

Y luego comenzaremos con los contenidos del módulo 3: Web estático

3

El jueves

Material adicional que te dejamos: ejercicios de binding y Tips para Arena en XTend

2

El martes comenzamos el TP para lo cual tenés que tener instalado el entorno, descargados los ejemplos de la página de Arena y definidos los grupos. Ya vimos:

El jueves veremos el segundo ejemplo del taller original: encuestas de una votación, y si tenemos tiempo veremos Application model. Extendiendo el MVC.

1

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

Haremos este taller que pueden hacer por su cuenta en sus casas (tengan cuidado si intentan bajar el googledoc como PDF porque te inserta caracteres raros cuando quieras copiar código y no te compila, si lo vas a descargar que sea en un formato RTF, Word o directamente con el googledoc abierto). La clase se va a centrar en:

Cursadas históricas