Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Eine neuartige Webanwendungs-Architektur
OUTPUT.DD 2019
Alexander Lichter
Nuxt.js Core Team Member
@TheAlexLichter
*erstmal über euch
Server
1. Request
2. HTML
Backend
1. Request
4. Dynamically generated HTML
DB
2. Query
3. Results
Aber: "Click and wait" für jede Seite
Server
1. Request
2. HTML
3. AJAX Request
4. XML (oder JSON)
CDN
1. Request
2. Return Javascript
3. Parsing
API
4. Request
5. Response
Node.js
Server
1. Request
4. HTML + JS
API
2. Request
3. JSON
5. Hydration nach JS Download
optional
5. Request
6. JSON
Traditionelles SSR
Statische Seiten
Single Page Apps
Server side Rendering
JAMstack
avascript
PIs
arkup
Statisch, wird nicht mehr vom Server geändert
Wird vor jedem (Re-)deploy neu generiert
Typischerweise mithilfe eines Static Site Generator (SSG)
<template>
<p class="demo">
<button class="btn-primary" @click.prevent="handleClick">
<slot></slot>(clicked - {{count}})
</button>
</p>
</template>
Verantwortlich für die dynamischen Komponenten
Nur client-seitig
Framework-/Libraryunabhängig
Interaktionen mit der Seite werden über APIs gehandhabt
Werden via JavaScript über HTTPS aufgerufen
Oftmals Microservices, Serverless Functions oder ähnliches
import { promisify } from 'util'
import sendmail from 'sendmail'
const shouldSend = process.env.SEND_MAIL
exports.handler = async (event) => {
if (event.httpMethod !== 'POST') {
return { statusCode: 405, body: JSON.stringify({ 'error': 'Method not allowed' }) }
}
try {
const params = JSON.parse(event.body)
const attributes = ['name', 'email', 'msg']
const sanitizedAttributes = attributes.map(n => validateAndSanitize(n, params[n]))
const someInvalid = sanitizedAttributes.some(r => !r)
if (someInvalid) {
return { statusCode: 422, body: JSON.stringify({ 'error': 'Ugh.. That looks unprocessable!' }) }
}
const sendMail = (name, email, msg) => pSendMail({
from: email,
to: process.env.MAIL_TO,
subject: 'New contact form message',
text: msg
})
try {
await sendMail(...sanitizedAttributes)
return { statusCode: 200, body: JSON.stringify({ 'message': 'OH YEAH' }) }
} catch (e) { /* */ }
} catch (_) { /* */}
}
Erstelle deine Website
via SSG
Uploade deinen Code
via Git
Lass den SSG deine Seite bauen
Deploy der statischen Files via CDN o.Ä.
Fertig!
Performance
Simplicity
Security
Cost
*hosting via. GitHub pages oder Netlify
Going JAMstack with Netlify and Nuxt - blog.lichter.io
Nuxt.js - An Introduction - Slides von meinem Nuxt Intro
JAMstack.org - Um mehr über JAMStack zu lernen
By Alexander Lichter
JAMstack, und damit ist nicht der portablen Gitarrenverstärker den man beim Googlen als erstes findet gemeint, ist eine framework-unabhängige Architektur für moderne Webanwendungen. Bestehend aus *J*avascript, *A*PIs und *M*arkup verspricht der Ansatz besser Sicherheit "by default", einfachere Skalierung und auch noch erhöhte Performance. Ob das so einfach geht?
Web Engineering Consultant • Founder • Nuxt team • Speaker