Arten von Webanwendungen: einfach erklärt und mit Memes

🤓 Worum geht es in diesem Artikel?

Hast du schon oft Wörter wie "SPA", "SSR", "PWA" gehört, aber sie klingen alle wie Zaubersprüche aus Hogwarts? Dann ist dieser Artikel genau das Richtige für dich. Wir werden analysieren, welche Arten von Webanwendungen es gibt, wie sie sich unterscheiden, welche schnell sind, welche modisch sind und welche einfach funktionieren. Mit Memes, Tabellen und Beispielen!

/

🧱 Basistechnologien: die Grundlage jedes Webs

Alle Webanwendungen werden erstellt mit:

• HTML — Aufbau des Seitenskeletts

• CSS - wir machen es schön

• JavaScript - beleben und interagieren

Aber wie genau Die App ist eingerichtet - es kann sehr unterschiedlich sein. Und hier beginnt die Magie der Wahl des Ansatzes.

🌐 Haupttypen von Webanwendungen

🏘️ Mehrseitige Anwendungen (MPA)

Ein einfacher Fall: eine Reihe vorgefertigter Seiten

Wie ein Ordner mit Dateien auf einem Computer: Öffne about.html - Sieh dir Informationen über das Unternehmen an.

Vorteile:

• Einfachheit

• Leichtigkeit des Cachings

Nachteile:

• Beim Wechseln zwischen den Seiten wird alles neu geladen 🐢

Wann es passt: Landingpages, Visitenkarten, einfache Websites.

Schwieriger: Der Server generiert Seiten

Sie gehen auf die Website - der Server ist so:

"Warte mal, lass mich dir eine Seite im Handumdrehen zusammenstellen."

Zum Beispiel wie in Foren oder Online-Shops:

• Der Server fordert Daten an

• Sammelt HTML

• Gibt es an den Benutzer weiter

Vorteile:

• immer aktuelle Daten

• weniger JavaScript, also schneller für schwächere Geräte

Nachteile:

• Serverlast

• nicht sofortige Übergänge

📌 Mem-Wahrheit:

Wenn der Benutzer auf den Link klickt, sagt der Browser: „Wir starten neu!“, auch wenn du nur die nächste Seite des Profils öffnen wolltest 🙃

🪄 Single-Page-Webanwendungen (SPA)

Die ganze Magie steckt in JavaScript. Du gehst auf die Website und es gibt keine Neustarts mehr.

Vorteile:

• sofortige Übergänge

• Erfahrung wie in nativen Anwendungen

Nachteile:

• alles hängt von JavaScript ab

• die erste Anzeige kann lange dauern

🔧 Beispiele: Trello, Google Docs, Twitter (teilweise)

🔄 Clientseitiges Rendering (CSR)

Der Browser lädt einen Haufen JS und erst dann - "Hoppla, ich bin eine Website!"

Nachteile: Wenn das Internet langsam ist, sieht der Benutzer einen weißen Bildschirm, während JavaScript geladen wird. 🕳️

🧠 Serverseitiges Rendering (SSR)

Zuerst gibt der Server die fertige Seite aus und dann wird JavaScript verbunden.

Ideal:

• SEO

• Schnelle erste Seitenanzeige

📦 Verwendung: Next.js, Nuxt, SvelteKit

🛠️ Statische Generierung (SSG)

Stellen Sie sich eine Blog-Website vor. Artikel werden in Markdown geschrieben, im Voraus in HTML generiert und liegen einfach auf dem Server.

Werkzeuge: Astro, Eleventy, Hugo, Gatsby

Vorteile:

• superschnelles Laden

• einfach zu hosten (sogar auf GitHub Pages möglich)

Nachteile:

• Die Daten werden nur aktualisiert, wenn die Website neu erstellt wird

📝 Geeignet für Dokumentation, Portfolio, Landingpages.

🚀 PWA — Progressive Web Apps

PWA ist, als ob deine Website vorgibt, eine mobile App zu sein:

• arbeitet offline

• Push-Benachrichtigungen

• wird auf dem Telefon installiert

✨ Google und Twitter fördern aktiv die Idee von PWA.

📱 Wenn Sie eine App ohne App Store, aber mit nativer UX erstellen müssen.

🧠 Fazit

Hier ist eine kurze Anleitung:

💬 Fassen wir mit einem Mem zusammen:

Entwickler: "Ich habe SPA mit SSR, SSG und PWA erstellt." Kunde: "Kann ich das ausdrucken?"