Conectando el listado de preguntas con el formulario de creación

Clase 29 de 75 • Curso de MEAN 2017

Resumen

Desafío:

Utiliza Google para comparar TypeScript, que recordemos es este superset de JavaScript que nos permite definir tipos y definir tipos para las variables, así como interfaces y clases, con Flow que es otro superset de JavaScript.
Realiza una tabla comparativa con las siguientes características:

a) ¿Quiénes son los creadores?
b) ¿Qué tipo de superset es cada uno?
c) ¿Cuál de los dos es más rápido? (Velocidad de chequeo)
d) ¿Cuál tiene mejor calidad en la documentación?
f) ¿Qué tal es la integración con los editores de texto?
g) Compara ekemplos prácticos. Mismo ejemplo en ambos superset.

Fernando Ontiveros

student•

Basado en el aporte que hizo @garraxxi, las respuestas a las preguntas planteadas por Sacha serían las siguientes:

a) ¿Quiénes son los creadores?
Flow: Facebook
Typescript: Microsoft
b) ¿Qué tipo de superset es cada uno?
Flow: Static Type Checker
Typescript: Typed Superset of JS that compiles to plain JS
(Citado directamente de las páginas oficiales)
c) ¿Cuál de los dos es más rápido? (Velocidad de chequeo)
Flow: La velocidad se degrada al agregar más archivos
Typescript: La velocidad no varía mucho entre más archivos
d) ¿Cuál tiene mejor calidad en la documentación?
Typescript
f) ¿Qué tal es la integración con los editores de texto?
Flow: Excelente, destacando su performance con Visual Studio Code
Typescript: A veces falla, hace difícil al editor identificar código, descarga adicional de plugins no efectivos.
g) Compara ejemplos prácticos. Mismo ejemplo en ambos superset.
Flow:

(1 + 1 : number);

Typescript:

(1 + 1) as number;

Edgar Muñoz

student•

Typescript vs flow

Según lo leído, en términos generales flow es deficiente en documentación y mensajes de error más que todo.
Otra diferencia grande que se ve es que flow se ralentiza a medida que se agregan archivos alproyecto, lo que se controla más del lado de typescript. Ahora, que si lo que se quiere es migrar desde un proyecto realiado en javascript, flow solo requiere agregar //@flow como primera línea de código, mientras que typescript requiere cambiar las extensiones de los archivos.

Podría copiar y pegar una tabla con las diferencias, pero lo justo es dar crédito a quién realiza la investigación a fondo:
Ver ampliación del debate.

Saludos.

Daniel Alejandro Molina Yepes

student•

interesante

Agustin David Luzenti

student•

Realiza una tabla comparativa con las siguientes características:

a) ¿Quiénes son los creadores?
Flow: Facebook
TypeScript: Microsoft Inspirado por C# o Java
b) ¿Qué tipo de superset es cada uno?
Flow: Es un comprobador de tipo estático
Typescript: Es un lenguaje de programacion, un superset de JavaScript
c) ¿Cuál de los dos es más rápido? (Velocidad de chequeo)
Flow: Su velocidad disminuye conforme se van agregando archivos.
Typescript: La velocidad de chequeo no varia demasiado en relacion a la cantidad de arhivos
d) ¿Cuál tiene mejor calidad en la documentación?
Flow, debido a que ambas documentaciones son buenas. El manual de TypeScript no solo enseña TypeScript, sino ademas JavaScript lo cual puede ser complicado para los programadores menos experimentados.
f) ¿Qué tal es la integración con los editores de texto?
Flow: Es mas complicado encontrar plugins que esten realmente actualizados con respecto al ultimo lanzamiento de flow.
TypeScript: Es mas facil
g) Compara ejemplos prácticos.

Flow: import type {UserID, User} from “./User.js”;
TypeScript: import {UserID, User} from “./User.js”;

Carlos Enrique Ramírez Flores

student•

Gracias por el aporte, me parece muy bien por los links.

Andres Mora Vanegas

student•

en el minuto 2:45 se parte el editor, dificultando la visualización del código

JUAN CARLOS RUIZ SALAZAR

company_admin•

a) ¿Quiénes son los creadores? TypeScript: Microsoft Flow: Facebook b) ¿Qué tipo de superset es cada uno? TypeScript: typed superset of JavaScript Flow: Static Type Checker c) ¿Cuál de los dos es más rápido? (Velocidad de chequeo) TypeSCript es mas rapido cuand o hay muchos archivos a comparación de Flow. d) ¿Cuál tiene mejor calidad en la documentación? TypeScript f) ¿Qué tal es la integración con los editores de texto?

TypeScript:Support for all major frameworks, Vue, Angular and React therefore we can use TypeScript with any of them Flow: Advanced, built-in support for React meaning that Flow might be a better choice when React is our target framework.

Jose Osses Plaza

student•

a que se puede deber este error me aparecen 140 errores :S

ERROR Error: "Uncaught (in promise): Error: No value accessor for form control with name: 'icon'
_throwError@http://localhost:4200/vendor.bundle.js:92908:11
setUpControl@http://localhost:4200/vendor.bundle.js:92818:9
../../../forms/@angular/forms.es5.js/NgForm.prototype.addControl/<@http://localhost:4200/vendor.bundle.js:94945:13
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.bundle.js:2937:17
onInvoke@http://localhost:4200/vendor.bundle.js:79980:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.bundle.js:2936:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.run@http://localhost:4200/polyfills.bundle.js:2687:24
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:3389:52
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:2970:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:79971:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:2969:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:2737:28
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:3147:25
../../../../zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:4200/polyfills.bundle.js:3048:21
invokeTask@http://localhost:4200/polyfills.bundle.js:3972:9
globalZoneAwareCallback@http://localhost:4200/polyfills.bundle.js:3990:17
"
resolvePromisehttp://localhost:4200/polyfills.bundle.js:3340:31scheduleResolveOrRejecthttp://localhost:4200/polyfills.bundle.js:3392:17invokeTaskhttp://localhost:4200/polyfills.bundle.js:2970:17onInvokeTaskhttp://localhost:4200/vendor.bundle.js:79971:24invokeTaskhttp://localhost:4200/polyfills.bundle.js:2969:17runTaskhttp://localhost:4200/polyfills.bundle.js:2737:28drainMicroTaskQueuehttp://localhost:4200/polyfills.bundle.js:3147:25invokeTaskhttp://localhost:4200/polyfills.bundle.js:3048:21invokeTaskhttp://localhost:4200/polyfills.bundle.js:3972:9globalZoneAwareCallbackhttp://localhost:4200/polyfills.bundle.js:3990:17 ```

Diego Forero

Team Platzi•

Al parecer estas usando un div para contener un formulario, formControlName debe ir en un form.

Jose Osses Plaza

student•

Gracias GOLLUM23 por darte el tiempo de responder mis dudas 😃 , me ayudas bastante !

Carlos Enrique Ramírez Flores

student•

LINKS.
TypeScript => Microsoft
Flow => Facebook

Diego Serrano

student•

porque la ruta de new tiene que ir antes de la de ID ?

Pepe Alvarez

student•

Investigando lo que Sacha propone, me encontré con este vídeo el cual fue lo mas interesante y diferente a los aportes previos, no dejen de ver esta buenísima explicación con demos desde la voz de uno de los creadores de TypeScript.

una pregunta para @sacha o la comunidad,** como debugguear TypeScript???** ya que durante el curso me hizo mucha falta, como IDE utilice, Visual Studio Code el cual tiene un intellisense que ayuda mucho pero aun así estaría bien saber como debuggear tu código.

Walter Lensinas

student•

Me interesa esto también, como se hace para debuggear linea por linea, vengo de usar VS Studio con C# y me acostumbre…

Vi en la consola del chrome una pestaña “Sources” que podes agregar breakpoints, pero solo veo archivos css o de otros dominios.

Walter Lensinas

student•

Buenas, dejo el código de la clase aquí:

Telenet de México

student•

Autores Flow es desarrollado por Facebook, Typescript es desarrollado por Microsoft.
Tipo Flow es un comprobador para javascript, mientras que Typescript es un superset (transpilador)
Velocidad de chequeo Mientras vaya aumentado el tamaño de los mismo Flow perderá rapidez, en cambio, Typescript no le afecta el tamaño del proyecto.
Calidad de Documentación Typescript tiene una amplia documentación actualizada, sin embargo, en Flow no todas las características están documentadas y en algunos casos no están actualizadas.
Integración con editores de texto Typescript tiene una relativa variedad de integración con edites de texto, siendo sustancialmente sencilla su integración. En cuanto al IDE Visual Studio Code tiene una integración nativa. Por su parte Flow no es soportado nativamente por prácticamente ningún IDE y su integración puede ser un poco laboriosa.

Jorge Leonardo Céspedes Tapia

student•

Se me presenta el siguiente problema. Agrego el botón y al darle click me lleva a la pantalla de preguntas. Todo bien. Pero el botón no desaparece. Durante toda la navegación nunca desaparece. ¿Alguien tiene el mismo problema?

Jose Antonio Marín López

student•

A partir del minuto 2.45 y hasta el 4.30, la cámara está en una posición bastante inadecuada. ¿Podrían solucionarlo?

Gabriel Novoa

student•

desde el minuto 3.38 se cambia el video

Carlos Sampol

Team Platzi•

¿ Podrías intentar de nuevo por favor?

habib borge

student•

sigue igual.

Andres Alvarez

student•

Creadores:
Flow: Facebook
Typescript: Microsoft
-tipos:
flow: verificador de tipado estático para Javascript
Typescript: un superset de JavaScript
-velocidad de chequeo:
Flow: a medida que se van agregando archivos su velocidad va decayendo
Typescript: su velocidad es constante
-calidad en la documentacion:
Typescript esta mejor documentado
-con los editores de texto
TypeScript esta bien implementado con visual studio code y se encuentran buenos plugins en Atom

Flow
function fooGood<T: { x: number }>(obj: T): T {
console.log(Math.abs(obj.x));
return obj;
}
TypeScript
function fooGood<T extends { x: number }>(obj: T): T {
console.log(Math.abs(obj.x));
return obj;
}

Conectando el listado de preguntas con el formulario de creación

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más