Praktische Beispiele. Live-Demos.
Wähle ein Beispiel, um es im Vollbild zu öffnen, mit der Live-Vorschau und seinem Quellcode nebeneinander.
Grundlagen
4Die Muster, aus denen jede Nuclo-App besteht.
Zähler
Verändere den State, dann rufe update() auf. Der dynamische Text wird aktualisiert.
Todo-Liste
Nutze list() für wiederholte Einträge. Rufe nach jeder Veränderung update() auf.
Suchfilter
Filtere ein Array mit einfachem JavaScript. Rendere das Ergebnis mit list().
Styling
Nutze css() für Klassen. Nutze cx() für kleine bedingte Änderungen.
Komponenten
4Einfache Funktionen mit statischen und dynamischen Parametern, Kindern, nach Identität zugeordneten Listen und verschachtelten Daten. Jede Vorschau zählt ihre Mounts.
Statische & dynamische Parameter
Ein Wert-Parameter wird einmal gelesen, wenn die Komponente gebaut wird. Ein Funktions-Parameter wird bei jedem update() gelesen. Die Komponente selbst läuft in beiden Fällen nur einmal, und der Mount-Zähler beweist es.
Kinder & Modifier
Eine Komponente reicht ihre Kinder mit einem Spread weiter: Builder, Text, Attributobjekte und Modifier. Bedingte Teile kommen in when(), damit die Komponente um sie herum nie neu gebaut wird.
Listen-Identität
list() behält eine Zeile, solange ihr Element im Array ist: umsortieren, einfügen und umbenennen, ohne Eingaben oder Fokus zu verlieren. Ein Schalter klont die Objekte bei jedem Update und zeigt, was gebrochene Identität kostet.
Verschachtelte Daten
Ein Team mit Mitgliedern mit Aufgaben: eine Komponente pro Ebene, verschachtelte list()-Aufrufe, abgeleitete Zähler als Funktionen über dieselben Objekte. Tiefe Änderungen patchen nur ihre eigenen Knoten.
API
13Eine kleine Demo pro Baustein, dieselben, die die Dokumentation einbettet.
Tag-Builder
Ein Builder nimmt Attribute, statische Kinder und dynamischen Text. Umbenennen ändert den State und ruft dann update() auf.
Komponenten
Eine Komponente ist eine einfache Funktion. Jeder Counter()-Aufruf behält seinen eigenen Zähler.
Attribute
Attributwerte können Funktionen sein. Der zweite Button kippt busy und ruft update() auf; disabled und aria-busy von Save folgen.
Ereignisse
onInput und onKeyDown sind einfache Attribute. Tippe, dann drücke Escape zum Löschen.
Lebenszyklus
onMount startet ein Intervall und gibt sein Cleanup zurück. Beim Unmount läuft das Cleanup, also pausiert der Zähler, bis der Timer wieder gemountet wird.
Explizite Updates
count++ ändert nur die Variable. Der Text holt beim nächsten update() auf, vom Button oder von irgendetwas anderem auf dieser Seite.
Dynamische Werte
Ändere den Namen. Der statische Text wurde festgelegt, als das Element gebaut wurde; der dynamische läuft bei jedem update() erneut. forceUpdate() baut den Baum neu, also holt auch der statische Text auf.
update()
Jedes update() führt jeden dynamischen Wert aus, auch wenn sich seine Daten nicht geändert haben. Andere Demos auf dieser Seite treiben den Zähler ebenfalls hoch.
scope()
Beide Buttons fügen einen Eintrag hinzu und benennen den Benutzer um. update('cart') aktualisiert nur das Panel mit dem Scope.
when()
Die erste wahre Bedingung gewinnt; sonst rendert .else(). Ein neuer Zweig wird von Grund auf gebaut.
list()
Zeilen werden nach Identität zugeordnet. Hake eine Zeile ab, dann Umkehren: dasselbe <li> wandert, Checkbox und alles.
region() & into()
Ein Layout mit einer gestapelten Hauptregion und einer Seitenregion, von außen gefüllt. Tippe in Home, öffne den Dialog und schließe ihn: der Text bleibt. Article füllt beide Regionen mit einem into().
forceUpdate()
update() aktualisiert nur die dynamische lang-Zeile. forceUpdate() ruft App erneut auf und patcht dasselbe <h1>. Die explizite Form baut nur diesen Baum neu, nicht die ganze Seite.
Styling
3Eine Klasse erstellen, eine Klasse zusammensetzen und ein kleines Theme verwenden.
Formulare
3Validierung als einfache Funktionen über einfachen State, berührte Felder, Schritte und dynamische Zeilen.
Feldvalidierung
Regeln als Funktion über einfachen State, Fehler erst nach Berühren eines Felds, eine entprellte asynchrone Prüfung mit Wartezustand und ein Absenden, das auf all das wartet.
Mehrstufiger Assistent
Drei Schritte als when()-Zweige über ein Datenobjekt. Weiter berührt die Felder des Schritts und geht nur voran, wenn sie bestehen. Die Übersicht listet alles mit Bearbeiten-Links.
Dynamische Zeilen
Rechnungsposten in einem Array, gerendert mit list(). Jede Zeile validiert sich selbst, die Summe zählt die gültigen, und Zeilen behalten ihre Eingaben, wenn andere hinzugefügt oder entfernt werden.
SVG
27Diagramme, Animationen, Werkzeuge und Spiele aus den SVG-Tag-Buildern, gesteuert von einfachen Daten, Pointer-Events und update().
Balkendiagramm
Rects aus einem Array. Ihr y und ihre Höhe sind Funktionen der Daten, also bewegt update() die Balken.
Liniendiagramm
Ein Pfad, dessen d aus den Punkten gebaut wird, mit einer Verlaufsfläche und einem Kreis pro Punkt.
Donut-Diagramm
Ein Kreis pro Segment. stroke-dasharray gibt jedem seinen Anteil am Ring und stroke-dashoffset seinen Anfang.
SVG-Animation
SMIL als Builder: animateSvg lässt die Sonne pulsieren, animateTransformSvg lässt den Planeten kreisen. Ein dynamisches dur setzt die Geschwindigkeit.
Messanzeige
Ein Bogen, der sich mit stroke-dashoffset füllt, und eine Nadel, die sich mit einem CSS-Transform dreht. Beide sind Funktionen einer Zahl.
Netzdiagramm
Fünf Werte auf fünf Achsen. Die Form ist ein Pfad, dessen d aus den Daten berechnet wird, also verformt update() ihn.
Heatmap
Ein Raster aus Rects, deren fill-opacity einem Level folgt. Klicke eine Zelle, um sie zu erhöhen; ein titleSvg-Kind ist ihr Tooltip.
Hover-Tooltip
Pointer-Events auf SVG-Elementen. onPointerEnter wählt den aktiven Punkt und eine Tooltip-Gruppe gleitet zu ihm.
Kurveneditor
Ziehe die Griffe einer kubischen Bézierkurve. onPointerDown wählt einen Punkt, onPointerMove auf dem svg bewegt ihn und der Pfad folgt.
Uhr
Die Zeiger sind Linien, deren transform eine Funktion der Zeit ist. onMount startet das Ticken und gibt das Cleanup zurück.
Icon-Umschalter
Ein Menü-Icon, das sich mit CSS-Transitions in ein Kreuz verwandelt, und ein Herz, das mit einer beim Klick startenden SMIL-Animation aufploppt.
Live-Stream
Zwei Serien scrollen per Timer nach links. Eine CSS-Transition so lang wie ein Tick macht das Gleiten weich, und Hovern liest jeden Messwert.
Kerzendiagramm
Vierzig Slots lesen ihre eigene Kerze. Wechsle den Zeitrahmen, schalte den Durchschnitt um, hovere für die Zahlen oder lass die Live-Kerze ticken.
Balkenrennen
Zehn Balken verlassen das DOM nie. Ihr Rang setzt ein translateY, also gleitet eine Transition jeden in seine Zeile, wenn sich die Werte ändern.
Gestapeltes Flächendiagramm
Vier Bänder wechseln zwischen gestapeltem, Stream- und Prozent-Layout. Eine Serie auszublenden gibt ihrem Band nur die Dicke null, also behält jeder Pfad seine Form.
Treemap
Ein squarified Layout, in das du hineinzoomst. Ein Wechsel der Kennzahl schiebt jede Zelle in ihre neue Box, und ein Klick auf eine Gruppe tauscht ihre Kinder ein.
Live-Histogramm
Stichproben strömen aus vier Verteilungen ein. Die Klassen zählen bei jeder Änderung neu, eine angepasste Glockenkurve folgt dem Mittelwert, und ein Schieberegler setzt die Anzahl der Klassen.
Zeichenfläche
Pointer-Events zeichnen Polylinien. list() rendert eine pro Strich, und der laufende Strich wächst bei jedem update().
Drehregler
Ein eigener Schieberegler: der Winkel des Pointers setzt den Wert, die Pfeiltasten schrittweise, und pathLength="100" macht aus dem Wert einen Strich.
Farbkreis
Wähle einen Farbton über den Winkel und eine Sättigung über den Abstand. Neunzig Keile, ein radialer Verlauf und eine dunkle Scheibe bilden das Rad.
Spirograph
Ein Rad rollt in einem Ring und ein Stift zeichnet es nach. Jeder Frame verlängert einen Strich und aktualisiert nur seinen scope().
Springende Bälle
Schwerkraft, Wände und Kollisionen in einer requestAnimationFrame-Schleife. Ziehe zurück und lass los, um einen Ball zu starten.
Klebrige Blobs
Ein Blur- und ein Farbmatrix-Filter verschmelzen Blobs miteinander. Eine Spur aus Kreisen folgt dem Pointer.
Kräftegraph
Knoten stoßen sich ab, Kanten ziehen, und das Layout kühlt ab, bis es ruht. Ziehe einen Knoten oder klicke einen, um ein Kind wachsen zu lassen.
Brush & Zoom
Markiere einen Bereich in der Übersicht, um das Diagramm darüber zu zoomen. Ein clipPath, der der Markierung folgt, färbt die Auswahl.
Tic-Tac-Toe
Spiel gegen den Computer. when() fügt jedes Zeichen hinzu, und eine CSS-Animation auf seinem Strich zeichnet es ein.
Kreistext
Tippe einen Badge-Text. textPath biegt den Text um einen Kreis und textLength passt ihn auf genau eine Runde an.
Routing
6Routentabellen, Matching, die aktive Route, Layer und Loader. nuclo-router ist ein eigenes Paket: npm install nuclo nuclo-router.
Eine geroutete App
Eine echte App mit eigenem Router, die im Frame läuft: eine Routentabelle, ein outlet(), einfache Links, ein Wartezustand und eine 404. Klick dich durch, dann nutze Zurück.
Verschachtelte Routen
Docs ist ein Layout mit Kindrouten. Ein Thema rendert in seinem outlet() und ./topic-Links werden relativ zur Route des Layouts aufgelöst. Tippe in die Notizen, dann wechsle das Thema: das Layout wird nie neu gebaut.
Routen-Loader
Die Beitragsseite exportiert ein load(), das läuft, bevor die Seite gebaut wird. Beobachte router.pending, während es wartet, und den Fehlerzustand mit Erneut versuchen, wenn es beim defekten Beitrag wirft.
Layer
Das Bestellformular pusht die Kundenseite als Layer und wartet auf ihr Ergebnis. Das Formular wird nicht neu gerendert, also überleben seine Notizen. Speichern löst den Push auf, Abbrechen oder Zurück verwirft ihn.
Mehrere Router & Laden
Zwei Router, zwei Spinner. Das Shop-Layout und sein Abschnitt haben beide ein load(): sie laufen parallel unter einem router.pending. Die Seitenleiste hat einen eigenen Router, erstellt, aber nie gestartet, mit eigenem Lade-Flag, das aus onNavigate aktualisiert wird.
Muster-Matching
Statische, :param- und *rest-Muster sowie eine Abschnittstabelle, die unter zwei Eltern gemountet ist. Tippe einen Pfad und beobachte match(), das auflöst, ohne etwas zu laden.
Apps
15Größere Programme im Vollbild, mit ihrem echten Quellcode hinter Tabs: ein Desktop mit Fenstern, ein Data Grid, ein Chat, Spiele, Editoren und Bibliotheken, die ihren eigenen State besitzen.
Seiten-Builder
Schreibe direkt auf der Seite, ziehe Griffe, um Blöcke umzusortieren oder in Layouts zu verschieben, drücke / zum Einfügen und rechtsklicke für Aktionen. Style Grid- und Flex-Layouts, mache Änderungen rückgängig, sieh dir die Vorschau in Handygröße an und exportiere HTML.
Algorithmus-Stepper
Die Engine ist einfaches JavaScript: Generatoren, die ein Array verändern und nach jedem Schritt yielden. Der Player ruft next() und update() auf; die Balken sind eine list() über dieselben Objekte, also bewegt ein Tausch zwei Elemente.
Kanban-Board
Ein Team-Board: Aufgaben anlegen, Personen zuweisen, in einem Dialog bearbeiten, nach Person filtern oder suchen, zwischen Spalten ziehen und ein Löschen rückgängig machen. Spalten und Karten sind einfache Arrays derselben Objekte; jede Bewegung ist ein splice(). Zeilen werden nach Identität zugeordnet, also verwendet Ziehen, Sortieren, Zuweisen oder Bearbeiten einer Karte ihr Element wieder. Der Mount-Zähler auf dem Bildschirm beweist es.
three.js-Inspektor
Eine Bibliothek, die ihren eigenen State besitzt. Das Panel liest Positionen, Farben und Flags direkt aus den three.js-Objekten und schreibt Änderungen zurück. Die Render-Schleife ruft update() einmal pro Frame auf; nichts wird gespiegelt.
Endloses Scrollen
Ein Feed ohne Ende: ein schnelles, simuliertes fetch() erzeugt jede Seite auf Abruf in ein einfaches Array. Nur die Zeilen nahe am Viewport sind im DOM: die list() rendert posts.slice(start, end) zwischen zwei Abstandhaltern, also bleibt die Seite bei hunderttausend Beiträgen leicht. Ein Sentinel am echten Ende fordert die nächste Seite an, bevor er sichtbar wird.
Desktop
Ein funktionierender Desktop mit Dateien, Notizen, Terminal, Rechner, Timer, einem Kanban-Board, Finanzen und einem Kalender. Erstelle und ordne Ordner, bearbeite Notizen und nutze Shell-Befehle auf einer gemeinsamen simulierten Festplatte, die in deinem Browser gespeichert wird. Tippe direkt über die Tastatur in den Rechner, klicke irgendwo ins Terminal, um seine Eingabezeile zu fokussieren, ziehe Karten zwischen den Spalten des Boards oder führe ein Hauptbuch in der Finanz-Tabelle und sieh zu, wie sich die Diagramme bewegen — das Hauptbuch liegt in IndexedDB. Fenster behalten ihren State, während du sie bewegst, in der Größe änderst und zwischen Apps wechselst; ein laufender Timer füllt den Taskleisten-Bereich mit into().
Knotengraph
Verbinde Zahlen, Text und Schalter durch Mathe-, Vergleichs- und If-Knoten, und jeder Wert aktualisiert sich, während du tippst. Funktionen sind ebenfalls Graphen: ihre Input- und Output-Knoten sind die Ports jedes Call, und ein Call kann seine eigene Funktion benennen, also rekursieren factorial und sum mit einem If als Ausweg. Die Engine ist einfaches JavaScript: jeder Knoten ist ein Generator, der yieldet, um eine Eingabe anzufordern, und eine Schleife treibt sie von ihrem eigenen Stack aus an, also verschachtelt sum(50000) fünfzigtausend Aufrufe tief in etwa einer Zehntelsekunde, ohne den JavaScript-Callstack zu berühren. Nur ein Schrittbudget stoppt eine Rekursion ohne Ausweg. Ziehen schreibt x und y und aktualisiert nur den Canvas-Scope; der Lauf-Zähler zeigt, dass der Graph bei einer Bewegung nie läuft.
Data Grid
Eine Arbeitstabelle über 10.000 einfache Zeilenobjekte. Suche, Filter, Sortierung und Blättern sind einfache Funktionen über das Array, und der Tabellenkörper ist eine list() über die aktuelle Seite. Zeilen werden nach Identität zugeordnet, also verschiebt das Sortieren die Zeilen, die auf der Seite bleiben, und eine bearbeitete Zeile ist überall dasselbe Objekt. Der Zähler der gebauten Zeilen beweist es.
Chat
Ein Chat mit drei Kanälen, jeder ein einfaches Objekt: sein Verlauf, Cursor, Tippstatus, Entwurf und Scrollposition, also behält ein Wechsel jeden Kanal genau so, wie er war, und update("chat-sidebar") aktualisiert nur die Ungelesen-Badges. Der Verlauf lädt mit unshift() endlos nach oben, mit einem scrollTop, das um die hinzugefügte Höhe wächst. Deine Nachricht erscheint, bevor der Server sie hat, send() patcht dasselbe Objekt, und Erneut senden, Bearbeiten, Löschen und Reaktionen bauen ihre Zeile nie neu. Nachrichten rendern Code, Fettdruck, Links und @Erwähnungen.
Live-Dashboard
Karten, die sich in verschiedenen Raten aktualisieren, von 20 Mal pro Sekunde bis einmal pro Sekunde. Jede Karte ist ein scope(), und ihr Timer ruft update() mit der id dieser Karte auf, also wertet ein Tick nur diese Karte aus. Jeder dynamische Wert wird auf dem Bildschirm gezählt: wechsle zu einem einfachen update() und die Uhr wird etwa hundert Mal pro Sekunde ausgewertet, um sich einmal zu ändern.
Pixel-Editor
Das Bild ist ein einfaches Array aus 1024 Farbstrings, und jede Zelle liest ihre Farbe daraus. Ein Strich schreibt ins Array und ruft update() auf; wenn er endet, behält der Editor eine Kopie mit slice(). Rückgängig, Wiederholen und jeder Schritt in der Verlaufs-list() setzen ein älteres Array zurück: kein Store, keine unveränderlichen Daten.
Snake
Eine Spielschleife ist ein Timer, der step() auf einfachen Objekten aufruft, dann einmal pro Tick update(). Die Schlange ist eine list() ihrer Zellobjekte, und bei jedem Tick wird das Schwanzobjekt zum neuen Kopf, also bewegt sich ein Element und keines wird gebaut: der Zähler der gebauten Segmente steigt nur, wenn die Schlange frisst. Futter ploppt mit einer keyframes()-Animation auf.
Step-Sequenzer
Eine Bibliothek, die ihre eigene Uhr besitzt. Web Audio plant jede Note auf ihrer eigenen Zeitachse voraus, und das Pattern ist ein einfaches 2D-Array aus Booleans, das das Raster umschaltet und der Scheduler liest, also ist ein Klick im nächsten Durchlauf zu hören. Der Abspielkopf aktualisiert nur seinen scope(), wenn sich der hörbare Schritt ändert. Audio startet beim ersten Play und schließt im Mount-Cleanup, also stoppt das Verlassen des Beispiels den Ton.
Sprachumschalter
Jedes Label ist ein statischer Wert, geschrieben wie in einer einsprachigen App, also liest update() es nie wieder: Klicks im Warenkorb aktualisieren nur Mengen und Summen. Der Sprachwechsel ruft forceUpdate() auf diesem Baum auf, was die Komponente erneut ausführt und dieselben Elemente patcht, lang und dir inklusive. Geld, Plurale, Daten und Listen kommen aus Intl, und der Warenkorb und ein getippter Gutschein überleben den Wechsel.
Theme-Editor
Eine kleine Komponentenbibliothek: createCss() benennt die Tokens und variants() baut daraus Buttons, Badges, Karten, Eingaben, Hinweise und Schalter. Die Tokens sind CSS-Variablen, also kompiliert jede Klasse einmal. Jedes Steuerelement schreibt ein einfaches Theme-Objekt und ruft update() auf, was den Text eines style-Elements neu schreibt.