Esempi pratici. Demo dal vivo.
Scegli un esempio per aprirlo a schermo intero, con l'anteprima live e il suo sorgente fianco a fianco.
Basi
4I pattern di cui è fatta ogni app Nuclo.
Contatore
Muta lo stato, poi chiama update(). Il testo dinamico si aggiorna.
Lista di cose da fare
Usa list() per gli elementi ripetuti. Chiama update() dopo ogni mutazione.
Filtro di ricerca
Filtra un array con JavaScript semplice. Renderizza il risultato con list().
Stili
Usa css() per le classi. Usa cx() per piccole modifiche condizionali.
Componenti
4Funzioni semplici con parametri statici e dinamici, figli, liste abbinate per identità e dati annidati. Ogni anteprima conta i suoi mount.
Parametri statici e dinamici
Un parametro valore viene letto una sola volta, quando il componente viene costruito. Un parametro funzione viene letto a ogni update(). Il componente stesso gira una volta sola in entrambi i casi, e il conteggio dei mount lo dimostra.
Figli e modificatori
Un componente passa i suoi figli con uno spread: builder, testo, oggetti di attributi e modificatori. Le parti condizionali vanno in when(), così il componente che le contiene non viene mai ricostruito.
Identità nelle liste
list() conserva una riga finché il suo elemento è nell'array: riordina, inserisci e rinomina senza perdere input o focus. Un interruttore clona gli oggetti a ogni update per mostrare quanto costa rompere l'identità.
Dati annidati
Un team con membri con attività: un componente per livello, chiamate list() annidate, conteggi derivati come funzioni sugli stessi oggetti. Le modifiche in profondità patchano solo i propri nodi.
API
13Una piccola demo per ogni blocco di base, le stesse che la documentazione incorpora.
Tag builder
Un builder accetta attributi, figli statici e testo dinamico. Rinomina cambia lo stato, poi chiama update().
Componenti
Un componente è una semplice funzione. Ogni chiamata a Counter() conserva il proprio conteggio.
Attributi
I valori degli attributi possono essere funzioni. Il secondo pulsante inverte busy e chiama update(); disabled e aria-busy di Salva lo seguono.
Eventi
onInput e onKeyDown sono attributi normali. Scrivi, poi premi Esc per cancellare.
Ciclo di vita
onMount avvia un intervallo e restituisce la sua pulizia. Lo smontaggio esegue la pulizia, così il conteggio si ferma finché il timer non viene montato di nuovo.
Aggiornamenti espliciti
count++ cambia solo la variabile. Il testo si allinea al prossimo update(), dal pulsante o da qualsiasi altra cosa in questa pagina.
Valori dinamici
Modifica il nome. Il testo statico è stato fissato quando l'elemento è stato costruito; quello dinamico gira di nuovo a ogni update(). forceUpdate() ricostruisce l'albero, così anche il testo statico si allinea.
update()
Ogni update() esegue ogni valore dinamico, anche quando i suoi dati non sono cambiati. Anche le altre demo in questa pagina fanno salire il conteggio.
scope()
Entrambi i pulsanti aggiungono un elemento e rinominano l'utente. update('cart') aggiorna solo il pannello nello scope.
when()
Vince la prima condizione vera; altrimenti renderizza .else(). Un nuovo ramo viene costruito da zero.
list()
Le righe sono abbinate per identità. Spunta una riga, poi Inverti: lo stesso <li> si sposta, checkbox inclusa.
region() e into()
Un layout con una regione principale a strati e una regione laterale, riempite dall'esterno. Scrivi in Home, apri la finestra di dialogo e chiudila: il testo resta. Articolo riempie entrambe le regioni con un solo into().
forceUpdate()
update() aggiorna solo la riga dinamica di lang. forceUpdate() chiama di nuovo App e patcha lo stesso <h1>. La forma esplicita ricostruisce solo questo albero, non l'intera pagina.
Stili
3Crea una classe, componi una classe e usa un piccolo tema.
Form
3Validazione come funzioni semplici su stato semplice, campi toccati, passaggi e righe dinamiche.
Validazione dei campi
Regole come funzione su stato semplice, errori mostrati solo dopo che un campo è stato toccato, un controllo asincrono con debounce e stato in attesa, e un invio che aspetta tutto questo.
Procedura guidata a più passaggi
Tre passaggi come rami when() su un unico oggetto dati. Avanti tocca i campi del passaggio e procede solo quando passano. Riepilogo elenca tutto con link Modifica.
Righe dinamiche
Righe di fattura in un array renderizzate con list(). Ogni riga si valida da sola, il totale conta quelle valide e le righe conservano i loro input quando altre vengono aggiunte o rimosse.
SVG
27Grafici, animazioni, strumenti e giochi costruiti con i tag builder SVG, guidati da dati semplici, eventi pointer e update().
Grafico a barre
Rect da un array. y e height sono funzioni dei dati, così update() muove le barre.
Grafico a linee
Un path il cui d è costruito dai punti, con un'area a gradiente e un cerchio per punto.
Grafico ad anello
Un cerchio per fetta. stroke-dasharray dà a ciascuna la sua porzione dell'anello e stroke-dashoffset il suo inizio.
Animazione SVG
SMIL come builder: animateSvg fa pulsare il sole, animateTransformSvg fa orbitare il pianeta. Un dur dinamico imposta la velocità.
Indicatore
Un arco che si riempie con stroke-dashoffset e un ago che ruota con un transform CSS. Entrambi sono funzioni di un solo numero.
Grafico radar
Cinque valori su cinque assi. La forma è un unico path il cui d è calcolato dai dati, così update() lo trasforma.
Mappa di calore
Una griglia di rect la cui fill-opacity segue un livello. Clicca una cella per aumentarlo; un figlio titleSvg è il suo tooltip.
Tooltip al passaggio
Eventi pointer sugli elementi SVG. onPointerEnter sceglie il punto attivo e un gruppo tooltip scivola su di esso.
Editor di curve
Trascina le maniglie di una Bézier cubica. onPointerDown sceglie un punto, onPointerMove sull'svg lo muove e il path lo segue.
Orologio
Le lancette sono linee il cui transform è una funzione dell'ora. onMount avvia il ticchettio e restituisce la pulizia.
Icone interattive
Un'icona menu che si trasforma in una croce con transizioni CSS, e un cuore che pulsa con un'animazione SMIL avviata al clic.
Flusso dal vivo
Due serie scorrono a sinistra su un timer. Una transizione CSS lunga quanto un tick rende fluido lo scorrimento, e passando il puntatore si legge qualsiasi campione.
Grafico a candele
Quaranta slot leggono ciascuno la propria candela. Cambia l'intervallo, attiva la media, passa il puntatore per i numeri o lascia che la candela live avanzi.
Gara di barre
Dieci barre non lasciano mai il DOM. Il loro rango imposta un translateY, così una transizione fa scivolare ciascuna nella sua riga quando i valori cambiano.
Grafico ad aree sovrapposte
Quattro bande si trasformano tra i layout sovrapposto, a flusso e percentuale. Nascondere una serie dà alla sua banda solo spessore zero, così ogni path conserva la sua forma.
Treemap
Un layout squarified in cui puoi scendere. Cambiare la metrica fa scivolare ogni cella nel suo nuovo riquadro, e cliccare un gruppo mostra i suoi figli.
Istogramma dal vivo
I campioni arrivano da quattro distribuzioni. I bin si ricontano a ogni cambiamento, una campana adattata segue la media e uno slider imposta il numero di bin.
Blocco da disegno
Gli eventi pointer disegnano polilinee. list() ne renderizza una per tratto, e il tratto in corso cresce a ogni update().
Manopola rotativa
Uno slider personalizzato: l'angolo del puntatore imposta il valore, le frecce lo fanno avanzare a passi e pathLength="100" trasforma il valore in un tratteggio.
Ruota dei colori
Scegli una tonalità con l'angolo e una saturazione con la distanza. Novanta spicchi, un gradiente radiale e un disco scuro formano la ruota.
Spirografo
Una ruota rotola dentro un anello e una penna la traccia. Ogni frame allunga un tratteggio e aggiorna solo il suo scope().
Palline che rimbalzano
Gravità, pareti e collisioni in un ciclo requestAnimationFrame. Tira indietro e lascia andare per lanciare una pallina.
Bolle viscose
Un filtro blur e una matrice di colori fondono le bolle insieme. Una scia di cerchi segue il puntatore.
Grafo a forze
I nodi si respingono, i collegamenti attraggono e il layout si raffredda finché non si ferma. Trascina un nodo, o cliccane uno per far crescere un figlio.
Selezione e zoom
Seleziona un intervallo nella panoramica per ingrandire il grafico sopra. Un clipPath che segue la selezione colora la parte scelta.
Tris
Gioca contro il computer. when() aggiunge ogni segno, e un'animazione CSS sul suo tratteggio lo disegna.
Testo circolare
Scrivi un badge. textPath piega il testo attorno a un cerchio e textLength lo adatta esattamente a un giro.
Instradamento
6Tabelle di route, matching, la route attiva, layer e loader. nuclo-router è un pacchetto separato: npm install nuclo nuclo-router.
Un'app con routing
Una vera app con il proprio router, in esecuzione nel frame: una tabella di route, un outlet(), link semplici, uno stato in attesa e una 404. Naviga, poi usa Indietro.
Route annidate
Docs è un layout con route figlie. Un argomento viene renderizzato nel suo outlet() e i link ./topic si risolvono rispetto alla route del layout. Scrivi nelle note, poi cambia argomento: il layout non viene mai ricostruito.
Loader di route
La pagina del post esporta un load() che gira prima che la pagina venga costruita. Osserva router.pending mentre aspetta, e lo stato di errore con Riprova quando lancia sul post rotto.
Layer
Il modulo d'ordine apre la pagina cliente come layer e attende il suo risultato. Il modulo non viene ri-renderizzato, così le sue note sopravvivono. Salva risolve il push, Annulla o Indietro lo chiude.
Più router e caricamento
Due router, due spinner. Il layout del negozio e la sua sezione hanno entrambi un load(): girano in parallelo sotto un unico router.pending. La barra laterale ha un router tutto suo, creato ma mai avviato, con un proprio flag di caricamento aggiornato da onNavigate.
Pattern matching
Pattern statici, :param e *rest, e una tabella di sezioni montata sotto due genitori. Scrivi un percorso e osserva match(), che risolve senza caricare nulla.
App
15Programmi più grandi, a schermo intero, con il loro vero sorgente dietro le schede: un desktop con finestre, una griglia dati, una chat, giochi, editor e librerie che possiedono il proprio stato.
Costruttore di pagine
Scrivi direttamente sulla pagina, trascina le maniglie per riordinare i blocchi o spostarli nei layout, premi / per inserire e usa il clic destro per le azioni. Dai stile ai layout grid e flex, annulla le modifiche, visualizza l'anteprima a dimensione telefono ed esporta l'HTML.
Passo-passo di algoritmi
Il motore è JavaScript semplice: generatori che mutano un array e fanno yield dopo ogni passo. Il player chiama next() e update(); le barre sono una list() sugli stessi oggetti, così uno scambio muove due elementi.
Board Kanban
Una board di team: aggiungi attività, assegnale alle persone, modificale in una finestra di dialogo, filtra per persona o ricerca, trascinale tra le colonne e annulla un'eliminazione. Colonne e schede sono array semplici degli stessi oggetti; ogni spostamento è uno splice(). Le righe sono abbinate per identità, così trascinare, ordinare, assegnare o modificare una scheda riusa il suo elemento. Il conteggio dei mount sullo schermo lo dimostra.
Inspector three.js
Una libreria che possiede il proprio stato. Il pannello legge posizioni, colori e flag direttamente dagli oggetti three.js e vi scrive le modifiche. Il ciclo di rendering chiama update() una volta per frame; nulla viene duplicato.
Scorrimento infinito
Un feed senza fine: una fetch() finta e veloce genera ogni pagina al volo in un unico array semplice. Solo le righe vicine al viewport sono nel DOM: la list() renderizza posts.slice(start, end) tra due spaziatori, così la pagina resta leggera a centomila post. Una sentinella alla vera fine chiede la pagina successiva prima di entrare in vista.
Desktop
Un desktop funzionante con File, Note, Terminale, Calcolatrice, Timer, una board Kanban, Finanze e un Calendario. Crea e organizza cartelle, modifica note e usa comandi shell su un unico disco simulato condiviso, salvato nel tuo browser. Scrivi nella Calcolatrice direttamente dalla tastiera, clicca ovunque nel Terminale per dare il focus alla riga di input, trascina le schede tra le colonne della board, oppure tieni un registro nel foglio di calcolo Finanze e guarda i suoi grafici muoversi — il registro vive in IndexedDB. Le finestre conservano il loro stato mentre le sposti, le ridimensioni e passi da un'app all'altra; un timer in esecuzione riempie la tray della barra delle applicazioni con into().
Grafo di nodi
Collega numeri, testo e interruttori attraverso nodi matematici, confronti e nodi If, e ogni valore si aggiorna mentre scrivi. Anche le funzioni sono grafi: i loro nodi Input e Output sono le porte di ogni Call, e una Call può nominare la propria funzione, così factorial e sum ricorrono con un If come via d'uscita. Il motore è JavaScript semplice: ogni nodo è un generatore che fa yield per chiedere un input, e un unico ciclo li guida dal proprio stack, così sum(50000) annida cinquantamila chiamate in circa un decimo di secondo senza toccare lo stack delle chiamate JavaScript. Solo un budget di passi ferma una ricorsione senza via d'uscita. Il trascinamento scrive x e y e aggiorna solo lo scope del canvas; il conteggio delle esecuzioni mostra che il grafo non gira mai per uno spostamento.
Griglia dati
Una tabella di lavoro su 10.000 oggetti riga semplici. Ricerca, filtro, ordinamento e paginazione sono funzioni semplici sull'array, e il corpo della tabella è una list() sulla pagina corrente. Le righe sono abbinate per identità, così l'ordinamento sposta le righe che restano nella pagina, e una riga modificata è lo stesso oggetto ovunque. Il conteggio delle righe costruite lo dimostra.
Chat
Una chat con tre canali, ciascuno un oggetto semplice: la sua cronologia, il cursore, chi sta scrivendo, la bozza e la posizione di scorrimento, così cambiando canale ognuno resta esattamente com'era, e update("chat-sidebar") aggiorna solo i badge dei non letti. La cronologia si carica verso l'alto all'infinito con unshift() e uno scrollTop che cresce dell'altezza aggiunta. Il tuo messaggio appare prima che il server lo abbia, send() patcha lo stesso oggetto, e Riprova, Modifica, Elimina e le reazioni non ricostruiscono mai la sua riga. I messaggi renderizzano codice, grassetto, link e @menzioni.
Dashboard dal vivo
Schede che si aggiornano a ritmi diversi, da 20 volte al secondo fino a una volta al secondo. Ogni scheda è uno scope(), e il suo timer chiama update() con l'id di quella scheda, così un tick valuta solo quella scheda. Ogni valore dinamico è contato sullo schermo: passa a un update() semplice e l'orologio viene valutato circa cento volte al secondo per cambiare una volta sola.
Editor di pixel
L'immagine è un unico array semplice di 1024 stringhe colore, e ogni cella legge il suo colore da lì. Un tratto scrive nell'array e chiama update(); quando finisce, l'editor ne conserva una copia con slice(). Annulla, ripeti e ogni passo nella list() della cronologia rimettono un array precedente: niente store, niente dati immutabili.
Snake
Un ciclo di gioco è un timer che chiama step() su oggetti semplici, poi update() una volta per tick. Il serpente è una list() dei suoi oggetti cella, e a ogni tick l'oggetto coda diventa la nuova testa, così un elemento si sposta e nessuno viene costruito: il conteggio dei segmenti costruiti sale solo quando il serpente mangia. Il cibo compare con un'animazione keyframes().
Sequencer a passi
Una libreria che possiede il proprio clock. Web Audio prenota ogni nota in anticipo sulla propria linea temporale, e il pattern è un semplice array 2D di booleani che la griglia inverte e lo scheduler legge, così un clic si sente al passaggio successivo. La testina aggiorna solo il suo scope() quando il passo udibile cambia. L'audio parte al primo Play e si chiude nella pulizia del mount, così uscire dall'esempio ferma il suono.
Selettore di lingua
Ogni etichetta è un valore statico, scritto come in un'app monolingue, così update() non lo legge mai più: i clic sul carrello aggiornano solo quantità e totali. Cambiare lingua chiama forceUpdate() su questo albero, che esegue di nuovo il componente e patcha gli stessi elementi, lang e dir inclusi. Valute, plurali, date e liste vengono da Intl, e il carrello e un coupon digitato sopravvivono al cambio.
Editor di temi
Una piccola libreria di componenti: createCss() nomina i token e variants() costruisce pulsanti, badge, schede, input, avvisi e interruttori a partire da essi. I token sono variabili CSS, così ogni classe compila una volta sola. Ogni controllo scrive un oggetto tema semplice e chiama update(), che riscrive il testo di un unico elemento style.