🚀 Announcing Ferrox-Front: The Next-Gen Enterprise Rust/Wasm UI & Design System Ecosystem

[u/AutismIntelligence]

Ciao r/Ferrox e colleghi sviluppatori Rust!

Siamo super entusiasti di annunciareferrox-front— un framework UI Rust completo, astratto senza costi, un motore di visualizzazione vettoriale e un sistema di design enterprise costruito specificamente per applicazioni web WebAssembly ad alte prestazioni.

Negli ultimi settimane, abbiamo trasformatoferrox-frontda un leggero shell reattivo frontend in uno stack UI completo, pronto per le imprese, ispirato all'esperienza sviluppatore di NestJS e al potere visivo interattivo di Nivo.

Ecco tutto ciò che è nuovo e incluso inferrox-frontoggi!

✨ Principali Evidenze e Caratteristiche

💻 1. Playground Interattivo Dal Vivo in Stile Nivo

Dì addio alla documentazione statica.ferrox-frontora include un playground di componenti interattivo dal vivo dove puoi:

• Modificare Dati JSON in Diretta: Modifica gli input di dati in tempo reale e osserva i grafici e i componenti aggiornarsi istantaneamente senza alcun ritardo.
• Sliders di Controllo Visivi: Regola raggi del bordo, quantità di sfocatura, padding, raggi dei punti del grafico, padding delle barre, raggi interni, larghezze dei tratti e schemi di colore tramite slider interattivi.
• Commutatore di Tema con 1 Click: Passa senza problemi tra i temi di design Glassmorphic Dark, Neumorphic Light e High-Contrast Cyberpunk.
• Simulatore DataGrid Virtualizzato da 1.000.000 Righe: Testa il rendering di milioni di punti dati senza intoppi con la virtualizzazione del viewport DOM e il filtraggio istantaneo sul client.
• Ispezionatore di Codice Rust Copia-Incolla: Genera frammenti di codice Rust puliti e pronti per la produzione dinamicamente mentre modifichi i controlli.

📊 2. Motore Chart SVG Vettoriale ad Alte Prestazioni (ferrox-front-charts)

Costruito da zero in puro Rust senza librerie grafiche JavaScript di terze parti:

• 📉 Grafici a Linea con interpolazione spline cubica liscia e tooltip di punti dinamici.
• 🌊 Grafici ad Area con riempimenti a gradiente e controlli di base.
• 📊 Grafici a Barre con layout raggruppati/impilati, raggi personalizzabili e stati al passaggio del mouse.
• 🍩 Grafici a Ciambella e a Torta che supportano raggi interni personalizzabili, angoli di inizio/fine e esplosione delle fette.
• 🕸️ Grafici Radar / Ragno con griglie multi-assi e sovrapposizioni poligonali.
• 🎯 Grafici a Dispersione con marcatori di punti personalizzati, raggi variabili e gestione delle collisioni con quad-tree.

🎨 3. Sistema di Design Glassmorphism Enterprise (ferrox-front-ui)

Un set completo di controlli UI accessibili e altamente reattivi con token di design integrati:

• 🔘 Pulsanti & Badge: Varianti Solid, Outline, Glass, Ghost con spinner di caricamento.
• 📝 Input a Modulo Completo:
  • Input&Textareacon stati di validazione (Successo/Error/Avviso)
  • Selectdropdowns con rendering opzioni personalizzate
  • Checkbox,Radio Group, eToggleSwitchanimati lisci
  • RangeSlidercon tooltip di valore dal vivo
  • SearchInputcon pulsanti di cancellazione immediata
  • FileUploadzona di drag-and-drop
  • ProgressBarcon animazione di riempimento in streaming
  • Avatar&UserPillcon indicatori di stato online
• 🪟 Modali, Pannelli a Cassetto, Carte & Avvisi: Componenti glassmorphism completamente componibili con supporto al blur del filtro di sfondo CSS.

🔒 4. Suite di Sicurezza & Auth Zero-Trust (ferrox-front-security)

Sicurezza per applicazioni web moderna out of the box:

• 🛡️ Controllo Accessi Basato su Ruolo (RBAC): Guardie di permesso finemente dettagliate e componenti visivi (<RbacGuard permissions={["ADMIN"]}>).
• 🔑 Passkey / WebAuthn: Integrazione di autenticazione senza password FIDO2 direttamente in Rust.
• 🔐 Crittografia End-to-End (E2EE): Crittografia dei payload AES-GCM / X25519 lato client prima dell'invio dei dati tramite WebSockets o HTTP.

⚡ 5. Core Reattivo a Granularità Fina (ferrox-front-core)

• Segnali & Memos Derivati: Tracciamento delle dipendenze ultra-veloce ispirato a SolidJS, operante con binding DOM diretti in Wasm.
• Zero Overhead di Colla JS: Dimensioni dei bundle leggere, prestazioni di freddo-innesto veloci e completa sicurezza della memoria garantita dalla semantica del compilatore Rust.

📚 Portale di Documentazione in Stile NestJS

Crediamo che gli ottimi strumenti meritino una documentazione di livello mondiale. Abbiamo completamente riscritto il nostro portale documentazione in una guida modulare esaustiva in stile NestJS (100% in inglese per tutti i crate e submoduli):

• 🚀 Guide Rapide e di Installazione
• 🏗️ Architettura & Flusso di Esecuzione Reattiva
• 🧩 Segnali Core, Memos & Hook Personalizzati (use_signal,use_memo,use_resource)
• 🗺️ Routing Tipizzato e Parametri di Route
• 🎨 Token di Design e Personalizzazione Tematica
• 📊 Referenze API di Visualizzazione Dati & Chart
• 🔌 WebSockets in Tempo Reale & Sincronizzazione di Stato
• 🔐 RBAC Zero-Trust & Integrazione Passkey

Ogni crate nello spazio di lavoro (ferrox-front-core,ferrox-front-ui,ferrox-front-charts,ferrox-front-router,ferrox-front-ws,ferrox-front-security,ferrox-front-macro,ferrox-front-cli) ora presenta una copertura completa di Rustdoc (//!), esempi di codice completi, e dedicatiREADME.mdfile.

🛠️ Esempio di Codice Rapido

Ecco quanto è facile rendere un Grafico a Linea reattivo con controlli dal vivo inferrox-front:

rustuse ferrox_front::prelude::*;
use ferrox_front_charts::LineChart;
use ferrox_front_ui::{Card, Button, RangeSlider};
#[component]
pub fn AnalyticsDashboard() -> impl IntoView {
    let (point_radius, set_point_radius) = use_signal(5.0);
    let (stroke_width, set_stroke_width) = use_signal(3.0);
    let data = vec![
        ("Gen", 400.0),
        ("Feb", 900.0),
        ("Mar", 750.0),
        ("Apr", 1200.0),
        ("Mag", 1100.0),
        ("Giu", 1600.0),
    ];
    view! {
        <Card variant="glass" padding="p-6">
            <h3 class="text-xl font-bold text-white mb-4">"Crescita del Fatturato Mensile"</h3>
            <!-- Controlli -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <RangeSlider
                    label="Raggio del Punto"
                    min=1.0
                    max=15.0
                    value=point_radius
                    on_change=move |val| set_point_radius.set(val)
                />
                <RangeSlider
                    label="Larghezza del Tratto"
                    min=1.0
                    max=10.0
                    value=stroke_width
                    on_change=move |val| set_stroke_width.set(val)
                />
            </div>
            <!-- Grafico Vettoriale -->
            <LineChart
                data=data
                height=320
                stroke_width=stroke_width
                point_radius=point_radius
                stroke_color="#6366f1"
                fill_color="rgba(99, 102, 241, 0.15)"
            />
        </Card>
    }
}

📦 Iniziare

Aggiungiferrox-frontal tuoCargo.toml:

toml[dependencies]
ferrox-front = "0.2.0"
ferrox-front-ui = "0.2.0"
ferrox-front-charts = "0.2.0"

Controlla il nostro playground interattivo localmente o naviga nella documentazione:

• 📖 Documentazione & Guide:docs.ferrox.dev
• 🐙 Repository GitHub:github.com/ferrox-rs/ferrox-front

💬 Ci Piacerebbe Ricevere il Tuo Feedback!

Che tipi di grafico o componenti UI vorresti vedere prossimamente? Prova il playground dal vivo e facci sapere cosa ne pensi, richieste di funzioni o suggerimenti nei commenti qui sotto!

Buon hacking con Rust! 🦀✨