Psst! Iată de ce ReasonReact este cel mai bun mod de a scrie React

Folosești React pentru a construi interfețe de utilizator? Ei bine, și eu sunt. Și acum, veți afla de ce ar trebui să scrieți aplicațiile React utilizând ReasonML.

React este un mod destul de fain de a scrie interfețe utilizator. Dar, am putea să o facem și mai rece? Mai bine?

Pentru a îmbunătăți, trebuie să identificăm mai întâi problemele sale. Deci, care este principala problemă a React ca bibliotecă JavaScript?

Reacția nu a fost inițial dezvoltată pentru JavaScript

Dacă aruncați o privire mai atentă asupra React, veți vedea că unele dintre principiile sale principale sunt străine de JavaScript. Să vorbim despre imuabilitate, principii funcționale de programare și în special tipul sistemului.

Imuabilitatea este unul dintre principiile de bază ale reacției. Nu doriți să vă mutați recuzita sau starea dvs., deoarece, dacă faceți acest lucru, puteți avea consecințe imprevizibile. În JavaScript, nu avem imuabilitate din cutie. Ne menținem structurile de date imuabile printr-o convenție sau folosim biblioteci precum immutableJS pentru realizarea acesteia.

React se bazează pe principiile programării funcționale, deoarece aplicațiile sale sunt compoziții de funcții. Deși JavaScript are unele dintre aceste caracteristici, cum ar fi funcții de primă clasă, nu este un limbaj de programare funcțional. Când vrem să scriem un cod declarativ frumos, trebuie să folosim biblioteci externe precum Lodash / fp sau Ramda.

Deci, ce se întâmplă cu sistemul de tip? În React, am avut PropTypes. Le-am folosit pentru a imita tipurile în JavaScript, deoarece nu este o limbă scrisă static în sine. Pentru a profita de tastarea statică avansată, trebuie să utilizăm din nou dependențe externe, cum ar fi Flow și TypeScript.

Reacționați și comparați JavaScript

După cum vedeți, JavaScript nu este compatibil cu principiile de bază ale React.

Există un alt limbaj de programare care ar fi mai compatibil cu React decât JavaScript?

Din fericire, avem ReasonML.

În motiv, obținem imuabilitatea din cutie. Întrucât se bazează pe OCaml, limbajul de programare funcțional, avem astfel de funcții încorporate și în limbajul în sine. Rațiunea ne oferă de asemenea un sistem de tip puternic.

Reacționează, JavaScript și comparația cu motivele

Rațiunea este compatibilă cu principiile de bază ale React.

Motiv

Nu este o limbă nouă. Este o sintaxă alternativă și o cablă de instrumente asemănătoare JavaScript pentru OCaml, un limbaj de programare funcțional care este de aproximativ 20 de ani. Motivul a fost creat de dezvoltatorii Facebook care au folosit deja OCaml în proiectele lor (Flow, Infer).

Motivul, cu sintaxa ei în formă de C, face ca OCaml să fie accesibil pentru persoanele care provin din limbi principale precum JavaScript sau Java. Vă oferă o documentare mai bună (în comparație cu OCaml) și o comunitate în creștere din jurul acesteia. În plus, facilitează integrarea cu baza de cod JavaScript existentă.

OCaml servește ca limbă de sprijin pentru rațiune. Rațiunea are aceeași semantică ca OCaml - doar sintaxa este diferită. Acest lucru înseamnă că puteți scrie OCaml folosind sintaxa asemănătoare cu JavaScript a Rațiunii. Drept urmare, puteți profita de caracteristicile minunate ale OCaml, cum ar fi sistemul său de tip puternic și potrivirea modelului.

Să aruncăm o privire la un exemplu de sintaxă a Rațiunii.

lasa fizzbuzz = (i) =>
  comutator (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
pentru (i în 1 la 100) {
  Js.log (fizzbuzz (i))
};

Deși folosim potrivirea modelului în acest exemplu, este totuși destul de similară cu JavaScript, nu?

Cu toate acestea, singurul limbaj utilizabil pentru browsere este încă JavaScript, ceea ce înseamnă că trebuie să le compilăm.

BuckleScript

Una dintre caracteristicile puternice ale Reason este compilatorul BuckleScript, care preia codul dvs. Reason și îl compilează în JavaScript lizibil și performant, cu o mare eliminare a codului mort. Veți aprecia lizibilitatea dacă lucrați într-o echipă în care nu toată lumea este familiarizată cu Motivul, deoarece vor putea totuși să citească codul JavaScript compilat.

Asemănarea cu JavaScript este atât de strânsă, încât o parte din codul Motivului nu trebuie să fie modificat deloc de compilator. Așadar, vă puteți bucura de avantajele limbajului scris tipic, fără modificarea codului.

să adăugăm = (a, b) => a + b;
se adaugă (6, 9);

Acesta este cod valabil atât în ​​Motiv, cât și în JavaScript.

BuckleScript este livrat cu patru biblioteci: biblioteca standard numită Belt (biblioteca standard OCaml este insuficientă) și legături la JavaScript, Node.js și, DOM API.

Întrucât BuckleScript se bazează pe compilatorul OCaml, veți obține o compilare rapidă, care este mult mai rapidă decât Babel și de câteva ori mai rapidă decât TypeScript.

Să compilăm algoritmul nostru FizzBuzz scris în Motivul JavaScript.

Compilarea codurilor motivului pentru JavaScript prin BuckleScript

După cum vedeți, codul JavaScript rezultat este destul de citit. Se pare că a fost scris de un dezvoltator JavaScript.

Nu numai că Rațiunea se compila cu JavaScript, dar și pentru nativ și bytecode. Așadar, puteți scrie o singură aplicație folosind sintaxa Reason și puteți rula în browser pe telefoanele MacOS, Android și iOS. Există un joc numit Gravitron de Jared Forsyth, care este scris în Reason și poate fi rulat pe toate platformele pe care tocmai le-am menționat.

JavaScript interop

BuckleScript ne oferă, de asemenea, interoperabilitate JavaScript. Nu numai că puteți insera codul dvs. JavaScript funcțional în baza de bază a motivului, dar codul Motiv poate interacționa cu acel JavaScript. Aceasta înseamnă că puteți integra cu ușurință codul Motiv în baza de cod JavaScript existentă. Mai mult, puteți utiliza toate pachetele JavaScript din ecosistemul NPM în codul dvs. Motiv. De exemplu, puteți combina Flow, TypeScript și Reason într-un singur proiect.

Cu toate acestea, nu este atât de simplu. Pentru a utiliza biblioteci sau coduri JavaScript în Reason, trebuie să-l portați mai întâi la Reason prin legături Reason. Cu alte cuvinte, aveți nevoie de tipuri pentru codul dvs. JavaScript netratat pentru a putea profita de un sistem puternic de tip Reason.

Ori de câte ori trebuie să utilizați o bibliotecă JavaScript în codul dvs. Motiv, verificați dacă biblioteca a fost deja portată la Reason, parcurgând baza de date Reason Package Index (Redex). Este un site web care agregă diferite biblioteci și instrumente scrise în bibliotecile Motiv și JavaScript cu legături Reason. Dacă ai găsit biblioteca acolo, poți doar să o instalezi ca dependență și să o folosești în aplicația Reason.

Cu toate acestea, dacă nu ați găsit biblioteca dvs., va trebui să scrieți singur legături de motive. Dacă tocmai începeți cu Rațiunea, rețineți că legăturile de scriere nu sunt un lucru cu care doriți să începeți, deoarece este unul dintre lucrurile cele mai provocatoare din ecosistemul Rațiunii.

Din fericire, doar scriu o postare despre scrierea legăturilor din motive, deci rămâneți în acord!

Atunci când aveți nevoie de funcționalitate dintr-o bibliotecă JavaScript, nu este necesar să scrieți legăturile Motive pentru o bibliotecă în ansamblu. Puteți face acest lucru numai pentru funcțiile sau componentele pe care trebuie să le utilizați.

ReasonReact

Acest articol este despre scrierea React în motiv, pe care îl puteți face datorită bibliotecii ReasonReact.

Poate vă gândiți acum „încă nu știu de ce ar trebui să folosesc React în rațiune”.

Am menționat deja principalul motiv pentru a face acest lucru - Motivul este mai compatibil cu React decât JavaScript. De ce este mai compatibil? Deoarece React a fost dezvoltat pentru Rațiune, sau mai precis, pentru OCaml.

Road to ReasonReact

Primul prototip al React a fost dezvoltat de Facebook și a fost scris în Standard Meta Language (StandardML), un văr al OCaml. Apoi, a fost mutat în OCaml. React a fost, de asemenea, transcris la JavaScript.

Acest lucru se datorează faptului că întregul web folosea JavaScript și nu a fost probabil inteligent să spunem: „Acum vom construi interfață de utilizator în OCaml” și a funcționat - Reactivarea în JavaScript a fost adoptată pe scară largă.

Deci, ne-am obișnuit să reacționăm ca o bibliotecă JavaScript. Reacționează împreună cu alte biblioteci și limbi - Elm, Redux, Recompose, Ramda și PureScript - a făcut ca programarea funcțională să fie populară în JavaScript. Și odată cu creșterea Flow și TypeScript, tastarea statică a devenit populară. Drept urmare, paradigma funcțională de programare cu tipuri statice a devenit mainstream în lumea front-end.

În 2016, Bloomberg a dezvoltat și a deschis BuckleScript, compilatorul care transformă OCaml în JavaScript. Acest lucru le-a permis să scrie cod sigur pe front-end folosind sistemul puternic de tip OCaml. Au luat compilatorul OCaml optimizat și rapid, și au schimbat codul autohton pentru generarea JavaScript.

Popularitatea programării funcționale, împreună cu lansarea BuckleScript au generat clima ideală pentru ca Facebook să revină la ideea originală a React, care a fost scrisă inițial într-un limbaj ML.

ReasonReact

Au luat semantica OCaml și sintaxa JavaScript și au creat Motivul. De asemenea, au creat pachetul Reason în jurul React - biblioteca ReasonReact - cu funcționalități suplimentare, cum ar fi încapsularea principiilor Redux în componente statale. Procedând astfel, au revenit React la rădăcinile sale originale.

Puterea de a reacționa în rațiune

Când React a intrat în JavaScript, am ajustat JavaScript la nevoile React, introducând diverse biblioteci și instrumente. Acest lucru a însemnat, de asemenea, mai multe dependențe pentru proiectele noastre. Ca să nu mai vorbim de faptul că aceste biblioteci sunt încă în curs de dezvoltare și modificări rupte sunt introduse în mod regulat. Deci trebuie să mențineți aceste dependențe cu grijă în proiectele dvs.

Aceasta a adăugat un alt strat de complexitate dezvoltării JavaScript.

Aplicația dvs. tipică React va avea cel puțin aceste dependențe:

  • tipping static - Flow / TypeScript
  • imutabilitate - imuabilJS
  • rutare - ReactRouter
  • formatare - Prettier
  • linting - ESLint
  • funcție de ajutor - Ramda / Lodash

Să schimbăm acum Reactia JavaScript pentru ReasonReact.

Mai avem nevoie de toate aceste dependențe?

  • tastarea statică - încorporată
  • imuabilitate - încorporat
  • rutare - încorporat
  • formatare - încorporat
  • linting - încorporat
  • funcții helper - încorporate

Puteți afla mai multe despre aceste funcții încorporate în cealaltă postare.

În aplicația ReasonReact, nu aveți nevoie de aceste și de multe alte dependențe, deoarece multe funcții cruciale care vă facilitează dezvoltarea sunt deja incluse în limba în sine. Deci, menținerea pachetelor va deveni mai ușoară și nu veți avea o creștere a complexității în timp.

Acest lucru se datorează OCaml, care are mai mult de 20 de ani. Este un limbaj matur, cu toate principiile sale fundamentale în loc și stabil.

Învelire

La început, creatorii Reason au avut două opțiuni. Pentru a lua JavaScript și a face cumva mai bine. Făcând asta, va trebui, de asemenea, să facă față sarcinilor sale istorice.

Cu toate acestea, au mers pe o altă cale. Au luat OCaml ca limbă maturizată cu performanțe deosebite și l-au modificat, astfel încât să seamănă cu JavaScript.

Reacția se bazează, de asemenea, pe principiile OCaml. Acesta este motivul pentru care veți obține o experiență de dezvoltator mult mai bună atunci când o utilizați cu Reason. React in Reason reprezintă un mod mai sigur de construire a componentelor React, deoarece sistemul de tip puternic a primit spatele și nu trebuie să faceți față majorității problemelor JavaScript (moștenire).

Ce urmeaza?

Dacă provineți din lumea JavaScript, vă va fi mai ușor să începeți cu Rațiunea, datorită asemănării sale de sintaxă cu JavaScript. Dacă ați programat în React, vă va fi și mai ușor, deoarece puteți utiliza toate cunoștințele dvs. React, deoarece ReasonReact are același model mental ca React și un flux de lucru foarte similar. Aceasta înseamnă că nu trebuie să porniți de la zero. Veți învăța Motivul pe măsură ce vă dezvoltați.

Cel mai bun mod de a începe să folosiți Motivul în proiectele dvs. este să îl faceți treptat. Am menționat deja că puteți să luați codul Motiv și să-l utilizați în JavaScript și invers. Puteți face același lucru cu ReasonReact. Îți iei componenta ReasonReact și o folosești în aplicația React JavaScript, și invers.

Această abordare incrementală a fost aleasă de dezvoltatorii Facebook care folosesc Reason în mod extensiv în dezvoltarea aplicației Facebook Messenger.

Dacă doriți să construiți o aplicație folosind React în motiv și să aflați elementele de bază ale rațiunii într-un mod practic, verificați celălalt articol în care vom construi un joc Tic Tac Toe.

Dacă aveți întrebări, critici, observații sau sfaturi pentru îmbunătățire, nu ezitați să scrieți un comentariu mai jos sau să ajungeți la mine prin Twitter sau pe blogul meu.