Antecedentes: Enfrentando el caos del tipo Date
“Quiero cambiar UTC a JST”. “No sé qué hora de qué país muestra el registro del servidor”.
Probablemente, todo ingeniero se ha encontrado atrapado en el atolladero de las “fechas y zonas horarias” al menos una vez. El objeto Date de JavaScript, en particular, tiene comportamientos que distan mucho de ser intuitivos, lo que lo convierte en un némesis de larga data para los desarrolladores.
Convencionalmente, ha sido común resolver esto introduciendo librerías externas como Moment.js, date-fns o Day.js. Sin embargo, mientras desarrollaba DevToolKits, me impuse una restricción. Me pregunté: “¿Realmente necesito que los usuarios descarguen decenas de kilobytes de librerías solo para una única conversión de zona horaria?”
“Debería poder crear un convertidor de zona horaria súper ligero usando solo las funciones estándar de los navegadores modernos”. A partir de este “desafío” personal, comenzó el desarrollo de nuestro Convertidor de zona horaria.
Ingenio técnico: llevando las API estándar al límite
Nos centramos en la Intl (API de internacionalización) que viene de serie en los navegadores.
1. “Desmontaje preciso” con Intl.DateTimeFormat
Mostrar la fecha y hora de una zona horaria específica en formato ISO 8601 es sorprendentemente tedioso solo con las API estándar. Por lo tanto, adoptamos un método para descomponer la fecha y la hora en partes utilizando formatToParts y luego reconstruirlas.
const formatter = new Intl.DateTimeFormat('en-CA', {
timeZone,
hour12: false,
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
// Extraer partes como año, mes y día individualmente
const parts = formatter.formatToParts(date).reduce((acc, cur) => ({
...acc, [cur.type]: cur.value
}), {} as any);Al utilizar este enfoque de “desmontarlo una vez y luego volver a montarlo con la forma deseada”, logramos un formateo perfecto sin utilizar librerías pesadas.
2. Hackear la extracción de desfase (offset) dinámica
La parte más problemática de la conversión de zona horaria es la información de desfase, como “la hora estándar de Japón es +09:00”. Si mantienes esto tú mismo como un diccionario, no puedes responder a cambios como el horario de verano.
Por lo tanto, creamos una lógica para extraer la información de desfase más reciente de la opción timeZoneName: 'shortOffset' del navegador y luego analizarla y combinarla.
// Obtener la información de desfase del "momento actual" del navegador
const offsetName = new Intl.DateTimeFormat('en-US', {
timeZone,
timeZoneName: 'shortOffset',
}).formatToParts(date).find(p => p.type === 'timeZoneName')?.value;Esto nos dio la ventaja única de una implementación interna: “poder usar siempre los datos de zona horaria más recientes que poseen el sistema operativo y el navegador”.
La velocidad máxima aportada por “no hacer nada”
Esta herramienta está lista para usarse en el momento en que abres la página.
No hay que esperar a que se analicen scripts pesados ni hay solicitudes a una API.
Al maximizar las capacidades que ya tiene el navegador, hemos completado la herramienta ligera definitiva con la que sueñan los ingenieros: “sin librerías” y con “cero dependencias”.
Conclusión
El convertidor de zona horaria fue un desarrollo que me reafirmó el “potencial de las funciones estándar del navegador”.
“Duda de la librería, confía en el estándar”. Este orgullo de desarrollador es lo que lleva al funcionamiento ligero y fluido de esta herramienta.
Acerca el tiempo del mundo y hazlo más ligero. Experimenta esa velocidad por ti mismo.