Warum ECMAScript 6 die Welt ein Stückchen besser macht

712 Aufrufe

Veröffentlicht am

Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
712
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Warum ECMAScript 6 die Welt ein Stückchen besser macht

  1. 1. Warum ES6 die Welt ein Stückchen besser macht Karin Jung / pixelio.de
  2. 2. WHO AM I? • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant, Trainer, Autor
  3. 3. ECMA-262 Spezifikation und ISO/IEC 16262. Ursprünglich 1995 als Mocha, LiveScript und schließlich JavaScript von Brendan Eich bei Netscape (in 10 Tagen) entwickelt.
  4. 4. So viel zur Geschichte Paul-Georg Meister / pixelio.de
  5. 5. ECMAScript 5
  6. 6. • Object-Erweiterungen (defineProperty) • Array-Erweiterungen (map, reduce) • JSON • Strict mode
  7. 7. Die größten Änderungen von ES5 waren die Erweiterung von Objekten und die Einführung des Strict Modes und JSON. Ansonsten handelt es sich eher um kleinere Anpassungen und Erweiterungen.
  8. 8. ECMAScript 5 wird mittlerweile von allen gängigen Browsern unterstützt.
  9. 9. ECMAScript 6 Jewgenia Stasiok / pixelio.de
  10. 10. Compat Table http://kangax.github.io/compat-table/es6/
  11. 11. Frage: S. Hofschlaeger / pixelio.de
  12. 12. Kann ich das jetzt schon verwenden?
  13. 13. Petra Bork / pixelio.de
  14. 14. Traceur $ git clone https://github.com/google/traceur-compiler. git $ cd traceur-compiler $ npm install $ make src/bootstrap.js bin/traceur.js <script src=“app.js” type=“module”></script>
  15. 15. Da ECMAScript 6 noch recht schlecht unterstützt wird, muss man sich anderweitig behelfen. Die Browser entwickeln sich rasant weiter und da macht es wenig Sinn anhand der Browserversion Features zu aktivieren. Die Tendenz geht hin zu Featuredetection und dem Einsatz von Polyfills.
  16. 16. Der Kern von ECMAScript 6 FotoHiero / pixelio.de
  17. 17. Kleine Helfer oder: Was wir uns schon immer gewünscht haben Gila Hanssen / pixelio.de
  18. 18. String • String.prototype.repeat • String.prototype.startsWith/endsWith • String.prototype.contains
  19. 19. Array • Array.prototype.find • Array.prototype.fill • Array.prototype.keys/entries => Array Iterator
  20. 20. Neue Features Die wirklich bewegenden Dinge Alexandra H. / pixelio.de
  21. 21. Default Parameters
  22. 22. TypeError: Cannot read property 'length' of undefined function add(input) { console.log(input.length); } add(); function add(input) { input = input || ''; console.log(input.length); } add();
  23. 23. function add(input = ‘’) { console.log(input.length); } add();
  24. 24. Default Parameters • Können überall stehen • Default wird benutzt, wenn undefined übergeben wird • Beliebige Werte (Primäre Datentypen, Objekte, Arrays, Funktionen) • arguments bleibt unverändert • Zur Laufzeit ausgewertet • Zugriff von späteren Defaults auf frühere • Kein Zugriff auf Funktionen, die in der Funktion definiert sind
  25. 25. Class Gerhard Prantl / pixelio.de
  26. 26. Das Objektmodell von JavaScript basiert auf Prototypen. Das war bis jetzt immer so und das wird auch so bleiben.
  27. 27. function User(name) { this.name = name; } User.prototype.getName = function() { return this.name; } var klaus = new User(‘Klaus’);
  28. 28. class User extends Person { constructor(name, pw) { super(name); this.pw = pw; } getPw() { return this.pw; } } var klaus = new User(‘Klaus’, ‘secret’);
  29. 29. Class • Einfache Art der Vererbung • Zugriff über super auf die Elternklasse • Maskierung des Prototyps
  30. 30. Block Scope lichtkunst.73 / pixelio.de
  31. 31. function doSomething() { var a; for (var i = 0; i < a.length; i++) { … } } a i
  32. 32. function doSomething() { var a; for (let i = 0; i < a.length; i++) { … } } a i
  33. 33. Block Scope • Neues Schlüsselwort let • Variable ist nur in einem bestimmten Block gültig • Bessere Kontrolle über Variablen innerhalb einer Funktion • var und let nicht zu sehr mischen -> unübersichtlich • Hoisting gilt innerhalb eines Blocks
  34. 34. Fat Arrow Functions Dieter Schütz / pixelio.de
  35. 35. var myObj = { clicked: false, init: function() { $(‘#mydiv’).on(‘click’, function() { this.clicked = true; }); } } this?
  36. 36. Fat Arrow Functions (args) => { … return result; } Fat Arrow
  37. 37. Fat Arrow Functions var myObj = { clicked: false, init: function() { document.addEventListener('click', () => { this.clicked = true; }); } }; myObj.init();
  38. 38. Fat Arrow Functions • Sind an den Kontext ihrer Erstellung gebunden • Können nicht mit dem new-Operator benutzt werden • This kann nicht geändert werden (bind, call, apply)
  39. 39. Map/Set w.r.wagner / pixelio.de
  40. 40. Maps Key-Value-Store in JavaScript. Alle möglichen Datentypen als Schlüssel und Werte. Iterierbar.
  41. 41. Maps size: Anzahl der Key-Value-Paare clear(): Leert die komplette Map. delete(key): Löscht ein Element. get(key): Liest ein Element aus. has(key): Prüft, ob der Schlüssel vorhanden ist. set(key, value): Setzt ein neues Key-Value-Paar.
  42. 42. Maps var map = new Map(); var nr = 1; var arr = [1,2,3]; var func = function() {} var obj = {name: 'Klaus'}; map.set(nr, 'number'); map.set(arr, 'array'); map.set(func, 'function'); map.set(obj, 'object');
  43. 43. Maps for (var [key, val] of map) { console.log(key, val); }
  44. 44. Sets Sets speichern eindeutige Werte in einer Datenstruktur. Möglichkeit zur Prüfung auf Vorhandensein. Auch iterierbar.
  45. 45. Sets size: Anzahl der Elemente clear(): Leert das Set. add(value): Fügt einen neuen Wert hinzu. delete(value): Entfernt einen Wert. has(value): Prüft, ob der Wert im Set vorhanden ist.
  46. 46. Sets var mySet = new Set(); mySet.add('Hello'); mySet.add({name: 'World'}); mySet.add(function() {});
  47. 47. Sets for (var el of mySet) { console.log(el); }
  48. 48. Generators Gerhard Frassa / pixelio.de
  49. 49. Generators Ein Generator ist eine fist-class coroutine, die einen angehaltenen Ausführungskontext repräsentiert.
  50. 50. Generators var gFunction = function*() { yield ‘Hello’; yield ‘World’; }
  51. 51. Generators var generator = gFunction(); var value = generator.next(); { value: ‘Hello’, done: false }
  52. 52. Generator Input var gFunction = function*() { var i i = yield 'first'; i = yield 'second' + i; yield 'third' + i; } var g = gFunction(); console.log(g.next()); console.log(g.next(1)); console.log(g.next(2));
  53. 53. Generators for (let i of generator) { console.log(i); }
  54. 54. Destructuring Rahel Szielis / pixelio.de
  55. 55. Destructuring Zuweisung von mehreren Elementen eines Arrays oder Objekts an Variablen in einer einzigen Operation.
  56. 56. Destructuring var first = myArr[0]; var second = myArr[1]; var third = myArr[2]; var [first, second, third] = myArr;
  57. 57. Destructuring • Auslassen von Elementen: var [,,bar] = [1,2,3]; • Multidimensionale Arrays: var [a, [b, c]] = [1, [2,3]]
  58. 58. Destructuring var {foo, bar} = {foo: ‘a’, bar: ‘b’}; var {foo: a, bar: b} = {foo: ‘a’, bar: ‘b’};
  59. 59. Modulsystem Marlies Schwarzin / pixelio.de
  60. 60. Modulsysteme in JavaScript Es gibt zwei große Modulsysteme: AMD und CommonJS. Sie laden Script-Dateien und modularisieren die Applikation.
  61. 61. Modules are not ready to use yet in Traceur, but they are partially implemented. – Google
  62. 62. ES6 Modulsystem var privateVariable = 'This is a private Value'; export var publicVariable = 'This is a public Value'; export function getPrivateVariable() { return privateVariable; }
  63. 63. ES6 Modulsystem import {publicVariable, getPrivateVariable} from 'module'; console.log(publicVariable); console.log(getPrivateVariable());
  64. 64. Viele weitere Features • Promises • Symbols • Typed Arrays • WeakSet/WeakMap • …
  65. 65. Fragen? Rainer Sturm / pixelio.de
  66. 66. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82

×