Javascript Polyfills und Transpiler

Keine Updates für Handys und Tabletts

Nicht nur auf kommerziellen Seiten sollten wir Rücksicht nehmen: Entweder müssen wir die Script-Elemente benutzen, die allen gängigen Browsern zur Verfügung stehen oder nach den neusten Standards skripten, aber dafür sorgen, dass Scripte auch in alten Browsern funktionieren. Nachhaltige Programmierung!

Um neue Konstrukte in Javascript auch für wirklich alte Browser gängig zu machen, brauchen wir entweder Polyfills oder Transpiler (Trans-Compiler).

Polyfills

Ein Polyfill definiert neue Objekte oder Methoden für ältere Browser. Polyfills gibt es wie Sand am Meer für die verschiedensten Funktionen, aber natürlich bringen auch sie den ganz alten Browser keine neuen Syntax-Kunststücke wie Arrow Functions bei.

Wohl aber neue Methoden: Ein umfassendes Polyfill für DOM4, dass ältere Browser an die neuen Methoden des DOM heranführt: z.B. .prepend(), append(), before(), after(), replaceWith, remove().

Babel – Transpiler

Ein Transpiler übersetzt Syntax, die alte Browser nicht in petto haben, in die Syntax, die sie verstehen. Babel ist der meistgenutzte Übersetzer, der ES6 in ES5 übersetzt.

<script>
var artists = function (firstName="Pablo Diego", lastName="Picasso") {
	console.log(firstName + " " + lastName);
};

artists();
</script>

Die Funktion hat Default-Argumente und wirft in der Console (Mac: cmd + opt + j / win ctrl + shift + j) einer alten Browser-Version einen Fehler aus.

Den Babel Transpiler kann man z.B. von cdnjs.com laden und vor dem Script einbinden.

Das script-Tag muss noch in script/babel geändert werden.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script type="text/babel">
var artists = function (firstName="Pablo Diego", lastName="Picasso") {
	console.log(firstName + " " + lastName);
};

artists();
</script>

Das bringt eine Realzeit-Übersetzung von ES6 zu ES5 im Browser mit dem gravierenden Nachteil, dass Laden und Ausführungszeit langsamer werden. Wer sparen will, kann Babel auf die für ihn relevanten Features und Browser reduzieren. Beschränken wir uns auf die letzten zwei Versionen der modernen Browser und IE11:

Das reduziert die Babel-Last von 127 KB auf 121 KB. Oh. Oder besser: Oh weia.

Für größere Projekte nützen viele Entwickler Build Tools wie Webpack, um z.B. Transpiler und SASS in einem automatisierten Prozess aufzusetzen.

Babel – Brauchen wir das tatsächlich noch?

Wer sich mit ES5 und XMLHttpRequest gut versteht, braucht Babel eher nicht, besser wäre ein Kurs »Modernes JavaScript«. Eine moderne Variante ist ist swc (Speedy Web Compiler) auf Github, ein Mitbewerber von Babel, der etwa 20 mal schneller ist als Babel.

Polyfill oder Transpiler?

Die Faustregel lautet: Wenn es ein neues Objekt oder eine neue Methode ist, kann ein Polyfill die Neuzeit einführen. Wenn es ES6-Syntax für den sterbenden Rest der Browser ist, brauchen wir einen Transpiler.

Ein gute – wenn nicht die beste – Quelle für Polyfills ist Github. So gibt es z.B. ein Polyfill für scrollIntoView.