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: hero.wanders@w3l.de