Cómo superar al tiempo: Construyendo aplicaciones JavaScript futuristas utilizando Temporal

Hola y bienvenidos a todos. Soy Ujwal. Puedes encontrarme en internet en whyzacooking. Si quieres encontrarme en Twitter o GitHub, tendré un terrible qué terrible es esta charla o si quieres hablar sobre Tempo o cosas de TZ39. Pero hoy vamos a hablar sobre la construcción de aplicaciones JavaScript futuristas en Tempo. Así que empecemos. Porque soy una persona obsesionada conmigo mismo. Primero hablemos de mí. Entonces, soy un hacker de compiladores, Regalia. Para aquellos de ustedes que no lo saben, es una consultoría de software libre en España. Trabajamos en muchas cosas geniales. Trabajamos en navegadores, compiladores, estándares como los que voy a hablar hoy y muchas cosas geniales de Linux. También soy delegado de TC39, por eso les estoy hablando de estas cosas. Soy uno de los editores de Ecma 402 y el defensor de la propuesta de la que hablamos hoy y también soy uno de los co-colaboradores de O.J.S.

Solo para darles un breve resumen sobre la historia de todo este asunto temporal, de qué se trata todo esto, si alguna vez has usado el objeto de fecha en JavaScript para manejar cualquier tipo de fecha y hora, sabrás que está muy desactualizado. Tiene problemas graves. Se remonta al menos a 1985, ¡que es antes de que yo naciera, así que qué tal esa metáfora! Pero necesita muchas reparaciones, lo que significa que si estás escribiendo alguna aplicación seria de manejo de fecha y hora, probablemente estés usando algunas bibliotecas de terceros populares. Son bastante populares en estos días en el ecosistema de JavaScript. Estás usando Moment o funciones de fecha de Luxon, y, bueno, cumplen un papel realmente importante en el lenguaje de JavaScript, pero aún hay algunos problemas. Todavía hay deficiencias, si sigues el drama de JavaScript no hace mucho tiempo, Lighthouse, que es una herramienta que te da consejos de rendimiento del código JavaScript, comenzó a marcar aplicaciones que usan Moment, pidiéndoles que usen algo que use un tamaño de paquete menor. Así que eso es, por ejemplo, uno de los problemas que no se pueden resolver en el espacio del usuario, entre muchos otros que les voy a hablar. Pero debido a todos estos problemas, nos dimos cuenta de que algo debía hacerse en el propio nivel del lenguaje de programación. Así que aquí entra Temporal. Entonces Temporal es una propuesta de manejo de fecha y hora de última generación en JavaScript. No solo te lleva al presente, sino que, como verás en los próximos diapositivas, te lleva directamente al futuro. Uno de los desafíos más interesantes que tuvimos al diseñar la API de Temporal fue sin duda combinar cosas en conflicto, ¿verdad? Hay propuestas de JavaScript que ves que están más específicamente orientadas a usuarios avanzados, los conoces cuando los ves. Hay otros que están más orientados a principiantes, te facilitan la vida, pero no tanto si has estado escribiendo este lenguaje durante 10 años, y en Temporal, la belleza de la propuesta Temporal es que intenta combinar una API ergonómica con un enfoque especial en algunos de los casos de uso más comunes junto con algunas características realmente poderosas que se adaptan a algunos de los casos de uso más complejos , algunos de los casos de uso que hasta ahora no se han tenido en cuenta. Cosas como el soporte de calendario local, incluidos calendarios como el hebreo o el islámico o zonas horarias personalizadas de calendarios. Estas son características verdaderamente pasadas por alto hasta ahora. Así que Temporal, lo que acabo de mencionar, ahora está en la etapa 3, lo cual es una gran noticia.

Excepto que realmente no sabemos qué significa eso. Así que para resumir rápidamente, en aras del tiempo, significa que todos los pequeños detalles han sido discutidos. Hemos estado sentados en nuestras sillas durante mucho tiempo y nos dimos cuenta de que básicamente hemos agotado todo lo que podríamos haber hecho mientras estábamos sentados en nuestras sillas. El texto de la especificación ha sido aprobado, el comité está satisfecho con el diseño general y ahora la idea es comenzar a implementar y usar Temporal. Para implementadores como nosotros, eso significa que comenzaremos a implementar cosas en diferentes polyfills. Comenzaremos a implementar Temporal en diferentes navegadores y para ustedes, increíbles desarrolladores de JavaScript, significa que pueden comenzar a usar Temporal en sus aplicaciones, incluyendo producción. Para darles una idea rápida de la enorme API de Temporal, tienen una serie de estas clases de las que hablaremos en las próximas diapositivas. Para resumir brevemente, está instant, que existe en el espacio de tiempo exacto. Sabe la hora exacta que ha pasado desde la época. Y luego hay un montón de tipos de tiempo difusos. Así que hay plain date time, plain time, plain date. Todos ellos son subconjuntos de plain date time. Hablan de nociones más difusas de tiempo y fechas. Así que, hey, las 8 a.m. de la mañana no importa cuántos nanosegundos exactos hayan pasado, ¿verdad? Y luego está el tipo zone date, que es una especie de ubermensch de todos estos tipos. Engloba todos los diferentes casos de uso que ofrecemos hasta ahora y puede reemplazar completamente los objetos de fecha. Pero espero que se den cuenta de que necesitan algo mucho menos potente. Hay zonas horarias y calendarios, que juegan entre estos. Y luego hay duraciones, que se usan principalmente para mapas.

Para resumir rápidamente esto, porque esto va rápido, pero espero poder al menos captar su atención en el lapso de 20 minutos, instant representa puntos absolutos en el tiempo. Algo tan granular y aburrido, como se podría decir, como el número de nanosegundos que han pasado desde la Época, que en este caso es la Época de Unix, 1970. Y luego están los tipos plain, plain date time y amigos, que tratan con la hora regular del reloj mundial y las fechas del calendario. Por ejemplo, si estás construyendo un rastreador de fitness, no importa si estoy en Moscú o en Ámsterdam. Lo único que importa es que me despierto a las 8 a.m. y como muchos bagels. No salgas a correr. Los calendarios se refieren a los calendarios humanos, por lo que, en el entendimiento común, se referiría al calendario gregoriano, que es bastante popular. Puede referirse a los calendarios más oscuros, pero aún utilizados en todo el mundo, como el calendario budista o el calendario hebreo, el calendario juliano, y luego están las zonas horarias que se refieren a un desplazamiento exacto, como más una hora desde UTC o una zona horaria humana más difusa, como Europa/Ámsterdam, que puede representar diferentes puntos de tiempo dependiendo de a qué hora estés hablando y si es verano o no. Zone date time, como dije, es la combinación de un instant y una zona horaria, por lo que toma el instant aburrido y lo combina con la zona horaria para proyectar una fecha y hora a partir de él, ¿verdad? Así que si sabes en qué zona horaria estás y conoces el número exacto de nanosegundos que han pasado, entonces puedes dar cualquier información, puedes decirme qué hora del día es.

y así sucesivamente. Es lo más poderoso. Sí, y luego, por supuesto, todas las operaciones aritméticas que se realizan en este espacio se realizan en duraciones. Entonces, ¿cuál es la diferencia entre dos fechas o dos horas? Bueno, todas son duraciones. Así que suficiente hablar, ¿verdad? Vamos a ponernos manos a la obra. Vamos a hacer una calculadora de facturas, que resulta ser una aplicación no tan común de fechas y horas, pero resulta ser una especie de usuario avanzado en términos de cálculos. Y veamos qué tan simple es con Tempo. Así que el primer paso, si estuviera planteando una calculadora como esta, sería elegir un selector de fecha y hora. Así que todos los chicos geniales me han dicho que en estos días, elegirías un selector de fecha y hora basado en la estrategia de alquiler. Entonces, cualquier biblioteca que estés usando, elige algo basado en eso, ¿verdad? El punto clave es que debe devolver una cadena ISO 801. Esta es la cadena de formato de persistencia que es aceptada en toda la API de Tempo. Está estandarizada por ISO. Y siempre que devuelva este formato, deberías poder construir un tipo Tempo a partir de esto. ¿Debería devolver directamente un tipo Tempo? Probablemente. Quiero decir, estas bibliotecas están escritas en JavaScript para aplicaciones de JavaScript, ¿verdad? Entonces, dado que Tempo es el futuro de las fechas y horas en JavaScript, tiene sentido que puedan devolver tipos Tempo. Supongo que podría bifurcar todas estas bibliotecas y hacer versiones de ellas que hagan esto y hacer que se vuelvan realmente populares. O algunos de ustedes podrían hacerlo. Eso también sería divertido. Ya hay muchas opciones para elegir en NPM. Rápidamente encontré algunas. Así que hay React Types and Pickers. Si estás usando React, hay DateTimePickers si estás usando jQuery, o nada en absoluto, lo cual, quiero decir, es solo un poco menos, pero aún jQuery. Y sí, puedes usar cualquiera de estos. Podría devolver un tipo iso601, y puedes usar esta cadena para construir un objeto DateTime simple en temporal. Así que temporal es el espacio de nombres. En el ámbito global, puedes decir temporal.plainDateTime.from, que es un método constructor estático. Es un método de fábrica. Toma una cadena conveniente formato y crea un objeto DateTime simple. Una vez que tengas dos objetos DateTime simples aquí, estás creando una aplicación de facturación. Entonces, al menos necesitas dos, un punto de inicio y un punto final. Ahora que tienes dos DateTimes, puedes encontrar la diferencia entre

Cuando encuentras la diferencia entre las dos fechas y horas, puedes averiguar cuánto tiempo ha pasado. Cuando tienes un punto de inicio y un punto final, puedes encontrar la diferencia mediante métodos de diferencia. Y como hemos hablado, es aritmética. Por lo tanto, la respuesta sería una duración. Ahora, una advertencia clave de la que quiero hablar, una cosa que debes tener en cuenta aquí es que las duraciones pueden ser tanto positivas como negativas. Y la dirección es importante, especialmente cuando estás sumando varias duraciones. Si estás sumando 50 duraciones y una de ellas es accidentalmente negativa, no te darás cuenta de que la respuesta está un poco desviada y terminarás cobrando menos dinero, lo cual no quieres perder dinero, especialmente cuando se trata de dinero. Debes asegurarte de que puedas verificar el signo, el punto signo de la duración. El punto signo es un getter. Y también puedes encontrar solo el valor. Entonces, sea cual sea el signo, devolverá un resultado positivo.

Así que veamos aquí. En este ejemplo de código, tenemos dos fechas y horas de juego. Tenemos 'anterior', que es bueno, anterior. Es a medianoche, y tenemos 'posterior', que es el mismo día, pero a las cuatro en punto. Así que es posterior. Y solo para notar la direccionalidad aquí, hay dos formas de encontrar la diferencia. Hay 'posterior.since(anterior)'. Entonces aquí, 'posterior' es el receptor y 'anterior' es el parámetro, ¿verdad? Porque han pasado X horas desde 'anterior'. Y eso te daría, puedes poner lo que quieras y la salida, y te daría una duración de cuatro horas. O puedes decir 'until'. Porque es 'until', significa que es hasta 'posterior', ¿verdad? Así que el signo se invierte. Esta vez, 'anterior' es el receptor y esta vez solo dijimos minutos. Así que me daría 24 minutos, que también son cuatro horas. Si cambias los objetos, si dices 'posterior.until(anterior)', sería un resultado negativo. No queremos un resultado negativo porque no trabajamos durante cuatro horas negativas. Y luego, una vez que tienes todas estas duraciones, puedes averiguar cuánto tiempo ha pasado. Porque tienes un array de duraciones, puedes sumarlas todas. Mis amigos a los que les gusta la programación funcional, el código limpio podrían

prueba un método reducido. Soy un poco descuidado. Tiendo a escribir código que se ve así. Así que puedes simplemente tener un bucle for each o un método reducido. Una cosa que ver aquí es que creamos duraciones cero usando dos formas diferentes. Entonces, en una, simplemente construimos un nuevo objeto de duración temporal. Y en la segunda, utilizamos el método from del que hablamos la última vez. Si te fijas aquí, he utilizado un formato de resorte para la duración, pt 0s. Y eso también fue mencionado en las diapositivas anteriores. Hablemos de eso en un momento. Pero recuerda llamar a absolute si dices total.add duration.absolute, eso simplemente ignora el signo, lo cual es algo que probablemente necesitemos hacer, ¿verdad? Para hablar sobre este formato de serialización de duración del que acabo de hablar , las duraciones pueden ser una cantidad de unidades, ¿verdad? Una duración podría ser un año, dos meses, tres semanas. Y toda esta duración se puede representar en un formato de persistencia de resorte. Así que es P1Y2M. Así que si ves el patrón aquí, es P, que es constante. Significa periodo, si tienes curiosidad. Entonces, periodo, un año, dos meses, 1Y2M, 3W para tres semanas, cuatro días. Luego hay una T para tiempo, y luego cinco horas, seis minutos, siete segundos, y así sucesivamente. Una cosa a tener en cuenta aquí es que este formato puede utilizar fracciones, así que puedes decir algo, podrías decir algo como 2.5 meses. Pero ten en cuenta que probablemente sea un poco problemático porque, así que si usas el polyfill de plantilla, del que hablaré en un momento, está escrito en JavaScript. JavaScript no maneja muy bien estos números, porque es IEEE floats. Algunas de estas fracciones no pueden ser representadas realmente en JavaScript. Así que si estás utilizando fracciones, probablemente debas usar estos objetos. Pero si quieres, puedes usar el formato trim. Ahora que tienes la duración, puedes cobrar dinero por hora, dependiendo del contrato, en realidad, es posible que desees cobrar por día, por hora, por mes, cualquiera que sea el contrato, en realidad. Las matemáticas son fáciles. Las matemáticas son tan fáciles, de hecho, que es intertemporal. Para todas estas operaciones matemáticas relacionadas en las que tienes una gran duración y quieres reducirla a una sola unidad, simplemente puedes usar el método total. Así que veamos aquí. Soy un viudo que calcula el tiempo que he trabajado en una, la segunda duración. Así que si trabajo un total de un millón de segundos, en realidad solo significa que puedes ver que utilicé el método total aquí para decir que quiero todo esto en horas de unidad, y me daría 277.7. Eso es cuánto trabajo. No es mucho, pero me gusta calcularlo en segundos. Así que una vez que tienes eso, una última cosa

que quiero que recuerdes es que la relatividad es importante. Hablamos de cosas como 2.5 meses. Ahora, 2.5, ¿cuál es el significado de 0.5 meses, o incluso un mes? Realmente depende de lo que estemos hablando. Ahora mismo, un mes podría significar 31 días. En febrero, un mes podría significar 28 días. Así que, ya sabes, un ejemplo sería que podemos tener una duración de 2756 horas. Y si tomas ese total, relacionado con dos momentos diferentes, ¿verdad? En realidad es el mismo punto en el tiempo. En este caso, es el 1 de enero de 2020 a medianoche, también es el 1 de enero de 2020 a medianoche aquí. Pero en este caso, está en la zona horaria Europe/Rome, que, como sabes, es una zona horaria real que hace el cambio de horario de verano. Entonces, en este caso, el número de meses transcurridos es ligeramente menor. Porque no tuvieron el cambio de horario de verano aquí, no tuvieron el cambio de horario de verano aquí. Así que algunas de estas cosas tienen sentido, en relación a lo que estamos hablando. Un ejemplo rápido podría ser que en muchos lugares, si tomas un día de vacaciones no remunerado, te pagan una cantidad constante de dinero por cada mes, independientemente de cuántos días haya. Pero si tomas un solo día no remunerado, digamos, el dinero que te pagan menos depende del número de días que haya en ese mes. Entonces, tomar un día no remunerado en julio es técnicamente mucho más barato que tomar uno en febrero. Así que todas estas cosas, por supuesto, deben tenerse en cuenta. Es por eso que puedes usar la relatividad para proporcionar exactamente lo que estabas buscando. Y luego tenemos el redondeo. Ahora que tenemos todas estas cosas, el valor final simplemente se puede redondear hacia arriba o hacia abajo dependiendo del contrato del que estemos hablando. Pero a veces no se cobra por una sola unidad, ¿verdad? No se cobra por cada hora o cada día, sino que se cobra por un número de X, ¿verdad? Un número de días y un número de horas. Y, si lo piensas, cobrar por el día es técnicamente eso, ¿verdad? Cuando digo que cobro por día, eso significa que cobro por ocho horas. Eso no significa que esté hablando de cobrar por controles de 24 horas. Así que esto te brinda un método más poderoso llamado round. Y, a diferencia de total, puedes hacer cosas más divertidas con él. Así que digamos que tenía una cita de seis minutos con un abogado de inmigración, y el abogado de inmigración cobra por cada cinco minutos, y por supuesto, redondean hacia arriba. Entonces, si paso seis minutos con ellos, en realidad debo pagarles el doble si simplemente hablara un poco más rápido, por eso debería hablar más rápido ahora. Pero eso es todo, cosas divertidas. Hablamos mucho. Me divertí mucho, pero ahora es hora de hacer algo más práctico. Así que estoy bastante seguro de que algunos de ustedes tenían sus teléfonos, pero si escanean ese código QR, les puedo mostrar que por un poco más, encontrarán este sandbox que hice para ustedes. Y esto es lo divertido, ¿verdad? El sandbox de código es en realidad sobre una solicitud de empleo para que puedas completar cosas como la fecha de nacimiento y desde dónde trabajas y hacia dónde.

Y calcula un montón de cosas. Es solo un ejemplo. Pero lo interesante es que el método calcular edad en este caso está escrito usando la API de Moment. El método calcular tiempo para la entrevista está escrito usando la API de Luxon. Y el método calcular experiencia laboral está escrito usando la antigua fecha. Y tu tarea ahora es reescribir todos estos métodos. Hay enlaces a la documentación por todas partes. Y debes seguir los comentarios. Y debes avanzar con este sandbox y escribir el código usando Tempo. Tal vez puedas comentarlo y ver el nuevo código. Pero verás una mejora significativa. Y verás menos código. Y verás un código que tiene más sentido para ti, espero. Pero sí, me encantaría ver las soluciones que hayas propuesto para esto. Así que volvamos rápidamente a mis diapositivas. Ok. Mis diapositivas. Volvamos rápidamente a esto. Ok. Puedes escanear eso. Y si estoy allí, probablemente solo pegaré el enlace en el chat. Y rápidamente enlaces al futuro y al presente, también te enviaré enlaces a estas diapositivas. Para que puedas navegar por ellas. Aquí tienes un enlace al polyfill. Estamos usando este polyfill también en el sandbox de prueba. Es un polyfill que hemos creado que puede probar campeones. Es una especie de implementación de referencia y funciona. Debería funcionar también en producción. Así que puedes seguir eso. Hay un problema en V8 para, para Vent10 con LAN en Chromium y Chrome.

y Edge y todos tus navegadores favoritos. Y también Spiderman 3 para Firefox, que es mi navegador favorito. Y puedes seguir refrescando este núcleo de JavaScript si te gusta Safari. Y intento refrescarlos cada cinco minutos para ver si hay algún progreso.

Pero hay un repositorio para Temporal V2 para todas las nuevas ideas que estamos desarrollando para una futura extensión de esto. Y solo necesito agradecer rápidamente a un montón de personas. Quiero agradecer a los Campeones Temporales por trabajar en todas estas cosas especiales. A los mantenedores de Moments.js por iniciar la propuesta original. Y a los organizadores en PC por invitarme y facilitar todo este evento. Y a Oga por ayudarme a construir el code sandbox. Gracias a todos. Pero por último, pero no menos importante, gracias. Y eso es todo.