Vorstellung e.solutions

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

e.solutions

Das Joint Venture von Audi und Elektrobit

Bereiche bei e.solutions

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

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)

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

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

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 ;-)

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

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

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()();

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();

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

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 https://github.com/reactive-extensions/rxjs

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

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/2017 17

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/2017 18

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

Test-Driven Development

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

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

Code-Katas

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 03.05.2017 24

JS-Code-Katas mit Codewars https://www.codewars.com/ kata/fibonacci-number/ train/javascript Copyright e.solutions 5/3/2017 25

Beispiel: JavaScript-Kata mit TDD - Fibonacci

und noch eine Aufgabe! Maximum Subarray Sum https://www.codewars.com/kata/maximum-subarraysum/train/javascript Copyright e.solutions 5/3/2017 27

Noch Fragen? https://www.esolutions.de/ Matthias Bezold <matthias.bezold@esolutions.de> 28 Copyright e.solutions 5/3/2017