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

Rate this content
Bookmark

Desde hace casi 25 años, los desarrolladores de JavaScript han sufrido a manos del tiempo: el objeto Date. Hemos intentado todo tipo de soluciones, desde el uso de bibliotecas populares como Moment.js hasta el manejo de fechas y horas en el backend.

Ahora es el momento de mostrarle al "tiempo" quién manda. Con la API Temporal estable en la Etapa 3 y el polyfill listo para su uso en producción, permíteme mostrarte cómo aprovechar el poder de esta maravillosa API para construir aplicaciones JavaScript potentes que manejen fechas y horas como siempre quisimos. También discutiremos las características ortogonales que se están trabajando en la API JavaScript Intl y descubriremos cómo se complementan entre sí y se unen para formar un conjunto completo de APIs que nos permiten construir componentes de fecha y hora de última generación en nuestras aplicaciones.

Ujjwal Sharma
Ujjwal Sharma
25 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Temporal es una propuesta en JavaScript que ofrece una API ergonómica para construir aplicaciones JavaScript futuristas. Ahora está en la etapa 3 y los implementadores comenzarán a implementarla en diferentes polyfills y navegadores. Temporal incluye clases para trabajar con fechas, horas, zonas horarias, calendarios y duraciones. La charla cubre la construcción de una calculadora de facturas utilizando Temporal, el cálculo de duraciones entre fechas y horas, la creación y manipulación de duraciones, la comprensión de la relatividad y el redondeo del tiempo, y la reescritura de métodos utilizando Temporal. El orador expresa su gratitud a varios colaboradores y proporciona un sandbox para la exploración.

Available in English

1. Introducción a Temporal

Short description:

Hola y bienvenidos a todos. Hoy vamos a hablar sobre la construcción de aplicaciones JavaScript futuristas en Tempo. La propuesta Temporal en JavaScript trae una API ergonómica con un enfoque especial en casos de uso comunes y complejos, incluido el soporte de calendario local. Temporal está ahora en la etapa 3.

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.

2. Explorando Temporal

Short description:

Temporal ahora está en la etapa 3. Los implementadores comenzarán a implementar Temporal en diferentes polyfills y navegadores. Los desarrolladores de JavaScript pueden comenzar a usar Temporal en sus aplicaciones, incluyendo producción. Temporal incluye clases como instant, plain date time, plain time, plain date y zone date. También abarca zonas horarias, calendarios y duraciones. Instant representa puntos absolutos en el tiempo, mientras que los tipos plain tratan con la hora del reloj mundial y las fechas del calendario. Zone date time combina un instant y una zona horaria.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
What can we learn from the last 10 years for the next 5 years? Is there a future for Webpack? What do we need to do now?
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
JavaScript-based full-text search with Orama everywhere
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
Michele Riva
Michele Riva
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Back to the basics
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
Guillermo Gutierrez Almazor
Guillermo Gutierrez Almazor
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.