Obteniendo una respuesta del servidor con Superagent

Clase 28 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

Rubén Rangel

student•

el error

 The date value provided to IntRelativeFormat#format is not in valid range

Fue solucionado agregando el getTime() es decir

createdAt: new Date().getTime()

Paul Santaria

student•

gracias… y me podes decir por que tuvimos que agregarle eso para que funcione??

Efrain Rivera

student•

Para entender esto de mejor manera puedes ir a tu consola para que veas la diferencia que obtienes entre new Date() y new Date().getTime().

new Date()
----> Mon Oct 02 2017 01:20:04 GMT-0500 (Hora de verano central (México))
new Date().getTime()
----> 1506925213951

En cualquier caso yo te la dejo puesta aquí para que puedas ver, recordemos que al utilizar la librería de RelativeFormat se le envía una fecha en el valor numérico que obtenemos con la función getTime de la clase fecha.

Espero que con esto lo hayas comprendido mejor, cualquier duda seguiré por aquí, saludos.

Richard Ortiz Ortiz

student•

A este punto del curso me viene automatico una pregunta. Si estoy creando una pagina de presentacion y mis contenidos son publicos me interesa que los contenidos sean validos para los crawler bot de google. Si obtengo los datos de una restful api y los integro a mi pagina con page y superagent, estos contenidos serian validos como si los hubiera creado los elementos desde del servidor con las directivas que siempre utilze para seo google? Espero se entienda mi pregunta.

Alejandro Roa

student•

Si quieres que una aplicacion javascript trabaje bien con SEO debes crear una arquitectura isomórfica.

Oliver Amezquita Morales

student•

que es un midderware y un append?

Sacha Lifszyc

teacher•

un middleware es una función que recibe ciertos parámetros (en este caso: el contexto y next) y uno de ellos (next) es un llamado al siguiente middleware, y así cada uno de ellos se puede encargar de una cosa por separado y se pueden reutilizar en diversas rutas para que realicen tareas comunes a dichas rutas

se entiende?

Camilo Ortegón

student•

Un middleware es un software intermedio que convierte una respuesta de un servicio ya sea para traducirla, interpretarla, validar algo, redireccionar o agregar información. Un append sería esta última forma de middleware.

Joseles E. Sanchez Andonaegui

student•

mi app me está marcando un error al tratar de hacer el translate.date.format(pictures.createdAt), esto me ocurre solamente cuando paso mi objeto pictures del lado del server y hago request para obtenerlo en el cliente.. El error es que el servidor me retorna la fecha createdAt como milisegundos e intlRelativeFormat.format parece no lo soporta. El error es "The date value provided to IntRelativeFormat#format is not in valid range..", porque a ustedes no les marca ese error??

Josué Manuel Echandia Asto

student•

A mi si

Roberto Araoz

student•

en el minuto 4:20 se ve que la linea esta

createAt: new Date().getTime()  
yo tambien tenia ese error de not in valid range y era por que estaba

createAt: new Date()

Jesus Estrada

student•

Tengo error con la fecha y no me muestra el contenido, me sale este error y ya estuve checando y no se que puede ser.

RangeError: The date value provided to IntlRelativeFormat#format() is not in valid range.

Las fechas que tengo son.

createdAt: new Date()

createdAt: new te(new te() - 10)

Usuario anónimo

user•

tengo el mismo error, ya lo arreglaste?

Sacha Lifszyc

teacher•

prueba poniendo:

createdAt: +new Date()

y cuéntame cómo te va

Christian David Ospina Caicedo

student•

Hay un pequeño error en la edición del video. Desde el minuto 16:30 hasta el 19:50 Sacha empezó a separar el header del resto del layout de cierta manera, al parecer se arrepintió y no borraron esta parte del video, así que en el minuto 19:50 empieza a hacerlo de nuevo ya de la otra manera n_n

Uriel Ramírez

student•

En si no es un error del video, revisamos y concluimos que era igual de importante como paso de un paso al otro. El como resolver el error, si, el resultado a nivel de usuario es el mismo, pero la logica cambio un poco: ¿Crees que era mejor borrarlo?, cuentanos

Ramon Gajardo

student•

Porque ya no utiliza jquery para buscar los elementos. ya no es una libreria tan potente ?

Sergio Daniel Xalambrí

student•

No es necesario, buscar un elemento ya no es complicado y tiene mucha mejor performance hacerlo con la forma nativa de los browser que usar jQuery.

Y los otros usos de jQuery como animaciones o AJAX hay formas mejores, en animaciones es siempre mejor usar CSS, siempre, ya que CSS usa la GPU mientras que JS usa la CPU y al usar la GPU tenemos mejor rendimiento y animaciones más fluidas.

Y sobre AJAX es mejor usar superagent (si usas una librería) o fetch (nativo de los browsers) en vez de cargar todo jQuery solo para AJAX. Mejor cargar librerías más específicas para las tareas necesarias.

JUAN PABLO GOMEZ GONZALEZ

student•

Para aclarar el error del header, lo que encontré es que al poner el div en el layout/index.js como:

El middleware header no lo encuentra con el document.getElementId('header-container'), porque aun no se ha ejecutado el require del homepage.
Por esta razón se crea en el index.pug otro section#header-container... para que el middleware header pueda encontrarlo y hacer el append

Saludos

Fabián Antonio Salgado Sepúlveda

student•

Mas que aprender Superagent en este video, me gusto el uso los middleware de Page.

Evert Escalante

student•

Tremenda clase, gracias Sacha, no entiendo como pagan mas por el frontend en algunas empresas cuando el backend es un volado!!

Reinaldo Mendoza

student•

El empaque también vende, estoy d acuerdo contigo, pero el código puede ser muy bueno y no verse muy bien y los usuarios tienden a rechazarlo

Constantino Celis Peñaranda

student•

No se por qué no me funciona lo del header, cuando hago el appendChild al div que cree en el layout me dice que no existe :(

Alejandro Moreno

student•

Sigue viendo el video, luego de un momento corrige ese problema e inserta el header-container en el view directamente.

David Gómez

student•

Deja el layout solo con el div del content, incluso sobra el otro div que envolvía todo. En el index.pug agrega antes de section#main-container un section#header-container. En el archivo del header deja el appendChild tal cual, reinicia el servidor y ya debería servir.

Didier Zúñiga

student•

El archivos bundle.js que función realiza?, me perdí la parte donde se generó

Ricardo Azpeitia P.

student•

Es el archivo de salida que genera webpack/browserify.

Jonathan Salazar Galeano

student•

yo tengo la misma duda, en que momento se generó?

Daniel Hidalgo

student•

mi cabeza explotó !

Camila Di Virgilio

student•

Amo los middleware y amo este curso 😄

Evert Escalante

student•

@camiladi Hola, me cuesta un poco entender que es un middleware, podrias por favor explicarme un poco

Camila Di Virgilio

student•

mira bien el minuto 7:31 explica bien para que son utilizadas, así a groso modo, los middleware te sirven para realizar acciones previas, antes de seguir con algo. Por ejemplo Page() es un módulo para crear singlepage, entonces cada vez que se llama page() me renderiza en nuestra página principal lo que le colocamos en el último callback

page('/login' , primerMiddleware, function (ctx) {
	// aquí se ejecuta la última función, pero 
	//para llegar aquí debe pasar por el primer
	//middleware que hará lo que sea que se le indique

	let elemento = getElementById(id)
	elemento = appendChild(ctx.algunElemento)
})

function primerMiddleware (ctx, next) {
	// esta será la primera función en ejecutarse
	// si me sucede algo te envío cierto elemento, sino
	// te envío otro elemento
	if( true) {
		ctx.algunElemento = <div></div>
	} else {
		ctx.algunElemento = <h1></h1>
	}
	//y ahora indicamos que siga con la otra función
	// llamando a next()
	next()
}

Gerardo Sotelo Arellano

student•

De 22:45 minutos que dura el video, me lleve casi una hora en estar entendiendo lo que borra Sacha y lo que vuelve a modificar de manera rápida, ejemplo: en el minuto 21 donde hace el middleware del header hizo tantas vueltas que me llevo más de un minuto acomodarlo por las modificaciones que no mencionaba.

Comento por primera vez que en realidad lleva más tiempo entender las clases de lo que en verdad son, por tantas vueltas que se dan en unas cuantas lineas de código. Y todo esto, pasa lo mismo en vídeos anteriores.

Es cansado =/

Evert Escalante

student•

para entenderlas bien hay que ver, vovler a ver, escribir, volver a escribir, volver a ver y asi

Reinaldo Mendoza

student•

jaja, que bueno que se puede pausar

Yonathan Gutierrez

student•

brutal todo esto, pero una pregunta: si lo quisiera hacer con sessionStorage no sería un poco mas optimo?

Gian Branco Farfan Correa

student•

Que realiza el '+'

 createdAt: +new Date()

Fernando Contreras

student•

internamente llama al metodo valueOf con el cual te trae su valor primitivo del objeto date

Henry Tabima Giraldo

student•

yo añadí el header de la siguiente manera

document.body.insertBefore(el, document.body.firstChild);

Carlos Gil

student•

A pesar de seguir los pasos de Sacha (quitar el require del header del index.js y manejarlo como un middleware en la homepage), no he podido lograr que el header no aparezca en el signin y en el signup. No me sale ningún error y la verdad es que no se por donde buscarle…

Alguna idea?

Ricardo Azpeitia P.

student•

Sin el codigo es dificil saber que puede estar fallando.

Diego Diaz

student•

no entendi lo de res.body, por que recibe ‘pictures’, por que body?

page('/login' , primerMiddleware, function (ctx) {
	// aquí se ejecuta la última función, pero 
	//para llegar aquí debe pasar por el primer
	//middleware que hará lo que sea que se le indique

	let elemento = getElementById(id)
	elemento = appendChild(ctx.algunElemento)
})

function primerMiddleware (ctx, next) {
	// esta será la primera función en ejecutarse
	// si me sucede algo te envío cierto elemento, sino
	// te envío otro elemento
	if( true) {
		ctx.algunElemento = <div></div>
	} else {
		ctx.algunElemento = <h1></h1>
	}
	//y ahora indicamos que siga con la otra función
	// llamando a next()
	next()
}

Obteniendo una respuesta del servidor con Superagent

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage