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 28
Copyright e.solutions 5/3/2017
