Psst! Evo zašto je ReasonReact najbolji način za pisanje React-a

Koristite li React za izgradnju korisničkih sučelja? Pa i ja sam. A sada ćete naučiti zašto biste svoje React aplikacije trebali pisati pomoću ReasonML-a.

React je prilično cool način za pisanje korisničkog sučelja. Ali, možemo li ga učiniti još hladnijim? Bolje?

Da bismo to poboljšali, prvo moramo prepoznati njegove probleme. Pa, što je glavni problem React-a kao JavaScript biblioteke?

React u početku nije razvijen za JavaScript

Ako bolje pogledate React, vidjet ćete da su neka od njegovih glavnih načela strana JavaScript-u. Razgovarajmo o nepromjenjivosti, načelima funkcionalnog programiranja i posebno tipskom sustavu.

Nepromjenjivost je jedno od temeljnih načela React-a. Ne želite mutirati svoj rekvizit ili svoje stanje, jer ako to želite, mogli biste doživjeti nepredvidive posljedice. U JavaScript-u nemamo nepromjenjivost. Konvencijom držimo naše strukture podataka nepromjenjivima ili za postizanje toga koristimo knjižnice kao što je immutableJS.

React se temelji na principima funkcionalnog programiranja budući da su njegove primjene sastavi funkcija. Iako JavaScript ima neke od ovih značajki, poput prvoklasnih funkcija, to nije funkcijski programski jezik. Kada želimo napisati lijep deklarativni kod, trebamo koristiti vanjske knjižnice poput Lodash / fp ili Ramda.

Pa, što je sa sustavom tipova? U Reactu smo imali PropTypes. Koristili smo ih za oponašanje tipova u JavaScript-u jer to sam po sebi nije statički upisan jezik. Da bismo iskoristili prednost naprednog statičkog tipkanja, opet trebamo koristiti vanjske ovisnosti, poput Flow i TypeScript.

Kao što vidite, JavaScript nije kompatibilan s osnovnim principima React-a.

Postoji li još jedan programski jezik koji bi bio kompatibilniji s Reactom od JavaScript-a?

Srećom, imamo ReasonML.

Razumno, nepromjenjivost dobivamo iz kutije. Budući da se temelji na OCamlu, funkcionalnom programskom jeziku, imamo takve značajke ugrađene i u sam jezik. Razum nam također pruža snažan sustav tipa.

Razum je kompatibilan s Reactovim temeljnim načelima.

Razlog

To nije novi jezik. To je alternativna sintaksa i lanac sličan JavaScriptu za OCaml, funkcionalni programski jezik koji postoji već više od 20 godina. Razlog su stvorili Facebook programeri koji su već koristili OCaml u svojim projektima (Flow, Infer).

Razlog svojom sintaksom sličnom C-u čini OCaml pristupačnim ljudima koji dolaze iz uobičajenih jezika kao što su JavaScript ili Java. Pruža vam bolju dokumentaciju (u usporedbi s OCamlom) i rastuću zajednicu oko nje. Uz to, olakšava integraciju s vašom postojećom JavaScript kodnom bazom.

OCaml služi kao prateći jezik za Razum. Razum ima istu semantiku kao OCaml - samo je sintaksa različita. To znači da OCaml možete pisati koristeći Reasonovu sintaksu sličnu JavaScriptu. Kao rezultat toga, možete iskoristiti sjajne značajke OCamla, poput snažnog sustava tipova i podudaranja uzoraka.

Pogledajmo primjer sintakse razuma.

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

Iako u ovom primjeru koristimo podudaranje uzoraka, to je i dalje prilično slično JavaScriptu, zar ne?

Međutim, jedini korisni jezik za preglednike i dalje je JavaScript, što znači da ga moramo kompilirati.

BuckleScript

Jedna od moćnih Reason-ovih značajki je BuckleScript kompajler koji uzima vaš Reason kôd i kompajlira ga u čitljiv i izvedljiv JavaScript s velikom eliminacijom mrtvog koda. Čitljivost ćete cijeniti ako radite u timu u kojem nisu svi upoznati s razlogom, jer će i dalje moći čitati kompajlirani JavaScript kôd.

Sličnost s JavaScriptom toliko je bliska da prevoditelj uopće ne mora mijenjati neke razloge. Dakle, možete uživati ​​u blagodatima statički upisanog jezika bez ikakvih promjena koda.

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

Ovo je važeći kôd i u Reasonu i u JavaScriptu.

BuckleScript se isporučuje s četiri knjižnice: standardnom knjižnicom koja se zove Belt (OCaml standardna knjižnica nije dovoljna) i vezama za JavaScript, Node.js i, DOM API-je.

Budući da se BuckleScript temelji na OCaml kompajleru, dobit ćete nevjerojatno brzu kompilaciju koja je puno brža od Babela i nekoliko puta brža od Typecripta.

Sastavimo naš FizzBuzz algoritam napisan u Reason u JavaScript.

Kao što vidite, rezultirajući JavaScript kod prilično je čitljiv. Čini se kao da ga je napisao JavaScript programer.

Ne samo da se Reason kompajlira u JavaScript, već i u izvorni i bytecode. Dakle, možete napisati jednu aplikaciju koristeći sintaksu Reason i moći je pokretati u pregledniku na MacOS, Androidu i iOS telefonima. Postoji igra pod nazivom Gravitron Jareda Forsytha koja je napisana u Reason i može se pokretati na svim platformama koje sam upravo spomenuo.

JavaScript interop

BuckleScript nam također pruža i JavaScript interoperabilnost. Ne samo da možete zalijepiti svoj radni JavaScript kôd u svoju bazu kodova razloga, već i vaš kôd razloga može komunicirati s tim JavaScript kodom. To znači da kôd razloga možete lako integrirati u svoju postojeću JavaScript kodnu bazu. Štoviše, možete koristiti sve JavaScript pakete iz NPM ekosustava u svom kodu razloga. Na primjer, možete kombinirati Flow, TypeScript i Reason u jednom projektu.

Međutim, to nije tako jednostavno. Da biste koristili JavaScript knjižnice ili kôd u Reasonu, prvo ga morate povezati u Reason putem vezanja razloga. Drugim riječima, trebaju vam vrste za vaš netipizirani JavaScript kôd da biste mogli iskoristiti prednost jakog sustava tipova Reason-a.

Kad god trebate koristiti JavaScript knjižnicu u svom kôdu razloga, provjerite je li knjižnica već prenesena na Reason pregledavanjem baze podataka Indeks paketa razloga (Redex). To je web mjesto koje objedinjuje različite knjižnice i alate napisane u Reason i JavaScript knjižnicama s vezama Reason. Ako ste tamo pronašli svoju knjižnicu, možete je jednostavno instalirati kao ovisnost i koristiti u svojoj aplikaciji Razlog.

Međutim, ako niste pronašli svoju knjižnicu, morat ćete sami napisati obvezujuće razloge. Ako tek započinjete s Razumom, imajte na umu da pisanje obveza nije stvar s kojom želite započeti, jer je to jedna od izazovnijih stvari u Razumovom ekosustavu.

Srećom, upravo pišem post o pisanju veza s razlogom, pa budite sa nama!

Kada vam je potrebna neka funkcionalnost iz JavaScript biblioteke, ne trebate pisati veze razloga za čitavu knjižnicu. To možete učiniti samo za funkcije ili komponente koje trebate koristiti.

RazlogReact

Ovaj je članak o pisanju React in Reason, što možete učiniti zahvaljujući biblioteci ReasonReact.

Možda sada razmišljate "Još uvijek ne znam zašto bih trebao koristiti React in Reason."

Već smo spomenuli glavni razlog za to - razlog je kompatibilniji s Reactom nego JavaScriptom. Zašto je kompatibilniji? Budući da je React razvijen za Razum, ili preciznije, za OCaml.

Put do razumaReact

Prvi prototip Reacta razvio je Facebook, a napisan je na standardnom meta jeziku (StandardML), rođaku OCamla. Zatim je premješteno u OCaml. React je također prepisan na JavaScript.

To je bilo zato što je cijela mreža koristila JavaScript i vjerojatno nije bilo pametno reći: "Sad ćemo izgraditi korisničko sučelje u OCamlu." I uspjelo je - React u JavaScript-u je široko prihvaćen.

Tako smo se navikli reagirati kao JavaScript knjižnica. Reagirajte zajedno s drugim knjižnicama i jezicima - Elm, Redux, Recompose, Ramda i PureScript - učinili su funkcionalno programiranje u JavaScript popularnim. A s porastom Flowa i Typecripta, statično je tipkanje također postalo popularno. Kao rezultat toga, paradigma funkcionalnog programiranja sa statičkim tipovima postala je glavna u svijetu front-enda.

Bloomberg je 2016. godine razvio i otvorio izvor BuckleScript, kompajler koji transformira OCaml u JavaScript. To im je omogućilo da na prednji kraj napišu siguran kôd koristeći OCamlov snažni sustav tipova. Uzeli su optimizirani i nevjerojatno brz OCaml kompajler i zamijenili njegov matični kôd koji generira pozadinu za JavaScript koji generira.

Popularnost funkcionalnog programiranja zajedno s izlaskom BuckleScripta stvorila je idealnu klimu za Facebook da se vrati izvornoj ideji React-a, koja je u početku napisana na ML jeziku.

Uzeli su OCaml semantiku i JavaScript sintaksu i stvorili Reason. Također su kreirali omot Reason oko React-a - ReasonReact knjižnice - s dodatnim funkcionalnostima kao što je enkapsulacija Redux principa u komponentama sa statusom. Čineći to, vratili su React izvornim korijenima.

Moć reagiranja u razumu

Kad je React ušao u JavaScript, JavaScript smo prilagodili potrebama React-a uvođenjem različitih knjižnica i alata. To je također značilo više ovisnosti za naše projekte. A da se i ne spominje da su ove knjižnice još uvijek u fazi izrade i redovito se uvode promjene koje se često uvode. Dakle, ove ovisnosti morate pažljivo održavati u svojim projektima.

To je dodalo još jedan složen sloj razvoju JavaScript-a.

Vaša tipična aplikacija React imat će barem ove ovisnosti:

  • statično tipkanje - Flow / TypeScript
  • nepromjenjivost - nepromjenjivJS
  • usmjeravanje - ReactRouter
  • oblikovanje - ljepše
  • oblaganje - ESLint
  • pomoćna funkcija - Ramda / Lodash

Zamijenimo sada JavaScript React za ReasonReact.

Trebamo li još uvijek sve ove ovisnosti?

  • statičko tipkanje - ugrađeno
  • nepromjenjivost - ugrađena
  • usmjeravanje - ugrađeno
  • formatiranje - ugrađeno
  • obloga - ugrađena
  • pomoćne funkcije - ugrađene

O ovim ugrađenim značajkama možete saznati više u mom drugom postu.

U aplikaciji ReasonReact ne trebaju vam ove i mnoge druge ovisnosti jer su mnoge ključne značajke koje olakšavaju vaš razvoj već uključene u sam jezik. Dakle, održavanje vaših paketa postat će lakše, a vremenom nećete imati složenosti.

To je zahvaljujući OCamlu koji je star više od 20 godina. To je sazreli jezik sa svim osnovnim načelima i stabilnim.

Zamotati

Na početku su tvorci Razuma imali dvije mogućnosti. Da uzmem JavaScript i nekako ga poboljšam. Radeći to, trebali bi se nositi i s njegovim povijesnim opterećenjima.

Međutim, pošli su drugim putem. OCaml su uzeli kao sazreli jezik s izvrsnim performansama i modificirali ga tako da sliči JavaScriptu.

React se također temelji na principima OCamla. Zbog toga ćete dobiti puno bolje iskustvo za programere kada ga koristite s razlogom. React in Reason predstavlja sigurniji način izgradnje React komponenata, budući da vam je snažni tip leđa vratio glavu i ne morate se baviti većinom problema s JavaScriptom (naslijeđenim).

Što je sljedeće?

Ako dolazite iz svijeta JavaScript-a, bit će vam lakše započeti s razlogom, zbog njegove sintaksne sličnosti s JavaScriptom. Ako ste programirali u Reactu, bit će vam još lakše jer možete koristiti svo svoje React znanje jer ReasonReact ima isti mentalni model kao React i vrlo sličan tijek rada. To znači da ne trebate početi ispočetka. Razuma ćete učiti dok se budete razvijali.

Najbolji način da počnete koristiti Razlog u svojim projektima je postupno. Već sam spomenuo da možete uzeti kôd razloga i koristiti ga u JavaScript-u, i obrnuto. To isto možete učiniti s ReasonReactom. Uzimate komponentu ReasonReact i koristite je u svojoj React JavaScript aplikaciji i obrnuto.

Ovaj inkrementalni pristup odabrali su programeri Facebooka koji razum razumno koriste u razvoju aplikacije Facebook Messenger.

Ako želite izraditi aplikaciju pomoću React in Reason-a i na praktičan način naučiti osnove Reason-a, pogledajte moj drugi članak u kojem ćemo zajedno graditi igru ​​Tic Tac Toe.

Ako imate pitanja, kritike, zapažanja ili savjete za poboljšanje, slobodno napišite komentar u nastavku ili me kontaktirajte putem Twittera ili mog bloga.