Die Welt rund um das Frontend befindet sich im ständigen Wandel. Die Leistung der Computer der Konsumentinnen und Konsumenten und auch deren Erwartungen an Software steigen. Während die Server von Webdiensten früher lediglich ein wenig HTML erzeugen mussten, liegt die Logik heutzutage deshalb immer mehr auf dem Client, um eine optimale User Experience sicherzustellen – und das bringt Herausforderungen mit. Im Talk schauten wir uns einige Trends der Webentwicklung an und analysierten die Probleme, die durch das Aufrüsten der Browser durch Google und Co. gelöst werden.

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

6. 1990 20202005
Nativ
Websites
JSF 1.0
Ruby On Rails

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

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

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

13. 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

14. Der Browser als das neue Backend?

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

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

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

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

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

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

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

24. Titel der Präsentation | Name des Sprechers

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

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

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

28. 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.

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

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

34. 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.

35. 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

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

37. Du kannst Renke hier
erreichen:
Renke

38. 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

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