SlideShare ist ein Scribd-Unternehmen logo

EnterJS 2015 - JavaScript von Morgen schon heute

Präsentation zu meinem Vortrag bei der EnterJS 2015. ECMAScript 2015, der Standard, der als Grundlage für die Implementierung von JavaScript dient, nimmt immer konkretere Formen an. Viele Teile der Spezifikation sind so gut wie fertig, und neuere Browser setzen sie bis zu einem gewissen Grad bereits um. Dennoch kann man heute und auch in naher Zukunft noch keine Anwendung mit ES 2015 ausliefern, da es eben nicht alle relevanten Browser unterstützen. In diesem Vortrag erfahren Sie, wie sich heute schon mit Transpilern und Polyfills in ES 2015 entwickeln lässt und welche Vorteile das bietet. Anhand von Codebeispielen wird gezeigt, wie man proprietäre Lösungen wie RequireJS und Promises durch neue Standards ersetzen kann und seinen Code dadurch zukunftssicher macht.

1 von 32
Downloaden Sie, um offline zu lesen
JavaScript von Morgen
schon heute
Ausgangssituation
Setup
Features
Philipp Burgmer
Software-Entwickler, Trainer
Fokus: Frontend, Web-Technologien
burgmer@w11k.de
w11k GmbH
Software Design, Entwicklung & Wartung
Consulting, Schulungen & Projekt Kickoff
Web Anwendungen mit AngularJS
Native Rich Clients mit Eclipse RCP
ÜBER MICH
3
Standard seit 2009
Kompabilität
Aktuelle Browser 100%
IE8 11% ohne Polyfill
IE9 97% (nur kein strict-Mode)
Node 100%
io.JS 100%
Quellen:
ES5 Compat Table
AUSGANGSSITUATION
ECMASCRIPT 5
4
Standard wird Juni 2015 verabschieded
Aktuelle Implementierungen gegen Entwurf
Kompabilität
IE10 4%
Chrome 43 41%
Firefox 38 60%
Edge 63%
Node 19%
io.JS 39%
Quellen:
ES6 Compat Table
AUSGANGSSITUATION
ECMASCRIPT 6
5
Ferne Zukunft? Auch ES 2016 genannt!
Entwürfe und Vorschläge
Interessante neue Features
Pattern Matching
Traits
Guards und Trademarks
Object.observe
AUSGANGSSITUATION
ECMASCRIPT 7
6

Recomendados

May the forge be with you
May the forge be with youMay the forge be with you
May the forge be with youSandro Sonntag
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickPhilipp Burgmer
 
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"Aberla
 
Creasoft - Windows Azure
Creasoft - Windows AzureCreasoft - Windows Azure
Creasoft - Windows AzureCreasoft AG
 
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.David Jardin
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
Java EE 6/7 - Enterprise-Anwendungsentwicklung leicht gemacht
Java EE 6/7 - Enterprise-Anwendungsentwicklung leicht gemachtJava EE 6/7 - Enterprise-Anwendungsentwicklung leicht gemacht
Java EE 6/7 - Enterprise-Anwendungsentwicklung leicht gemachtgedoplan
 
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...Andreas Kunz
 

Más contenido relacionado

Was ist angesagt?

An Introduction to Ruby On Rails
An Introduction to Ruby On RailsAn Introduction to Ruby On Rails
An Introduction to Ruby On RailsJonathan Weiss
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Christian Janz
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenPhilipp Burgmer
 
Introduction to JEE
Introduction to JEEIntroduction to JEE
Introduction to JEEguestc44b7b
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Oliver Busse
 
Restful Frontend-Architecture
Restful Frontend-ArchitectureRestful Frontend-Architecture
Restful Frontend-ArchitectureSandro Sonntag
 
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...NETWAYS
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!Sandro Sonntag
 
Anwendung von Java Enterprise Edition (J2EE)
Anwendung von Java Enterprise Edition (J2EE)Anwendung von Java Enterprise Edition (J2EE)
Anwendung von Java Enterprise Edition (J2EE)Andreas Schreiber
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresMatthias Jauernig
 
Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft AG
 

Was ist angesagt? (12)

An Introduction to Ruby On Rails
An Introduction to Ruby On RailsAn Introduction to Ruby On Rails
An Introduction to Ruby On Rails
 
Chrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack UpdateChrome for Work | CLOUDPILOTS FastTrack Update
Chrome for Work | CLOUDPILOTS FastTrack Update
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
 
Introduction to JEE
Introduction to JEEIntroduction to JEE
Introduction to JEE
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"
 
Restful Frontend-Architecture
Restful Frontend-ArchitectureRestful Frontend-Architecture
Restful Frontend-Architecture
 
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...
OSDC 2013 | Enterprise open source virtualization with oVirt and RHEV by René...
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!
 
Anwendung von Java Enterprise Edition (J2EE)
Anwendung von Java Enterprise Edition (J2EE)Anwendung von Java Enterprise Edition (J2EE)
Anwendung von Java Enterprise Edition (J2EE)
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVC
 

Destacado

Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSPhilipp Burgmer
 
Web Applications with AngularJS
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJSPhilipp Burgmer
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)rahmaayuu
 
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Philipp Burgmer
 
Sintesi progetto d'impresa start ap21
Sintesi progetto d'impresa start ap21Sintesi progetto d'impresa start ap21
Sintesi progetto d'impresa start ap21Mirela Popa
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)rahmaayuu
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)rahmaayuu
 

Destacado (7)

Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
 
Web Applications with AngularJS
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJS
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)
 
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
 
Sintesi progetto d'impresa start ap21
Sintesi progetto d'impresa start ap21Sintesi progetto d'impresa start ap21
Sintesi progetto d'impresa start ap21
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)
 
Sejarah dance (tari modern)
Sejarah dance (tari modern)Sejarah dance (tari modern)
Sejarah dance (tari modern)
 

Ähnlich wie EnterJS 2015 - JavaScript von Morgen schon heute

Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerSandro Sonntag
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungEduard Hildebrandt
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScriptManfred Steyer
 
Icinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursSteven Grzbielok
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der PraxisTobias Kraft
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Niels de Bruijn
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1Manfred Steyer
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationGWAVA
 
Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Jürg Stuker
 
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013goobi_org
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Digicomp Academy AG
 
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...Peter Ramm
 

Ähnlich wie EnterJS 2015 - JavaScript von Morgen schon heute (20)

Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
Icinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga 2009 at Nagios Workshop
Icinga 2009 at Nagios Workshop
 
GWT
GWTGWT
GWT
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
Werkzeugkasten
WerkzeugkastenWerkzeugkasten
Werkzeugkasten
 
Webpack
WebpackWebpack
Webpack
 
Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Top 10 Internet Trends 2001
Top 10 Internet Trends 2001
 
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013
Leistungsvergleich Präsentationsoberflächen für digitale Sammlungen 2013
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
 

EnterJS 2015 - JavaScript von Morgen schon heute

  • 3. Philipp Burgmer Software-Entwickler, Trainer Fokus: Frontend, Web-Technologien burgmer@w11k.de w11k GmbH Software Design, Entwicklung & Wartung Consulting, Schulungen & Projekt Kickoff Web Anwendungen mit AngularJS Native Rich Clients mit Eclipse RCP ÜBER MICH 3
  • 4. Standard seit 2009 Kompabilität Aktuelle Browser 100% IE8 11% ohne Polyfill IE9 97% (nur kein strict-Mode) Node 100% io.JS 100% Quellen: ES5 Compat Table AUSGANGSSITUATION ECMASCRIPT 5 4
  • 5. Standard wird Juni 2015 verabschieded Aktuelle Implementierungen gegen Entwurf Kompabilität IE10 4% Chrome 43 41% Firefox 38 60% Edge 63% Node 19% io.JS 39% Quellen: ES6 Compat Table AUSGANGSSITUATION ECMASCRIPT 6 5
  • 6. Ferne Zukunft? Auch ES 2016 genannt! Entwürfe und Vorschläge Interessante neue Features Pattern Matching Traits Guards und Trademarks Object.observe AUSGANGSSITUATION ECMASCRIPT 7 6
  • 7. Alte Umgebungen / Browser IE8 immer noch relevant IE9 wird uns noch Jahre begleiten (derzeit > IE10 [1]) Node 0.10? Nicht alle Engines implementieren alles gleich Verschiedene Versionen von Proposals und Drafts Quellen: [1] https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 PROBLEME 7
  • 8. Neu in Standard-Biblothek (Promises, Maps, Sets, ...) Syntactic Sugar (Klassen, Module, ...) Erweiterungen der Sprache und Engine Typed Arrays Proxies Erben von vordefinierten Konstruktor-Funktionen ... NEUE FEATURES IN ES 8
  • 9. Rüsten fehlende Teile der Standard-Biblothek nach es-shims es5-shim (44%) es6-shim (17%) es7-shim (33%) core-js (48% von ES6) Modular compact standard library for JavaScript Shims für ES5, ES6 und ES7 proposals dictionaries, extended partial application, console cap, date formatting ... Quellen: ES Compat Table core-js (ohne Babel) Wert über eigene Erweiterung von ES6 Compat Table SHIMS / POLYFILLS 9
  • 10. Übersetzen Syntactic Sugar von ES6 in ES5 Code Bringen meist Polyfills gleich mit Google Traceur Babel (früher 6to5) Microsoft TypeScript TRANSPILER 10
  • 11. Optionale Typen, Generics Classes, Interfaces, Modules Mixins Viele nicht ES6 Features Interoperabel da Superset von ES5 Bewegt sich mit 1.5 und 1.6 mehr zu ES6 Für neues Projekt sehr zu empfehlen Migration 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
  • 12. SETUP
  • 13. Optional! Läd Abhängigkeiten von externen Quellen Für Entwicklung auf lokalen Rechner Für Betrieb auf Server Verwaltet Versionsnummern und Konflikte Bower, NPM, JSPM, ... SETUP PACKAGE MANAGER 13
  • 14. Optional! Läuft im Browser/Client Läd benötigten Code vom Server in den Client Nicht Teil von ES6, extra Standard/Entwurf [1] RequireJS, Browserify, SystemJS, WebPack, ... Bundling nicht vergessen Quellen: [1] ES6-Module-Loader Polyfill SETUP MODULE LOADER 14
  • 15. Optional! Übersetzt ES6 in ES5 Dynamisch im Client, on demand Kann in Module-Loader integriert werden Statisch im Build-Prozess SETUP TRANSPILER 15
  • 17. ES6 FEATURES UND WIE SIE UNSER LEBEN VEREINFACHEN
  • 18. Besserer Umgang mit Asynchronität Callback-Hell vermeiden Weit 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
  • 19. Weit verbreitete Biblothek (z.B. in AngularJS) Andere API als ES6 Promises: Promise & Deferred In AngularJS 1.3 $q als Factory-Funktion, ähnlich wie ES6 Deferred API of Q Factory API of $q in AngularJS PROMISES KRIS 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
  • 20. Keine Biblothek notwendig, Teil der Standard-Bibliothek Vordefinierter Konstruktor PROMISES ES6 function asyncFunc() {1 return new Promise(function(resolve, reject) {2 setTimeout(function () {3 resolve(); // or reject();4 }, 500);5 }6 20
  • 21. In ES5 kein native Modul-System, daher AMD und CommonJS In ES6 natives Modul-System (Beste aus beiden) Dynamisches, on demand Laden von Code Scope für Variablen, keine globalen Variablen mehr Ein Modul pro Datei, eine Datei pro Modul Struktur auf Datei Ebene Abhä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
  • 22. Verschieden Module Systeme, da bisher kein Standard Viele Module-Loader (RequireJS, Browserify, SystemJS, Webpack, ...) Nicht jede Bibliothek für jedes Modul-System vorhanden Viele Bibliotheken noch nicht als ES6 verfügbar PROBLEME MIT MODULEN 22
  • 23. AngularJS 1.x hat eigenes Modul-System Hat praktisch keinen Mehrwert (mehr) [1] Wird man nicht los, zumindest nicht ganz Zwei Möglichkeiten Modul-System über Modul-System AngularJS Module-System weitestgehend ignorieren Infos: [1] This AngularJS modules/dependencies thing is a lie MODULE UND ANGULARJS 23
  • 24. ES6 Modul-System über AngularJS Module-System Quellen: gocardless/es6-angularjs MODULE UND 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
  • 25. ES6 Modul-System statt AngularJS Module-System MODULE UND 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
  • 26. Andere Schreibweise für existierende Funktionalität Kann fast vollständig in ES5 übersetzt werden Vererbung 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
  • 27. Services in AngularJS: allgemeine Objekte, die Funktionalität kapseln Werden vom Framework instanziiert und verwaltet Module#service mit Konstruktor-Funktion Module#factory mit Factory-Funktion SERVICES IN ANGULARJS OHNE 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
  • 28. Service in AngularJS mit ES6 Klasse SERVICES IN ANGULARJS MIT 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
  • 29. 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
  • 30. Promise Handler Event Handler Funktion mit gleichem Kontext ARROW FUNCTIONS ANWENDUNGSFÄ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
  • 31. Exploring ES6 von Axel Rauschmayer Deploying ES6 und Using ES6 today ES6 Featues (kurz und bündig) NOCH MEHR DAZU ... 31