1.
Lars Kölpin - open knowledge GmbH
@LarsKoelpin @_openknowledge #wissenteilen
@LarsKoelpin
Modern Web

2.
“Any application that can be written
in JavaScript, will eventually be
written in JavaScript”
Jeff Atwood (2007)

3.
1990 20202005
Nativ

4.
1990 20202005
Nativ
Websites

5.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails

6.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
jQuery
JSF 2.0
AngularJS

7.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
jQuery
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0

8.
Klassische Webapplikation
• Anzeigen der UI • Speichern der Daten
• Validieren der Daten
• Rendern der Daten
• Transformieren von Daten
• Kommunikation von Clients
• Sichern von Geschäftslogik
$$$

9.
Client an die Macht??
• Anzeigen der UI
• (zentrales) Speichern der Daten
• Validieren der Daten
• Rendern der Daten
• Berechnen von Daten
• Kommunikation von Clients
• (Speichern der Daten)
• (Kommunikation von Clients)
• Sichern von Geschäftslogik

10.
Der Browser als das neue Backend?

11.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
2019

12.
A core use-case for WebAssembly is to take the
existing ecosystem of C libraries and allow
developers to use them on the web.

13.
info("1")
fetch("/users", log("2")
info("3")
info("1")
"1"
INSTRUCTIONS STACK BROWSER
CONSOLE

14.
fetch("/users", log("2"))
info("3")
"1"
INSTRUCTIONS STACK BROWSER
CONSOLE
fetch("/users", log("2")
fetch("/users", log("2"))

15.
info("3")
"1"
INSTRUCTIONS STACK BROWSER
CONSOLE
fetch("/users", log("2"))
info("3")
"3"

16.
"1"
INSTRUCTIONS STACK BROWSER
CONSOLE
fetch("/users", log("2"))
"3"
log("2")
fetch("/users", log("2"))
"2"

17.
while(true) {
console.log("ABC")
}

18.
Titel der Präsentation | Name des Sprechers

19.
STACK
CONSOLE
fetch("/users", log("2"))
longRunningProcess("3")

20.
STACK
CONSOLE
fetch("/users", log("2"))
longRunningProcess("3")

21.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
20192010
WebWorker

22.
Web Workers makes it possible to run a script operation in a background thread separate
from the main execution thread of a web application. The advantage of this is that
laborious processing can be performed in a separate thread, allowing the main (usually the
UI) thread to run without being blocked/slowed down.

23.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
20192010
WebWorker
ServiceWorker
2015

24.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
20192010
WebWorker
ServiceWorker
2015
IndexedDB

25.
IndexedDB is a low-level API for client-side storage of
significant amounts of structured data, including
files/blobs.... This API uses indexes to enable high-
performance searches of this data. While WebStorage is useful
for storing smaller amounts of data, it is less useful for
storing larger amounts of structured data. IndexedDB provides
a solution. This is the main landing page for MDN's IndexedDB
coverage — here we provide links to the full API reference and
usage guides, browser support details, and some explanation of
key concepts.

26.
1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails
ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
20192010
WebWorker
ServiceWorker
2015
IndexedDB
WebRTC
2011

27.
Ich will mit Renke
reden:
Ich bin: Lars
Lars?
Klar, ich bin: Renke

28.
Du kannst Renke hier
erreichen:
Renke

29.
1990 20202005
Nativ
Websites
(Flash)
JSF 1.0
Ruby On Rails
Java Applets ReactJS
Angular 2
VueJSAngularJS
JSF 2.0
WebAssembly
20192010
WebWorker
ServiceWorker
2015
IndexedDB
WebRTC

30.
“Any application that can be written in
JavaScript, will eventually be written in
JavaScript”