Vorstellung e.solutions

Transkript

1 Vorstellung e.solutions JavaScript, TDD und Code-Katas 1 Copyright e.solutions 5/3/2017

2 e.solutions

3 Das Joint Venture von Audi und Elektrobit

4 Bereiche bei e.solutions

5 Bereiche bei e.solutions Erlangen (HMI) Ulm Cluster Instrument (FPK) Infotainment (MIBH) Erlangen (HMI), Ingolstadt (Integration) Rear Seat (SDIS)

6 Audi TT: Audi Virtual Cockpit Classic Skin Cluster View ( Kleine Bühne ) Classic Skin - Infotainment View ( Große Bühne ) Audi Virtual Cockpit (FPK1, MIBH2) Hi-quality graphics experience, dynamic and user-configurable Sport Skin (TTS)

7 Audi Q7/A4: Infotainment, Cluster, Rear Seat Audi Virtual Cockpit (FPK1) Audi MMI (MIBH2) Audi Tablet

8 Porsche Panamera Copyright e.solutions 5/3/2017 8

9 Webtechnologien und AngularJS - Webseiten basteln? Nicht Webseiten-Basteln, sondern Premium-Infotainment 60 fps : Performance sehr wichtig Wie funktioniert der Browser und die Rendering-Pipeline? Unit-Tests, Integrations-Tests, End-To-End-Tests State-Of-The-Art der Webentwicklung für Embedded -Entwicklung nutzen Wir sind keine Web-Bude ;-)

10 JavaScript Das ist doch keine Programmiersprache für richtige Entwickler(innen)!

11 JavaScript: The good, the bad, the ugly 1+2=2+1, also [] + [] =??? [] + {} =??? {} + [] =??? {} + {} =??? []+(-~{}-~{}-~{}-~{})+(-~{}-~{}) =???

12 Bausteine von JavaScript Funktionen Funktionen als Sprachkonstrukte erster Klasse: Parameter, Rückgabewerte, Funktionen definieren einen eigenen Scope function hello() { console.log( hello ); } hello(); function callfunction(f) { f(); } callfunction(hello); function returnhello() { return hello; } returnhello()();

13 Bausteine von JavaScript Objekte Objekte als Map / Sammlung von Name-Wert-Paaren Funktionen sind mögliche Werte x = { a: "hello", b: [1,2,3], f: function() { console.log("f"); } } x.a = "hallo"; console.log(x.b); x.f();

14 JavaScript Funktionale Programmierung Funktionen statt Objekte/Daten im Vordergrund (kein globaler Zustand) Funktionen als Sprachkonstrukte erster Ordnung, Kombination und Verkettung von Funktionen Funktionale Programmierung hat eine Renaissance erlebt mit der Verbreitung von JavaScript, funktionale Aspekte in Java 8 (Lambda) JavaScript ist keine reine funktionale Sprache

15 JavaScript Funktionale Programmierung Map, Reduce, Filter arr = [1,2,3]; arr.map(x => x*x); arr.filter(x => x%2==0); arr.reduce((x, y) => x+y); oder alle zusammen arr.map( ).reduce( ).filter( ) Weiterer Ausbau: RxJS

16 JavaScript Objektorientierte Programmierung Für OOP benötigt man Objekt-Definitionen In JavaScript dynamische Typisierung Alter Weg: Prototypen übernehmen Rolle der Objektdefinition, können aber zur Laufzeit angepaßt werden Neuer Weg: Ab JavaScript ES6 sind normale Klassendefinitionen möglich Echte Typisierung mit TypeScript

17 JavaScript - OOP Prototypen Prototypen entsprechen einer Klassendefinition function Dummy(v) { this.value = v; this.print = function() { console.log("print: "+this.value); } } new Dummy("hello").print(); Dummy.prototype.printer = function() { console.log("printer: "+this.value); } new Dummy("hello").printer(); Copyright e.solutions 5/3/

18 JavaScript OOP Die neue Welt mit ES6 Naja, das kennt man ja class, constructor, class DummyES6 { constructor(v) { this.value = v; } print() { console.log(this.value); } } new DummyES6("hello").print(); Copyright e.solutions 5/3/

19 JavaScript OOP Richtige Typisierung mit TypeScript Was ergänzt TypeScript? U.a. Typen: var num:number = 15; var name:string = 123 ; function bla(arg1:string) { } Klassen Generics TypeScript-Compiler Übersetzung von TS in JS Wird von Toolchain automatisch erledigt Map-Datei zum Debugging

20 Test-Driven Development

21 TDD Was ist es? Idee: Tests zuerst schreiben Tests aus Requirements ableiten, Code danach schreiben Warum? Code deckt genau das ab, was man braucht Erfassung der Requirements Code ist optimal auf Unit-Test ausgerichtet Bessere Code-Struktur

22 TDD in der Praxis Aber in der Praxis? Für viele Features schwierig anzuwenden, z.b. Komponenten, die stark vernetzt sind Nebenläufigkeit/Queues Gut für abgeschlossene Funktions-Komponenten

23 Code-Katas

24 Code-Katas Kleine, abgeschlossene Übungen Begriff aus der japanischen Kampfkunst: häufige Wiederholung fürs Lernen eine Fähigkeit Bei uns: Vergleich und Diskussion der Lösungen

25 JS-Code-Katas mit Codewars kata/fibonacci-number/ train/javascript Copyright e.solutions 5/3/

26 Beispiel: JavaScript-Kata mit TDD - Fibonacci

27 und noch eine Aufgabe! Maximum Subarray Sum Copyright e.solutions 5/3/

28 Noch Fragen? Matthias Bezold 28 Copyright e.solutions 5/3/2017