Svelte, ein neues JavaScript-Framework

In den PCNEWS 161 habe ich im Artikel „Von nativen Apps zu PWAs“  (http://d.pcnews.at/_pdf/n161.pdf#page=27) darüber berichtet, wie mit speziellen JavaScript-Frameworks komplette Webseiten erstellt werden können, die optisch einer normalen App gleichen, vom Aufbau her aber eine Webseite sind und über einen Browser aufgerufen werden. Die Webseite und ihr Ablauf wird über JavaScript gesteuert. Preact war damals die aktuellste Empfehlung (https://preactjs.com/).

Aber natürlich geht die Entwicklung weiter: Preact, React und auch andere bauen ein zweites (virtuelles) DOM auf und beschleunigen damit den Seitenaufbau. Svelte (https://sveltejs.dev) geht einen anderen Weg: wieder spielt JavaScript eine zentrale Rolle. Der JavaScript-Code wird compiliert und sorgt, gemeinsam mit ein paar anderen Maßnahmen, für einen blitzschnellen Start und einen ebenso schnellen Ablauf. Weitere Vorteile: komplizierte Bibliotheken zur internen Datenverwaltung sind nicht notwendig. Die HTML-Syntax wird nicht total umgebaut, vielmehr kommen nur einige wenige neue oder geänderte Befehle dazu. Der Code ist kürzer und leichter zu lesen. Da ein Compiler eingesetzt wird, können die neuesten ECMA-Script-Versionen verwendet werden, unabhängig davon, ob der Browser sie schon versteht. Ein guter Überblick zu Svelte ist auf heise online zu finden: https://www.heise.de/hintergrund/Wieso-Svelte-Ein-Einstieg-in-das-JavaScript-Framework-4686037.html

Svelte (v2) gibt es nun seit 2018, aktuell ist v3. Das Konzept hat einiges Aufsehen erregt. Interessant sind die beiden folgenden Grafiken, in denen Svelte bei den Kriterien Interesse und Zufriedenheit jeweils den ersten Platz belegt:

https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Und wie entsteht eine Progressive Web App mit Svelte? Sapper ist der nächste Schritt, mit dem sehr rasch besonders effiziente PWAs geschrieben werden können. Dieser Artikel sollte eigentlich Sapper gewidmet sein, aber… Sapper wird nicht mehr weiter entwickelt. An die Stelle von Sapper tritt svelte/kit (https://www.npmjs.com/package/@sveltejs/kit). Eine Beta-Version wird seit Dezemberangekündigt. Beim Fertigstellen dieses Artikels war sie leider noch nicht verfügbar. Ich hoffe, in den nächsten PCNEWS darüber berichten zu können, auch mit einer Vorschau auf der Webseite von clubcomputer.at.

Unter https://svelte.dev/tutorial/basics ist ein ausgezeichnetes Tutorium zu finden. Meine Empfehlung: nehmen Sie sich etwa drei Stunden Zeit und arbeiten Sie das Tutorium durch: der Kurs ist wirklich gut aufgebaut und sagt mehr als jeder Artikel über die Ideen von Svelte.

TypeScript

Was sagt uns die Seite  https://2020.stateofjs.com noch?

TypeScript (https://de.wikipedia.org/wiki/TypeScript) gewinnt immer mehr Freunde. TypeScript ist eine Übermenge von JavaScript.

Ein Transpiler übersetzt von einer höheren Programmiersprache in eine andere, oft in eine Untermenge, um die Kompatibilität erhalten zu können. Der TypeScript-Transpiler wandelt TypeScript-Programme in „normales“ (einfaches) JavaScript um. TypeScript-Programme können daher auf praktisch allen Browsern verwendet werden. Außerdem sind damit alle Erweiterungen, die TypeScript bietet, optional: das heißt, dass auch ein reines JavaScript-Programm vom Transpiler verstanden wird.

Hier ein paar Programmzeilen als Beispiele:

Variablen und Funktionen mit Typen: der Transpiler kann überprüfen, ob überall die erwarteten Datentypen stehen. Die Beispiele sind wohl selbsterklärend:

let mehrwertsteuer: number = 20;
let autor: string = "Martin";
let fertig:Boolean: false;

function summe (a:number, b:number): number {
	return a+b;
}
	const summe2 = (a: number, b: number): 
	number => a+b;

Würde man etwa versuchen, der Variablen mehrwertsteuer eine Zeichenkette zuzuweisen, erkennt das der Transpiler und gibt eine Fehlermeldung aus.

Auch zusammengesetzte Objekte können typisiert werden:

let primzahlen: number[] = [2, 3, 5, 7, 11];// Array
let pers1: { name: string; alter: number } = { name: "Alexander", alter: 33 };  // Objekt
let punkt: [number, number] = [-0.5, 3.0];  // Tupel

Typen können benannt werden und machen Vereinbarungen übersichtlicher:

type Person = {
	name: string;
	alter: number;
}
let pers2: Person = {
	name: "Alexander",
	alter: 33,
};

Neu sind Aufzähltypen:

enum Farbe {Rot, Gruen, Blau};
let f: Farbe = Farbe.Gruen;

TypeScript bietet aber noch viel mehr, hier ein paar Details:

• Klassenvereinbarungen werden übersichtlicher: readonly, public, private und protected sind aus anderen Programmiersprachen bekannt und werden eingeführt.
• Wenn – wie in JavaScript – keine Typen verwendet werden, bringt das zwar große Freiheiten, aber auch viele Fehlerquellen. Wird die Typisierung verwendet, kann der Compiler mehr kontrollieren. Was aber, wenn ein Parameter ein string  oder eine number sein kann? Dann ist eine Union möglich:

  parametername: string | number.

• Das Typenkonzept wäre unvollständig ohne generische Typen: any steht (beispielsweise in einer Parameterliste) für jeden Datentyp ohne Kontrolle durch den Compiler. <T> dagegen führt ebenso einen universellen Typ ein, erlaubt aber eine Prüfung durch den Compiler.
• Interfaces beschreiben Datentypen.

Mehr dazu und zum Ausprobieren: https://www.typescriptlang.org/play

Svelte versteht mit ein paar geänderten Einstellungen auch TypeScript: wer sich einmal mit Svelte angefreundet hat, kann den nächsten Schritt wagen und die Programme mit TypeScript leichter lesbar und besser wartbar machen.

JavaScript / ECMA-Script Versionen

ECMAScript wird immer weiter entwickelt, inzwischen wird jedes Jahr eine neue, erweiterte Version veröffentlicht. Meistens handelt es sich um Konstrukte, die schon in älteren ECMAScript-Versionen möglich waren, nun aber viel eleganter geschrieben werden können. Hier ein kurzer Überblick über interessante Änderungen der letzten ECMAScript-Versionen:

Siehe dazu auch: ECMA-Script, PCNEWS 161: http://d.pcnews.at/_pdf/n161.pdf#page=31

Version 11 – ECMAScript 2020

2020 ist der neue Datentyp BigInt dazu gekommen. Damit können ganzzahlige Rechenoperation mit (fast) beliebig langen Zahlen durchgeführt werden. BigInt-Zahlen werden durch ein angehängtes n  (z.B. 10n) oder mit BigInt(10) erzeugt.

const big = 2n ** 10_000_000n;

Mit _ können Zahlen lesbarer geschrieben werden, ** bedeutet Exponentiation. Das Ergebnis (2^10000000) hat etwa 3 Millionen Stellen.

Der neue Operator ?? („nullish coalescing operator“) liefert den Operanden auf der rechten Seite, falls der linke null oder undefined ist. C# hat diesen Operator seit 2005.

false ?? "string";     // -> false
NaN ?? "string";       // -> NaN
undefined ?? "string"; // -> "string"

false ?? "string";     // -> false
NaN ?? "string";       // -> NaN
undefined ?? "string"; // -> "string"

Wenn vorname, nachname und spitzname nach der Vereinbarung keinen Wert erhalten, werden name1 und name2 auf „KeinName“ gesetzt. Der Vorteil von ?? ist offensichtlich.

let,,;

let=!==null&&!==?:!==&&!=?:!=&&!=?spitzname:"Kein";
let=??nachname????"Kein";

Der optionale Verkettungsoperator ? für Objekte:

Wir vereinbaren ein Objekt:

const meinObjekt = {
	a: {
		b: {
			wert: 4,
		}
	}
}

dann gilt

meinObjekt.a.b.wert;   // 1
meinObjekt.a.c.wert;   // Fehlermeldung

Um die Fehlermeldung zu verhindern, wären viele Abfragen notwendig. Wesentlich einfacher geht es so:

meinObjekt?.a?.b?.wert;   // 1
meinObjekt?.a?.c?.wert;   // undefinded

Version 10 – ECMAScript 2019

Arrays „flach“ machen:

const=[1,,[3,,[5,6,[7,]]]];
console.log(a);
console.log(a.flat());
console.log(a.flat().flat());
console.log(a.flat(Infinity));

Ergebnisse:

[1, 2, [3, 4, [5, 6, [7, 8]]]]
[1, 2, 3, 4, [5, 6, [7, 8]]]
[1, 2, 3, 4, 5, 6, [7, 8]]
[1, 2, 3, 4, 5, 6, 7, 8]

In einer try-catch-Anweisung ist der Parameter nach catch nicht mehr verpflichtend:

try {
	throw new Error("Meine Fehlermeldung");
} catch {
	console.log("kein Parameter bei catch");
}

Version 9 – ECMAScript 2018

Die drei Punkte in dem folgenden Beispiel sehen so aus, als wäre das hier nur ein Teil des Beispiels. In Wirklichkeit sind die drei Punkte ein Operator, mit dem Objekte zerlegt oder zusammengesetzt werden können.

Der „rest-Operator“ zerlegt ein Objekt:

const meinObjekt = {a:1, b:2, c:3};
const {a, ...rest} = meinObjekt;

weist a den Wert 1 und rest den Wert {b:2, c:3} zu.

Mit dem „spread-Operator“ können die Komponenten eines Objekts zum Erzeugen eines anderen verwendet werden. Mit meinObjekt kann ein neues Objekt {…meinObjekt, d:4} erzeugt werden, das das gleiche wie {a:1, b:2, c:3, d:4} ist. Auf die Reihenfolge kommt es an: {d:4, …meinObjekt} entspricht {d:4, a:1, b:2, c:3}.

In regulären Ausdrücken können Gruppen benannt werden. Damit wird die Weiterverarbeitung der Gruppen vereinfacht.

let=/(?\d{2})\.(?\d{2})\.(?\d{4})/u;
let=.exec('23.01.2021');

liefert als ergebnis ein Array  [„23.01.2021“, „23“, „01“, „2021“] und ein Objekt

ergebnis.groups.tag === "23";
ergebnis.groups.monat === "01";
ergebnis.groups.jahr === "2021";

Wie gesagt: das ist nur eine kleine Auswahl der Neuerungen, die hoffentlich auf das aktuelle ECMAScript neugierig machen und zum Ausprobieren einladen.