Psst! Evo zašto je ReasonReact najbolji način pisanja reakcije

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

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

Da bismo ga poboljšali, prvo moramo utvrditi njegove probleme. Dakle, koji je glavni problem React-a kao JavaScript biblioteke?

React nije u početku razvijen za JavaScript

Ako detaljnije pogledate React, vidjet ćete da su neki od njegovih glavnih principa strani JavaScript. Govorimo o nepromjenljivosti, principima funkcionalnog programiranja, posebno o tipičnom sustavu.

Nepromjenjivost je jedno od glavnih načela Reacta. Ne želite mutirati rekvizite ili stanje jer biste, ukoliko to učinite, mogli doživjeti nepredvidive posljedice. U JavaScript-u nemamo nepromjenljivosti izvan okvira. Svoje strukture podataka držimo nepromjenjivim konvencijom ili koristimo biblioteke poput nepromjenjivih JS da bismo ih postigli.

React se temelji na načelima funkcionalnog programiranja jer su njegove primjene sastavi funkcija. Iako JavaScript ima neke od ovih značajki, poput prvoklasnih funkcija, to nije funkcionalan programski jezik. Kad želimo napisati neki lijepi deklarativni kod, trebamo koristiti vanjske biblioteke poput Lodash / fp ili Ramda.

Pa, što je s tipnim sustavom? U React-u smo imali PropTypes. Koristili smo ih za oponašanje tipova u JavaScript-u jer to nije sam jezik statički. Da bismo iskoristili prednosti naprednog statičkog tipkanja, ponovo moramo koristiti vanjske ovisnosti, poput Flow i TypeScript.

Usporedba reakcija i JavaScript

Kao što vidite, JavaScript nije kompatibilan s temeljnim načelima Reacta.

Postoji li drugi programski jezik koji bi bio kompatibilniji s Reactom nego JavaScript?

Srećom, imamo ReasonML.

U Razlogu, neizmjenjivost dobivamo iz okvira. Budući da se temelji na OCamlu, funkcionalnom programskom jeziku, imamo takve značajke ugrađene u sam jezik. Razlog nam također pruža sustav jakog tipa.

Usporedba React, JavaScript i razloga

Razlog je kompatibilan s temeljnim načelima Reacta.

Razlog

To nije novi jezik. To je alternativa sintaksi i lancu alata sličnih JavaScript-u za OCaml, funkcionalni programski jezik koji postoji više od 20 godina. Razlog su stvorili Facebookovi programeri koji su već koristili OCaml u svojim projektima (Flow, Infer).

Razlog zbog svoje sintakse nalik C-u čini OCaml pristupačnim za ljude koji dolaze iz glavnih jezika kao što su JavaScript ili Java. Omogućuje vam bolju dokumentaciju (u odnosu na OCaml) i rastuću zajednicu oko nje. Uz to, olakšava se integracija sa postojećom JavaScript kodom.

OCaml služi kao potporni jezik za Razlog. Razlog ima istu semantiku kao i OCaml - samo je sintaksa različita. To znači da možete napisati OCaml koristeći sinonu sličnu JavaScript-u Reason. Kao rezultat toga, možete iskoristiti fenomenalne značajke OCaml-a, kao što su njegov snažni sistem tipova i podudaranje uzoraka.

Pogledajmo primjer sinonse Razuma.

neka fizzbuzz = (i) =>
  sklopka (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
za (ja u 1 do 100) {
  Js.log (fizzbuzz (i))
};

Iako u ovom primjeru koristimo podudaranje uzoraka, još uvijek je prilično sličan JavaScript-u, zar ne?

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

BuckleScript

Jedna od moćnih značajki Reason-a je BuckleScript kompajler koji uzima vaš Reason kôd i kompilira ga u čitljiv i izvedljiv JavaScript s velikim uklanjanjem mrtvog koda. Čitljivost će vam se činiti ako radite s timom koji nisu svi upoznati s razlogom, jer će oni i dalje moći čitati sastavljeni JavaScript kôd.

Sličnost s JavaScript-om toliko je bliska da neki prevoditelj kod ne mora mijenjati prevodilac. Dakle, možete uživati ​​u prednostima statički tipkanog jezika bez ikakve promjene koda.

neka su dodani = (a, b) => a + b;
dodati (6, 9);

To je važeći kôd i u Razlogu i u JavaScript-u.

BuckleScript se isporučuje s četiri knjižnice: standardnom bibliotekom pod nazivom Belt (OCaml standardna knjižnica nije dovoljna) i vezama na JavaScript, Node.js i, DOM API.

Budući da se BuckleScript temelji na OCaml kompajleru, dobit ćete nevjerojatno brzu kompilaciju koja je mnogo brža od Babel-a i nekoliko puta brža od TypeScript-a.

Sastavimo naš algoritam FizzBuzz napisan u Razlogu za JavaScript.

Razlog sastavljanja koda u JavaScript-u putem BuckleScript-a

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

Razlog se ne sastavlja samo u JavaScript, već i u izvorni i bajt kod. Dakle, možete napisati jednu aplikaciju pomoću sintakse Reason i biti u mogućnosti pokrenuti je u pregledniku na telefonima MacOS, Android i iOS. Postoji igra nazvana Gravitron Jareda Forsyth-a napisana u Razlogu i može se pokretati na svim platformama koje sam upravo spomenuo.

JavaScript interop

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

Međutim, to nije tako jednostavno. Da biste koristili JavaScript biblioteke ili kôd u Reasonu, prvo ga morate prenijeti na Reason putem veza Reason. Drugim riječima, trebate vrste za netipični JavaScript kôd da biste mogli iskoristiti prednosti sustava Reason's strong type.

Kad god trebate koristiti JavaScript biblioteku u svom kodu razloga, provjerite je li knjižnica već prenesena na Reason pretraživanjem baze podataka Redex Index (Redex). To je web stranica koja objedinjuje različite biblioteke i alate napisane u Biblioteci razloga i JavaScript s vezama Razuma. Ako ste tamo pronašli svoju biblioteku, možete je jednostavno instalirati kao ovisnost i koristiti je u svojoj aplikaciji Razlog.

Međutim, ako niste pronašli svoju biblioteku, morat ćete sami napisati uveze razloga. Ako tek počinjete s razlogom, imajte na umu da vezivanje pisanja nije stvar s kojom biste trebali započeti, jer je to jedna od najzahtjevnijih stvari u ekosustavu Reason.

Srećom, upravo pišem post o pisanju Vezanja razloga, zato budite dobro!

Kad vam treba neka funkcionalnost iz biblioteke JavaScript, ne morate pisati Veze razloga za biblioteku kao cjelinu. To možete učiniti samo za funkcije ili komponente koje trebate koristiti.

ReasonReact

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

Možda sad razmišljate "još uvijek ne znam zašto bih trebao upotrebljavati React u razumu."

Već smo spomenuli glavni razlog za to - Razlog je kompatibilniji sa Reactom nego JavaScript. Zašto je to kompatibilnije? Jer React je razvijen za Razlog, točnije za OCaml.

Put do ReasonReact

Prvi prototip Reacta razvio je Facebook i napisao ga je Standard Meta Language (StandardML), rođak OCamla. Zatim je premješten u OCaml. React je također prepisan na JavaScript.

To je zato što je cijeli web koristio JavaScript, a vjerojatno nije bilo pametno reći, "sad ćemo izgraditi korisničko sučelje u OCamlu." I to je funkcioniralo - React in JavaScript je široko prihvaćen.

Tako smo se navikli reagirati kao JavaScript knjižnica. Reagirajte zajedno s drugim bibliotekama i jezicima - Elm, Redux, Recpose, Ramda i PureScript - funkcionalno je programiranje u JavaScript postalo popularno. S porastom Flow i TypeScript, postala je popularna i statička tipkanje. Kao rezultat, funkcionalna programska paradigma sa statičkim tipovima postala je mainstream u svijetu front-enda.

U 2016., Bloomberg je razvio i otvoreni izvor BuckleScript, prevodilac koji transformira OCaml u JavaScript. To im je omogućilo da napišu sigurni kôd na prednjoj strani pomoću sustava jakog tipa OCaml. Uzeli su optimizirani i nevjerojatno brz OCaml prevodilac i zamijenili njegov back-end generirajući izvorni kod za JavaScript koji generira.

Popularnost funkcionalnog programiranja zajedno s izdavanjem BuckleScript stvorila je idealnu klimu za Facebook kako bi se vratila izvornoj ideji React-a, koja je u početku bila napisana na ML jeziku.

ReasonReact

Oni su uzeli OCaml semantiku i JavaScript sintaksu i stvorili Razlog. Stvorili su i omot Reason-a oko React-a - Biblioteka ReasonReact - s dodatnim funkcionalnostima kao što je enkapsulacija Redux-ovih principa u izvanredne komponente. Radeći to, vratili su React svojim izvornim korijenima.

Moć Reagiranja u razumu

Kad je React ušao u JavaScript, prilagodili smo JavaScript prema Reactovim potrebama uvođenjem različitih biblioteka i alata. To je značilo i više ovisnosti za naše projekte. A da se i ne spominje kako su te knjižnice još uvijek u razvoju i prekidne promjene se uvode redovito. Stoga ove ovisnosti morate pažljivo održavati u svojim projektima.

To je dodalo još jedan sloj složenosti razvoju JavaScripta.

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

  • statičko tipkanje - Flow / TypeScript
  • nepromjenljivost - nepromjenjivoJS
  • usmjeravanje - ReactRouter
  • oblikovanje - ljepše
  • obloga - ESLint
  • pomoćna funkcija - Ramda / Lodash

Idemo sada zamijeniti JavaScript React za ReasonReact.

Trebamo li još uvijek sve ove ovisnosti?

  • statičko kucanje - ugrađeni
  • nepromjenljivost - ugrađena
  • usmjeravanje - ugrađeni
  • oblikovanje - ugrađeno
  • obloga - ugrađena
  • pomoćne funkcije - ugrađeni

O ovim ugrađenim značajkama možete saznati 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 paketa postat će lakše i nećete se složiti s vremenom.

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

Zamotati

U početku su tvorci Razuma imali dvije mogućnosti. Da uzmete JavaScript i nekako ga poboljšate. Radeći to, oni se također trebaju nositi s povijesnim teretima.

Međutim, krenuli su drugim putem. Oni su OCaml uzeli kao zreo jezik sa sjajnim performansama i modificirali ga tako da podsjeća na JavaScript.

React se također temelji na načelima OCamla. Zbog toga ćete dobiti mnogo bolje iskustvo za razvojne programere kada ga upotrebljavate s Reasonom. React in Reason predstavlja sigurniji način izgradnje komponenti React-a, jer sustav jakih tipova zadire u leđa i ne trebate se baviti većinom problema sa JavaScript (nasljeđenim).

Što je sljedeće?

Ako dolazite iz svijeta JavaScripta, bit će vam lakše započeti s Razlogom, zbog njegove sličnosti sa JavaScriptom. Ako ste programirali u Reactu, bit će vam još lakše jer možete upotrijebiti sve svoje znanje React jer ReasonReact ima isti mentalni model kao React i vrlo sličan tijek rada. To znači da ne morate početi ispočetka. Naučit ćete Razlog kako se razvijate.

Najbolji način da počnete koristiti Razlog u svojim projektima je to postupno. Već sam napomenuo da možete preuzeti kôd razloga i koristiti ga u JavaScript-u, i obrnuto. Isto možete učiniti i sa ReasonReactom. Uzimate svoju komponentu ReasonReact i upotrebljavate je u aplikaciji React JavaScript i obrnuto.

Ovaj inkrementalni pristup odabrali su programeri Facebooka koji intenzivno koriste Razlog u razvoju aplikacije Facebook Messenger.

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

Ako imate bilo kakvih pitanja, kritika, zapažanja ili savjeta za poboljšanje, slobodno napišite komentar ispod ili me kontaktirajte putem Twittera ili mog bloga.