Themen
Frontend
Alle Beiträge zum Thema Frontend, die neuesten zuerst.
Transparenz: Alle Beiträge habe ich nachträglich mit Unterstützung von KI überarbeitet. Gedanken, Erfahrungen und Haltung sind meine. Die Hörfassungen werden von einer synthetischen Stimme vorgelesen.
Themen
ThemenAlle ThemenArchitektur 33Frontend 31KI 22Backend 21Delivery 18Methodik 18AWS 17Node.js 17Cloud 16API 15React 15GraphQL 14Platform 8Daten 7Reactive 7Python 6Tools 5Produkt 4Svelte 4Testing 3Publishing 2Content 1DevOps 1Lernen 1Observability 1Security 1Tooling 1
Nur mit Audio31 Beiträge
React-Überblick: Von JSX zur Komponentenarchitektur
Ein kompletter Durchgang durch React, wie ich es heute unterrichte – vom deklarativen Rendern über die Frage, wem ein State gehört, bis zur Architektur einer wachsenden Anwendung. Die Details zu einzelnen Stationen kommen später als eigene Beiträge.
SoftwareFrontendReact
Formulare in React 19: Actions, useActionState und useOptimistic
React 19 macht das Formular zur eigentlichen Schnittstelle: eine Funktion als form action, dazu drei Hooks für Ergebnis, Pending State und sofortiges UI-Feedback. Dieser Beitrag zeigt das Zusammenspiel – und wo optimistisches Rendern ohne sauberen Fehlerpfad kippt.
SoftwareFrontendReact
React Server Components und Server Actions: Die neue Grenze
Server Components laufen außerhalb des Client-Bundles und liefern ihr Ergebnis statt ihres Codes an den Browser. Server Functions holen Schreibvorgänge auf den Server – umgesetzt wird beides durch ein passendes Framework oder einen Bundler.
SoftwareFrontendReact
2024 5
2024 5
- React Router Data Router: Die URL als State-OrtDer Data Router von React Router macht die URL zum Koordinationspunkt – eine Route lädt ihre Daten per loader vor dem Rendern und schreibt über action, sodass Ladelogik aus dem Komponenten-Body verschwindet.SoftwareFrontendReact
- React Transitions: nicht dringende Updates mit useTransitionuseTransition markiert Updates als nicht dringend und hält React während teurer oder suspendierender Renderings responsiv. Dazu useDeferredValue als Werkzeug für nachgelagerte Renderings.SoftwareFrontendReact
- Suspense und der use-Hook: rendern, als wären die Daten schon daStatt in jeder Komponente einen Ladezustand zu verwalten, beschreibt man mit Suspense an einer einzigen Stelle im Baum, was während des Wartens erscheint – und der use-Hook lässt die Komponente darunter rendern, als wären die Daten längst da.SoftwareFrontendReact
- Client State vs. Server-Cache: die folgenreichste Grenze im FrontendServerdaten sind State, aber nicht client-eigener State. Warum diese Unterscheidung wichtig ist, wann useEffect zum schlechten Cache wird und was eine Server-State-Bibliothek übernimmt.SoftwareFrontendReact
- TypeScript in React: Props, Hooks und Events typisierenWie aus Props und State überprüfbare Verträge werden – und der Editor Fehler meldet, bevor der Nutzer sie sieht. Von interface/type über useState-Generics und Event-Typen bis zu useRef und Utility-Types.SoftwareFrontendReact
2023 1
2022 6
2022 6
- Slots, Context und Web Components in SvelteDrei Kompositions-Werkzeuge in Svelte 3: Slots reichen Inhalt von außen hinein, die Context-API vermeidet Prop-Drilling, und Custom Elements machen eine Komponente framework-neutral wiederverwendbar.SoftwareFrontendSvelte
- Build vs. Runtime in WebprojektenDer Rendering-Zeitpunkt wird pro Route entschieden. Statische, dynamische und inkrementelle Modelle lassen sich nach Datenfrist, Kosten und Fehlerverhalten kombinieren.SoftwareFrontend
- RxJS in React: Observables im Datenfluss der OberflächeRxJS glänzt in React nicht überall, sondern genau dort, wo asynchrone Events koordiniert werden müssen – entprellte Eingaben, abgebrochene Autocomplete-Requests, kontinuierliche Ströme. Der Beitrag zeigt die wenigen Stellen, an denen sich Observables wirklich lohnen, und wo useState völlig genügt.SoftwareFrontendReact
- Motion, Transitions und Animationen in SvelteWie Svelte Bewegung deklarativ und ohne Extra-Bibliothek mitbringt: transition-Direktiven fürs Ein- und Ausblenden, svelte/motion für sanft interpolierte Werte und animate:flip fürs Umsortieren von Listen.SoftwareFrontendSvelte
- Svelte Stores: State außerhalb der KomponenteSvelte Stores sind ein minimales Modell für State, der nicht in eine einzelne Komponente passt: writable, readable, derived – plus die $-Kurzschreibweise, die abonniert und beim Unmount aufräumt.SoftwareFrontendSvelte
- Svelte-Reaktivität: der Compiler statt Virtual DOMSvelte kompiliert Komponenten zur Build-Zeit in gezielten DOM-Code, statt zur Laufzeit einen Virtual DOM zu diffen. Ich zeige das mentale Modell, die reaktive Zuweisung mit $: und die klassische push-Falle, die mir in Projekten immer wieder begegnet.SoftwareFrontendSvelte
2021 3
2021 3
- State-Management in React: Redux Toolkit, leichte Stores, MobXWenn ein State wirklich app-weit ist, stellt sich die Werkzeugfrage – Redux Toolkit, ein leichter Store wie Zustand oder Jotai, oder das reaktive Modell von MobX. Warum diese Wahl aber erst nach der Gegenprobe kommt und meistens kleiner ausfällt als gedacht.SoftwareFrontendReact
- Context richtig einsetzen: Verteilweg statt heimlicher globaler StateContext löst das Verteilen von Daten durch den Baum – aber nicht die Frage, wem der State gehört. Wer beides verwechselt, baut einen globalen Store durch die Hintertür ein und erzeugt bei unbedacht wechselnden Provider-Werten unnötige Renderläufe.SoftwareFrontendReact
- State erhalten und zurücksetzen: React und die Position im BaumReact speichert State nicht in der Komponente, sondern an ihrer Position im Render-Baum – wer das versteht, steuert Erhalt und Reset absichtlich statt zufällig.SoftwareFrontendReact
2020 2
2020 2
- Wie React den Baum rendert und aktualisiertVom JSX-Element zum sichtbaren Pixel – was zwischen einer State-Änderung und dem neu gezeichneten Bildschirm genau passiert. Render und Commit als getrennte Phasen, der Abgleich zweier Bäume und warum React fast immer nur einen winzigen Teil des DOM anfasst.SoftwareFrontendReact
- JSX genau: Die Regeln hinter dem MarkupEin präziser Blick auf JSX – was der Compiler daraus macht, warum in geschweiften Klammern Ausdrücke statt Anweisungen stehen, wie Attribute, Kinder, Bedingungen und Listen funktionieren und an welchen Stellen Anfänger stolpern.SoftwareFrontendReact
2019 1
2018 3
2018 3
- Micro-Frontends: Teamschnitt im BrowserWarum die eigentliche Arbeit bei Micro-Frontends nicht in der Integrationstechnik steckt, sondern im Teamschnitt – gezeigt an einer lauffähigen Beispiel-Landschaft aus Gateway, vier Anwendungen und einer Komponenten-Bibliothek.SoftwareFrontend
- Frontend-Schnittstellen sind APIsWarum Props, URLs, Events, CSS-Klassen und localStorage dieselbe Versionierungs-Disziplin verdienen wie ein REST-Endpoint – spätestens, wenn mehrere Teams im selben Browser arbeiten.SoftwareFrontend
- Angular, React und der Wert von ÜbergängenOb ein Framework-Wechsel zum Umzug oder zum Neubau wird, entscheidet sich daran, wie billig zwei Welten monatelang nebeneinander laufen können.SoftwareFrontend
2017 5
2017 5
- Prototypen: das Objektmodell hinter JavaScript-Klassenclass in ES2015 ist im Kern Syntax-Zucker über Prototypen: Wer die [[Prototype]]-Kette, Object.create und den new-Ablauf versteht, debuggt this-Fehler und geteilte Methoden souveräner.SoftwareFrontend
- Redux als Protokoll für UI-ÄnderungenDer Store ist der langweiligste Teil von Redux – wertvoll ist das Nachrichtenprotokoll aus benannten, serialisierbaren Actions, das UI-Änderungen nachvollziehbar, testbar und diskutierbar macht.SoftwareFrontend
- JavaScript-Patterns, die geblieben sind: Module, Higher-Order Functions, CurryingDrei JavaScript-Pattern haben jeden Framework-Wechsel überlebt: das Module-Pattern für saubere Kapselung, Higher-Order Functions für Funktionen als Werte und Currying für spezialisierte Varianten. Warum sie das Fundament moderner Utility-Libraries bilden.SoftwareFrontend
- KnockoutJS: fein-granulare Reaktivität mit Observables und ComputedWie KnockoutJS Reaktivität löst: Observables als get/set-Funktionen, Computed mit automatischem Dependency-Tracking und gezielte DOM-Updates statt globalem Baum-Vergleich.SoftwareFrontend
- Tic-Tac-Toe mit Minimax in ReactEin unschlagbarer Tic-Tac-Toe-Gegner in React zeigt, warum Spiellogik als Pure Function nichts vom Rendering wissen darf – und warum immutable Züge zu Reacts Modell passen.SoftwareFrontend