ES2015 – Teil 1: Was ist ES2015?

ES2015 – kurz für ECMAScript 2015 – ist in aller Munde. Was steckt dahinter, was bedeutet das für uns als Webentwickler und was hat das mit JavaScript zu tun? Und was ist ES6? Diese und mehr Fragen klären wir in diesem Artikel und treffen außerdem die Vorbereitungen zur Arbeit mit ES2015, unter anderem mit Babel.

Was ist ES2015?

ECMAScript ist eine markengeschützte Scriptsprache der European Computers Manufacturers Association. Sie bildet den Standard auf den mehrere Scriptsprachen aufbauen, unter anderem zum Beispiel ActionScript (was vermutlich noch einige aus den Flashzeiten Anfang des Jahrtausends kennen) oder eben auch JavaScript.

Diese Grundlage dient dann zum Beispiel Browserherstellern wie Mozilla oder Google dazu, neue Features in ihren Browsern zu verarbeiten und uns damit zur Verfügung zu stellen. Ein wenig Verwirrung herrscht hier noch bei der Benamung ES2015: Lange Zeit hieß diese Version ES6, wurde dann aber umbenannt. Wenn also jemand von ES6 spricht meint er ES2015.

Gleichzeitig wird dieser Standard auch weiterentwickelt, inzwischen gibt es bereits die Versionen ES2016 und ES2017. Beide erweitern die Sprache um neue Features. Browserhersteller benötigen aber noch einige Zeit um hier nachzuziehen, aktuell beschäftigen sich diese noch mit ES2015. Und das führt uns auch direkt zum nächsten Problem:

 

Browserkompatibilität von ES2015

Neue Browserversionen decken bereits einen großen Teil des Featuresets von ES2015 ab. Leider ist die Verbreitung unterschiedlich weit fortgeschritten und leider beschäftigen wir uns in der Webprogrammierung nicht immer mit den neuesten Browsern – auch Opa Heinz mit seinem 2006er PC will schließlich in den Genuss unserer Inhalte kommen.

Eine gute Website zum Verbreitungsstand einzelner Features ist caniuse – dort können wir einfach einzelne Funktionalitäten suchen (nicht nur JavaScript, auch HTML und CSS beispielsweise) und sehen genau ab welcher Browserversion diese unterstützt werden.

Doch was machen wir nun wenn wir die neuen Features benutzen wollen aber trotzdem auch Opa Heinz berücksichtigen? Genau für solche Fälle gibt es die sogenannten Transpiler.

 

 

Was ist ein Transpiler?

Aus anderen Programmiersprachen kennen wir bereits die sogenannten Compiler – beispielsweise in C. Diese übersetzen unseren menschlich lesbaren Code in Maschinensprache, die der Computer versteht. Da JavaScript (und auch PHP) Scriptsprachen sind benötigen wir allerdings keinen Compiler da dieser Vorgang live während der Ausführung geschieht.

Transpiler gehen relativ ähnlich vor. Der große Unterschied ist, dass das Ergebnis keine Maschinensprache ist sondern in unserem Fall einfach eine ältere Version der Programmiersprache. Das bedeutet ein Transpiler liest unseren ES2015 Code und übersetzt alle neuen Features einfach in ihre ES5 (die aktuelle Version) Gegenstücke.

Dadurch haben wir den Vorteil, dass wir in der Programmierung die tollen neuen Features benutzen können, die uns das Leben einfacher machen – gleichzeitig kommen aber auch ältere Browser in den Genuss des Ergebnisses. Alles was wir dafür brauchen ist ein Transpiler – ein bekanntes Beispiel wäre Babel. Bevor wir uns also im nächsten Artikel an die ersten neuen Features von ES2015 machen kümmern wir uns jetzt noch darum, diesen Transpiler betriebsbereit zu machen, damit wir die Beispiele auch ausprobieren können.

 

ES2015 Entwicklungsumgebung

Um die Beispiele in den nächsten Artikeln dieser Serie ausführen zu können benötigen wir eins von zwei Dingen:

  1. Einen modernen Browser, der sie alle unterstützt ODER
  2. einen Transpiler wie zum Beispiel Babel der die Beispiele in ES5 übersetzt

Wir können die Beispiele einfach im Browser ausprobieren und wenn etwas nicht funktioniert haben wir auch hier wieder mehrere Möglichkeiten:

  1. Wir installieren Babel lokal nach dieser Anleitung ODER
  2. Wir benutzen eine Online Version von Babel im Browser wie zum Beispiel diese hier. Für einfache Beispiele ist das absolut in Ordnung. ODER
  3. Wir benutzen einen Docker Container der Babel installiert hat. Ich habe hier mal ein Image vorbereitet das ihr dafür einfach benutzen könnt: Babel Docker Image

 

 

Zum Transpilen eures Codes könnt ihr dabei einfach folgenden Befehl ausführen:

Ersetzt dabei SRC-VERZEICHNIS durch den Pfad wo eure ES2015 Dateien liegen und DIST-VERZEICHNIS durch den Pfad wo Babel die übersetzten Dateien hinspeichern soll.

Solltet ihr nicht wissen wie Docker funktioniert, schaut euch gerne meine Artikelserie zu Docker an.

 

Im nächsten Artikel geht es dann endlich los mit den neuen ES2015 Features inklusive Beispielen!

Schreibe einen Kommentar

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

*