Javascript Polyfills und Transpiler

Polyfill vs Babel Transpiler oder Compiler

Die aktuellen Browser sind richtig gut. Wir können all die modischen Konstrukte wie promises, fetch und arrow functions, const und let benutzen und sie funktionieren in allen modernen Browsern.

Aber es gibt immer noch Besucher mit alten IEs oder Safaris, mit Rechnern, auf denen Firefox seit ewig und drei Jahren seine Runden zieht. Und wir sollten nicht vergessen, dass die Hersteller Updates für Handys nach ein paar Jahren einstellen: Nicht jeder will dann gleich zum neusten Modell greifen.

18-12-15 SITEMAP

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!

mobiles

Um neue Konstrukte in Javascript auch für 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 Kunststücke bei.

Transpiler – Babel

Ein Transpiler übersetzt die Syntax, die alte Browser nicht in petto haben in die Syntax, die sie verstehen. Babel ist so ein Ü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.

Uncaught SyntaxError: Unexpected token
Babel Transpiler einbinden

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.

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 neue Syntax ist, brauchen wir einen Transpiler.

LeistungsmerkmalPolyfillTranspiler
Map
Promise
Fetch
String.prototype.padEnd()
Array.prototype.includes()
Promise
Fetch
String.prototype.padEnd()
class
const und let
object rest / spread
Arrow functions () => {}

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

Babel Transpiler einbinden Library babel-core A compilter for writing next generation Javascript 6to5 babel classes const es6 harmony let modules transpile transpiler var babel-babel 875 34640 3807