Cos'è React Remix - Logo

Cos'è React Remix? Un nuovo framework React

Scopriamo cos'è React Remix, un nuovo framework basato su React Router e creato dagli stessi sviluppatori di React Router per migliorare la SEO, i tempi di build e le performance.

Tempo di lettura: 10'

Piace a 18 persone
Pubblicato il 18 novembre 2021 (Aggiornato il 07 luglio 2022)

Di recente un nuovo framework React è stato lanciato e il suo nome è Remix. Gli sviluppatori di React Router hanno lavorato duro per creare e presentare questo nuovo framework e in questo articolo sono lieto di rispondere alla domanda "Cos'è React Remix?".

Dopo aver visto il video di presentazione, sono rimasto impresso dalle potenzialità di Remix e ho voluto fare qualche prova da me per descriverne le caratteristiche in questo articolo, nel modo più originale e personale possibile. Dopo averlo provato, posso solo confermare che sarà un'ottima alternativa alle soluzioni già presenti quando parliamo di frameweork React, come NextJS o Gatsby. Sicuramente ne terrò in conto per i miei futuri progetti.

Adesso è giunto il momento di analizzare le proprietà di React Remix ma prima ti faccio leggere la sua definizione secondo i propri fondatori:

Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

React Remix: la storia

Tutto è iniziato l'anno scorso quando due sviluppatori hanno annunciato lo sviluppo di un nuovo framework React che sarebbe diventato un nuovo attore nel settore dello sviluppo web. L'hanno chiamato React Remix, ma in seguito sono spariti per un po', senza rivelare nessuna informazione interessante, e mantenendo tutto top secret. Fino ad ora.

Il 22 novembre del 2021 hanno rilasciato ufficialmente la prima versione concedendo una live in streaming e mostrando tutte le potenzialità di Remix come nuovo framework React e descrivendo cos'è React Remix. Si potrebbe pensare che non ci sia bisogno di un altro framework in quanto esiste già una vasta gamma di soluzioni. Ma sembra non essere importato a questi sviluppatori e quindi eccoci qua: React Remix è un nuovo framework React!

Quando dico due sviluppatori non parlo di due ragazzi a caso. Sono nientemeno che i creatori di React Router!

Scopriamo ora nel dettaglio cos'è React Remix, le sue caratteristiche e come utilizzare React Remix in un'applicazione.

Cos'è React Remix?

React Remix è un nuovo framework React il cui sviluppo è iniziato nel 2019. Gli sviluppatori sono Michael Jackson (co-fondatore, CEO) e Ryan Florence (co-fondatore), gli stessi sviluppatori dietro React Router. Qualsiasi software engineer che ha lavorato con React conosce un po' React Router, quindi sappiamo di cosa stiamo parlando. Nel caso in cui non conosci React Router, è "semplicemente" la libreria di routing più utilizzata in React, in grado di funzionare ovunque venga eseguito React: sul web, su NodeJS e su React Native. È anche il nucleo di altre librerie di routing più note come react-router-dom e react-router-native.

Quindi, partendo da React Router, hanno costruito un framework basato su di esso: React Remix. Ora, per rispondere alla domanda cos'è React Remix possiamo affermare che React Remix è un framework basato su React Router, che affronta alcuni dei problemi di Client Side Rendering e molti altri. Se conosci un po' NextJS ti risulterà molto simile, ma con diverse importanti differenze che vedremo nella prossima sezione. Quindi, continua a leggere!

React Remix: obiettivo

Ma aspetta un momento. Prima di iniziare a elencare tutte le funzionalità, dobbiamo capire perché uno sviluppatore web dovrebbe averne bisogno. Rispondere a questa domanda ci aiuta a capire a cosa serve React Remix.

L'obiettivo principale di React Remix è fornire un nuovo strumento di sviluppo web per migliorare il tempo di compilazione, le prestazioni in fase di esecuzione e la velocità di sviluppo. Inoltre, sono stati tenuti sott'occhio i miglioramenti SEO e l'accessibilità. Tutto questo grazie a un nuovo approccio Server Side Rendering e un nuovo strumento di build.

Non è uno strumento semplice e per questo lo chiamiamo framework, perché fornisce una piattaforma a 360 gradi per costruire siti web migliori, proprio come affermano i propri fondatori.

A mio modesto parere, si voleva creare un'unione tra NextJS e React Router. L'obiettivo è quello di fornire un semplice generatore di siti web di rendering lato server ma migliore, includendo alcune interessanti funzionalità di React Router e altre novità in ambito di sviluppo che presto ti svelerò.

Ora siamo pronti per iniziare a scoprire le nuove funzionalità incluse in React Remix, finalmente sempre più vicini per rispondere alla domanda “Cos'è React Remix?”.

Funzionalità di React Remix

Come ho detto prima, React Remix sembra essere simile a NextJS o a GatsbyJS a prima vista. Se li conosci, potrebbero sembrarti uguali, ma dopo questa spiegazione cambierai idea, vediamo perché.

React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration

Se prendiamo come esempio NextJS, sappiamo che costruisce i percorsi in base alla struttura del progetto. Dichiariamo all'interno della cartella delle pagine i file che vogliamo e il framework usa i nomi per costruire tutto il sistema di routing dell'applicazione. Lo stesso fa React Remix, utilizzando una cosiddetta cartella route. React Remix in questo caso costruisce anche i percorsi basati sul File System. E questa è la più grande innovazione in React Router.

Tuttavia, invece di replicare semplicemente NextJS o GatsbyJS, è stata aggiunta la funzionalità dei percorsi annidati (Nesting Routes)! Significa che possiamo avere percorsi in cui i figli ereditano il layout padre senza replicare nel codice il componente contenitore. Fantastico!

Cos'è React Remix - Struttura del progetto

E che dire del famoso Suspense? In React Router si usa per caricare un componente che è in grado di memorizzare nella cache il componente già mostrato. In questo caso un altro rendering con le stesse proprietà non eseguirà nuovamente il rendering dello stesso layout di pagina. In React Remix hanno cambiato questo approccio, abilitando una cache di suspense basata sulla posizione. Ogni volta che carichiamo una pagina nello stato della cronologia diventa univoca e Suspense memorizza nella cache il componente in base alla posizione e non alle proprietà. Se navighiamo avanti e indietro, o se aggiugiamo di nuovo la stessa pagina visitandola da un link di navigazione, sarà un altro record univoco.

E per concludere con le funzionalità di routing, pare abbiano incluso una grande funzionalità chiamata ripristino dello scorrimento. Ogni pagina memorizzerà nella cache la posizione di scorrimento nel caso in cui si debba tornare su di essa potendo quindi proseguire da dove ci siamo fermati. E un ruolo importante qui è giocato dalla Suspense, che può memorizzare le stesse pagine ma con scrolls diversi, se fanno parte di una posizione diversa nello stato della storia di navigazione.

Penso che questo sia un grande miglioramento. Ora vediamo cosa resta.

React Remix: tempi di build e Fast Refresh più rapidi

Ho detto tempi di compilazione più rapidi? Sì, hai ragione! Per realizzarlo hanno integrato esbuild.

Se non lo conosci non preoccuparti perché dovresti solo sapere che è il bundle JavaScript più veloce (leggi qui). E posso confermarlo! Mentre guardavo l'anteprima, ho visto quanto è veloce, anche durante l'aggiornamento rapido. E quando infine l'ho provato, ho visto una grandissima differenza con altri bundlers come Webpack o Browserify. Questo sarà un vero vantaggio per ridurre il tempo di build localmente e in CI.

Ottimizzazione form React Remix

Un altro grande passo in avanti è stato fatto quando si parla di moduli (form). L'invio dei dati da parte di un utente ha sempre richiesto uno sviluppo extra. La gestione dei dati del form e lo stato di invio ad esempio. Quindi dovevamo utilizzare un useState e accedere agli elementi input attraverso una qualche istruzione.

Ma come Remix gestisce un form? Non potrebbe essere più semplice. Prima di tutto qui si parla di actions. Sarà necessario esportare una funzione chiamata action nello stesso file e sarà lo stesso gestore del post che verrà inviato dal modulo. Sarà una vera e propria chiamata di tipo POST fatta al nostro Remix Back End. È un grande vantaggio perchè innanzitutto non dobbiamo accedere ad ogni input, ottenere il suo valore e inserirlo nel corpo della richiesta. In più, possiamo utilizzare un hook chiamato useTransition per ottenere informazioni sullo stato della richiesta. Con questo possiamo godere di uno sviluppo più pulito per gestire un modulo. È una delle funzionalità migliori che abbia visto in Remix.

Cos'è React Remix - Ottimizzazione form

Gestione degli errori in React Remix

Un'altra grande funzionalità riguarda la gestione degli errori che utilizzano l'Error Boundary. In React eravamo soliti utilizzare un component che potesse aver la funzione componentDidCatch. Ma in Remix le cose cambiano. Ancora una volta il tutto è ridotto all'export di una funzione, che in questo caso prenderà il nome di ErrorBoundary, per gestire gli errori in runtime. Mentre esporteremo la funzione CatchBoundary per gestire gli errori provenienti dai loaders e dalle actions.

Cos'è React Remix - La gestione degli errori

Rendering lato server React Remix

Una delle prime risposte alla domanda "A cosa serve React Remix" è il rendering lato server. L'introduzione di questo nuovo sistema aiuta a creare siti web migliori in quanto sono più performanti in fase di esecuzione, specialmente per la prima visita dell'utente. Questo può aumentare il nostro SEO come sta facendo NextJS. Inoltre, SSR può essere eseguito anche in modalità sviluppo. E c'è una piccola differenza in più ed è correlata al caricamento dei dati. Vediamo di seguito cosa succederà.

Caricamento dei dati di React Remix

React Remix utilizzerà la cache HTTP completa per gestire il modo in cui dovrebbe recuperare i dati dalla fonte originale. Se esportiamo la funzione loaders in una pagina React Remix, il valore restituito è accessibile dal componente che verrà renderizzato lato server. Fantastico! Ma cosa succede se voglio dei dati aggiornati, senza prenderli dalla cache? Bene, pare abbiano costruito un hook per questo. Sembra assurdo pensare a come sarà facile pulire la cache e ottenere i dati appena generati.

Cos'è React Remix - Data Loaders

E le funzionalità più interessanti con la funzione di caricamento non si fermano qui. Abbiamo anche miglioramenti sul lato SEO. Continua a scorrere!

React Remix: ottimizzazione per i motori di ricerca

Uno degli obiettivi di React Remix era il miglioramento della SEO e ci sono riusciti. Grazie al rendering lato server, React Router può essere utilizzato facilmente per creare app performanti. E per migliorare la SEO senza utilizzare altre librerie per modificare i meta tag o il titolo della pagina, React Remix utilizza una funzione separata per esportare i meta tags. Io lo trovo fantastico dal momento che sono abituato a installare Helmet.

Cos'è React Remix - SEO Meta Tags

Con quest'ultima caratteristica abbiamo terminato la nostra lista. Qui sotto c'è un piccolo riassunto per avere una panoramica chiara.

Ora è il momento di fare un riassunto di cos'è React Remix. Ho fatto un elenco di alcune delle funzionalità più conosciute qui sotto:

  • Percorsi del file system
  • Nested layout in base ai percorsi
  • Suspense cache in base alla posizione
  • Restauro di scorrimento
  • ESBuild:
    • Divisione automatica del codice
    • Aggiornamento più veloce
    • Costruzione più veloce
    • Zero configurazione
  • Ottimizzazione dei form
  • Server Side Rendering per l'ambiente di produzione e di sviluppo
  • SEO Meta Tags gestiti con un export
  • Caricamento dati integrato con i loaders

Come usare React Remix

Prima del lancio non sapevamo se React Remix fosse stato open source o a pagamento e le informazioni su questo argomento erano davvero confuse. In alcuni casi ho notato che per accedere al codice era necessario ottenere una licenza ma poi parlavano di una versione gratuita. Ma con il lancio ufficiale hanno confermato che sarebbe stato totalmente free e open source.

E grazie a questo sono riuscito a provare Remix. Il comando a seguire ci permette di creare un'applicazione basata su Remix:

npx create-remix@latest

Cos'è React Remix - Creazione progetto

Una volta avviato il comando, ci chiederà qualche informazione:

  • Il nome dell'applicazione
  • Come vogliamo effettuare il deploy (diverse opzioni anche se io ho scelto Remix App Server)
  • Se utilizzeremo Typescript o JavaScript
  • Se vogliamo iniziare con l'installazione dei pacchetti immediatamente

Una volta che il processo sia terminato, siamo pronti per avviare la nostra nuova applicazione Remix con il seguente comando (possiamo anche utilizzare yarn):

npm run dev

Cos'è React Remix - Avvio applicazione

Questa piattaforma di esempio contiene diverse funzionalità che possiamo analizzare. Può essere molto utile per capire come funziona Remix. Alla fine, ci ritroveremo con questo tipo di homepage:

Cos'è React Remix - Remix Homepage

Non potrebbe essere più semplice di così.

Se vuoi iniziare ad utilizzare Remix e conoscerlo più a fondo puoi visitare la guida ufficiale su https://remix.run.

Quando uscirà React Remix

React Remix è stato lanciato il 22 novembre 2021. È possibile vedere il video del lancio sul canale ufficiale YouTube di Remix qui. Il video è stato presentato da Kent C. Dodds, Direttore della Developer Experience, Michael Jackson (co-fondatore, CEO) e Ryan Florence (co-fondatore).

Nel caso in cui sei rimasto/a affascinato/a da Remix e vuoi iniziare una nuova carriera come Front End developer, posso aiutarti. Ho creato un corso per aiutarti a diventare Front End Developer o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. Puoi acquistare il corso completo qui adesso con il 40% di sconto. I contenuti partiranno dalle basi di JavaScript fino ad un livello più avanzato. Parleremo di testing, del protocollo HTTP, delle diverse versioni di ECMAScript e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia assistenza a disposizione, tanti quiz, il materiale in PDF e un meeting finale. Se non fossi interessato alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Clicca qui per acquistare la versione Basic.

Ora è il momento di concludere. Ti ricordo che se ti è piaciuto questo articolo e vuoi supportarmi, puoi seguire questi semplici passaggi facili e gratuiti:

  1. Lascia un mi piace cliccando sull'icona del cuore qui sotto;
  2. Condividi questo post sui tuoi account social o con i tuoi amici;
  3. Seguimi su Instagram, Facebook, Twitter e su Github;
  4. Iscriviti alla newsletter qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).

Grazie mille per l'attenzione e ti auguro una buona giornata!

Articoli relativi a JavaScript, Front End, React

Corsi di JavaScript

  • 50% off
    Corso FrontEnd Developer 2022

    Corso Front End Developer

    75 venduti

    Impara e rafforza le tue conoscenze relative a JavaScript ad un livello professionale. Attraverso la creazione di un progetto da zero, un portafoglio virtuale, scopriremo le tecnologie per creare e mantenere una piattaforma WEB.

    • JavaScript
    • Starter
    • ECMAScript
    • HTML5
    • CSS
    • Design patterns
    • NodeJS
    • NPM
    • Front End
    Ottieni info
  • 50% off
    Corso FrontEnd Developer Basic 2022

    Corso Front End Developer (Basic)

    30 venduti

    Impara e rafforza le tue conoscenze relative a JavaScript ad un livello professionale. Attraverso la creazione di un progetto da zero, un portafoglio virtuale, scopriremo le tecnologie per creare e mantenere una piattaforma WEB.

    • JavaScript
    • Starter
    • ECMAScript
    • HTML5
    • CSS
    • Design patterns
    • NodeJS
    • NPM
    • Front End
    Ottieni info

Newsletter

Iscriviti alla newsletter per ricevere le ultime novità sul mondo della programmazione, sconti sui corsi di programmazione e altri contenuti pubblicati sulla piattaforma.
Riceverai subito uno sconto del 10%.