1. Ab mit dem Kopf!
Moderne Infrastruktur für skalierbare Webentwicklung

2. Web|mas|ter

3. Web|mas|ter befassen sich mit der
Planung, grafischen Gestaltung,
Entwicklung, Wartung, Vermarktung
und Administration
Web|mas|ter

4. Web|mas|ter befassen sich mit der
Planung, grafischen Gestaltung,
Entwicklung, Wartung, Vermarktung
und Administration von Websites und -
anwendungen im Internet oder im
Intranet einer Organisation
Web|mas|ter

5. Web|mas|ter befassen sich mit der
Planung, grafischen Gestaltung,
Entwicklung, Wartung, Vermarktung
und Administration von Websites und -
anwendungen im Internet oder im
Intranet einer Organisation ja geh leck!
Web|mas|ter

6. Rate den Technologie-Stack!

7. Eine Übersichtskarte von
Autobahn-Schlafmöglichkeiten
für Fernfahrer. Die Karte zeigt
die nächstgelegenen Stellen und
deren Verfügbarkeit an. Man
kann reservieren und vor Ort den
Status auf “in Verwendung”
ändern.
Typo 3

8. Ein Foodie-Facebook. Mehrere
1000 Mitglieder erstellen
Rezepte, liken und sharen und
können Rezepte in ihren
persönlichen Wochenplan mit
aufnehmen. Coaches
kommentieren und geben Tipps
Wordpress

9. Ein Kino-Netzwerk erlaubt Filme
zu beliebigen Zeiten in beliebigen
Kinos in beliebigen Sälen zu
buchen und Freunde dazu
einzuladen.
Eine Enterprise Java
Applikation

10. Ein Kino-Netzwerk erlaubt Filme
zu beliebigen Zeiten in beliebigen
Kinos in beliebigen Sälen zu
buchen und Freunde dazu
einzuladen.
Eine Enterprise Java Applikation publiziert im 2
Stunden Takt 20 JSON Files und 7 PHP Skripte.
Das PHP kommuniziert synchron mit dem
Kassensystem über ungesichertes HTTP

11. Aber auch im “Normalfall”

13. Die Werkzeuge unseres
Handwerks

14. Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit

15. Technology Lock-In

16. Front-End

17. Templating languages

18. Static site generators

21. Hosting

25. Skaliert bestens, schnell, super sicher
Sehr gut deploybar: CDNs, Dropbox Ordner
Nur HTML, nichts weiteres
Quellen: Markdown, JSON, APIs…
+

26. Manche SSG flexibler, andere weniger
Nicht so gut mit Binärdateien
Dauer wächst mit Größe des Inhalts
Braucht einen Build Prozess
-

27. Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit

28. Content

33. Das funktioniert doch nie für
Normalverbraucher!

34. LOGO
LOGO
Blocks
Header
Hero
Grid
CTA
Slides
Footer
Content Management

35. LOGO
LOGO
Blocks
Header
Hero
Grid
CTA
Slides
Footer

36. LOGO
LOGO
Hero
Headline
Subheadline
Background Image
Upload

37. LOGO
Hero
Headline
Subheadline
Background Image
Upload

38. LOGO
Hero
Headline
Subheadline
Background Image
Upload
This is the concept of Storyblok
is going to also works great for your
idea
…/assets/images/your_logo_or_bg.png

39. LOGO
Hero
Headline
Subheadline
Background Image
Upload
This is the concept of Storyblok
is going to also works great for your
idea
…/assets/images/your_logo_or_bg.png

40. LOGO
<h1> This is the concept of Storyblok </h1>
<h2> is going to also works great for your idea</h2>
<img src=“../assets/images/your_logo_or_bg.png“>
Hero
Headline
Subheadline
Background Image
Upload
This is the concept of Storyblok
is going to also works great for your
idea
…/assets/images/your_logo_or_bg.png

41. {
"story": {
"name": "home"
"path": "/"
"content": [
...
{
"component": "hero",
"headline": "This is the concept of Storyblok",
"subheadline": "It would also work for your idea",
"background_image": „../assets/images/your_logo_or_bg.png“
}
...
]
}
}
Hero
Headline
Subheadline
Background Image
Upload
This is the concept of Storyblok
is going to also works great for your
idea
…/assets/images/your_logo_or_bg.png
<h1> This is the concept
<h2> is going to also wor
<img src=“../assets/image

42. CMS Status bestimmt nicht Seitenstatus
Für kleine Projekte günstige/gratis Pläne
100% unabhängig vom Output
CMS, nicht Content Design System
+

43. Exit-Strategie für den Content?
Bei großer Nutzerzahl nicht ganz billig
Kaum gute Open Source Alternativen
Git as a CMS -> Sounds good, doesn’t work
-

44. Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit

45. Applikation

46. Serverless

47. Serverless heißt nicht, dass es
keine Server gibt, sondern dass
man sich nicht um Server
kümmert.
Denke an “Functions as a
Service”

49. Accept: application/json

50. Accept: text/html

53. 30%
70%
3rd Party + Microservices

54. Integration mit 3rd Party Services einfach
Definierter Input und Output
Überschaubare Angriffsfläche
Pay what you need
+

55. Mehr Schnittstellen, mehr Kontrakte
Was ist wenn State doch nett wäre?
Plattformunabhängigkeit?
Serverless Architekturen sind schwierig
-

56. Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände, …
Hosting: Verfügbarkeit, Stabilität, Sicherheit

57. Summasumarum

58. Jedes Gewerk darf sich austoben!
Inkrementelles Voranschreiten
Dadurch auch ausfallsicherer, nachhaltiger!
Jeder Baustein ist unabhängig voneinander
+

59. Man braucht Ausfallstrategien
This is 3rd party land!
Teilweise sehr plattform-spezifisch
Viele Technologien —> Fragmentierung
-

60. Anbieter

61. thepowerofserverless.info

62. @ddprrt
fettblog.eu · scriptconf.org
@deadparrot@mastodon.social · devone.at