30.04.2013 Aufrufe

masterarbeitsabschlussvortrag - Parallele Systeme

masterarbeitsabschlussvortrag - Parallele Systeme

masterarbeitsabschlussvortrag - Parallele Systeme

MEHR ANZEIGEN
WENIGER ANZEIGEN

Erfolgreiche ePaper selbst erstellen

Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.

C A R L<br />

V O N<br />

O S S I E T Z K Y<br />

C A R L<br />

V O N<br />

O S S I E T Z K Y<br />

Vortrag<br />

FAKULTÄT II<br />

Jérôme Agater<br />

Transpilierte Sprachen<br />

JavaScript als Compiler-Ziel<br />

07. Juni 2011<br />

DEPARTMENT FÜR INFORMATIK<br />

ABTEILUNG FÜR PARALLELE SYSTEME


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Vorstellung des Themas<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

3


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

0. Vorstellung des Themas<br />

Was ist eine ‚Transpilierte Sprache‘ eigentlich?<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

4


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Was ist eine ‚transpilierte Sprache‘?<br />

▪ transpiliert – Kunstwort<br />

▪ lat. „trans“ für „herüber, über, über hinaus”<br />

▪ „compiler“ hier: für „Übersetzer”<br />

➡ Programmiersprache, die – anstatt in Maschinencode – in eine andere<br />

Programmiersprache (hier: JavaScript) übersetzt wird.<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

5


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

08. JUNI 2012<br />

6


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

Compiler-Ziel<br />

08. JUNI 2012<br />

7


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

08. JUNI 2012<br />

Compiler-Ziel<br />

meist: Maschinencode<br />

8


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

08. JUNI 2012<br />

9


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

08. JUNI 2012<br />

Compiler-Ziel JavaScript<br />

10


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Ein Spezialfall Frontend des Compilers<br />

transpilierte<br />

Sprache<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Zwischensprache<br />

Maschinensprache<br />

Zielsprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Backend<br />

Javascript-Engine<br />

Zielsprache<br />

08. JUNI 2012<br />

Compiler-Ziel JavaScript<br />

11


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Realisierung für eine Sprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

12


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Realisierung für eine Sprache<br />

‣ Backend für bestehende Compiler verwenden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

12


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Realisierung für eine Sprache<br />

‣ Backend für bestehende Compiler verwenden<br />

‣ allgemeinen Transpiler verwenden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

12


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Realisierung für eine Sprache<br />

‣ Backend für bestehende Compiler verwenden<br />

‣ allgemeinen Transpiler verwenden<br />

‣ eigenen Transpiler schreiben<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

12


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Transpiler – Realisierung für eine Sprache<br />

‣ Backend für bestehende Compiler verwenden<br />

‣ allgemeinen Transpiler verwenden<br />

‣ eigenen Transpiler schreiben<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

✔<br />

08. JUNI 2012<br />

12


TRANSPILIERTE SPRACHEN<br />

VORSTELLUNG DES THEMAS<br />

Masterarbeit<br />

1. Motivation – Warum nach JavaScript compilieren?<br />

2. Betrachtung der Compiler-Zielsprache JavaScript<br />

3. Untersuchung von drei transpilierten Sprachen<br />

4. Entwicklung der Web-Anwendung Collabri<br />

(Anfängliche Idee)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

13


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

1. Motivation<br />

Warum nach JavaScript compilieren?<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

14


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

15


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Plug-Ins<br />

▪ Java<br />

▪ Browser-eigene Programmiersprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

16


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Plug-Ins<br />

▪ Plug-Ins laufen nicht überall<br />

▪ Flash Plug-Ins nicht auf Mobile-Devices<br />

▪ Plug-Ins nicht ubiquitär verbreitet<br />

▪ Installation: Vorteile einer Web-Anwendung gehen verloren<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

17


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Java<br />

▪ Verbreitung sinkt<br />

▪ oft deaktiviert<br />

▪ braucht lange zum Start<br />

▪ langsam für GUIs<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

18


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Browser eigene Programmiersprache<br />

▪ nahezu immer verfügbar<br />

▪ braucht nicht lange zum Start<br />

▪ schnell<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

19


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Browser eigene Programmiersprache<br />

▪ nahezu immer verfügbar<br />

▪ braucht nicht lange zum Start<br />

▪ schnell<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

✔<br />

08. JUNI 2012<br />

19


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ hohes Maß an Interaktion => clientseitig<br />

‣ Möglichkeiten<br />

▪ Browser eigene Programmiersprache<br />

▪ nahezu immer verfügbar<br />

▪ braucht nicht lange zum Start<br />

▪ schnell<br />

▪ einzige Programmiersprache im Browser: JavaScript<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

✗<br />

08. JUNI 2012<br />

20


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ JavaScript hat einige ‚gute‘ Aspekte<br />

▪ alles ist ein Objekt*<br />

▪ Closures<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

21


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen entwickeln<br />

‣ JavaScript hat einige ‚gute‘ Aspekte<br />

▪ alles ist ein Objekt*<br />

▪ Closures<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

21


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = kein JavaScript<br />

✗ JavaScript hat viele ‚schlechte‘ Aspekte*<br />

✗ keine alternativen Optionen<br />

✗ weitere Programmiersprache lernen<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

22


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = kein JavaScript<br />

✗ JavaScript hat viele ‚schlechte‘ Aspekte*<br />

✗ keine alternativen Optionen<br />

✗ weitere Programmiersprache lernen<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✗<br />

22


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = kein JavaScript = andere Sprache<br />

‣ Ziel<br />

▪ bessere oder bereits bekannte Sprache verwenden können<br />

▪ keine Plug-Ins verwenden, kein Java verwenden<br />

‣ Mittel<br />

▪ auf die Programmierbarkeit zurückgreifen, dh. JavaScript<br />

‣ Strategien<br />

✗ Interpreter für diese Sprache in JavaScript schreiben<br />

✔ Diese Sprache nach JavaScript übersetzen (= transpilieren)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

23


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = kein JavaScript = andere Sprache<br />

‣ Ziel<br />

▪ bessere oder bereits bekannte Sprache verwenden können<br />

▪ keine Plug-Ins verwenden, kein Java verwenden<br />

‣ Mittel<br />

▪ auf die Programmierbarkeit zurückgreifen, dh. JavaScript<br />

‣ Strategien<br />

✗ Interpreter für diese Sprache in JavaScript schreiben<br />

✔ Diese Sprache nach JavaScript übersetzen (= transpilieren)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✔<br />

23


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivation = Web-Anwendungen in<br />

anderer Sprache als JavaScript entwickeln können<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

24


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

2. JavaScript<br />

Was ist das eigentlich für eine Sprache?<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

25


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

‣ keine primitiven Datentypen, alles ist ein Objekt<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

‣ keine primitiven Datentypen, alles ist ein Objekt<br />

‣ Closures<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

‣ keine primitiven Datentypen, alles ist ein Objekt<br />

‣ Closures<br />

‣ Prototyp-basiert*<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

‣ keine primitiven Datentypen, alles ist ein Objekt<br />

‣ Closures<br />

‣ Prototyp-basiert*<br />

‣ Problembehaftet*<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript – Zusammenfassend<br />

‣ Browser verfügbare Sprache<br />

‣ heißt eigentlich ECMAScript<br />

‣ Script-Sprache<br />

‣ dynamische Programmiersprache<br />

‣ Java-ähnliche Syntax<br />

‣ keine primitiven Datentypen, alles ist ein Objekt<br />

‣ Closures<br />

‣ Prototyp-basiert*<br />

‣ Problembehaftet*<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

* gleich mehr…<br />

26


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Prototypen-basierte Sprache<br />

‣ Objekte sind nicht Instanzen von Klassen<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

‣ Ein Objekte erbt Methoden und Attribute direkt von einem anderen Objekt,<br />

seinem Prototyp (SELF).<br />

▪ dieser Prototyp kann wieder einen eigenen Prototypen besitzen<br />

▪ dadurch entsteht eine Verkettung von Prototypen<br />

▪ Die Wurzel aller Ketten ist das Objekt Object.prototype.<br />

27


TRANSPILIERTE SPRACHEN<br />

ERBT VON<br />

INSTANZ VON<br />

Prototypisch Klassisch<br />

.farbe<br />

.sorte<br />

.farbe<br />

.sorte<br />

Klasse Fruit<br />

def ivar: farbe<br />

Klasse Apfel<br />

def ivar: sorte<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

28


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Prototypen-basierte Sprache<br />

‣ Erzeugung dieser Prototypen-Verkettung:<br />

▪ Objekte werden durch Konstruktor-Funktionen erzeugt<br />

▪ var%anApple%=%new%Apple();<br />

▪ Konstruktor-Funktionen besitzen ein Attribut prototype<br />

▪ das darin abgelegte Objekt wird zum Prototyp von durch die<br />

Konstruktor-Funktion neu erzeugten Objekten<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✗<br />

▪ d.h. der Prototyp von anApple ist das Objekt Apple.prototype<br />

▪ Der Prototype einer Konstruktor-Funktion kann geändert werden<br />

▪ Apple.prototype%=%new%Fruit();%//Äpfel%sind%nun%Früchte<br />

29


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Object Konstruktor-Funktion<br />

.prototype =<br />

08. JUNI 2012<br />

Fruit Konstruktor-Funktion<br />

.prototype = .farbe<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

function%Apple()%{};<br />

Apple.prototype%=%new%Fruit();<br />

Apple.prototype.sorte%=%”Jonagold”<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Object Konstruktor-Funktion<br />

.prototype =<br />

08. JUNI 2012<br />

Fruit Konstruktor-Funktion<br />

.prototype = .farbe<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

function%Apple()%{};<br />

Apple.prototype%=%new%Fruit();<br />

Apple.prototype.sorte%=%”Jonagold”<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Object Konstruktor-Funktion<br />

.prototype =<br />

08. JUNI 2012<br />

Fruit Konstruktor-Funktion<br />

.prototype = .farbe<br />

Apple Konstruktor-Funktion<br />

.prototype = .sorte<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

function%Apple()%{};<br />

Apple.prototype%=%new%Fruit();<br />

Apple.prototype.sorte%=%”Jonagold”<br />

var%anApple%=%new%Apple();<br />

anApple.farbe;%//%rot<br />

anApple.sorte;%%//%Jonagold<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Object Konstruktor-Funktion<br />

.prototype =<br />

08. JUNI 2012<br />

Fruit Konstruktor-Funktion<br />

.prototype = .farbe<br />

Apple Konstruktor-Funktion<br />

.prototype = .sorte<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Prototypen-Beispiel<br />

function%Fruit()%{};<br />

Fruit.prototype.farbe%=%”rot”;<br />

function%Apple()%{};<br />

Apple.prototype%=%new%Fruit();<br />

Apple.prototype.sorte%=%”Jonagold”<br />

var%anApple%=%new%Apple();<br />

anApple.farbe;%//%rot<br />

anApple.sorte;%%//%Jonagold<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Object Konstruktor-Funktion<br />

.prototype =<br />

08. JUNI 2012<br />

Fruit Konstruktor-Funktion<br />

.prototype = .farbe<br />

Apple Konstruktor-Funktion<br />

.prototype = .sorte<br />

anApple<br />

30


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Problem<br />

✗ Globale Variablen<br />

▪ Konstruktor-Aufruf ohne new? anApple%=%Apple();<br />

➡ Alle neu-denierten Attribute werden globale Variablen<br />

▪ var vergessen? x%=%10;<br />

➡ Alle denierten Variablen werden zu globalen Variablen<br />

✗ Namensräume gibt es nicht<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

31


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Problem<br />

✗ Mangelnde Privatheit, denn Attribute sind immer public<br />

➡ Verletzte Kapselung<br />

✗ Attribute werden von außen gesetzt,<br />

➡ Kenntnis über Gültigkeitsbereichnotwendig<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

➡ Abhängigkeit nicht ersichtlich, Fehler wenn Gültigkeitsbereich sich<br />

ändert<br />

32


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Problem<br />

✗ Mangelnde Privatheit, denn Attribute sind immer public<br />

➡ Starke Kopplung<br />

✗ Attribute werden zur Implementationsschnittstelle<br />

✗ Änderungen der Implementierung eines Objekts<br />

➡ weitere Änderungen in anderen Bereichen notwendig<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

33


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Problem<br />

✗ Mangelnde Verläßlichkeit<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✗ Die Prototypen-Ketten aller Objekte enden beim Objekt Object.prototype<br />

✗ Nur nicht, wenn Frames oder iFrames zum Einsatz kommen.<br />

✗ Jeder Frame enhält eine eigene Version von Object.prototype<br />

➡ Die Veränderung eines Object.prototype wirkt sich auf die anderen<br />

nicht aus.<br />

➡ Abjekte entsehen: Objekte, die nicht an der erwarteten Objekt-<br />

Hierarchie partizipieren<br />

34


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Problem<br />

✗ Mangelnde Fehlerbehandlung dynamischen Methodenaufruf<br />

✗ anObject.notExistingMethod()<br />

➡ TypeError<br />

✗ Keine Möglichkeit, anObject zu überlassen, wie darauf reagiert wird<br />

✗ (anders als bei anderen, dynamischen Sprachen wie Ruby, Smalltalk,<br />

Objective-C, …)<br />

✗ Im Prinzip try-catch-Block bei jedem Methoden-Aufruf notwendig,<br />

da Abjekte auftreten können<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

35


TRANSPILIERTE SPRACHEN<br />

S.O.<br />

Transpilierte Sprachen<br />

Eine Abhilfe?<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

36


TRANSPILIERTE SPRACHEN<br />

TRANSPILIERTE SPRACHEN<br />

Masterarbeit<br />

‣ Drei Sprachen betrachtet:<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

37


TRANSPILIERTE SPRACHEN<br />

TRANSPILIERTE SPRACHEN<br />

Masterarbeit<br />

‣ Drei Sprachen betrachtet:<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

37


TRANSPILIERTE SPRACHEN<br />

TRANSPILIERTE SPRACHEN<br />

Masterarbeit<br />

‣ Drei Sprachen betrachtet:<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

37


TRANSPILIERTE SPRACHEN<br />

TRANSPILIERTE SPRACHEN<br />

Masterarbeit<br />

‣ Drei Sprachen betrachtet:<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Objective-J<br />

08. JUNI 2012<br />

37


TRANSPILIERTE SPRACHEN<br />

TRANSPILIERTE SPRACHEN<br />

Masterarbeit<br />

‣ Drei Sprachen betrachtet:<br />

‣ In diesem Vortrag nur eine<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Objective-J<br />

08. JUNI 2012<br />

37


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Amber Transpiler<br />

‣ Zwei Phasen<br />

▪ Parsing<br />

▪ baut abstrakten Syntax Baum (abstract syntax tree, AST)<br />

▪ Code-Erzeugung<br />

▪ erzeugt aus AST JavaScript-Code<br />

Quellsprache Maschinensprache<br />

Amber-Smalltalk<br />

Quellsprache<br />

Quellsprache<br />

Transpiler<br />

Compiler<br />

Frontend<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Zwischensprache<br />

08. JUNI 2012<br />

Javascript-Engine<br />

39


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Amber Transpiler<br />

‣ Parsing<br />

▪ Parsing Expression Grammar (PEG)<br />

▪ formale Beschreibung eines Top-Down-Parsers<br />

▪ verwendet wird dazu Library peg.js (JavaScript)<br />

▪ früher verwendet: PetitParser (Amber)<br />

▪ linerare Zeit durch Memoisation<br />

▪ erzeugt AST<br />

Quellsprache Maschinensprache<br />

Amber-Smalltalk<br />

Quellsprache<br />

Quellsprache<br />

Transpiler<br />

Compiler<br />

Frontend<br />

▪ AST aus Amber-Objekten (Subklassen von Node) aufgebaut<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Zwischensprache<br />

08. JUNI 2012<br />

Javascript-Engine<br />

40


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Amber Transpiler<br />

‣ Code-Erzeugung<br />

▪ Compiler realisiert Entwurfsmuster Besucher (Visitor)<br />

▪ läuft Knoten des AST ab<br />

▪ für jeden Knoten wird zugehöriger JavaScript-Code erzeugt<br />

▪ direkte Umsetzung der Semantik wenn möglich<br />

▪ Variablenzuweisung<br />

Quellsprache Maschinensprache<br />

Amber-Smalltalk<br />

Quellsprache<br />

Quellsprache<br />

Transpiler<br />

Compiler<br />

Frontend<br />

▪ ansonsten Aufrufe ins JavaScript-Laufzeitsystem von Amber<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

.js<br />

JavaScript<br />

Zwischensprache<br />

08. JUNI 2012<br />

Javascript-Engine<br />

41


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

Beispiel<br />

|"a"|<br />

a":="5.<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

42


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

43


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

‣ peg.js<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

assignment%%%%%=%variable:variable%ws%':='%ws%expression:expression%{<br />

% %%%%%%%% %%%%%return%smalltalk.AssignmentNode._new()<br />

% %%%%%%%% %%%%%% ._left_(variable)<br />

% %%%%%%%% %%%%%% ._right_(expression)<br />

% % %}<br />

expression%%%%%=%assignment%/%cascade%/%keywordSend%/%binarySend%/%…<br />

43


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

‣ peg.js<br />

‣ AssignmentNode<br />

left:"aNode<br />

% left%:=%aNode.<br />

% left%assigned:%true<br />

right:"aNode<br />

% right%:=%aNode<br />

accept:"aVisitor<br />

% aVisitor%visitAssignmentNode:%self<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

assignment%%%%%=%variable:variable%ws%':='%ws%expression:expression%{<br />

% %%%%%%%% %%%%%return%smalltalk.AssignmentNode._new()<br />

% %%%%%%%% %%%%%% ._left_(variable)<br />

% %%%%%%%% %%%%%% ._right_(expression)<br />

% % %}<br />

expression%%%%%=%assignment%/%cascade%/%keywordSend%/%binarySend%/%…<br />

43


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

‣ peg.js<br />

‣ AssignmentNode<br />

‣ Compiler<br />

left:"aNode<br />

% left%:=%aNode.<br />

% left%assigned:%true<br />

right:"aNode<br />

% right%:=%aNode<br />

accept:"aVisitor<br />

% aVisitor%visitAssignmentNode:%self<br />

visitAssignmentNode:"aNode<br />

% stream%nextPutAll:%'('.<br />

% self%visit:%aNode%left.<br />

% stream%nextPutAll:%'='.<br />

% self%visit:%aNode%right.<br />

% stream%nextPutAll:%')'<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

assignment%%%%%=%variable:variable%ws%':='%ws%expression:expression%{<br />

% %%%%%%%% %%%%%return%smalltalk.AssignmentNode._new()<br />

% %%%%%%%% %%%%%% ._left_(variable)<br />

% %%%%%%%% %%%%%% ._right_(expression)<br />

% % %}<br />

expression%%%%%=%assignment%/%cascade%/%keywordSend%/%binarySend%/%…<br />

43


TRANSPILIERTE SPRACHEN<br />

BEISPIEL<br />

‣ peg.js<br />

‣ AssignmentNode<br />

‣ Compiler<br />

‣ Resultat<br />

left:"aNode<br />

% var"a=nil; left%:=%aNode.<br />

% (a=(5)); left%assigned:%true<br />

right:"aNode<br />

% right%:=%aNode<br />

accept:"aVisitor<br />

% aVisitor%visitAssignmentNode:%self<br />

visitAssignmentNode:"aNode<br />

% stream%nextPutAll:%'('.<br />

% self%visit:%aNode%left.<br />

% stream%nextPutAll:%'='.<br />

% self%visit:%aNode%right.<br />

% stream%nextPutAll:%')'<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

assignment%%%%%=%variable:variable%ws%':='%ws%expression:expression%{<br />

% %%%%%%%% %%%%%return%smalltalk.AssignmentNode._new()<br />

% %%%%%%%% %%%%%% ._left_(variable)<br />

% %%%%%%%% %%%%%% ._right_(expression)<br />

% % %}<br />

expression%%%%%=%assignment%/%cascade%/%keywordSend%/%binarySend%/%…<br />

43


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Amber Laufzeitsystem<br />

‣ Nutzt prototypische Vererbung für Vererbung zwischen Klassen<br />

‣ eigene Routine für den dynamischen Methodenaufruf<br />

▪ smalltalk.send<br />

‣ eigene Routine für das Erzeugen einer Klasse<br />

▪ smalltalk.createClass<br />

‣ eigene Routine für das Hinzufügen von Methoden<br />

▪ smalltalk.addMethod<br />

‣ …<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

44


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ ‚Quirky‘ Syntax & Semantik<br />

‣ simple Regeln<br />

‣ wenige Regeln<br />

‣ keine Sonderfälle<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

45


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ ‚Quirky‘ Syntax & Semantik<br />

‣ simple Regeln<br />

‣ wenige Regeln<br />

‣ keine Sonderfälle<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✔<br />

45


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Globale Variablen<br />

‣ gobale Objekte durch Laufzeitsystem<br />

‣ ansonsten genau ein globales Objekt smalltalk<br />

▪ Namensraum für alle Klassen und einige Hilfsmethoden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

46


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Globale Variablen<br />

‣ gobale Objekte durch Laufzeitsystem<br />

‣ ansonsten genau ein globales Objekt smalltalk<br />

▪ Namensraum für alle Klassen und einige Hilfsmethoden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✔<br />

46


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Privatheit, denn Attribute sind immer public<br />

‣ Instanzvariablen von Amber sind Attribute in JavaScript,<br />

➡ Zugri auf Attribute möglich (über Methode basicAt: ),<br />

▪ aber kompliziert<br />

▪ wird nur für Implementierungszwecke genutzt<br />

▪ nicht jedoch allgemein<br />

‣ stattdessen Akzessor-Methoden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

47


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Privatheit, denn Attribute sind immer public<br />

‣ Instanzvariablen von Amber sind Attribute in JavaScript,<br />

➡ Zugri auf Attribute möglich (über Methode basicAt: ),<br />

▪ aber kompliziert<br />

▪ wird nur für Implementierungszwecke genutzt<br />

▪ nicht jedoch allgemein<br />

‣ stattdessen Akzessor-Methoden<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✔<br />

47


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Verläßlichkeit<br />

✗ Die Prototypen-Ketten aller Objekte enden beim Objekt Object.prototype<br />

➡ auch in Amber<br />

‣ Methoden-Aufruf wird über Routine smalltalk.send durchgeführt<br />

➡ prinzipiell ließen sich Abjekte abfangen<br />

✗ passiert aber nicht<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

48


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Verläßlichkeit<br />

✗ Die Prototypen-Ketten aller Objekte enden beim Objekt Object.prototype<br />

➡ auch in Amber<br />

‣ Methoden-Aufruf wird über Routine smalltalk.send durchgeführt<br />

➡ prinzipiell ließen sich Abjekte abfangen<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✗ passiert aber nicht ✗<br />

48


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Fehlerbehandlung dynamischen Methodenaufruf<br />

▪ Methoden-Aufruf wird über Routine smalltalk.send durchgeführt<br />

➡ nicht existente Methoden werden entdeckt<br />

▪ Objekt wird durch Aufruf seiner Methode<br />

doesNotUnderstand: informiert und kann angemessen<br />

reagieren.<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

49


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Abhilfe für JavaScripts Probleme<br />

✗ Mangelnde Fehlerbehandlung dynamischen Methodenaufruf<br />

▪ Methoden-Aufruf wird über Routine smalltalk.send durchgeführt<br />

➡ nicht existente Methoden werden entdeckt<br />

▪ Objekt wird durch Aufruf seiner Methode<br />

doesNotUnderstand: informiert und kann angemessen<br />

reagieren.<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

✔<br />

49


TRANSPILIERTE SPRACHEN<br />

AMBER SMALLTALK<br />

Amber als Abhilfe für JavaScripts Probleme<br />

✗ Fazit:<br />

‣ Besser, aber noch nicht richtig gut.<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

50


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

4. Web-Anwendung Collabri<br />

Entwickelt mit Amber Smalltalk<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

51


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

Collabri<br />

‣ Gemeinsam an einer Pinnwand für Notizen arbeiten<br />

‣ Gruppen-Chat<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

52


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

Collabri<br />

‣ Event-basierte Architektur (socket.io)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

53


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

Collabri<br />

‣ Event-basierte Architektur (socket.io)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

‣ Model, ServerController<br />

in Amber<br />

53


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

Collabri<br />

‣ Event-basierte Architektur (socket.io)<br />

‣ Model, View, Controller<br />

in Amber<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

‣ Model, View, Controller<br />

in Amber<br />

08. JUNI 2012<br />

‣ Model, ServerController<br />

in Amber<br />

53


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

Collabri<br />

‣ Event-basierte Architektur (socket.io)<br />

‣ Model, View, Controller<br />

in Amber<br />

JSON<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

‣ Model, View, Controller<br />

in Amber<br />

JSON<br />

08. JUNI 2012<br />

‣ Model, ServerController<br />

in Amber<br />

53


TRANSPILIERTE SPRACHEN<br />

WEB-ANWENDUNG COLLABRI<br />

DEMO<br />

Collabri<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

54


TRANSPILIERTE SPRACHEN<br />

END OF LINE.<br />

Thanks for listening!<br />

Collabri<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

55


TRANSPILIERTE SPRACHEN<br />

CONTINUE<br />

Anhang!<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

56


Point3D<br />

TRANSPILIERTE SPRACHEN<br />

KLASSENHIERARCHIE<br />

Instanz<br />

Instanz<br />

x, y<br />

Instanz<br />

x, y, z<br />

Konstruktor-Funktion<br />

Prototyp<br />

z<br />

Klasse<br />

Point<br />

x<br />

y<br />

Klasse<br />

Point3D<br />

z<br />

Metaklasse<br />

Klasse der<br />

Klasse Point<br />

Metaklasse<br />

Klasse der<br />

Klasse Point3D<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Klasse<br />

Metaklasse<br />

Klasse von …<br />

Oberklasse von …<br />

08. JUNI 2012<br />

57


TRANSPILIERTE SPRACHEN<br />

PROTOTYPEN-CHAOS<br />

Instanz<br />

Instanz<br />

Konstruktor-Funktion<br />

Point<br />

Prototyp<br />

x, y<br />

Konstruktor-Funktion<br />

Point3D<br />

Prototyp<br />

z<br />

Konstruktor-Funktion<br />

Function<br />

Prototyp<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Konstruktor-Funktion<br />

Object<br />

Prototyp<br />

Prototyp von …<br />

bzw. vererbt an …<br />

08. JUNI 2012<br />

58


TRANSPILIERTE SPRACHEN<br />

AUSTAUCH EINES BACKENDS<br />

Quellsprache Zwischensprache Zielsprache<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Quellsprache<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Compiler<br />

Compiler<br />

Transpiler<br />

Frontend<br />

Maschinensprache<br />

Anhang!<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Compiler<br />

Frontend<br />

.js<br />

Zwischensprache<br />

JavaScript<br />

Maschinensprache<br />

Zwischensprache<br />

.js<br />

JavaScript<br />

Javascript-Engine<br />

Maschinensprache<br />

Backend<br />

Backend .js<br />

Javascript-Engine<br />

JavaScript<br />

Zielsprache<br />

JavaScript<br />

08. JUNI 2012<br />

59


TRANSPILIERTE SPRACHEN<br />

OMETA<br />

Genereller Transpiler OMeta<br />

‣ OO-Sprache für Pattern-Matching<br />

▪ subklassieren von bestehenden Parsern<br />

‣ variante der Parsing Expression Grammer<br />

▪ kann jede Form von Daten verarbeiten<br />

▪ linerare Zeit über Memoation<br />

‣ tokenizer, parser, visitor tree transformers<br />

‣ erweiterbar über objekt-orientierte Mechanismen<br />

‣<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

OMeta<br />

08. JUNI 2012<br />

60


TRANSPILIERTE SPRACHEN<br />

OMETA<br />

Genereller Transpiler OMeta<br />

Beispiele und Grafiken von:<br />

http://www.moserware.com/2008/06/ometa-who-what-when-where-why.html<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

61


TRANSPILIERTE SPRACHEN<br />

OMETA<br />

Genereller Transpiler OMeta<br />

Beispiele und Grafiken von:<br />

http://www.moserware.com/2008/06/ometa-who-what-when-where-why.html<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

61


TRANSPILIERTE SPRACHEN<br />

OMETA<br />

Genereller Transpiler OMeta<br />

Beispiele und Grafiken von:<br />

http://www.moserware.com/2008/06/ometa-who-what-when-where-why.html<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

61


TRANSPILIERTE SPRACHEN<br />

MOTIVATION<br />

Motivations-Beispiel<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

62


TRANSPILIERTE SPRACHEN<br />

MOTIVATIONSBEISPIEL<br />

Bachelorarbeit KerMod Web (2009)<br />

‣ webbasiertes Werkzeug zur Unterstützung der Moderation<br />

von Arbeit in Gruppen<br />

‣ Setzt serverseitig die Programmiersprache Smalltalk ein<br />

‣ Model-View-Controller-Architektur<br />

‣ View im Server, Browser ist nur…<br />

▪ Darstellungsmedium (HTML-Leinwand)<br />

▪ Informant für die View (‚Benutzer klickte da hin‘)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

63


TRANSPILIERTE SPRACHEN<br />

MOTIVATIONSBEISPIEL<br />

Bachelor-Arbeit KerMod Web (2009)<br />

‣ webbasiertes Werkzeug zur Unterstützung der Moderation<br />

von Arbeit in Gruppen<br />

‣ Setzt serverseitig die Programmiersprache Smalltalk ein<br />

‣ Model-View-Controller-Architektur<br />

‣ View im Server, Browser ist nur…<br />

▪ Darstellungsmedium (HTML-Leinwand)<br />

▪ Informant für die View (‚Benutzer klickte da hin‘)<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

64


TRANSPILIERTE SPRACHEN<br />

MOTIVATIONSBEISPIEL<br />

Bachelorarbeit KerMod Web (2009)<br />

‣ Server hält für jeden Anwender gesamte Applikation bereit<br />

▪ Belastung (100 Requests/sec) :[<br />

▪ Client ist ‚dumm‘<br />

‣ Besser<br />

▪ Verzögerung<br />

▪ wenig elegant<br />

▪ Anwendung in jedem Client<br />

▪ nur Speicherung und Synchronisierung über Server<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

65


TRANSPILIERTE SPRACHEN<br />

MOTIVATIONSBEISPIEL<br />

Masterarbeit Collabri (2012)<br />

‣ Besser<br />

▪ Anwendung in jedem Client<br />

▪ nur Speicherung und Synchronisierung über Server<br />

‣ Problem<br />

▪ Client kann nur in JavaScript programmiert werden<br />

▪ Ich möchte auch für den Client in Smalltalk entwickeln<br />

‣ Abhilfe: Transpilierung von Smalltalk nach JavaScript<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

66


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Script-Sprache<br />

‣ Quelltext wird von ausführendem System verarbeitet<br />

‣ ausführendes System JS-Engine<br />

▪ Interpretierung<br />

▪ Bytecode-Compilierung & Interpretierung<br />

▪ Just-In-Time Compilierung zu Maschinencode<br />

‣ Geschwindigkeit von<br />

▪ Interpreter < Bytecode-Interpreter < JIT < nativem Programm<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

67


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Script-Sprache<br />

‣ Native Compilierung<br />

Quellsprache<br />

.js<br />

JavaScript<br />

Compiler<br />

Frontend<br />

JavaScript-Engine<br />

Zwischensprache<br />

Frontend Interpreter<br />

JavaScript-Engine<br />

Backend<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Zielsprache<br />

08. JUNI 2012<br />

68


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Script-Sprache<br />

‣ Interpretierung<br />

Quellsprache<br />

.js<br />

JavaScript<br />

.js<br />

JavaScript<br />

Compiler<br />

Frontend<br />

JavaScript-Engine<br />

Zwischensprache<br />

Frontend Interpreter<br />

JavaScript-Engine<br />

Frontend<br />

JavaScript-Engine<br />

Bytecode<br />

Backend<br />

Interpreter<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

Zielsprache<br />

Zielsprache<br />

08. JUNI 2012<br />

69


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Quellsprache<br />

JavaScript als Script-Sprache<br />

.js<br />

‣ Bytecode-Compilierung & Interpretierung<br />

JavaScript<br />

.js<br />

JavaScript<br />

.js<br />

JavaScript<br />

Compiler<br />

Frontend<br />

JavaScript-Engine<br />

Zwischensprache<br />

Frontend Interpreter<br />

JavaScript-Engine<br />

Frontend<br />

JavaScript-Engine<br />

Frontend<br />

Bytecode<br />

Bytecode<br />

Backend<br />

Interpreter<br />

Interpreter<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

JIT<br />

Zielsprache<br />

Zielsprache<br />

08. JUNI 2012<br />

70


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

Quellsprache Zwischensprache Zielsprache<br />

.js<br />

JavaScript<br />

JavaScript als Script-Sprache<br />

.js<br />

‣ Just-In-Time-Compilierung<br />

JavaScript<br />

.js<br />

JavaScript<br />

.js<br />

JavaScript-Engine<br />

Frontend Interpreter<br />

JavaScript-Engine<br />

Frontend<br />

JavaScript-Engine<br />

Frontend<br />

JavaScript-Engine<br />

Frontend<br />

Bytecode<br />

Bytecode<br />

Assembler<br />

Interpreter<br />

Interpreter<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

JIT<br />

Zielsprache<br />

Maschinencode<br />

08. JUNI 2012<br />

71


TRANSPILIERTE SPRACHEN<br />

JAVASCRIPT ALS COMPILERZIEL<br />

JavaScript als Prototypen-basierte Sprache<br />

‣ Vererbungs-Algorithmus<br />

▪ Wenn ein Attribut bei einem Objekt nicht vorhanden ist<br />

MASTERARBEITSABSCHLUSSVORTRAG JÉRÔME AGATER<br />

08. JUNI 2012<br />

▪ sucht das Laufzeitsystem beim Prototypen des Objekts nach dem Attribut<br />

▪ dann beim Prototypen des Prototypen usw.<br />

▪ bis die Methode gefunden wurde oder das Wurzel-Objekt Object.prototype<br />

erreicht wurde<br />

▪ andernfalls ist das Resultat der Wert ‚undenied‘<br />

72

Hurra! Ihre Datei wurde hochgeladen und ist bereit für die Veröffentlichung.

Erfolgreich gespeichert!

Leider ist etwas schief gelaufen!