Embed Size (px)
Citation preview
JavaScript von Morgenschon heute
AusgangssituationSetupFeatures
Philipp BurgmerSoftware-Entwickler, TrainerFokus: Frontend, [email protected]
w11k GmbHSoftware Design, Entwicklung & WartungConsulting, Schulungen & Projekt KickoffWeb Anwendungen mit AngularJSNative Rich Clients mit Eclipse RCP
ÜBER MICH
3
Standard seit 2009Kompabilität
Aktuelle Browser 100%IE8 11% ohne PolyfillIE9 97% (nur kein strict-Mode)Node 100%io.JS 100%
Quellen:ES5 Compat Table
AUSGANGSSITUATIONECMASCRIPT 5
4
Standard wird Juni 2015 verabschiededAktuelle Implementierungen gegen EntwurfKompabilität
IE10 4%Chrome 43 41%Firefox 38 60%Edge 63%Node 19%io.JS 39%
Quellen:ES6 Compat Table
AUSGANGSSITUATIONECMASCRIPT 6
5
Ferne Zukunft? Auch ES 2016 genannt!Entwürfe und VorschlägeInteressante neue Features
Pattern MatchingTraitsGuards und TrademarksObject.observe
AUSGANGSSITUATIONECMASCRIPT 7
6
Alte Umgebungen / BrowserIE8 immer noch relevantIE9 wird uns noch Jahre begleiten (derzeit > IE10 [1])Node 0.10?
Nicht alle Engines implementieren alles gleichVerschiedene Versionen von Proposals und Drafts
Quellen:[1] https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
PROBLEME
7
Neu in Standard-Biblothek (Promises, Maps, Sets, ...)Syntactic Sugar (Klassen, Module, ...)Erweiterungen der Sprache und Engine
Typed ArraysProxiesErben von vordefinierten Konstruktor-Funktionen...
NEUE FEATURES IN ES
8
Rüsten fehlende Teile der Standard-Biblothek nach
es-shimses5-shim (44%)es6-shim (17%)es7-shim (33%)
core-js (48% von ES6)Modular compact standard library for JavaScriptShims für ES5, ES6 und ES7 proposalsdictionaries, extended partial application,console cap, date formatting
...
Quellen:ES Compat Tablecore-js (ohne Babel) Wert über eigene Erweiterung von ES6 Compat Table
SHIMS / POLYFILLS
9
Übersetzen Syntactic Sugar von ES6 in ES5 CodeBringen meist Polyfills gleich mit
Google TraceurBabel (früher 6to5)Microsoft TypeScript
TRANSPILER
10
Optionale Typen, GenericsClasses, Interfaces, ModulesMixins
Viele nicht ES6 FeaturesInteroperabel da Superset von ES5Bewegt sich mit 1.5 und 1.6 mehr zu ES6Für neues Projekt sehr zu empfehlenMigration teilweise schwierig
Nicht jeder ES5 Code ist gültiger TypeScript Code (Type Inference)Aber jeder ES5 Code kann in TypeScript eingebunden werden(separate Datei mit Typ-Deklarationen notwendig)
TypeScript
11
SETUP
Optional!Läd Abhängigkeiten von externen Quellen
Für Entwicklung auf lokalen RechnerFür Betrieb auf Server
Verwaltet Versionsnummern und KonflikteBower, NPM, JSPM, ...
SETUPPACKAGE MANAGER
13
Optional!Läuft im Browser/ClientLäd benötigten Code vom Server in den ClientNicht Teil von ES6, extra Standard/Entwurf [1]RequireJS, Browserify, SystemJS, WebPack, ...Bundling nicht vergessen
Quellen:[1] ES6-Module-Loader Polyfill
SETUPMODULE LOADER
14
Optional!Übersetzt ES6 in ES5Dynamisch im Client, on demandKann in Module-Loader integriert werdenStatisch im Build-Prozess
SETUPTRANSPILER
15
SETUPDEMO
ES6 FEATURESUND WIE SIE UNSER LEBEN VEREINFACHEN
Besserer Umgang mit AsynchronitätCallback-Hell vermeidenWeit verbreitet als Biblotheken
"Pyramid of Doom"
Flache Struktur mit Promises
PROMISES
step1(function (value1) {1
step2(value1, function(value2) {2
step3(value2, function(value3) {3
// Do something with value34
});5
});6
});7
promisedStep1()1
.then(promisedStep2)2
.then(promisedStep3)3
.then(function (value3) {4
// Do something with value35
})6
18
Weit verbreitete Biblothek (z.B. in AngularJS)Andere API als ES6 Promises: Promise & DeferredIn AngularJS 1.3 $q als Factory-Funktion, ähnlich wie ES6
Deferred API of Q
Factory API of $q in AngularJS
PROMISESKRIS KOWAL'S Q
function asyncFunc() {1
var deferred = Q.defer();2
setTimeout(function () {3
deferred.resolve('result'); // or deferred.reject('error');4
}, 500);5
6
return deferred.promise;7
}8
function asyncFunc() {1
return $q(function(resolve, reject) {2
$timeout(function () { resolve(); /* or reject(); */ }, 500);3
}4
19
Keine Biblothek notwendig, Teil der Standard-BibliothekVordefinierter Konstruktor
PROMISESES6
function asyncFunc() {1
return new Promise(function(resolve, reject) {2
setTimeout(function () {3
resolve(); // or reject();4
}, 500);5
}6
20
In ES5 kein native Modul-System, daher AMD und CommonJSIn ES6 natives Modul-System (Beste aus beiden)
Dynamisches, on demand Laden von CodeScope für Variablen, keine globalen Variablen mehrEin Modul pro Datei, eine Datei pro ModulStruktur auf Datei EbeneAbhängigkeiten zwischen Dateien/Modulen im Code
Modul mit Import und Named-Export
MODULE
import $ from 'jquery';1
import 'another-lib';2
3
export class Point {}4
21
Verschieden Module Systeme, da bisher kein StandardViele Module-Loader (RequireJS, Browserify, SystemJS, Webpack, ...)Nicht jede Bibliothek für jedes Modul-System vorhandenViele Bibliotheken noch nicht als ES6 verfügbar
PROBLEMEMIT MODULEN
22
AngularJS 1.x hat eigenes Modul-SystemHat praktisch keinen Mehrwert (mehr) [1]Wird man nicht los, zumindest nicht ganzZwei Möglichkeiten
Modul-System über Modul-SystemAngularJS Module-System weitestgehend ignorieren
Infos:[1] This AngularJS modules/dependencies thing is a lie
MODULEUND ANGULARJS
23
ES6 Modul-System über AngularJS Module-System
Quellen:gocardless/es6-angularjs
MODULEUND ANGULARJS
import angular from 'angular';1
import 'angular-ui-router';2
3
import {homeIndexModule} from './index/home-index';4
import {authRequiredModule} from 'app/routes/auth-required';5
6
export var homeModule = angular.module('app.route.home', [7
'ui.router',8
authRequiredModule.name,9
homeIndexModule.name10
]);11
homeModule.config(function homeRoute($stateProvider) {12
$stateProvider.state('app.auth-required.home', {13
abstract: true,14
template: '<ui-view></ui-view>'15
});16
}17
);18
24
ES6 Modul-System statt AngularJS Module-System
MODULEUND ANGULARJS
import angular from 'angular';1
import 'angular-ui-router';2
3
import './index/home-index';4
import 'app/routes/auth-required';5
6
var appModule = angular.module('app');7
appModule.config(function homeRoute($stateProvider) {8
$stateProvider.state('app.auth-required.home', {9
abstract: true,10
template: '<ui-view></ui-view>'11
});12
}13
);14
25
Andere Schreibweise für existierende FunktionalitätKann fast vollständig in ES5 übersetzt werdenVererbung per Transpiler nicht zu 100% möglich
Klasse in ES6
Klasse übersetzt in ES5
KLASSEN
class Point {1
constructor(x, y) { this.x = x; this.y = y; }2
toString() { return `(${this.x}, ${this.y})`; }3
}4
var Point = (function () {1
function Point(x, y) { this.x = x; this.y = y; }2
Point.prototype.toString = function () {3
return "(" + this.x + ", " + this.y + ")";4
};5
return Point;6
})();7
26
Services in AngularJS: allgemeine Objekte, die Funktionalität kapselnWerden vom Framework instanziiert und verwaltet
Module#service mit Konstruktor-Funktion
Module#factory mit Factory-Funktion
SERVICES IN ANGULARJSOHNE KLASSEN
angular.module("myModule").service("myService", function ($http) {1
this.doSomething = function () { };2
});3
// service = new myService();4
angular.module("myModule").factory("myService", function ($http) {1
var service = {}; // var service = function () {};2
service.doSomething = function () { };3
return service;4
});5
// service = myService();6
27
Service in AngularJS mit ES6 Klasse
SERVICES IN ANGULARJSMIT KLASSEN
var http = Symbol();1
class MyService {2
3
constructor($http) {4
this[http] = $http; // pseudo private5
}6
7
doSomething() {}8
}9
MyService.$inject = ["$http"];10
angular.module("myModule").service("myService", MyService);11
28
Kurzschreibweise für Funktionen(param) => { statement; } statt function (param) { statement; }Aber: kein eigener lexikalischer Kontext, this vom äußeren Kontext
Funktion mit gleichem Kontext
ARROW FUNCTIONS
class Person {1
constructor(name, friends) { this.name = name; this.friends = friends; }2
printFriends() {3
this.friends.forEach(friend =>4
console.log(this.name + " knows " + friend));5
}6
}7
29
Promise HandlerEvent Handler
Funktion mit gleichem Kontext
ARROW FUNCTIONSANWENDUNGSFÄLLE
function TestCtrl ($rootScope, DataService) {1
// no more var that = this;2
this.data = []; this.lastEvent = undefined;3
DataService.get().then(data => { this.data = data; });4
$rootScope.$on('eventName', event => { this.lastEvent = event.name});5
}6
angular.module('myModule').controller('TestCtrl', TestCtrl)7
30
Exploring ES6 von Axel RauschmayerDeploying ES6 und Using ES6 todayES6 Featues (kurz und bündig)
NOCH MEHR DAZU ...
31
