Psst! Tu je razlog, zakaj je ReasonReact najboljši način za pisanje React-a

Ali za izdelavo uporabniških vmesnikov uporabljate React? No, tudi jaz sem. Zdaj se boste naučili, zakaj bi morali pisati svoje React aplikacije z ReasonML.

React je precej kul način za pisanje uporabniških vmesnikov. Toda, ali bi lahko bilo še bolj hladno? Boljše?

Da bi bilo bolje, moramo najprej ugotoviti njegove težave. Kaj je torej glavni problem React-a kot knjižnice JavaScript?

React sprva ni bil razvit za JavaScript

Če si natančneje ogledate React, boste videli, da so nekatera njegova glavna načela JavaScript tuja. Pogovorimo se zlasti o nespremenljivosti, načelih funkcionalnega programiranja in sistemu tipa.

Neizrečenost je eno temeljnih načel React-a. Nočete mutirati rekvizitov ali svojega stanja, ker lahko pride do nepredvidljivih posledic. V JavaScriptu nimamo nespremenljivosti izven polja. Svojo strukturo podatkov ohranjamo nespremenljivo s konvencijo ali pa za dosego tega uporabljamo knjižnice, kot je nespremenljivi JS.

React temelji na načelih funkcionalnega programiranja, saj so njegove aplikacije sestavljene funkcije. Čeprav ima JavaScript nekatere od teh funkcij, kot so prvovrstne funkcije, to ni funkcionalen programski jezik. Ko želimo napisati kakšno lepo deklaracijsko kodo, moramo uporabiti zunanje knjižnice, kot so Lodash / fp ali Ramda.

Torej, kaj je s tipnim sistemom? V Reactu smo imeli PropTypes. Uporabljali smo jih, da posnemajo tipe v JavaScript, saj ni sam statično vtipkan jezik. Če želimo izkoristiti napredno statično tipkanje, moramo znova uporabiti zunanje odvisnosti, kot sta Flow in TypeScript.

Primerjava reakcije in JavaScript

Kot vidite, JavaScript ni združljiv z osrednjimi načeli Reacta.

Ali obstaja še en programski jezik, ki bi bil bolj kompatibilen z Reactom kot JavaScript?

Na srečo imamo ReasonML.

V Razlogu smo dobili nespremenljivost iz škatle. Ker temelji na sistemu OCaml, funkcionalnem programskem jeziku, imamo takšne funkcije vgrajene tudi v sam jezik. Razlog nam omogoča tudi močan sistem sam.

Primerjava React, JavaScript in Razlog

Razlog je združljiv z osrednjimi načeli Reacta.

Razlog

To ni nov jezik. To je alternativna sintaksa in orodna veriga v obliki JavaScript za OCaml, funkcijski programski jezik, ki obstaja že več kot 20 let. Razlog so ustvarili razvijalci Facebooka, ki so že uporabljali OCaml v svojih projektih (Flow, Infer).

Razlog s svojo podobno C-sintakso omogoča, da je OCaml dostopen za ljudi, ki prihajajo iz glavnih jezikov, kot sta JavaScript ali Java. Omogoča vam boljšo dokumentacijo (v primerjavi z OCaml) in naraščajočo skupnost okoli nje. Poleg tega je lažja integracija z obstoječo kodno bazo JavaScript.

OCaml služi kot podporni jezik za Razlog. Razlog ima isto semantiko kot OCaml - le sintaksa je drugačna. To pomeni, da lahko OCaml napišete s pomočjo sinonse, podobne Reasonu. Kot rezultat, lahko izkoristite odlične funkcije OCaml, kot je močan sistem tipa in ujemanje vzorcev.

Oglejmo si primer sintaksa Razuma.

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

Čeprav v tem primeru uporabljamo ujemanje vzorcev, je še vedno precej podoben JavaScript, kajne?

Vendar je edini uporabni jezik za brskalnike še vedno JavaScript, kar pomeni, da ga moramo sestaviti.

BuckleScript

Ena izmed močnih lastnosti Reason je prevajalnik BuckleScript, ki prevzame vašo kodo Reason in jo zbere v berljiv in uporaben JavaScript z odličnim odstranjevanjem mrtve kode. Branje boste cenili, če boste delali v skupini, v kateri z Reasonom niso vsi seznanjeni, saj bodo še vedno lahko prebrali sestavljeno kodo JavaScript.

Podobnost JavaScript je tako blizu, da prevajalnik nekatere kode Reason sploh ne sme spreminjati. Tako lahko uživate v prednostih statično vtipkanega jezika, pri čemer koda ni spremenjena.

naj bo dodano = (a, b) => a + b;
dodajte (6, 9);

To veljavna koda v razlogu in JavaScript.

BuckleScript je dobavljen s štirimi knjižnicami: standardno knjižnico z imenom Belt (standardna knjižnica OCaml je nezadostna) in povezave z API-ji JavaScript, Node.js in DOM.

Ker BuckleScript temelji na prevajalniku OCaml, boste dobili neverjetno hitro kompilacijo, ki je veliko hitrejša od Babel in večkrat hitrejša od TypeScript.

Sestavimo algoritem FizzBuzz, napisan v Razlogu za JavaScript.

Obrazložitev sestavljanja kode v JavaScript prek BuckleScript

Kot vidite, je nastala koda JavaScript precej berljiva. Zdi se, kot da ga je napisal razvijalec JavaScript.

Razlog ne vsebuje samo JavaScript, ampak tudi izvorno in bajt kodo. Tako lahko eno samo aplikacijo napišete z uporabo sintakse Reason in jo lahko zaženete v brskalniku na telefonih MacOS, Android in iOS. Obstaja igra z imenom Gravitron Jared Forsyth, ki je napisana v Razlogu in se lahko izvaja na vseh platformah, ki sem jih pravkar omenil.

JavaScript interop

BuckleScript nam omogoča tudi interoperabilnost JavaScript. Ne morete le prilepiti svoje delujoče kode JavaScript v kodo baze razlogov, temveč lahko tudi vaša koda razloga vzpostavi interakcijo s to kodo JavaScript. To pomeni, da lahko preprosto vključite kodo Reason v svojo obstoječo kodno kodo JavaScript. Poleg tega lahko v kodi Reason uporabite vse pakete JavaScript iz ekosistema NPM. Na primer, lahko v enem samem projektu združite Flow, TypeScript in Reason.

Vendar to ni tako preprosto. Če želite v knjižnici uporabljati JavaScript knjižnice ali kodo, jo morate najprej prenesti v Reason prek vezav Reason. Z drugimi besedami, za netipično kodo JavaScript potrebujete vrste, da boste lahko izkoristili sistem močnega tipa Reason.

Kadar koli morate v kodi Reason uporabiti knjižnico JavaScript, preverite, ali je bila knjižnica že prenesena v Reason, tako da brskate po zbirki podatkov Reede Package Index (Redex). To je spletno mesto, ki združuje različne knjižnice in orodja, zapisane v knjižnicah Razlog in JavaScript s povezavami Razlog. Če ste tam našli svojo knjižnico, jo lahko preprosto namestite kot odvisnost in jo uporabite v svoji aplikaciji Reason.

Če pa knjižnice niste našli, boste morali sami napisati priloge Razloge. Če šele začnete z Razlogom, ne pozabite, da pisanje vezi ni stvar, s katero bi lahko začeli, saj je to ena izmed bolj zahtevnih stvari v ekosistemu Reason.

Na srečo ravno pišem objavo o pisanju vezav razlogov, zato spremljajte!

Ko potrebujete nekaj funkcionalnosti iz knjižnice JavaScript, vam ni treba pisati povezav z razlogom za knjižnico kot celoto. To lahko storite samo za funkcije ali komponente, ki jih potrebujete.

ReasonReact

Ta članek govori o pisanju React in Reason, kar lahko storite zahvaljujoč knjižnici ReasonReact.

Mogoče zdaj razmišljate: "Še vedno ne vem, zakaj bi moral uporabiti React v razlogu."

Glavni razlog za to smo že omenili - razlog je bolj kompatibilen z Reactom kot JavaScript. Zakaj je bolj združljiv? Ker je bil React razvit za Reason ali natančneje za OCaml.

Pot do ReasonReact

Prvi prototip Reacta je razvil Facebook in bil napisan v jeziku Standard Meta Language (StandardML), bratranec OCamla. Nato so ga premestili v OCaml. React je bil prepisan tudi v JavaScript.

Razlog je bil, ker je celoten splet uporabljal JavaScript in verjetno ni bilo pametno reči: "Zdaj bomo v OCamlu zgradili uporabniški vmesnik." In delovalo je - React v JavaScript je bil široko sprejet.

Tako smo se navadili, da reagiramo kot knjižnica JavaScript. Reagirajte skupaj z drugimi knjižnicami in jeziki - Elm, Redux, Recompose, Ramda in PureScript - funkcionalno programiranje v JavaScript je postalo priljubljeno. Z vzponom Flow in TypeScript je postalo priljubljeno tudi statično tipkanje. Posledično je paradigma funkcionalnega programiranja s statičnimi tipi postala mainstream v svetu osrednjega dela.

Leta 2016 je Bloomberg razvil in odprtopogojen BuckleScript, prevajalnik, ki OCaml pretvori v JavaScript. To jim je omogočilo pisanje varne kode na sprednji del z uporabo sistema močnega tipa OCaml. Vzeli so optimiziran in neverjetno hiter prevajalnik OCaml in zamenjali njegovo domačo kodo, ki ustvarja izvorno kodo, za eno, ki ustvarja JavaScript.

Priljubljenost funkcionalnega programiranja skupaj s izdajo BuckleScript je ustvarila idealno klimo za Facebook, da se je vrnil k prvotni ideji React, ki je bila sprva napisana v jeziku ML.

ReasonReact

Vzeli so semantiko OCaml in sintakso JavaScript ter ustvarili Reason. Ustvarili so tudi ovitek Reason okoli knjižnice React - knjižnica ReasonReact - z dodatnimi funkcionalnostmi, kot je na primer kapsulacija principov Redux v zmogljivih komponentah. S tem so vrnili React k svojim prvotnim koreninam.

Moč reakcije v razumu

Ko je React prišel v JavaScript, smo JavaScript prilagodili potrebam React-a z uvedbo različnih knjižnic in orodij. To je pomenilo tudi več odvisnosti za naše projekte. Da ne omenjam, da so te knjižnice še vedno v razvoju in močne spremembe se redno uvajajo. Zato morate pri svojih projektih skrbno vzdrževati te odvisnosti.

To je dodalo še en kompleksni sloj razvoju JavaScript.

Vaša tipična aplikacija React bo imela vsaj naslednje odvisnosti:

  • statično tipkanje - Flow / TypeScript
  • nespremenljivost - nespremenljivJS
  • usmerjanje - ReactRouter
  • oblikovanje - lepše
  • obloge - ESLint
  • pomočna funkcija - Ramda / Lodash

Zdaj zamenjajmo JavaScript React za ReasonReact.

Ali še vedno potrebujemo vse te odvisnosti?

  • statično tipkanje - vgrajeno
  • nespremenljivost - vgrajena
  • usmerjanje - vgrajeno
  • oblikovanje - vgrajeno
  • obloga - vgradna
  • pomožne funkcije - vgrajene

Več o teh vgrajenih funkcijah lahko izveste v moji drugi objavi.

V aplikaciji ReasonReact teh in mnogih drugih odvisnosti ne potrebujete, saj so številne ključne funkcije, ki olajšajo vaš razvoj, že vključene v sam jezik. Tako bo vzdrževanje paketov postalo lažje in se sčasoma ne boste povečevali.

To je zasluga OCamla, ki je star več kot 20 let. To je zrel jezik z vsemi osnovnimi načeli na mestu in stabilno.

Zaviti

Ustvarjalci Razuma so na začetku imeli dve možnosti. Vzeti JavaScript in ga nekako izboljšati. S tem bi se morali spoprijeti tudi z njenimi zgodovinskimi bremeni.

Vendar so šli po drugi poti. OCaml so sprejeli kot zrel jezik z odličnimi zmogljivostmi in ga spremenili tako, da spominja na JavaScript.

React temelji tudi na načelih OCaml. Zato boste pri uporabi z razlogom imeli veliko boljšo izkušnjo za razvijalce. React in Reason predstavlja varnejši način gradnje komponent React, saj ima sistem močnega tipa hrbet in vam ni treba reševati večine vprašanj, povezanih z JavaScript (zapuščino).

Kaj je naslednje?

Če prihajate iz sveta JavaScripta, boste lažje začeli z Reasonom zaradi njegove skladnosti z JavaScript. Če ste programirali v Reactu, vam bo še lažje, saj boste lahko uporabili vse svoje znanje React, saj ima ReasonReact enak mentalni model kot React in zelo podoben potek dela. To pomeni, da vam ni treba začeti iz nič. Razumeli se boste, ko se boste razvijali.

Najboljši način za začetek uporabe Razuma pri svojih projektih je, da to storite postopno. Omenil sem že, da lahko vzamete kodo Reason in jo uporabite v JavaScriptu in obratno. Enako lahko storite z ReasonReact. Vzamete komponento ReasonReact in jo uporabite v svoji aplikaciji React JavaScript in obratno.

Ta inkrementalni pristop so izbrali razvijalci Facebooka, ki v razvoju aplikacije Facebook Messenger veliko uporabljajo Reason.

Če želite sestaviti aplikacijo z uporabo React in Reason in se naučiti osnov razuma na praktičen način, poglejte moj drugi članek, kjer bomo skupaj izdelali igro Tic Tac Toe.

Če imate kakršna koli vprašanja, kritike, opažanja ali nasvete za izboljšanje, nam napišite komentar spodaj ali me pokličite prek Twitterja ali mojega bloga.