Utilizando FormatJS para internacionalizar las fechas

Clase 25 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Soportar múltiples idiomas es un requerimiento básico en el desarrollo de aplicaciones modernas. Gracias a una librería llamada FormatJS, podemos disponer de traducción de fecha y textos del lado del cliente. Además, usaremos un polyfill para asegurar la compatibilidad en todos los navegadores.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-21.rar?raw=true

Yeison Daza

student•

hay que tener en cuenta que,

var IntlRelativeFormat = window.IntlRelativeFormat = require('intl-relative');

No es lo mismo que escribir (shorthand)

var IntlRelativeFormat =  require('intl-relative');  
window.IntlRelativeFormat = require('intl-relative');

En realidad lo que sucede es,

var IntlRelativeFormat = window.IntlRelativeFormat;  
window.IntlrelaviteFormat = require('intl-relative');

y esto si lo usamos dentro de funciones o con strict mode, puede traer comportamientos diferentes.

Adrian Cejudo García

student•

La nueva actualización de Safari ya incluye intl

Luis Antonio Schmiel Paredes

student•

si pero por igual siempre es bueno que se incluya ese “if” porque no todos actualizan sus navegadores.

Sergio Peña

student•

Estas lineas funcionan en ES5

var IntlRelativeFormat = window.IntlRelativeFormat = require('intl-relativeformat');  
require('intl-relativeformat/dist/locale-data/en.js');  
require('intl-relativeformat/dist/locale-data/es.js');

Pero como sería su equivalente en ES2015, usando los import?
Lo he intentado de esta manera:

import IntlRelativeFormat from 'intl-relativeformat';  
window.IntlRelativeFormat = IntlRelativeFormat;  
import 'intl-relativeformat/dist/locale-data/en.js';  
import 'intl-relativeformat/dist/locale-data/es.js';

me sigue dando el error en la consola de chrome

Uncaught ReferenceError: IntlRelativeFormat is not defined

Pablo Verdugo Garrido

student•

Madre del amor hermoso, cuántas librerías!

Reinaldo Mendoza

student•

Ya perdi la cuenta, mas de una por clase

Sebastian Mar

student•

Por que sera que me cambia la fecha relativa cada vez que le doy like a la primer card?
Gracias!
saludos.-

Hamilton Zambrano

student•

Me sucede lo mismo

David Santiago González Ramos

student•

La fecha se crea cuando recargas el browser y queda en hace pocos segundos…pero si digamos le das like a la 5min desps y no has recargado el browser se te va a actualizar a la fecha “real” de creacion. Es decir no se va actualizando en real time, sino que se actualiza al darle like ya que se vuelve a hacer render de la vista pero no cambia la fecha de creacion.
Me hago entender?

Oliver Amezquita Morales

student•

Me gusta mas Moments.js;
Aqui dejo el codigo de formatjs
if (!window.Intl) {
window.Intl = require('intl');
require('intl/locale-data/jsonp/en-US.js');
require('intl/locale-data/jsonp/es-MX.js');
}

window.IntlRelativeFormat = require('intl-relativeformat');
require('intl-relativeformat/dist/locale-data/en.js');
require('intl-relativeformat/dist/locale-data/es.js');

Yefferson Guarnizo

student•

excelente libreria gracias sasha

Reinaldo Mendoza

student•

No le veo mucha utilidad sinceramente

Yoel Velasquez Valencia Velasquez

student•

En Crhome todo bien pero en safari no me reconocen las comillas de yo-yo

Yoel Velasquez Valencia Velasquez

student•

Es por la versión.. :S

Fredy Bustos

student•

con moment si tenemos soporte para todos los navegadores?

Sergio Daniel Xalambrí

student•

Sí, pero moment solo sirve para fechas, FormatJS sirve para más cosas, por ejemplo para mostrar monedas, mensajes, pluralización (mostrar un mensaje o dos mensajes por ejemplo), números (usar punto o coma como separador de miles por ejemplo), fechas, etc.

Rubén Rangel

student•

Tengo años programando y ya vi que estaba muy mal en mis practicas gracias Sacha gracias Platzi

Liz Villegas Villegas

student•

No he terminado el curso, a lo mejor al final hay alguna respuesta, pero hay forma de automatizar el gulp styles? Siento que es mucha perdida de tiempo, grunt me da esa opcion.

Roberto Daniel Rojas Montecinos

student•

en la funcion compile del gulpfile podrias agregar otra variable de watchify que este mirando el index.scss y cada ves que vea un cambio ejecute el código del gulp.task styles

Jonatan Camilo Bonilla Malaver

student•

Si fechas relativas con momentJS y colocarlas en el idioma que necesitamos, por qué usamos FormatJS para eso mismo?? o por la opción de usar polyfill para asegurar la compatibilidad en todos los navegadores??
Si yo quiero puedo usar solo FormatJS para mis proyectos, o dependiendo de la circunstancia uso momentJS??

Gracias

Sergio Daniel Xalambrí

student•

Si fechas relativas con momentJS y colocarlas en el idioma que necesitamos, por qué usamos FormatJS para eso mismo??

Moment.js no es solo para fechas relativas, te permite hacer muchas más operaciones sobre fechas, como saber si una fecha es mayor o menor a otra o si esta entre dos fechas y muchas cosas más (te recomiendo leer la documentación).

o por la opción de usar polyfill para asegurar la compatibilidad en todos los navegadores??

Moment.js no depende de que el navegador posea Intl por lo que funciona en todos los navegadores sin polyfill, si solo vas a formatear fechas y no vas a usar el resto de funciones de i18n de Format.js entonces moment puede ser mejor opción.

Si yo quiero puedo usar solo FormatJS para mis proyectos, o dependiendo de la circunstancia uso momentJS??

Claro, al final del día podés hacer lo que quieras y lo que más se acomode a tu proyecto y tu forma de trabajar.

Nestor Beltran

student•

¿Al final ya no usamos para nada moment.js ? , saludos 😃

Reinaldo Mendoza

student•

Pero esta genial para manejo de fechas para tus proyectos

Carlos Raez

student•

Hola no entiendo si cuando pongo el require en la condicion
if (!window.Intl) {
window.Intl = require(‘intl’);
}

asi me va ok

Pero si añado

require('Intl / locale-datos / jsonp / en-US.js ');
require('Intl / locale-datos / jsonp / en-US.js ');

debajo de window ya me deja de funcionar.

Gracias!!!

David Santiago González Ramos

student•

Alguien sabe por qué desde un Ipad no funciona FormatJs aún desps de incluir el codigo que es para safari, nisiquiera funciona en el chrome del ipad.
Por alguna razón es esta línea la que bloquea toodo:

<small class="right time">${rf.format(picture.createdAt)}</small>

Victor Gamez

student•

Espero que te dieras cuenta de que no esta separado la eticata “small” del atributo “class” jaja y por eso te da error

Ludwring Liccien

student•

Saludos

Gracias por su ayuda de antemano

Me arroja este error luego de agregar async/await y los paquetes

"babel-plugin-syntax-async-functions": "^6.8.0",
"babel-plugin-transform-regenerator": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",

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

at RelativeFormat._format (http://localhost:3000/js/app.js:10453:15)

at RelativeFormat.format (http://localhost:3000/js/app.js:10311:31)

at render (http://localhost:3000/js/app.js:21179:160)

at pictueCard (http://localhost:3000/js/app.js:21190:7)

at http://localhost:3000/js/app.js:21116:10

at Array.map (native)

at module.exports (http://localhost:3000/js/app.js:21115:46)

at http://localhost:3000/js/app.js:21031:27

at http://localhost:3000/js/app.js:19207:52

at nextEnter (http://localhost:3000/js/app.js:19039:7)

Sergio Daniel Xalambrí

student•

El error dice que al tratar de usar Format.js para mostrar una fecha relativa (hace X tiempo) la fecha estaba en un rango inválido, probablemente esta mal formateado el string o número que uses como fecha, revisa ese dato, una recomendación es que trates hacer new Date(tuFecha); y así ver si se puede generar un objeto Date nativo de JS, si funciona proba usar este objeto para generar la fecha relativa.

BTW, el error esta en la función pictureCard.

Federico

student•

Safari me devuelve el siguiente error:

TypeError: ‘undefined’ is not a function (evaluating ‘elem.getAttribute( “type” )’)

Busque un poco en google y esta relacionado con jquery (use esta lib para no escribir en VanillaJS)

Lo quise solucionar usando var $ =jQuery.noConflict(); pero me sigue apareciendo la misma respuesta.

¿A alguien le paso lo mismo?

David Toca

student•

Pareciera que no existe el elemento al que quieres aplicar una funcion, te recomiendo que uses vanillajs en vez de jquery, ya que jquery ya no es necesario precisamente gracias a las librerias que se exponen en este curso.

Miguel Angel Espeso Alvarez

student•

Hola, a mi Safari me devuelve el siguiente error que nada tiene que ver con Formatjs, si no más bien parece con una "arrow function"
Les dejo la captura, el error esta en el archivo app.js y no se como corregirlo.
Funciona en todos los navegadores que tengo instalados: Firefox, Opera, Edge, …
Si sirve de algo, recien instale Safari para probar este ejercicio, no se si deberia configurar algo…

SyntaxError: Unexpected token ‘>’

Diego Forero

Team Platzi•

Qué sistema operativo usas? y que versión de safari?, si instalaste safari es porque usas windows verdad, si es así la versión de safari para windows es vieja y no tiene soporte para muchas cosas que tiene ecmascript 6 como las arrow functions, tendrías que usar babel para transpilar tu código a ecmascript 5 y que funcione, o usar funciones anónimas.

Miguel Angel Espeso Alvarez

student•

Ok, acertaste en todos de tus apuntes.
Bien ahora, como transpilo mi codigo con babel sin estropear el proyecto…?
Quiza seria mejor esperar a concluir todo y transpirar todo el proyecto. …??
Gracias.