Temporal: Modern Dates and Times in JavaScript

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
SlidesGithub
Rate this content

Ever been fooled by one of the many pitfalls of the JS Date object? Do you bundle time zone data? Then check out Temporal! Temporal is a TC39 proposal currently being implemented in JS engines, that brings better date and time handling, and time zone awareness, to JS. This talk is a tour of what you need to know about Temporal, walking through one simple, one medium, and one complicated task each solved with Temporal.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

The Temporal proposal adds modern date and time handling to JavaScript, providing a built-in library for dates and times similar to those in other programming languages.

Temporal aims to address the deficiencies of the existing Date object in JavaScript, such as unwieldy APIs and mutability issues, by providing a more robust and strongly typed system for date and time management.

Temporal provides a strongly typed and immutable approach to date and time management, with support for non-Gregorian calendars and better integration with JavaScript's internationalization facilities.

Temporal introduces several types including Instant, PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, ZonedDateTime, and Duration, each serving different purposes in date and time representation.

Temporal introduces the ZonedDateTime type, which accounts for time zones and daylight saving time changes, providing accurate representation of exact moments in time with time zone rules.

The Instant type represents an exact time point on the timeline with nanosecond precision, without any calendar or time zone information.

Temporal objects are immutable to prevent unwanted modifications by external code, enhancing reliability and predictability in date and time operations.

Yes, Temporal is designed to support non-Gregorian calendars, allowing developers to accurately handle dates in various cultural and regional contexts.

Temporal provides arithmetic methods such as add, subtract, since, and until, allowing precise duration calculations and adjustments across different types of date and time representations.

Developers can explore the Temporal API through its documentation, and once it graduates, it will be available on MDN alongside other JavaScript built-ins.

 Philip Chimento
Philip Chimento
22 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

1. Introduction to Temporal Proposal

Short description:

I'll speak today about the temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time.

Hi, my name is Philip Chimento. I work as a JavaScript engine developer at Igalia. I'll speak today about the temporal proposal, which adds modern date and time handling to JavaScript. I'm part of a group working on this proposal, and my participation is part of a partnership between Igalia and Bloomberg.

In this presentation, I'll give you a tour through the API and show you what you can do with temporal by means of walking you through an easy, medium, and a complicated programming task. So, if you are asking what is temporal, it's an API that's been proposed to become part of JavaScript. It'll be available in browsers soon. And it'll add a built-in library for dates and times, like many other programming languages already have.

So, when I say it's built in, I mean it's part of your browser or of your JavaScript engine. That's important because many developers include a dependency on Moment or some similar library in their app to achieve the same thing that you could with temporal. But depending on how much locale data you include, that could add a payload of anywhere from a dozen to 200 kilobytes to your app. And with built-in, you avoid that. Temporal is strongly typed. That means that for different kinds of data, such as a calendar date with or without an associated time, there are different types to represent them, instead of one type fits all.

2. Exploring Temporal Types

Short description:

Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global date object and introduces types like instant and plain types for accurate representation of time and dates across time zones.

Temporal objects are immutable, and that means that you don't have to worry about code that you don't own modifying your objects without your knowledge. And lastly, it's designed to work together with JavaScript's internationalization facilities. And it provides things that a lot of other libraries don't, such as non-Gregorian calendars.

So, a fair question for any addition to the JavaScript language is, do we really need this? Like, we already have the global date object. It's not perfect, but it's done okay for all these years. And I'm going to disagree with what I just said. We do actually have a good list of Date's deficiencies. This here is a list of problems with dates that were identified way back at the beginning that Temporal aims to solve.

I won't go into all of these. Some of them, such as the unwieldy APIs, could be fixed, but others like mutability can't be fixed without breaking the web, because there's so much code out there that already relies on the existing behavior. The original JavaScript Date was based on a Date class from Java, which Java deprecated in 1997 and replaced by something better. And a quarter century later, we're now doing the same thing in JavaScript.

So, I mentioned strong typing. For the next few slides, I'll give you a tour through these types that Temporal introduces. The first type you should know about is instant. It represents what we call an exact time, an instantaneous point on the timeline with nanosecond resolution. There's no calendar, so no months, weeks, years, or days. No time zone, so no daylight saving adjustments. Just purely an ever-increasing number.

Next, we have a family of types called the plain types. These represent a date on your wall calendar and a time on your wall clock, which we call wall time for short. These represent your local date and time independent of time zone, and so there are no daylight saving adjustments. But unlike instant, they're not exact moments in time. A wall time like November 18th, 2024 at 2.30 occurs at several different exact times around the world. So, this is just purely the numbers that you see on your wall. So, why do we have this family of plain types or wall types with progressively less information? This is so that you can correctly represent the information that you have. For example, with the old Date, if you wanted to represent a date without a time, you might use midnight in the user's local time zone. But there are actually days in certain time zones where midnight is skipped due to daylight saving time.

3. Temporal Types and Relationships

Short description:

With the old date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like plain date, plain time, plain year month, plain month day, and zone date time to accurately represent different scenarios. Additionally, there is a type called duration for arithmetic operations and unit conversion. The relationships between these types are illustrated in a diagram. Now, let's move on to programming tasks.

For example, with the old Date, if you wanted to represent a date without a time, you might use midnight in the user's local time zone. But there are actually days in certain time zones where midnight is skipped due to daylight saving time. That can cause hard-to-track down bugs when you try to put midnight for one of those days. For example, midnight on November 4th, 2018 didn't exist in Brazil. So, November 4th, 2018 is a different piece of data than November 4th, 2018 at 12 a.m.

So, here are the types that we have that don't carry all of the information. PlainDate is a day without a specific clock time, which is a very common use case. Plain time is a clock time not on any specific day. PlainYearMonth is a month without a specific day. So, you could think of using that to refer to an event that happens occasionally, like I have here the November 2024 board meeting. It also corresponds to HTML input type month. And PlainMonthDay is a calendar date but without a specific year. So, you could think of that as referring to a birthday or anniversary or something. Like I say, my birthday is December 15th.

Completing the family of types is another exact time type called ZonedDateTime. Just like instant, this type represents an exact moment in time but is also coupled to a location with time zone rules because it includes a time zone. The time zone means that this type does account for daylight saving time changes and other changes in the time zone. And it also has a calendar, which means that unlike instant, it has a year, month, and day. So, it's an exact time, but it can conveniently give you a while time as well. We say that zone date time represents a calendar event that happened or will happen at a place on Earth.

Then there's one more type that's part of temporal and doesn't represent a date or a time. Duration, we use it in arithmetic with the other types and it has some methods of its own for rounding and converting between units. So, here's the relationships between all the types. This diagram is taken from the temporal documentation. You can see there are the two types on the left that know the exact time, instant and ZonedDateTime. And there are the other types on the right that know the wall time. ZonedDateTime spans both categories because it knows both the exact time and the wall time. Now that I've introduced you to the cast of characters in temporal, it's time to show how to accomplish a programming task.

4. Accomplishing a Programming Task with Temporal

Short description:

Now that I've introduced you to the cast of characters in temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. We use the functions in the now namespace to get the current time as an instance and then retrieve the number of milliseconds since the Unix epoch from the instant.

Now that I've introduced you to the cast of characters in temporal, it's time to show how to accomplish a programming task. I've personally always learned better by doing. So, I hope this will show you what you can do with the API. I've picked three tasks to walk through, an easy one, a medium one, and a complicated one. First, the easy one.

The easy task is to get the current time as a time stamp in milliseconds. This is the number one top voted question for the old JavaScript Date object on Stack Overflow. So, naturally we'll want to be able to do the same thing in temporal. First, we consider what type we have to use. A time stamp represents an exact time without regard to time zones. And so, we think back to the types that I mentioned. The type that corresponds to that exact time, no time zone, is instant.

The next thing, maybe it's kind of a meta thing to consider, is do we really want a timestamp in milliseconds, or will the instant object itself work just as well? I think going forward, as temporal gets wider adoption, I'd expect that numerical time stamps are going to be mainly necessary for interoperation with non JavaScript systems, not so much for JavaScript applications where we'll just use instant. But for the sake of this example, let's say that we do actually need a numerical timestamp. So, we know what type we need. Next, we need to know how to fill it with the current time.

We do this with the functions in the Now namespace. Any of these functions will give you the current date or time or time zone in the form of an instance of one of the temporal types. The ISO in the name means that the date is in the standard ISO calendar, and I'll talk more about calendars and what that means later. But since we need the current time as an Instant, we'll use the top one from this list, Temporal.Now.instant. Next, we need to figure out how to get a number of milliseconds since the Unix epoch from the instant.

So, this is a good time to talk about how do you get date and time info from your instances of temporal types. All the types have read-only properties that we can use to get this sort of information. So, for example, year is only on types that have calendars and also not on PlainMonthDay. Offset only exists on ZonedDateTime, and the epochNanoseconds and similar properties are only on the exact time types in ZonedDateTime. So, in our case, we need the epochMilliseconds property because that's the number of milliseconds since the Unix epoch of 1970, January 1st, midnight. So, we put all the information on the previous slides together into this one-liner here. We get the result of Temporal.Now.instant and examine its epochMilliseconds property to obtain a Unix timestamp in milliseconds.

And here's a possible output, depending on when you call the method.

5. Calculating the Date One Month from Today

Short description:

So, we put all the information on the previous slides together into this one-liner here. We get the result of Temporal.Now.instant and examine its epoch milliseconds property to obtain a Unix timestamp in milliseconds. The medium task is to determine the date one month from today. To add one month to a date, we use the add method and pass a duration of one month. The date variable is obtained using the Now.plainDateISO method, which is based on the ISO calendar. The ISO calendar is suitable for computation and has no regional or language dependence. Here's an example of how the date calculation can go wrong when using the old date. Adding an ISO calendar month to a date and printing it in another calendar is insufficient. The user's preferred calendar should be used when working with dates they see. To get the date one month from today, define the desired calendar, get today's date in that calendar, add one month, and format it for the user.

So, that was the easy task. Now for the medium task. The question we have to answer for the medium task is, what is the date one month from today? We already saw in the previous task how to figure out what the date is today. You just use a different function from the Now namespace. So, let's skip that for the moment, although I'll talk more about how it interacts with calendars in a moment.

How do we add one month to a date? This is a good time to take a look at how to do arithmetic with dates and times in temporal. I mentioned Duration a few slides ago, and I mentioned arithmetic methods. These are the arithmetic methods. We have add and subtract for adding or subtracting a duration from another type. And we also have since and until that determine the elapsed time as a duration between two objects of the same type. So, in our case, we use the add method. We want to take a date and add a duration of one month. We pass it a property bag, which automatically gets converted to a duration, so that we don't have to call the Duration constructor here in this line of code.

This date variable, where does that come from? We already need to know we need to use one of the Now methods, specifically Now.plainDateISO. And here's where I said the ISO thing was going to come back. So, a little bit about calendars. The ISO calendar can be thought of as the machine calendar. The way it works is standardized. It has no regional or language dependence. It's suitable for computation. The Gregorian calendar is a human calendar that's used in a large part of the world with minor variations, but it's what the ISO calendar is based on. They're similar enough that you can mentally switch between the two without having to do mental calculations. However, a large part of the world uses the Gregorian calendar, but that doesn't mean that the whole world uses it. Some regions don't, and in some regions, people use the Gregorian calendar for business purposes and another calendar for religious purposes. So, already without temporal, you can print an old JavaScript date object in a non-Gregorian calendar if the user wants it. So, that's good enough for some applications, but it's not good for answering this question, because how long one month is depends on which month you're talking about in which calendar. I can illustrate that.

Here's an example of how it could go wrong using the old date. Let's say today's date in the Gregorian calendar is October 9th. One month later is November 9th. In the Hebrew calendar, these two dates are not one month apart this year. They're one month and one day apart because the months are different lengths than in the Gregorian calendar. So, it's not enough just to add an ISO calendar month and print the dates in another calendar. You have to actually consider the calendar when performing the addition.

The takeaway here is when you're working with dates that the user will see, use the user's preferred calendar, not the machine ISO calendar. So, if we put that all together, the way to get the date one month from today is first of all, you have to define exactly what month you mean by choosing the calendar. You can get the calendar from the user's preferences in your app, for example, or from their locale using the resolvedOptions method of Intl.DateTimeFormat. Although that's a good approximation, but it doesn't always correspond to what the user actually wants. And then you can get today's date in that calendar using Now.plainDateISO, put the calendar in it using the withCalendar method. Then you can add one month to it using the add method, and then you can format it for the user with the toLocaleString method.

6. Calculating Dates and Conference Sessions

Short description:

The complicated task involves determining the session times for the conference, accounting for time zones and differences in calendars. The strongly typed approach in Temporal simplifies this process by allowing for precise data conversions and calculations. The conference takes place on July 23rd and 30th in 2025, with three sessions each day.

For the complicated task, we need to answer the question using the information on this conference website. What times do these sessions happen for me? Which sessions can I attend when I'm not asleep? Funny thing, I would have loved to use the JS Nation US website for this, but it conveniently already puts the sessions in your browser's local time zone. So, well done on that. I had to pick a different conference website that didn't do that. But let's pretend these are JS Nation US sessions. This question turns out to be surprisingly hard to answer if we don't use a computer because it requires a lot of mental gymnastics with time zones and subtracting or adding hours. The strongly typed approach that we have in Temporal is perfect for solving this problem, because you can determine the type based on what data you have, and then you can determine what type to convert it to based on what data you need. Here are the facts that we know. We know from the website the two calendar dates of the conference, July 23rd and 30th. I got the screenshot from a past conference, but let's say for this example, the dates are in 2025. Then there are three sessions on each conference day.

7. Time Zone Conversion and Session Calculation

Short description:

Most people rely on search engines to convert time zones, but Temporal's strongly typed approach solves this problem by allowing precise data conversions. The conference takes place on July 23rd and 30th, 2025, with three sessions each day. The start times are in different time zones, and I know my own time zone and available hours. Using a pseudocode expression, we can determine the session times and check if I'm awake for each session. Time zone names in Temporal use official identifiers from the IANA time zone database.

So, most people, myself included, if we want to know what time 11 o'clock AEST is in my time zone, I'll just put it into a search engine and hope that the search engine correctly guesses what I want. But the strongly typed approach that we have in Temporal is perfect for solving this problem, because you can determine the type based on what data you have, and then you can determine what type to convert it to based on what data you need.

So, here are the facts that we know. We know from the website the two calendar dates of the conference, July 23rd and 30th. I got the screenshot from a past conference, but let's say for this example, the dates are in 2025. Then there are three sessions on each conference day. We know the local start times of each of the three sessions and what time zones those local start times are given in. So, it's 11 a.m. AEST, noon BST, and 1 p.m. EDT. Then I also know my time zone, and I know the hours in my local time zone during which I'm willing to be online watching a conference.

Here's a pseudocode expression of what we need to do. For each date and each session, we know the wall time and the time zone, which allows us to figure out the exact time that the session starts and ends. Then we need to go from that exact time back to wall time in my local time zone to check whether I'm awake or not. If I'm awake, then we print out that session. Here's the first part of the code where we set things up. We have the calendar dates, the session time zones, and the start hours. We have the length of the sessions, and we have my time zone. So, my time zone we get from another now method. Session length is a duration. And the dates are plain dates. So, for this calculation, it's okay to use the ISO calendar for the dates because I'm reckoning my awake times in the ISO calendar as well. Now, there are a few things to explain here. One of them is how I determine these time zone names. I was mentioning the abbreviations like AEST and BST in the previous slide. On the website, we had the full names, Australia Eastern Standard Time, British Summer Time, and Eastern Daylight Time with North America implied in the last one. Those are human names, not machine identifiers. These strings with the slashes here on this slide, like Australia slash Brisbane, those are the official identifiers of the IANA time zone database. That's how you refer to time zones in Temporal. If you don't know the identifier for a particular time zone, you can usually find it out on Wikipedia or you consult the database.

8. Creating Temporal Objects and Time Zone Conversion

Short description:

The identifiers in Temporal are always precise, unlike human abbreviations which can be ambiguous. To create a Temporal object, it is recommended to use the factory methods named from, as they are high-level and accept various data types. However, if you have the exact data in the right format, you can use the constructor. Comparisons between Temporal objects can be done using the compare static method, and the equals method is used to check for equality. The code for the actual calculation involves converting the conference session's time to the user's time zone and adding the session length.

Sometimes, the human abbreviations are ambiguous. But the identifiers are always precise. So, the next question is, why are we using from to create these objects? This is a good time to talk about how to create a Temporal object. You might expect you could also use a constructor to create an instance of a Temporal type. The constructors are intended for low-level use where you have all the data in exactly the right format, like in these examples. Then, on the other hand, there are these factory methods named from. They're high-level. They accept many more kinds of data and convert it.

In particular, they're often more readable. Like a property bag with year 2019, month 6, that's I find that more readable than just a string of numbers. So, in most cases, I'd recommend using from to create a Temporal object. But if you have the exact data in the exact right format, you can use the constructor. The other piece of data I mentioned we know is what times I'm willing to be online for a conference. I want to write a little function that takes a wall clock time and returns true if the time is within my online hours.

So, for that, we have to do comparisons. Each type has a compare static method that we use for this. It's a static method, so that you don't need an instance. You can use it as an argument to the sort method of arrays. If instead, you just want the common case of checking whether two objects are equal, use the equals method. So, back to writing code. Here's the function that tells you whether I can be online. We're using PlainTime.compare to implement it. Here I am taking advantage of the fact that my online hours don't cross midnight. We'd have to be slightly more complicated to support the case where they did. But this is enough for this example. Now, this code is how the actual calculation works. I previously outlined it in pseudocode. We loop through each conference date and the info for each session, and we convert it to the exact time named session start as a zone date time. Then we use the with time zone method to get a new zone date time object for the start of the session in my time zone instead of the conference session's time zone. Then we add the session length using the add method that we're familiar with to get the end of the session in my time zone.

9. Temporal Conversion and Modifying Objects

Short description:

To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. The code example shows how to format the answer with specific time zone and locale settings. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

These we pass to our comparison function, and if they're during my online times, we print out the start and the end of the session using formatRange. If you're watching a recording of this talk, feel free to pause it to examine the code in more detail if you want.

So, conversion. The toZonedDateTime method that we saw is an example of one of the methods for conversion between types. To convert from one type to another, you either need to add information or drop information. If you drop information like the year when you go from PlainDate to PlainMonthDay, the method doesn't take any argument. If you need to add information like the clock time, the method will take the required information as an argument. In our case, we converted from PlainDate to ZonedDateTime, so we had to add both a time zone and a time, which the toZonedDateTime method takes in a property bag.

The other new method you saw was withTimeZone, so this is a good time to get into how to modify a temporal object. Technically, you can't modify them. They're immutable, like we talked about at the beginning of the presentation, but you can get a new object of the same type with one or more components replaced, and this is what the with method is for. That takes a property bag with one or more components to replace and returns a new object. And then we have separate methods for withCalendar, that you saw already earlier during the medium task, and withTimeZone, which you saw in this task, because those two can't be provided at the same time as any other properties because it would be ambiguous which property you have to replace first.

So, take that code, put it all together, run it, and here's the nicely formatted answer. This is the answer in my time zone with my locale's formatting with date style full and time style short, and your answer will likely be different if you live in a different time zone or have a different locale. So, this is a seemingly simple question answered in more lines of code than you might expect, but seriously, I wouldn't have even wanted to try to write this code with the old Date object. It would have been possible by carefully making sure the dates were all in UTC and converting accordingly by manually adding or subtracting the right number of hours, but it would be really susceptible to bugs. And with this one, I'm pretty confident I got the right answer. So, I hope you found this a useful tour of Temporal, and if you have the old Date object in your code base, I hope you're excited to replace it with Temporal. You can check out the documentation at this link here, and at some point the documentation will graduate and you'll be able to find it on MDN instead, along with the rest of JavaScript's built-ins. Thanks for your attention.

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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

Workshops on related topic

Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
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
Workshop
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
Top Content
Workshop
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.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
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
Build Peer-to-Peer Applications with Pear Runtime
JSNation 2024JSNation 2024
152 min
Build Peer-to-Peer Applications with Pear Runtime
WorkshopFree
David Mark Clements
David Mark Clements
Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) that work entirely peer-to-peer from anywhere in the world. By the end of this workshop you should know how to build a new type of highly scalable application with entirely reduced infrastructural costs (~0) along with suitable architectures and best practices for peer-to-peer applications. From the creator of Pear Runtime and the company that brings us keet.io. Table of content:- Introducing Pear- Initial Q & A- Getting Setup- Creating a Pear Desktop Application- Sharing a Pear Application- Running a Pear Application- Creating a Pear Terminal Application- Releasing a Pear Application- Architectural Discussions- Wrap-up Q & A