{"id":35929,"date":"2022-05-19T12:00:12","date_gmt":"2022-05-19T10:00:12","guid":{"rendered":"https:\/\/www.inovex.de\/?p=35929"},"modified":"2022-11-17T12:59:45","modified_gmt":"2022-11-17T11:59:45","slug":"state-of-the-web-2022-temporal-api","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/","title":{"rendered":"State of the Web 2022: Temporal API"},"content":{"rendered":"<p>As developers, we often have to use and display different dates on our websites. Therefore, we often tend to use either the JavaScript internal <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\" target=\"_blank\" rel=\"noopener\">Date<\/a> specification API or an open-source abstraction library like <a href=\"https:\/\/momentjs.com\/\" target=\"_blank\" rel=\"noopener\">Moment.js<\/a> <em>(please do not use this library anymore since it is deprecated by the contributors)<\/em> or more modern libraries like <a href=\"https:\/\/day.js.org\/\" target=\"_blank\" rel=\"noopener\">Day.js<\/a> and <a href=\"https:\/\/date-fns.org\/\" target=\"_blank\" rel=\"noopener\">date-fns<\/a>.<\/p>\n<p>While those abstractions have a much better developer experience as you can handle dates in immutable ways and may provide you with more functions, for example, abstractions to calculate with dates, they need to be known and installed first, affecting the overall bundle size.<!--more--><\/p>\n<h2>The temporal API<\/h2>\n<p>The <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/index.html\" target=\"_blank\" rel=\"noopener\">Temporal API<\/a> is a proposal that aims to solve the current problem of working with dates and likely will be an integrated browser alternative to the <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\" target=\"_blank\" rel=\"noopener\">Date API<\/a> in the JavaScript ecosystem.<\/p>\n<p>There are several reasons to introduce a new API for handling dates instead of fixing the already existing Date API. Several issues with the current Date API are not fixable without introducing breaking changes but as the web evolves, we also want to ensure that old websites still work without having to change or upgrade code. Therefore, the <a href=\"https:\/\/tc39.es\/\" target=\"_blank\" rel=\"noopener\">TC39<\/a> is actively working on this new Temporal standard.<\/p>\n<p>As mentioned by the official proposal and documentation site, the Temporal specification tries to solve the following problems:<\/p>\n<ul>\n<li>Providing easy-to-use APIs for date and time computations<\/li>\n<li>First-class support for all time zones, including DST-safe arithmetic<\/li>\n<li>Dealing only with objects representing fixed dates and times<\/li>\n<li>Parsing a strictly specified string format<\/li>\n<li>Supporting non-Gregorian calendars<\/li>\n<\/ul>\n<p>In this post, I will investigate the Temporal API and will show how to use the API to solve some common <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/search?q=%5Bjavascript%5D+date\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-542292962\">StackOverflow questions<\/span><\/a> users mentioned with the current <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"3\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id--188809787\">Date API<\/span><\/a>. Thereby, I want to explore the API surface and see what kind of benefits and downsides the new API provides.<\/p>\n<p>First, I will introduce a problem and show how you can solve the problem using the Date API (which is introduced by <code>\/\/ \ud83d\udc74 Date API<\/code> comment) in the second code part (which is introduced by <code>\/\/ \ud83d\udd25 Temporal<\/code> comment) I will show you a Temporal alternative.<\/p>\n<p>You can either use the following <a href=\"https:\/\/codesandbox.io\/s\/cool-fog-m0p6r4\" target=\"_blank\" rel=\"noopener\">CodeSandbox<\/a> and code along or set up your own <a href=\"https:\/\/parceljs.org\/getting-started\/webapp\/\" target=\"_blank\" rel=\"noopener\">Parcel<\/a> project and install the <a href=\"https:\/\/www.npmjs.com\/package\/@js-temporal\/polyfill\" target=\"_blank\" rel=\"noopener\">Temporal Polyfill<\/a>. To convert Date objects to Temporal objects you have to introduce<\/p>\n<pre class=\"lang:js decode:true\">import { toTemporalInstant } from \"@js-temporal\/polyfill\";\r\nDate.prototype.toTemporalInstant = toTemporalInstant;<\/pre>\n<p>The final code is available <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/codesandbox.io\/s\/termporal-blog-inovex-ocsoz?file=\/src\/index.js\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-1578892979\">here<\/span><\/a>.<\/p>\n<h3><a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/1090815\/how-to-clone-a-date-object\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"0\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-619327993\">Problem 1:<\/span><\/a><span class=\"notion-enable-hover\" data-token-index=\"1\" data-reactroot=\"\"> Date object is mutable (not fixable)<\/span><\/h3>\n<p>The non-immutability of the Date API is a frustrating and confusing topic for a lot of developers as can be seen in several open <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/1090815\/how-to-clone-a-date-object\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-619327993\">StackOverflow questions<\/span><\/a>. The following example shows that whenever you want to create a new date object, you need to create a new instance <span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"3\" data-reactroot=\"\">new Date()<\/span>. On the other hand, with the Temporal API you get a new Temporal object each time you calculate, e.g.,\u00a0<span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"5\" data-reactroot=\"\">add<\/span> or <span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"7\" data-reactroot=\"\">remove<\/span> days to a date. The non-immutability of the date object in JavaScript can explicitly bite you in longer functions where you forget to clone or make a new instance of a date instance.<\/p>\n<pre class=\"lang:js decode:true\" title=\"Comparison handling mutability Date vs Temporal API\">\/\/ \ud83d\udc74 Date API\r\nconst legacyNowDate = new Date(Date.now());\r\nconst legacyDateTomorrow = new Date();\r\nlegacyDateTomorrow.setDate(legacyNowDate.getDate() + 1);\r\nconsole.log(legacyDateTomorrow); \/\/ Thu Apr 07 2022 17:27:12 GMT+0200 (Mitteleurop\u00e4ische Sommerzeit)\r\n\r\n\/\/ We can use the toTemporalInstant method to transform a \r\n\/\/ Date object into a Temporal instance.\r\n\/\/ \ud83d\udd25 Temporal\r\nconst nowTemporal = legacyNowDate\r\n  .toTemporalInstant()\r\n  .toZonedDateTimeISO(Temporal.Now.timeZone());\r\nconst temporalTomorrow = nowTemporal.add({ days: 1 });\r\nconsole.log(temporalTomorrow.toString()); \/\/ 2022-04-07T17:27:12.615+02:00[Europe\/Zurich]<\/pre>\n<p>As you can see, we can even use the <span class=\"notion-enable-hover\" data-token-index=\"1\" data-reactroot=\"\">toTemporalInstant<\/span> method to convert a legacy date into a Temporal date. There are <span class=\"notion-enable-hover\" data-token-index=\"3\" data-reactroot=\"\">two<\/span> core advantages of using the Temporal API. First, you get a new object when using calculations and you also do not add an arbitrary value <span class=\"lang:default decode:true crayon-inline \">legacyNowDate.getDate() + 1<\/span>\u00a0to the date. You explicitly define <span class=\"lang:js decode:true crayon-inline \">nowTemporal.add({ days: 1 }<\/span>\u00a0\u00a0that you want to add one day to the Temporal object.<\/p>\n<h3><a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/10087819\/convert-date-to-another-timezone-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"0\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-1906457012\">Problem 2:<\/span><\/a> Convert dates between time zones<\/h3>\n<p>As mentioned by the following <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/10087819\/convert-date-to-another-timezone-in-javascript\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-1906457012\">StackOverflow question<\/span><\/a>, you can convert a date into another timezone by adding libraries like date-fns or writing a custom function <span class=\"lang:default decode:true crayon-inline \">converTimeZone<\/span>\u00a0like the one below. As mentioned in the StackOverflow thread, this solution can have some side effects.<\/p>\n<pre class=\"lang:js decode:true \" title=\"Comparison TimeZone handling Date vs Temporal API\">\/\/ \ud83d\udc74 Date API\r\nconst convertTimeZone = (date, timeZone) =&gt;\u00a0 {\r\n\treturn new Date((typeof date === \"string\" ? new Date(date) : date).toLocaleString(\"en-US\", {timeZone}));\r\n}\r\nconst convertedDate = convertTimeZone(\"2012\/04\/20 10:10:30 +0000\", \"Asia\/Jakarta\") convertedDate.getHours(); \/\/ 1\r\nconsole.log(convertedDate) \/\/ Tue Apr 20 2012 17:10:30 GMT+0700 (Western Indonesia Time)\r\n\r\n\/\/ \ud83d\udd25 Temporal\r\nconst source = Temporal.ZonedDateTime.from(\r\n  \"2012-04-20T10:10:30[America\/Chicago]\"\r\n);\r\nconst target = source.withTimeZone(\"Asia\/Jakarta\");\r\nconsole.log(target.toLocaleString(\"en-US\")); \/\/\/ 4\/20\/2012, 3:10:30 PM GMT+7<\/pre>\n<p>With the Temporal API, you can use <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/zoneddatetime.html\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-1200232465\">ZoneDateTime<\/span><\/a> to work with timezone-aware dates. Multiple timezone-sensitive operations can be performed.<\/p>\n<h3><a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/31773115\/javascript-subtract-two-dates-in-milliseconds-considering-daylight-time-saving\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"0\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id-2112479436\">Problem 3:<\/span><\/a> Adding and subtracting while accounting for daylight<\/h3>\n<p>As mentioned in the following <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/7709803\/javascript-get-minutes-between-two-dates\/7709914\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id--2055350018\">StackOverflow<\/span><\/a> issue, it is difficult to work with the standard date library when accounting for daylight. The Temporal API provides some useful helper methods like <span class=\"lang:default decode:true crayon-inline \">until()<\/span>\u00a0\u00a0to calculate differences between two dates. We have already used and introduced the <span class=\"lang:default decode:true crayon-inline \">.add()<\/span>\u00a0 method for when you want to add to dates. In the example below, we use <span class=\"lang:default decode:true crayon-inline \">until(),<\/span>\u00a0a method to calculate the example flight time in minutes between two Temporal ZonedDateTimes.<\/p>\n<pre class=\"lang:js decode:true \" title=\"Comparison handling calculations with accounting for daylight Date vs Temporal API\">\/\/ \ud83d\udc74 Date API\r\nconst legacyDeparture = new Date(\"2017-05-08 12:55 GMT+01:00\");\r\nconst legacyArrival = new Date(\"2017-05-08 17:10 GMT-08:00\");\r\n\r\nconst diff = Math.abs(legacyDeparture - legacyArrival);\r\nconst minutes = Math.floor(diff \/ 1000 \/ 60);\r\nconsole.log(minutes); \/\/ 795\r\n\r\n\/\/ \ud83d\udd25 Temporal\r\nconst departure = Temporal.ZonedDateTime.from(\r\n  \"2017-05-08T12:55[Europe\/Berlin]\"\r\n); \/\/ Berlin\r\nconst arrival = Temporal.ZonedDateTime.from(\r\n  \"2017-05-08T17:10[America\/Los_Angeles]\"\r\n); \/\/ Los Angelese\r\n\r\nconst flightTime = departure.until(arrival);\r\nconsole.log(flightTime.total({ unit: \"minutes\" })); \/\/ 795<\/pre>\n<p>You could also specify different units, e.g., days or seconds. As you can see in the Date API example you had to make use of the <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Math\" target=\"_blank\" rel=\"noopener\">Math<\/a> library and convert the date object to a minutes unit yourself.<\/p>\n<p>The <strong>neat<\/strong> thing about using Temporal API is that you could easily get in other formats like the total time in hours declaratively by <code>console.log(flightTime.total({ unit: \"hours\" }));<\/code> without having to calculate with arbitrary values.<\/p>\n<h3><a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/4413590\/javascript-get-array-of-dates-between-2-dates\" target=\"_blank\" rel=\"noopener noreferrer\" data-token-index=\"0\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id--925483766\">Problem 4:<\/span><\/a><span class=\"notion-enable-hover\" data-token-index=\"1\" data-reactroot=\"\"> Getting an array of dates between two dates<\/span><\/h3>\n<p>As mentioned by the following <a class=\"notion-link-token notion-enable-hover\" href=\"https:\/\/stackoverflow.com\/questions\/4413590\/javascript-get-array-of-dates-between-2-dates\" target=\"_blank\" rel=\"noopener\" data-token-index=\"1\" data-reactroot=\"\"><span class=\"link-annotation-unknown-block-id--925483766\">StackOverflow issue<\/span><\/a>, when you want to get dates between two dates, you can create a function and iterate over the dates and add one day to each iteration. This works but is also not really self-explanatory. The Temporal API offers an easy way of comparing Dates (which also can be used for sorting).<\/p>\n<pre class=\"lang:js decode:true \" title=\"Comparison getting an array of dates between the start and end date using Date and Temporal API\">\/\/ \ud83d\udc74 Date API\r\nconst getBetweenTwoDatesDaysArray = (start, end) =&gt; {\r\n  for (\r\n    var arr = [], distance = new Date(start);\r\n    distance &lt;= end;\r\n    distance.setDate(distance.getDate() + 1)\r\n  ) {\r\n    arr.push(new Date(distance));\r\n  }\r\n  return arr;\r\n};\r\n\r\nconsole.log(\r\n  getBetweenTwoDatesDaysArray(new Date(\"2022-05-01\"), new Date(\"2022-06-03\")).length\r\n); \/\/ 34\r\n\r\n\/\/ \ud83d\udd25 Temporal\r\nconst getBetweenTwoTemporalDates = (start, end) =&gt; {\r\n  let arr = [];\r\n  let distance = start;\r\n  while (Temporal.PlainDate.compare(distance, end) &lt; 1) {\r\n    distance = distance.add({ days: 1 });\r\n    arr.push(distance);\r\n  }\r\n  return arr;\r\n};\r\n\r\nconsole.log(getBetweenTwoTemporalDates(Temporal.PlainDate.from(\"2022-05-01\"), Temporal.PlainDate.from(\"2022-06-03\")).length) \/\/ 34;<\/pre>\n<p>As you can see above, we use <span class=\"lang:default decode:true crayon-inline \">Temporal.PlainDate.compare(distance, end)<\/span>\u00a0 to compare the dates. This function returns -1 when the starting date is smaller than the ending date (0 when they are the same and 1 if the end date is higher than the start date). Again, we use <span class=\"lang:default decode:true crayon-inline \">distance.add({ days: 1 })<\/span>\u00a0to declaratively add one day to the distance date on each iteration.<\/p>\n<h2>Conclusion<\/h2>\n<p>Temporal API is already a strong, useful, and robust API for working with dates, times, and timestamps, and also makes it easy to do things that were hard or impossible to do with the Date API, like converting dates between time zones, adding and subtracting while accounting for daylight saving time, working with date-only or time-only data, and even handling dates in non-Gregorian calendars.<\/p>\n<p>The API surface, on the other hand, is <strong>quite big<\/strong> and, as a developer, you have to get used to it first. Modern alternative libraries like <em>date-fns<\/em> and <em>Dayjs<\/em> provide even more useful helpers and are really small.<\/p>\n<p>Furthermore, the Temporal API is not implemented in any modern browser so far, as mentioned by <a href=\"https:\/\/caniuse.com\/temporal\" target=\"_blank\" rel=\"noopener\">caniuse<\/a>, but you can use a <a href=\"https:\/\/github.com\/js-temporal\/temporal-polyfill\" target=\"_blank\" rel=\"noopener\">polyfill<\/a> if you want to work with it already.<\/p>\n<p>Looking at some of the examples above, most of the code could be simplified or written in a more declarative way, therefore I am excited about this new standardized way of handling the complexity we are having using dates. Also, the Temporal API solves a lot of confusion about mutable dates.<\/p>\n<p>You can find some more awesome examples on the official Temporal API proposal <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/cookbook.html\" target=\"_blank\" rel=\"noopener\">cookbook<\/a> and some additional content in the following blog post and link collection:<\/p>\n<ul>\n<li>Polyfill to use Temporal API in current production codebases <a href=\"https:\/\/github.com\/js-temporal\/temporal-polyfill\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/js-temporal\/temporal-polyfill<\/a><\/li>\n<li>The official proposal documentation <a href=\"https:\/\/tc39.es\/proposal-temporal\/docs\/index.html\" target=\"_blank\" rel=\"noopener\">https:\/\/tc39.es\/proposal-temporal\/docs\/index.html<\/a><\/li>\n<li>Igalia blog post with additional clarification on why Temporal API is needed <a href=\"https:\/\/blogs.igalia.com\/compilers\/2020\/06\/23\/dates-and-times-in-javascript\/\" target=\"_blank\" rel=\"noopener\">https:\/\/blogs.igalia.com\/compilers\/2020\/06\/23\/dates-and-times-in-javascript\/<\/a><\/li>\n<li>Historical background information <a href=\"https:\/\/maggiepint.com\/2017\/04\/09\/fixing-javascript-date-getting-started\/\" target=\"_blank\" rel=\"noopener\">https:\/\/maggiepint.com\/2017\/04\/09\/fixing-javascript-date-getting-started\/<\/a>l<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>As developers, we often have to use and display different dates on our websites. Therefore, we often tend to use either the JavaScript internal Date specification API or an open-source abstraction library like Moment.js (please do not use this library anymore since it is deprecated by the contributors) or more modern libraries like Day.js and [&hellip;]<\/p>\n","protected":false},"author":53,"featured_media":36475,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[339,70],"service":[420],"coauthors":[{"id":53,"display_name":"Jacob Cofman","user_nicename":"jcofman"}],"class_list":["post-35929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-state-of-the-web","tag-web","service-apps"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>State of the Web 2022: Temporal API - inovex GmbH<\/title>\n<meta name=\"description\" content=\"This comparison between the Date API and the Temporal API explores the API surface &amp; the benefits and downsides the Temporal API provides.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"State of the Web 2022: Temporal API - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"This comparison between the Date API and the Temporal API explores the API surface &amp; the benefits and downsides the Temporal API provides.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-19T10:00:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-17T11:59:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jacob Cofman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@jcofman\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jacob Cofman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Jacob Cofman\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/\"},\"author\":{\"name\":\"Jacob Cofman\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/de25acdc07388388456ed0d03c8ade4d\"},\"headline\":\"State of the Web 2022: Temporal API\",\"datePublished\":\"2022-05-19T10:00:12+00:00\",\"dateModified\":\"2022-11-17T11:59:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/\"},\"wordCount\":1189,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/state-of-the-web-2022-temporal-api.png\",\"keywords\":[\"State of the Web\",\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/\",\"name\":\"State of the Web 2022: Temporal API - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/state-of-the-web-2022-temporal-api.png\",\"datePublished\":\"2022-05-19T10:00:12+00:00\",\"dateModified\":\"2022-11-17T11:59:45+00:00\",\"description\":\"This comparison between the Date API and the Temporal API explores the API surface & the benefits and downsides the Temporal API provides.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/state-of-the-web-2022-temporal-api.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/state-of-the-web-2022-temporal-api.png\",\"width\":1920,\"height\":1080,\"caption\":\"A blue globe on black background with the title temporal api\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/state-of-the-web-2022-temporal-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"State of the Web 2022: Temporal API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/de25acdc07388388456ed0d03c8ade4d\",\"name\":\"Jacob Cofman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/jcofman_LThumb-96x79.jpge956e2771ef89c1ff0e79954c0d9e8c1\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/jcofman_LThumb-96x79.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/jcofman_LThumb-96x79.jpg\",\"caption\":\"Jacob Cofman\"},\"description\":\"Mein Name ist Jacob Cofman und ich bin Frontend-Entwickler bei inovex und liebe es, spannende Ideen in innovative Produkte zu verwandeln.\",\"sameAs\":[\"https:\\\/\\\/jcofman.de\",\"https:\\\/\\\/x.com\\\/jcofman\"],\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/jcofman\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"State of the Web 2022: Temporal API - inovex GmbH","description":"This comparison between the Date API and the Temporal API explores the API surface & the benefits and downsides the Temporal API provides.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/","og_locale":"de_DE","og_type":"article","og_title":"State of the Web 2022: Temporal API - inovex GmbH","og_description":"This comparison between the Date API and the Temporal API explores the API surface & the benefits and downsides the Temporal API provides.","og_url":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2022-05-19T10:00:12+00:00","article_modified_time":"2022-11-17T11:59:45+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png","type":"image\/png"}],"author":"Jacob Cofman","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api-1024x576.png","twitter_creator":"@jcofman","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Jacob Cofman","Gesch\u00e4tzte Lesezeit":"9\u00a0Minuten","Written by":"Jacob Cofman"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/"},"author":{"name":"Jacob Cofman","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/de25acdc07388388456ed0d03c8ade4d"},"headline":"State of the Web 2022: Temporal API","datePublished":"2022-05-19T10:00:12+00:00","dateModified":"2022-11-17T11:59:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/"},"wordCount":1189,"commentCount":1,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png","keywords":["State of the Web","Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/","url":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/","name":"State of the Web 2022: Temporal API - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png","datePublished":"2022-05-19T10:00:12+00:00","dateModified":"2022-11-17T11:59:45+00:00","description":"This comparison between the Date API and the Temporal API explores the API surface & the benefits and downsides the Temporal API provides.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-web-2022-temporal-api.png","width":1920,"height":1080,"caption":"A blue globe on black background with the title temporal api"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-web-2022-temporal-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"State of the Web 2022: Temporal API"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/de25acdc07388388456ed0d03c8ade4d","name":"Jacob Cofman","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/07\/jcofman_LThumb-96x79.jpge956e2771ef89c1ff0e79954c0d9e8c1","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/07\/jcofman_LThumb-96x79.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/07\/jcofman_LThumb-96x79.jpg","caption":"Jacob Cofman"},"description":"Mein Name ist Jacob Cofman und ich bin Frontend-Entwickler bei inovex und liebe es, spannende Ideen in innovative Produkte zu verwandeln.","sameAs":["https:\/\/jcofman.de","https:\/\/x.com\/jcofman"],"url":"https:\/\/www.inovex.de\/de\/blog\/author\/jcofman\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/35929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=35929"}],"version-history":[{"count":5,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/35929\/revisions"}],"predecessor-version":[{"id":36477,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/35929\/revisions\/36477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/36475"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=35929"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=35929"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=35929"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=35929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}