Ausblick

Bei Interesse können localStorage und Beispiele weiterführender Themen besprochen werden.

localStorage

Jeder Browser bietet die Möglichkeit, kleinere Datenmengen lokal bzw. clientseitig in einem Objekt namens localStorage zu speichern:

Mit localStorage.setItem(key,value) kann einem Eintrag mit Namen key ein String-Wert value zugewiesen werden.

Durch localStorage.getItem(key) wird der Wert des Eintrags mit Namen key ausgelesen.

localStorage.clear() löscht die Daten.

Es besteht die Möglichkeit, JSON-Daten im localStorage als String zu speichern:

let myData = [
  {id: 1, country: 'D'}, 
  {id: 2, country: 'CH'}, 
  {id: 3, country: 'F'}
];
// Daten als JSON-String speichern:
const jsonString = JSON.stringify(myData);
localStorage.setItem('countries', jsonString);
 
// Daten als String auslesen
const stringData = localStorage.getItem('countries');
// Daten als JSON verarbeiten und Objekt zuweisen
myData = JSON.parse(stringData);
 
// Daten im Objekt ändern (neues Land eintragen)
myData.push({id: 4, country:'I'});
 
// Daten erneut in localStorage speichern 
// (hier in einem kombinierten Aufruf)
localStorage.setItem('countries', JSON.stringify(myData));

Mit JSON.stringify wird ein JavaScript-Objekt in einen JSON-String umgewandelt. Umgekehrt erzeugt JSON.parse aus einem String im JSON-Format ein JavaScript-Objekt.

Die Daten stehen der Webanwendung auch erneutem Laden im localStorage zur Verfügung. Jeder Browser hat sein eigenes localStorage-Objekt (clientseitig).

Daten in der Cloud

Wenn die lokale Speicherung mit localStorage nicht mehr ausreicht, kann auf eine Datenbank in der Cloud umgestiegen werden — solange es die jeweilige Situation in Bezug auf den Datenschutz zulässt. Es gibt einige Beispiele von Datenbanken in der Cloud:

• Firebase von Google
• Supabase
• MongoDB Atlas
• Airtable
• u.v.a.m.

TypeScript

Viele Teams, die mit JavaScript arbeiten, verwenden TypeScript. Durch TypeScript erhält JavaScript eine statische Typisierung, wodurch der Code stabiler und wartbarer werden kann.

TypeScript ist eine Erweiterung von JavaScript. Somit ist JavaScript-Code bereits gültiges TypeScript (allerdings ohne Typisierung). Dies bedeutet, dass TypeScript nahtlos und schrittweise in bestehenden Projekten eingesetzt bzw. angewendet werden kann.

Frameworks

In komplexeren Webanwendungen wird in der Regel eines der vielen Web-Frameworks genutzt, u.a. um den Code besser zu strukturieren und um die Zusammenarbeit in größeren Teams besser zu koordinieren:

• React
• Vue
• Svelte
• Angular
• u.v.a.m.

Code mit KI-Tools generieren

Es gibt bereits einige Tools, die Code für Webanwendungen generieren. Neben GitHub Copilot, das in diesem Kurs bereits vorgestellt wurde, gibt es weitere Tools, die Code mit Hilfe von KI generieren. Ein Beispiel ist v0.dev, von Vercel, dem Unternehmen hinter dem React-Framework Next.js. Außderdem gibt es Integrationen der OpenAI-APIs in Zeichenprogramme wie Excalidraw und tldraw (siehe makereal.tldraw.com), die aus Zeichnungen bzw. Wireframes direkt Code generieren.