10 Jahre JavaScript in 60+ Minuten
Entwicklung mit JavaScript
2
Vorwort (1)
In den letzten 10 Jahren ist viel im
JavaScript-Ökosystem geschehen
Dieser Vortrag soll einen Schnellüberblick geben
Die moderne Sprache JavaScript
Das heutige Tooling
Naturgemäß kann nur ein kleiner Teil der existierenden
Tools und ihrer Möglichkeiten gezeigt werden
React und Vue wurden ganz ausgelassen
Die Konfigurationsdateien sind vielfältig ausbaubar
3
Vorwort (2)
Damit die Präsentation nachträglich verstanden werden
kann, sind die Code-Beispiele mit Hilfedateien im
Markdown-Format angereichert:
_setup.md
Erklärung wie das Projekt entwickelt wurde
_interessantes.md
Fokus/Besonderheiten im jeweiligen Beispiel
4
Inhalt
Damals und heute
ECMAScript Theorie und Praxis
Die Toolchain
Pakete verwalten
Bauen
Testen
Automatisieren
Ausblick
5
Damals und heute
6
Es war einmal…
Browser-Krieg
Standard-Kompatibilität?
Bibliotheken im Netz suchen
So viele Globals…
Debugging – alert() console.log()
IDE-Unterstützung, wo bist du?
ಠ_ಠ
7
Bevor es los geht…
Was und für wen wird entwickelt?
Wie soll entwickelt werden?
Technologie-Entscheidung!
Für diesen Vortrag:
Konsole
Cmder
SCM Runtime IDE
8
Start the engine
REPL Lokale Engine Online
node <enter>
Browser-Konsole
node <file>
Browser
GraalVMJava:NashornV8.NET
…
JSFiddle
Plunker
CodePen
StackBlitz
9
Von 0 auf 100: Scaffolding
Große Frameworks bringen Generatoren mit
Angular npx @angular/cli new my-project
React npm init react-app
Vue.js npx @vue/cli create my-project
Separate Generatoren
gitignore.io
Yeoman
JHipster
Tutorials und Dokumentationen
Bestehende Projekte
10
11
ECMAScriptTheorie und Praxis
12
EC-Was?
Wer hat‘s erfunden?
Komitee TC-39: ECMAScript
Zahlreiche Organisationen Mitglied
Google, Microsoft, Mozilla, eBay, Intel, AMD, …
ECMA International auch verantwortlich für C#
Sprachstandard, der domänenspezifisch
implementiert wird
JavaScript
ActionScript
13
Von der Idee zum Standard
Vorschläge durchlaufen Stages
Browser implementieren Vorschläge
Strawman Proposal Draft Candidate Finished
Jahr Veröffentlichter Standard
1999 ES3
2009 ES5
2011 ES5.1
2015 ES2015 = ES6
2016 ES2016 = ES7
2017 ES2017 = ES8
2018 ES2018 = ES9
14
TypeScript (Microsoft)
Basis ist ES2015
Ergänzt die Sprache um ein statisches Typsystem
Veröffentlicht 2008
Version 0.8
Jährlich Updates
Aktuell Version 3.1
15
Transpiling
Übersetzt Code in andere Sprache
ES2018 ES2015
TypeScript ES2015
LESS CSS
SCSS/SASS CSS
Stellt Kompatibilität mit Engines her
Neue Sprachstandards schnell nutzen können
16
17
Standardaufgaben
Pakete verwaltenBauenTestenAutomatisieren
18
Lieferdienst für JavaScriptPaketverwaltung
Repository
Größte Paketbibliothek der Welt
Tool
Installation von Paketen
Upload eigener Pakete
Vergleichbar mit
Maven
NuGet
19
20
Bau mir ein Produkt: Build
1•Envification
2•Tree Shaking
3•Transpiling
4
•Bundling
•Code Splitting
5
•Obfuscation
•Minification
(für Anwendungen)
(für Libraries)
21
22
Haben wir nicht was vergessen?Testing
Tests sind Scripte, wie alle anderen auch
Jest, Jasmine Test-Verwaltung und
Mocha, Chai, Sinon Assertion und Mocking-Libs
describe(…) it(…) spyOn(…)
expect(…).not.toEqual(…)
Karma Führt Unit-/Integration-Tests aus
Protractor Führt E2E-Tests aus
Verwendet Selenium Webdriver, um Browser zu steuern
browser.get(…) element(by.css(…)).getText()
23
24
Lasst die Hunde los!Automatisierung
npm Scripts
Für einfache Aufrufe: npm run task
WebPack & Rollup
Nur Build mit Standardablauf
Reicht aber oft völlig aus!
Gulp
Orchestration von Tasks
Aufbau von Pipelines
Anbindung an viele Tools
25
26
Ausblick
27
Isomorphes JavaScriptSingle-Page-Applications noch schneller liefern
Client öffnet Seite
Server lässt APP 1x
statisches HTML rendern
Client lädt APP nach
und macht die Seite dynamisch
(hydrate)
Client Server
APP
1. volles HTML2. app.bundle.js
28
JHipster
Generator für einen
vollständigen Stack
Angular/React
Websockets
Spring Boot
DB-Migrationen: Liquibase
Caching (Ehcache,
Hazelcast, Infinispan, …)
Docker-Integration für
verschiedene Services
OAuth (Keycloak)
Service Discovery
Suche: ElasticSearch
SQL- und NoSQL-
Datenbanken
Message Streaming
Auf Basis von UML oder JDL
Entities
DTOs
Listen- und Detailansichten
Nur Standardtechniken
(außer JDL)
29
Vielen Dank!
Wanders, Hero
Software-Entwickler
Tel. +49 (231) 61 804 - 127
Mail: [email protected]