SlideShare ist ein Scribd-Unternehmen logo
1 von 62
Downloaden Sie, um offline zu lesen
Ab mit dem Kopf!
Moderne Infrastruktur für skalierbare Webentwicklung
Web|mas|ter
Web|mas|ter befassen sich mit der
Planung, grafischen Gestaltung,
Entwicklung, Wartung, Vermarktung
und Administration
Web|mas|ter
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
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
Rate den Technologie-Stack!
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
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
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
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
Aber auch im “Normalfall”
Die Werkzeuge unseres
Handwerks
Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit
Technology Lock-In
Front-End
Templating languages
Static site generators
Hosting
Skaliert bestens, schnell, super sicher
Sehr gut deploybar: CDNs, Dropbox Ordner
Nur HTML, nichts weiteres
Quellen: Markdown, JSON, APIs…
+
Manche SSG flexibler, andere weniger
Nicht so gut mit Binärdateien
Dauer wächst mit Größe des Inhalts
Braucht einen Build Prozess
-
Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit
Content
Das funktioniert doch nie für
Normalverbraucher!
LOGO
LOGO
Blocks
Header
Hero
Grid
CTA
Slides
Footer
Content Management
LOGO
LOGO
Blocks
Header
Hero
Grid
CTA
Slides
Footer
LOGO
LOGO
Hero
Headline
Subheadline
Background Image
Upload
LOGO
Hero
Headline
Subheadline
Background Image
Upload
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
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
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
{
"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
CMS Status bestimmt nicht Seitenstatus
Für kleine Projekte günstige/gratis Pläne
100% unabhängig vom Output
CMS, nicht Content Design System
+
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
-
Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Verfügbarkeit, Stabilität, Sicherheit
Applikation
Serverless
Serverless heißt nicht, dass es
keine Server gibt, sondern dass
man sich nicht um Server
kümmert.
Denke an “Functions as a
Service”
Accept: application/json
Accept: text/html
30%
70%
3rd Party + Microservices
Integration mit 3rd Party Services einfach
Definierter Input und Output
Überschaubare Angriffsfläche
Pay what you need
+
Mehr Schnittstellen, mehr Kontrakte
Was ist wenn State doch nett wäre?
Plattformunabhängigkeit?
Serverless Architekturen sind schwierig
-
Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände, …
Hosting: Verfügbarkeit, Stabilität, Sicherheit
Summasumarum
Jedes Gewerk darf sich austoben!
Inkrementelles Voranschreiten
Dadurch auch ausfallsicherer, nachhaltiger!
Jeder Baustein ist unabhängig voneinander
+
Man braucht Ausfallstrategien
This is 3rd party land!
Teilweise sehr plattform-spezifisch
Viele Technologien —> Fragmentierung
-
Anbieter
thepowerofserverless.info
@ddprrt
fettblog.eu · scriptconf.org
@deadparrot@mastodon.social · devone.at

Weitere ähnliche Inhalte

Ähnlich wie [German] Ab mit dem Kopf!

Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhonereinhardh
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
 
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de..."Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...Marc Hinse
 
Suchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für ProfessorenSuchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für ProfessorenPascal Kremp
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das WebAngelika Röck
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesAndré Goldmann
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)Michael Jendryschik
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsMaria Herrmann
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13chAlexander Schmidt
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseitechrisign gmbh
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 

Ähnlich wie [German] Ab mit dem Kopf! (20)

Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de..."Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...
"Gefahren von Webdesign Trends - erst nachdenken, dann coden." Vortrag auf de...
 
Suchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für ProfessorenSuchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für Professoren
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Veloweb Präsentation
Veloweb PräsentationVeloweb Präsentation
Veloweb Präsentation
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 

Mehr von Stefan Baumgartner

Mehr von Stefan Baumgartner (13)

WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?WASM! WASI! WAGI! WAT?
WASM! WASI! WAGI! WAT?
 
Serverless Rust
Serverless RustServerless Rust
Serverless Rust
 
What TypeScript taught me about JavaScript
What TypeScript taught me about JavaScriptWhat TypeScript taught me about JavaScript
What TypeScript taught me about JavaScript
 
Real-world component libraries at scale
Real-world component libraries at scaleReal-world component libraries at scale
Real-world component libraries at scale
 
Jamstack on Azure
Jamstack on AzureJamstack on Azure
Jamstack on Azure
 
TypeScript's Type System
TypeScript's Type SystemTypeScript's Type System
TypeScript's Type System
 
The hero's journey
The hero's journeyThe hero's journey
The hero's journey
 
Sketchmine: Design Systems Tooling
Sketchmine: Design Systems ToolingSketchmine: Design Systems Tooling
Sketchmine: Design Systems Tooling
 
Automating UI development
Automating UI developmentAutomating UI development
Automating UI development
 
A hero's journey in JavaScript frameworks
A hero's journey in JavaScript frameworksA hero's journey in JavaScript frameworks
A hero's journey in JavaScript frameworks
 
Advanced JavaScript build pipelines using Gulp.js
Advanced JavaScript build pipelines using Gulp.jsAdvanced JavaScript build pipelines using Gulp.js
Advanced JavaScript build pipelines using Gulp.js
 
Speed Index, explained!
Speed Index, explained!Speed Index, explained!
Speed Index, explained!
 
Plumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshopPlumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshop
 

[German] Ab mit dem Kopf!