Folosesti Reacţiona pentru a construi interfețe utilizator? Ei bine, și eu sunt. Și acum, veți afla de ce ar trebui să scrieți aplicațiile dvs. React folosind ReasonML.

React este un mod destul de cool de a scrie interfețe utilizator. Dar, am putea să-l facem și mai răcoros? Mai bine?

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

React nu a fost inițial dezvoltat pentru JavaScript

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

Imuabilitatea este unul dintre principiile de bază ale React. Nu doriți să vă mutați recuzita sau starea, deoarece dacă faceți acest lucru, puteți avea consecințe imprevizibile. În JavaScript, nu avem imuabilitate imediată. Ne păstrăm structurile de date imuabile printr-o convenție sau folosim biblioteci precum imuabilJS pentru a o realiza.

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țiile 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 tipuri? În React, am avut PropTypes. Le-am folosit pentru a imita tipurile din JavaScript, deoarece nu este un limbaj tipizat în sine. Pentru a profita de tastarea statică avansată, trebuie din nou să folosim dependențe externe, cum ar fi curgere și TypeScript.

Psst Iata de ce ReasonReact este cel mai bun mod
React, și comparație JavaScript

După cum puteți vedea, 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 Reason, obținem imuabilitatea din cutie. Deoarece se bazează pe OCaml, limbajul de programare funcțional, avem astfel de caracteristici încorporate și în limbajul în sine. Rațiunea ne oferă, de asemenea, un sistem de tip puternic pe cont propriu.

1612174452 438 Psst Iata de ce ReasonReact este cel mai bun mod
Comparație React, JavaScript și Reason

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

Motiv

Nu este o limbă nouă. Este o sintaxă alternativă de tip JavaScript și un lanț de instrumente pentru OCaml, un limbaj de programare funcțional care există de mai bine de 20 de ani. Reason a fost creat de dezvoltatorii Facebook care au folosit deja OCaml în proiectele lor (Curgere, Deduce).

1612174452 85 Psst Iata de ce ReasonReact este cel mai bun mod

Motivul, cu sintaxa sa de tip C, face OCaml accesibil pentru persoanele care provin din limbaje obișnuite, cum ar fi JavaScript sau Java. Vă oferă o documentație mai bună (în comparație cu OCaml) și un comunitate în creștere în jurul ei. În plus, face mai ușoară integrarea cu baza de cod JavaScript existentă.

1612174452 820 Psst Iata de ce ReasonReact este cel mai bun mod

OCaml servește drept limbă de sprijin pentru Reason. Rațiunea are aceeași semantică ca OCaml – doar sintaxa este diferită. Aceasta înseamnă că puteți scrie OCaml folosind sintaxa asemănătoare JavaScript a lui Reason. Ca urmare, puteți profita de caracteristicile minunate ale OCaml, cum ar fi sistemul său puternic de tip și potrivirea modelelor.

Să aruncăm o privire la un exemplu de sintaxă a Reason.

let fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int(i)
  };
for (i in 1 to 100) {
  Js.log(fizzbuzz(i))
};

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

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

BuckleScript

Psst Iata de ce ReasonReact este cel mai bun mod

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

Asemănarea cu JavaScript este atât de strânsă încât o parte din codul lui Reason nu trebuie deloc modificate de compilator. Așadar, vă puteți bucura de avantajele limbajului tastat static fără nicio modificare a codului.

let add = (a, b) => a + b;add(6, 9);

Acesta este un cod valid atât în ​​Reason, cât și în JavaScript.

BuckleScript este livrat cu patru biblioteci: biblioteca standard numită Curea (Biblioteca standard OCaml este insuficientă) și legări la JavaScript, Node.js și API-uri DOM.

Deoarece BuckleScript se bazează pe compilatorul OCaml, veți obține o compilație extrem de 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 Reason în JavaScript.

1612174453 932 Psst Iata de ce ReasonReact este cel mai bun mod
Compilarea codului Reason în JavaScript prin BuckleScript

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

Nu numai că Reason se compilează în JavaScript, ci și în codul nativ și bytecode. Deci, puteți scrie o singură aplicație utilizând sintaxa Reason și puteți să o rulați î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, JavaScript interoperabilitate. Nu numai că vă puteți lipi codul JavaScript funcțional în baza de cod Reason, dar și codul Reason poate interacționa cu cel JavaScript. Aceasta înseamnă că puteți integra cu ușurință codul Reason în baza de cod JavaScript existentă. Mai mult, puteți utiliza toate pachetele JavaScript din ecosistemul NPM în codul dvs. Reason. De exemplu, puteți combina Flow, TypeScript și Reason împreună într-un singur proiect.

Cu toate acestea, nu este atât de simplu. Pentru a utiliza bibliotecile JavaScript sau codul în Reason, trebuie să-l portați mai întâi în Reason prin legările Reason. Cu alte cuvinte, aveți nevoie de tipuri pentru codul JavaScript netipat pentru a putea profita de sistemul puternic de tip Reason.

Ori de câte ori trebuie să utilizați o bibliotecă JavaScript în codul Reason, verificați dacă biblioteca a fost deja portată la Reason răsfoind Indexul pachetului Reason (Redex) Bază de date. Este un site web care agregă diferite biblioteci și instrumente scrise în biblioteci Reason și JavaScript cu legături Reason. Dacă ați găsit biblioteca dvs. acolo, o puteți instala doar ca dependență și o puteți folosi în aplicația Reason.

Cu toate acestea, dacă nu v-ați găsit biblioteca, va trebui să scrieți singur legăturile Reason. Dacă abia începeți cu Reason, rețineți că scrierea legăturilor nu este un lucru pe care doriți să-l începeți, deoarece este unul dintre cele mai provocatoare lucruri din ecosistemul Reason.

Din fericire, scriu doar o postare despre scrierea legăturilor Reason, așa că stați la curent!

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

Motivul Reacționează

Acest articol este despre scrierea React in Reason, pe care o puteți face datorită ReasonReact biblioteca.

Poate că acum te gândești „încă nu știu de ce ar trebui să folosesc React in Reason”.

Am menționat deja principalul motiv pentru care facem acest lucru – Motivul este mai compatibil cu React decât JavaScript. De ce este mai compatibil? Deoarece React a fost dezvoltat pentru Reason, sau mai exact, pentru OCaml.

Drumul către ReasonReact

1612174453 842 Psst Iata de ce ReasonReact este cel mai bun mod

Primul prototip 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 în JavaScript.

Acest lucru se datorează faptului că întregul web folosea JavaScript și probabil că nu era inteligent să spui „Acum vom construi interfața de utilizare în OCaml”. Și a funcționat – React î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 – Ulm, Redux, Recompune, Ramda, și PureScript – a făcut populară programarea funcțională în JavaScript. Și odată cu creșterea curgere și TypeScript, tastarea statică a devenit populară și. Ca urmare, paradigma funcțională de programare cu tipuri statice a devenit mainstream în lumea front-end-ului.

În 2016, Bloomberg dezvoltat și open-source BuckleScript, compilatorul care transformă OCaml în JavaScript. Acest lucru le-a permis să scrie cod sigur pe front-end folosind sistemul de tip puternic al OCaml. Au luat compilatorul OCaml optimizat și extrem de rapid și i-au schimbat codul nativ generator de back-end cu unul generant JavaScript.

Popularitatea programare funcțională împreună cu lansarea BuckleScript a generat climatul ideal pentru ca Facebook să revină la ideea originală de React, care a fost scrisă inițial într-un Limbajul ML.

1612174454 304 Psst Iata de ce ReasonReact este cel mai bun mod
Motivul Reacționează

Au luat semantica OCaml și sintaxa JavaScript și au creat Reason. Au creat, de asemenea, învelișul Reason în jurul React – biblioteca ReasonReact – cu funcționalități suplimentare, cum ar fi încapsularea principiilor Redux în componente de stare. Procedând astfel, s-au întors Reacționează 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 lui React, introducând diverse biblioteci și instrumente. Acest lucru a însemnat și mai multe dependențe pentru proiectele noastre. Ca să nu mai vorbim de faptul că aceste biblioteci sunt încă în curs de dezvoltare și că modificările de ultimă oră sunt introduse în mod regulat. Deci, trebuie să mențineți aceste dependențe cu grijă în proiectele dvs.

Acest lucru a adăugat un alt nivel de complexitate dezvoltării JavaScript.

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

1612174454 234 Psst Iata de ce ReasonReact este cel mai bun mod
  • tastarea statică – Flux / TypeScript
  • imuabilitate – imuabilJS
  • rutare – ReactRouter
  • formatare – Mai frumos
  • linting – ESLint
  • funcție de ajutor – Ramda / Lodash

Să schimbăm acum JavaScript React pentru ReasonReact.

Mai avem nevoie de toate aceste dependențe?

Psst Iata de ce ReasonReact este cel mai bun mod
  • tastare statică – incorporat
  • imuabilitate – incorporat
  • rutare – incorporat
  • formatare – incorporat
  • scame – incorporat
  • funcții de ajutor – incorporat

Puteți afla mai multe despre aceste caracteristici încorporate în cealaltă postare a mea.

În aplicația ReasonReact, nu aveți nevoie de aceste dependențe și de multe alte, deoarece multe caracteristici esențiale care vă ușurează dezvoltarea sunt deja incluse în limba în sine. Deci, întreținerea pachetelor dvs. 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 maturat, cu toate principiile sale de bază stabilite și stabile.

Învelire

La început, creatorii Rațiunii aveau două opțiuni. Să luați JavaScript și să-l îmbunătățiți cumva. Procedând astfel, ar trebui să facă față și poverilor sale istorice.

Cu toate acestea, au mers pe o cale diferită. Au luat OCaml ca un limbaj maturizat cu performanțe excelente și l-au modificat astfel încât să semene cu JavaScript.

React se bazează, de asemenea, pe principiile OCaml. De aceea, veți obține o experiență de dezvoltator mult mai bună atunci când o folosiți cu Reason. React in Reason reprezintă un mod mai sigur de a construi componentele React, deoarece sistemul de tip puternic vă revine și nu trebuie să vă ocupați de majoritatea problemelor JavaScript (moștenite).

Ce urmeaza?

1612174455 261 Psst Iata de ce ReasonReact este cel mai bun mod

Dacă veniți din lumea JavaScript, vă va fi mai ușor să începeți cu Reason, datorită similitudinii sale de sintaxă cu JavaScript. Dacă ați programat în React, va fi chiar mai ușor pentru dvs., 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 Rațiunea pe măsură ce vă dezvoltați.

Cea mai bună modalitate de a începe să folosiți Reason în proiectele dvs. este să o faceți incremental. Am menționat deja că puteți lua codul Reason și îl puteți folosi în JavaScript și invers. Puteți face același lucru cu ReasonReact. Vă luați componenta ReasonReact și o utilizați în aplicația JavaScript React și invers.

Această abordare incrementală a fost aleasă de dezvoltatorii Facebook care utilizează Reason pe scară largă în dezvoltarea aplicația Facebook Messenger.

Dacă doriți să creați o aplicație utilizând React in Reason și să aflați noțiunile de bază ale Reason într-un mod practic, consultați celălalt articol unde vom construi împreună 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ă mă contactați prin intermediul Stare de nervozitate sau blogul meu.