Psst! Ecco perché ReasonReact è il modo migliore per scrivere React

Stai utilizzando React per creare interfacce utente? Bene, lo sono anch'io. E ora imparerai perché dovresti scrivere le tue applicazioni React usando ReasonML.

React è un modo piuttosto interessante per scrivere interfacce utente. Ma potremmo renderlo ancora più bello? Meglio?

Per renderlo migliore, dobbiamo prima identificare i suoi problemi. Quindi, qual è il problema principale di React come libreria JavaScript?

Inizialmente React non è stato sviluppato per JavaScript

Se dai un'occhiata più da vicino a React, vedrai che alcuni dei suoi principi principali sono estranei a JavaScript. Parliamo di immutabilità, principi di programmazione funzionale e sistema di tipi in particolare.

L'immutabilità è uno dei principi fondamentali di React. Non vuoi mutare i tuoi oggetti di scena o il tuo stato perché se lo fai, potresti avere conseguenze imprevedibili. In JavaScript, non abbiamo immutabilità pronta all'uso. Manteniamo le nostre strutture di dati immutabili da una convenzione o utilizziamo librerie come immutableJS per raggiungerlo.

React si basa sui principi della programmazione funzionale poiché le sue applicazioni sono composizioni di funzioni. Sebbene JavaScript abbia alcune di queste caratteristiche, come le funzioni di prima classe, non è un linguaggio di programmazione funzionale. Quando vogliamo scrivere un bel codice dichiarativo, dobbiamo usare librerie esterne come Lodash / fp o Ramda.

Quindi, che succede con il sistema di tipi? In React, avevamo PropTypes. Li abbiamo usati per imitare i tipi in JavaScript poiché non è un linguaggio tipicamente statico stesso. Per sfruttare la tipizzazione statica avanzata, è necessario utilizzare nuovamente dipendenze esterne, come Flow e TypeScript.

React e confronto JavaScript

Come puoi vedere, JavaScript non è compatibile con i principi fondamentali di React.

Esiste un altro linguaggio di programmazione che sarebbe più compatibile con React di JavaScript?

Fortunatamente, abbiamo ReasonML.

In Reason, otteniamo l'immutabilità fuori dalla scatola. Dato che si basa su OCaml, il linguaggio di programmazione funzionale, abbiamo anche queste caratteristiche integrate nel linguaggio stesso. Reason ci fornisce anche un sistema di tipo forte da solo.

Confronto di React, JavaScript e Reason

Reason è compatibile con i principi fondamentali di React.

Motivo

Non è una nuova lingua. È una sintassi e toolchain alternativa simile a JavaScript per OCaml, un linguaggio di programmazione funzionale che esiste da più di 20 anni. Reason è stato creato dagli sviluppatori di Facebook che già utilizzavano OCaml nei loro progetti (Flow, Infer).

Reason, con la sua sintassi simile a C, rende OCaml accessibile per le persone che provengono da linguaggi tradizionali come JavaScript o Java. Ti fornisce una migliore documentazione (rispetto a OCaml) e una comunità in crescita intorno ad esso. Inoltre, semplifica l'integrazione con la base di codice JavaScript esistente.

OCaml funge da lingua di supporto per Reason. La ragione ha la stessa semantica di OCaml: solo la sintassi è diversa. Ciò significa che puoi scrivere OCaml usando la sintassi simile a JavaScript di Reason. Di conseguenza, puoi sfruttare le fantastiche funzionalità di OCaml, come il suo forte sistema di tipi e la corrispondenza dei motivi.

Diamo un'occhiata a un esempio della sintassi di Reason.

lascia che fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
per (i da 1 a 100) {
  Js.log (FizzBuzz (i))
};

Sebbene in questo esempio utilizziamo la corrispondenza dei modelli, è ancora abbastanza simile a JavaScript, giusto?

Tuttavia, l'unica lingua utilizzabile per i browser è ancora JavaScript, il che significa che dobbiamo compilarlo.

BuckleScript

Una delle potenti funzionalità di Reason è il compilatore BuckleScript, che prende il tuo codice Reason e lo compila in JavaScript leggibile e performante con una grande eliminazione del codice morto. Apprezzerai la leggibilità se stai lavorando in un team in cui non tutti hanno familiarità con Reason, poiché saranno ancora in grado di leggere il codice JavaScript compilato.

La somiglianza con JavaScript è così vicina che non è necessario che il compilatore modifichi parte del codice di Reason. Quindi, puoi goderti i vantaggi della lingua tipizzata staticamente senza alcuna modifica al codice.

lascia aggiungere = (a, b) => a + b;
aggiungere (6, 9);

Questo è un codice valido in entrambi i motivi e JavaScript.

BuckleScript viene fornito con quattro librerie: la libreria standard denominata Belt (la libreria standard OCaml è insufficiente) e le associazioni a JavaScript, Node.js e API DOM.

Poiché BuckleScript è basato sul compilatore OCaml, otterrai una compilation straordinariamente veloce che è molto più veloce di Babel e molte volte più veloce di TypeScript.

Compiliamo il nostro algoritmo FizzBuzz scritto in Reason in JavaScript.

Compilazione del codice di Reason in JavaScript tramite BuckleScript

Come puoi vedere, il codice JavaScript risultante è piuttosto leggibile. Sembra che sia stato scritto da uno sviluppatore JavaScript.

Reason non si compila solo in JavaScript, ma anche in nativo e bytecode. Quindi, puoi scrivere una singola applicazione utilizzando la sintassi di Reason ed essere in grado di eseguirla nel browser su telefoni MacOS, Android e iOS. C'è un gioco chiamato Gravitron di Jared Forsyth che è scritto in Reason e può essere eseguito su tutte le piattaforme che ho appena citato.

Interoperabilità JavaScript

BuckleScript ci fornisce anche l'interoperabilità di JavaScript. Non solo puoi incollare il tuo codice JavaScript funzionante nella tua base di codice Reason, ma anche il tuo codice Reason può interagire con quello JavaScript. Ciò significa che puoi facilmente integrare il codice di Reason nella tua base di codice JavaScript esistente. Inoltre, puoi usare tutti i pacchetti JavaScript dell'ecosistema NPM nel tuo codice Reason. Ad esempio, è possibile combinare Flow, TypeScript e Reason insieme in un singolo progetto.

Tuttavia, non è così semplice. Per utilizzare le librerie JavaScript o il codice in Reason, è necessario prima portarlo su Reason tramite i collegamenti Reason. In altre parole, hai bisogno dei tipi affinché il tuo codice JavaScript non tipizzato sia in grado di trarre vantaggio dal forte sistema di tipi di Reason.

Ogni volta che è necessario utilizzare una libreria JavaScript nel codice di Reason, verificare se la libreria è già stata trasferita su Reason sfogliando il database Redex (Reason Package Index). È un sito Web che aggrega diverse librerie e strumenti scritti nelle librerie Reason e JavaScript con collegamenti Reason. Se hai trovato la tua libreria lì, puoi semplicemente installarla come dipendenza e usarla nell'applicazione Reason.

Tuttavia, se non hai trovato la tua libreria, dovrai scrivere tu stesso i binding di Reason. Se stai appena iniziando con Reason, tieni presente che scrivere i binding non è una cosa con cui vuoi iniziare, poiché è una delle cose più impegnative nell'ecosistema di Reason.

Fortunatamente, sto solo scrivendo un post sulla scrittura di associazioni di motivi, quindi rimanete sintonizzati!

Quando hai bisogno di alcune funzionalità di una libreria JavaScript, non è necessario scrivere i collegamenti di Reason per una libreria nel suo insieme. Puoi farlo solo per le funzioni o i componenti che devi usare.

ReasonReact

Questo articolo riguarda la scrittura di React in Reason, cosa che puoi fare grazie alla libreria ReasonReact.

Forse ora stai pensando "Non so ancora perché dovrei usare React in Reason".

Abbiamo già menzionato il motivo principale per farlo: Reason è più compatibile con React di JavaScript. Perché è più compatibile? Perché React è stato sviluppato per Reason, o più precisamente, per OCaml.

Road to ReasonReact

Il primo prototipo di React è stato sviluppato da Facebook ed è stato scritto in Standard Meta Language (StandardML), cugino di OCaml. Quindi, è stato spostato in OCaml. React è stato anche trascritto in JavaScript.

Questo perché l'intero Web utilizzava JavaScript, e probabilmente non era intelligente dire "Ora costruiremo l'interfaccia utente in OCaml". E ha funzionato: React in JavaScript è stato ampiamente adottato.

Quindi, ci siamo abituati a React come una libreria JavaScript. Reagire insieme ad altre librerie e linguaggi - Elm, Redux, Recompose, Ramda e PureScript - ha reso popolare la programmazione funzionale in JavaScript. E con l'ascesa di Flow e TypeScript, anche la tipizzazione statica divenne popolare. Di conseguenza, il paradigma di programmazione funzionale con tipi statici è diventato mainstream nel mondo del front-end.

Nel 2016, Bloomberg ha sviluppato e sviluppato open source BuckleScript, il compilatore che trasforma OCaml in JavaScript. Ciò ha permesso loro di scrivere codice sicuro sul front-end utilizzando il sistema di tipo forte di OCaml. Hanno preso il compilatore OCaml ottimizzato e incredibilmente veloce e hanno scambiato il suo back-end generando codice nativo con uno JavaScript che genera uno.

La popolarità della programmazione funzionale insieme al rilascio di BuckleScript ha generato il clima ideale per Facebook per tornare all'idea originale di React, che inizialmente era scritta in un linguaggio ML.

ReasonReact

Hanno preso la semantica OCaml e la sintassi JavaScript e hanno creato Reason. Hanno anche creato il wrapper Reason attorno a React - libreria ReasonReact - con funzionalità aggiuntive come l'incapsulamento dei principi Redux in componenti con stato. In tal modo, hanno riportato React alle sue radici originali.

Il potere di reagire in ragione

Quando React è entrato in JavaScript, abbiamo adattato JavaScript alle esigenze di React introducendo varie librerie e strumenti. Ciò significava anche più dipendenze per i nostri progetti. Per non parlare del fatto che queste librerie sono ancora in fase di sviluppo e che vengono introdotte regolarmente modifiche. Quindi è necessario mantenere queste dipendenze con cura nei progetti.

Ciò ha aggiunto un ulteriore livello di complessità allo sviluppo di JavaScript.

La tua tipica applicazione React avrà almeno queste dipendenze:

  • tipizzazione statica - Flow / TypeScript
  • immutabilità - immutableJS
  • routing - ReactRouter
  • formattazione - Prettier
  • pelucchi - ESLint
  • funzione di supporto - Ramda / Lodash

Ora scambiamo JavaScript React per ReasonReact.

Abbiamo ancora bisogno di tutte queste dipendenze?

  • digitazione statica - integrata
  • immutabilità: integrata
  • routing: integrato
  • formattazione: integrata
  • sfilacciatura - integrata
  • funzioni di supporto - integrate

Puoi saperne di più su queste funzionalità integrate nel mio altro post.

Nell'applicazione ReasonReact, non sono necessarie queste e molte altre dipendenze poiché molte funzionalità cruciali che semplificano il tuo sviluppo sono già incluse nella lingua stessa. Pertanto, mantenere i tuoi pacchetti diventerà più semplice e non avrai un aumento della complessità nel tempo.

Questo grazie a OCaml, che ha più di 20 anni. È un linguaggio maturo con tutti i suoi principi fondamentali in atto e stabili.

Incartare

All'inizio, i creatori di Reason avevano due opzioni. Prendere JavaScript e in qualche modo migliorarlo. In questo modo avrebbero anche bisogno di far fronte ai suoi oneri storici.

Tuttavia, hanno preso una strada diversa. Hanno preso OCaml come un linguaggio maturato con grandi prestazioni e lo hanno modificato in modo che assomigli a JavaScript.

React si basa anche sui principi di OCaml. Ecco perché otterrai un'esperienza di sviluppatore molto migliore quando la usi con Reason. React in Reason rappresenta un modo più sicuro di costruire componenti React, poiché il sistema di tipo forte ha le spalle e non è necessario affrontare la maggior parte dei problemi JavaScript (legacy).

Qual è il prossimo?

Se vieni dal mondo di JavaScript, sarà più facile per te iniziare con Reason, a causa della sua sintassi simile a JavaScript. Se stai programmando in React, sarà ancora più facile per te poiché puoi usare tutta la tua conoscenza di React poiché ReasonReact ha lo stesso modello mentale di React e un flusso di lavoro molto simile. Ciò significa che non è necessario iniziare da zero. Imparerai la ragione man mano che sviluppi.

Il modo migliore per iniziare a utilizzare Reason nei tuoi progetti è farlo in modo incrementale. Ho già detto che puoi prendere il codice di Reason e usarlo in JavaScript e viceversa. Puoi fare la stessa cosa con ReasonReact. Prendi il componente ReasonReact e lo usi nell'applicazione React JavaScript e viceversa.

Questo approccio incrementale è stato scelto dagli sviluppatori di Facebook che utilizzano ampiamente Reason nello sviluppo dell'app Facebook Messenger.

Se vuoi creare un'applicazione usando React in Reason e apprendere le basi di Reason in modo pratico, controlla il mio altro articolo in cui costruiremo un gioco Tic Tac Toe insieme.

Se hai domande, critiche, osservazioni o suggerimenti per migliorare, sentiti libero di scrivere un commento qui sotto o di contattarmi via Twitter o il mio blog.