It’s #FrontendFriday – Temporal API

09.09.2022

Es ist #FrontendFriday und heute beschäftigen wir uns mit der experimentellen Temporal API die (hoffentlich) Standardimplementierung von Datum und Zeit in JavaScript ablösen wird.

Temporal API – kurze Einführung

Es ist ein leidiges Thema in den meisten Sprachen aber in JavaScript – kann ich aus eigener Erfahrung sagen – ist es ein sehr leidiges Thema. Es geht unter anderem auch einfach darum dass beim erstellen von Datum-Objekten in JavaScript es von der Browserimplementierung abhängt, welche Zeit nun angezeigt wird. Das Rechnen mit Datum und Zeit gestaltet sich auch schwer mit JavaScript. Deshalb gibt es auch einige Frameworks eigens für diesen Zweck. Heute geht es aber nicht um moment.js o.ä. sondern um einen Vorschlag die jetzige Implementierung von JavaScript zu ändern – Temporal API.
Die Temporal API befindet sich momentan in der 3. Stufe eines 4 Stufigen Prozesses um die API in die Standard JavaScript Implementierung aufzunehmen. Anfragen die sich in der 3. Stufe befinden werden sehr voraussichtlich nicht mehr geändert und warten nur noch darauf in der letzten Stufe implementiert zu werden.
Bedeutet für uns als Frontendentwickler – wir können selbst testen und über Polyfills die API einbinden. Siehe: Liste von Polyfills

Schnelleinstieg – wie sieht Temporal aus

Für den Anfang zeige ich euch wie in Temporal die Zeit angezeigt werden kann:

import { Temporal } from "proposal-temporal"; 

const currentTime = Temporal.now.plainDateTimeISO();
 console.log(currentTime.toString()); // Ausgabe: 
                                        2021-06-03T08:22:18.381338378

const timeStamp = Temporal.now.instant().epochSeconds;
console.log(timeStamp); // Ausgabe: 1622701338 
const christmas = Temporal.PlainDateTime.from({
  day: 24,
  month: 12,
  year: 2021,
  hour: 20,
  minute: 15,
  second: 32
});
console.log(christmas.toString()); // Ausgabe: 2021-12-24T20:15:32

Das charmante ist hier das direkt der ISO String ausgegeben wird bei „plainDateTimeISO“ und dass bei „epochSeconds“ der UNIX-Zeitstempel zurückgegeben wird. Beides wichtige Formate um Zeit anzuzeigen.

Konvertierungen und Zeitzonen

Falls ihr Temporal benutzt wollt und schon ein Projekt habt in dem ihr die Date-API verwendet könnt ihr wie folgt die jeweiligen Objekte konvertieren:

import { Temporal } from 'proposal-temporal';

const date = new Date('2020-12-24T20:15:32'); 
const temporal = new Temporal.ZonedDateTime(
  BigInt(date.getTime() * 10 ** 6), 
  'Europe/Berlin');
console.log(temporal.toString()); 
  //2020-12-24T20:15:32+01:00[Europe/Berlin] 

const temporal2 = Temporal.ZonedDateTime.from({
  year: 2020,
  month: 12,
  day: 24,
  hour: 20,
  minute: 15,
  second: 32,
  timeZone: 'Europe/Berlin'
});
const date2 = new Date(temporal2.epochMilliseconds);
 console.log(date2.toLocaleString()); // Ausgabe: 24/12/2020, 20:15:32

Ein Problem der JavaScript Date API ist es dass es nicht möglich ist ein Date-Objekt zu erzeugen dass unabhängig von einer Zeitzone ist. Die Information über die Zeitzone ist in einigen Fällen aber nicht gewünscht. Diese löst die Temporal API wie folgt:
Die Klassen der Temporal API

Es gibt nun zwei Objekte die jeweils unabhängig von einer Zeitzone erstellt werden können – eins für Kalender Objekte und eins für Zeit Objekte. Wie man aber in der Grafik sieht kann man in diesen Objekten auch eine Zeitzone festlegen (wie auch in unserem Konvertierungsbeispiel von oben ersichtlich ist).

Rechnen mit Zeit

Momentan war es nicht möglich „einfach“ mit Zeit zu rechnen in der Date-API. Temporal bietet hier aber endlich Funktionen um damit zu rechnen:

import { Temporal } from 'proposal-temporal'; 

const now = Temporal.now.plainDateTimeISO(); 
console.log(now.toString()); // Ausgabe: 2021-06-03T19:26:42.949202945 
const future = now.add({days: 30}); 
console.log(future.toString()); // Ausgabe: 2021-07-03T19:26:42.949202945
console.log(now.toString()); // Ausgabe: 2021-06-03T19:26:42.949202945

Was auch öfters verlangt wird ist die Zeit zwischen zwei Zeitpunkten. Auch hier bietet Temporal ein paar Funktionen:

import { Temporal } from 'proposal-temporal'; 

const start = Temporal.PlainDate.from({
  day: 24,
  month: 12,
  year: 2021
}); 

const end = Temporal.PlainDate.from({
  day: 8,
  month: 1,
  year: 2022
}); 

const diff = start.until(end); 
const diff2 = end.since(start); 
console.log(diff.toString()); // Ausgabe: P15D 
console.log(diff2.toString()); // Ausgabe: P15D

Fazit

Ich freue mich sehr über die neue API und kann nur sagen dass es Zeit wurde dass JavaScript einen guten Standard erhält. Leider ist es wie gesagt noch nicht genau absehbar wann die Temporal API endlich in den Standard hineinfließt aber sie ist als Alpha Version verfügbar und kann als Polyfill eingebunden werden. Das was ich von Temporal API gesehen habe gefällt mir schon sehr gut da es auch das Rechnen mit Datum und Zeit anbietet, dies war derzeit nur möglich wenn große Frameworks wie moment.js eingebunden worden sind.
Ich kann nur empfehlen Temporal API auszuprobieren!

 

Quellen:

[1] JavaScript Beispiele: https://www.heise.de/blog/Die-Temporal-API-besseres-Datehandling-fuer-JavaScript-6069626.html
[2] Bild zu Zeitzonen: https://www.heise.de/blog/Die-Temporal-API-besseres-Datehandling-fuer-JavaScript-6069626.html
[3] Temporal GitHub Repository: https://github.com/js-temporal/temporal-polyfill
[4] Proposal Status Page: https://github.com/tc39/proposals

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*