Psst! Tästä syystä ReasonReact on paras tapa kirjoittaa React

Käytätkö Reaktia käyttöliittymien luomiseen? No, minäkin olen. Ja nyt opit miksi sinun pitäisi kirjoittaa React-sovelluksesi ReasonML: n avulla.

React on aika hieno tapa kirjoittaa käyttöliittymiä. Mutta voisimmeko tehdä siitä vielä viileämmän? Paremmin?

Paremman parantamiseksi meidän on ensin tunnistettava sen ongelmat. Joten mikä on Reaktin JavaScript-kirjastona tärkein ongelma?

Reaktia ei alun perin kehitetty JavaScriptiä varten

Jos tutkit tarkemmin Reaktia, huomaat, että jotkut sen pääperiaatteista ovat JavaScriptin ulkopuolella. Puhutaanpa erityisesti muuttumattomuudesta, toiminnallisista ohjelmointiperiaatteista ja tyyppijärjestelmästä.

Muuttamattomuus on yksi Reaktin perusperiaatteista. Et halua mutatoida rekvisiittaasi tai tilaasi, koska jos niin teet, saatat kokea odottamattomia seurauksia. JavaScript-ohjelmassa meillä ei ole muuttumattomuutta ulkona. Pidämme tietorakenteemme muuttumattomana sopimuksella tai käytämme kirjastoja, kuten muuttumattomia JS: itä sen saavuttamiseen.

React perustuu toiminnallisen ohjelmoinnin periaatteisiin, koska sen sovellukset ovat toimintojen koostumuksia. Vaikka JavaScriptillä on joitain näistä ominaisuuksista, kuten ensiluokkaiset toiminnot, se ei ole toiminnallinen ohjelmointikieli. Kun haluamme kirjoittaa mukavan deklaratiivisen koodin, meidän on käytettävä ulkoisia kirjastoja, kuten Lodash / fp tai Ramda.

Joten mitä tyyppijärjestelmässä on? Reaktorissa meillä oli PropTypes. Olemme käyttäneet niitä Java-tyyppien jäljittelemiseen, koska se ei ole itse staattisesti kirjoitettu kieli. Jotta voimme hyödyntää edistynyttä staattista kirjoitusta, meidän on jälleen käytettävä ulkoisia riippuvuuksia, kuten Flow ja TypeScript.

Reagoi ja JavaScript-vertailu

Kuten näette, JavaScript ei ole yhteensopiva Reaktin perusperiaatteiden kanssa.

Onko toista ohjelmointikieltä, joka olisi yhteensopivampi Reaktin kanssa kuin JavaScript?

Onneksi meillä on ReasonML.

Syystä saamme muuttumattomuuden pois laatikosta. Koska se perustuu toiminnalliseen ohjelmointikieleen OCaml, meillä on sellaisia ​​ominaisuuksia myös itse kielellä. Syy tarjoaa meille myös vahvan tyyppisen järjestelmän yksin.

Reagoi, JavaScript ja syy -vertailu

Syy on yhteensopiva Reaktin perusperiaatteiden kanssa.

Syy

Se ei ole uusi kieli. Se on vaihtoehtoinen JavaScript-tyyppinen syntaksi ja työkaluketju OCamlille, toiminnalliselle ohjelmointikielelle, joka on ollut olemassa jo yli 20 vuotta. Syy on luonut Facebook-kehittäjät, jotka ovat jo käyttäneet OCamlia projektissaan (Flow, Infer).

Syy, sen C-tyyppisellä syntaksilla, tekee OCamlista lähestyttävän ihmisiä, jotka tulevat yleisistä kielistä, kuten JavaScript tai Java. Se tarjoaa sinulle paremman dokumentoinnin (verrattuna OCaml: iin) ja kasvavan yhteisön sen ympärille. Lisäksi se helpottaa integrointia olemassa olevaan JavaScript-koodiin.

OCaml toimii syyn taustakielenä. Syyllä on sama semantiikka kuin OCamlilla - vain syntaksi on erilainen. Tämä tarkoittaa, että voit kirjoittaa OCamlin Reasonin JavaScript-kaltaisella syntaksilla. Seurauksena on, että voit hyödyntää OCamlin mahtavia ominaisuuksia, kuten vahvaa tyyppijärjestelmää ja kuvioiden yhteensovittamista.

Katsotaanpa esimerkkiä syyn syntaksista.

olkoon fizzbuzz = (i) =>
  kytkin (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
(i 1: stä 100: een) {
  Js.log (fizzbuzz (i))
};

Vaikka käytämme mallihakua tässä esimerkissä, se on silti melko samanlainen kuin JavaScript, eikö?

Ainoa käyttökelpoinen kieli selaimissa on kuitenkin JavaScript, eli meidän on käännettävä siihen.

BuckleScript

Yksi Reasonin tehokkaimmista ominaisuuksista on BuckleScript-kääntäjä, joka vie syykoodisi ja kokoaa sen luettavaksi ja suorittavaksi JavaScriptiksi tehokkaalla kuolleen koodin eliminoinnilla. Ymmärrät luettavuuden, jos työskentelet ryhmässä, jonka kaikki syyt eivät tunne, koska he voivat silti lukea kootun JavaScriptin koodin.

Samankaltaisuus JavaScriptin kanssa on niin lähellä, että kääntäjän ei tarvitse muuttaa jotain Reason-koodia. Joten, voit nauttia staattisesti kirjoitetun kielen eduista muuttamatta koodia.

anna lisätä = (a, b) => a + b;
lisää (6, 9);

Tämä on kelvollinen koodi sekä syyssä että JavaScript-muodossa.

BuckleScript toimitetaan neljällä kirjasolla: standardi kirjasto nimeltään Belt (OCaml-standardikirjasto ei ole riittävä), ja sidokset JavaScriptiin, Node.js ja, DOM API.

Koska BuckleScript perustuu OCaml-kääntäjään, saat räikeästi nopean kokoamisen, joka on paljon nopeampaa kuin Babel ja useita kertoja nopeampi kuin TypeScript.

Kokoonnetaan FizzBuzz-algoritmimme, joka on kirjoitettu syystä JavaScriptiin.

Syyn koodikokoonpano JavaScriptiin BuckleScriptin kautta

Kuten huomaat, tuloksena saatu JavaScript-koodi on melko luettavissa. Näyttää siltä, ​​että sen on kirjoittanut JavaScript-kehittäjä.

Reason ei vain käänny JavaScriptiin, vaan myös omaan ja tavukoodiin. Joten voit kirjoittaa yhden sovelluksen Reason-syntaksilla ja pystyä ajamaan sitä selaimessa MacOS-, Android- ja iOS-puhelimissa. On Jared Forsythin nimeltään Gravitron-peli, joka on kirjoitettu syyssä ja jota voidaan käyttää kaikilla juuri mainitsemillani alustoilla.

JavaScript-interop

BuckleScript tarjoaa myös JavaScriptin yhteentoimivuuden. Paitsi, että voit liittää toimivan JavaScript-koodisi Reason-tietokantaan, myös Reason-koodisi voi olla vuorovaikutuksessa kyseisen JavaScript-koodin kanssa. Tämä tarkoittaa, että voit integroida Reason-koodin helposti olemassa olevaan JavaScript-tietokantaan. Lisäksi voit käyttää kaikkia NPM-ekosysteemin JavaScript-paketteja syykoodissasi. Voit esimerkiksi yhdistää Flow, TypeScript ja Reason yhdessä yhdessä projektissa.

Se ei kuitenkaan ole niin yksinkertaista. Jotta JavaScript-kirjastoja tai -koodia voitaisiin käyttää Reason-ohjelmassa, sinun on siirrettävä se Reason-sovellukseen ensin Reason-sidoksilla. Toisin sanoen tarvitset tyyppejä kirjoittamattomalle JavaScripti-koodillesi voidaksesi hyödyntää Reasonin vahvan tyyppijärjestelmää.

Aina kun sinun on käytettävä JavaScript-kirjastoa syykoodissasi, tarkista, onko kirjasto jo siirretty syylle selaamalla syypakettihakemiston (Redex) tietokantaa. Se on verkkosivusto, joka yhdistää Reason- ja JavaScript-kirjastoihin kirjoitetut eri kirjastot ja työkalut Reason-sidoksilla. Jos löysit kirjastosi sieltä, voit asentaa sen vain riippuvuudeksi ja käyttää sitä Syy-sovelluksessa.

Jos et kuitenkaan löytänyt kirjastoa, joudut kirjoittamaan syiden sidokset itse. Jos olet vasta aloittamassa syystä, muista, että sidosten kirjoittaminen ei ole asia, josta haluat aloittaa, koska se on yksi haastavimmista asioista Reasonin ekosysteemissä.

Onneksi kirjoitan vain postitusta Reason-sidosten kirjoittamisesta, joten pysy kuulolla!

Kun tarvitset joitain toimintoja JavaScript-kirjastosta, sinun ei tarvitse kirjoittaa koko kirjaston Reason-sidoksia. Voit tehdä sen vain käyttämäsi toiminnot tai komponentit.

ReasonReact

Tämä artikkeli koskee Reaktin kirjoittamista syyssä, jonka voit tehdä ReasonReact-kirjaston avulla.

Ehkä mietit nyt "en vieläkään tiedä, miksi minun pitäisi käyttää Reaktiota syyssä".

Olemme jo maininneet pääasiallisen syyn niin tekemiseen - Syy on Reactin ja JavaScriptin kanssa yhteensopivampi. Miksi se on yhteensopivampi? Koska React on kehitetty syylle tai tarkemmin sanottuna OCamlille.

Tie ReasonReactiin

Reaktin ensimmäisen prototyypin kehitti Facebook ja se kirjoitettiin OCamlin serkkuna Standard Meta Language (StandardML). Sitten se siirrettiin OCamliin. React on myös kirjoitettu JavaScriptiin.

Tämä johtui siitä, että koko verkko käytti JavaScriptiä, eikä ollut todennäköisesti fiksua sanoa: ”Nyt rakennamme käyttöliittymän OCamliin.” Ja se toimi - JavaScriptin reagointi on laajalti omaksuttu.

Joten olemme tottuneet reagoimaan JavaScript-kirjastoksi. Reagoi yhdessä muiden kirjastojen ja kielten - Elm, Redux, recompose, Ramda ja PureScript - kanssa tekemästä toiminnallisesta ohjelmoinnista JavaScriptillä suosittu. Ja Flow- ja TypeScriptin noustessa myös staattinen kirjoittaminen tuli suosituksi. Seurauksena staattisten tyyppisten funktionaalisten ohjelmointiparadigmien tuli valtavirtaan käyttöliittymän maailmassa.

Vuonna 2016 Bloomberg kehitti ja avoimen lähteen Bucklecriptin, kääntäjän, joka muuttaa OCamlin JavaScriptinä. Tämän avulla he pystyivät kirjoittamaan turvallisen koodin käyttöliittymään OCamlin vahvan tyyppijärjestelmän avulla. He ottivat optimoidun ja räikeästi nopean OCaml-kääntäjän ja vaihtoivat sen taustapäivää tuottavan natiivikoodin JavaScriptiä tuottavaan koodiin.

Funktionaalisen ohjelmoinnin suosio yhdessä BuckleScript-julkaisun kanssa loi ihanteellisen ilmapiirin Facebookille palata takaisin alkuperäiseen Reakt-ajatukseen, joka alun perin kirjoitettiin ML-kielellä.

ReasonReact

He ottivat OCaml-semantiikan ja JavaScript-syntaksin ja loivat syyn. He loivat myös Reason-kääre React - ReasonReact-kirjaston ympärille lisätoiminnoilla, kuten Redux-periaatteiden koteloinnin tilallisiin komponentteihin. Näin tekemällä he palauttivat Reaktin alkuperäisiin juuriinsa.

Reaktorin voima järkeä

Kun React tuli JavaScriptiin, mukautimme JavaScriptin Reactin tarpeisiin ottamalla käyttöön erilaisia ​​kirjastoja ja työkaluja. Tämä merkitsi myös enemmän riippuvuuksia projekteillemme. Puhumattakaan siitä, että näitä kirjastoja on edelleen kehitteillä ja rikkovia muutoksia tehdään säännöllisesti. Joten sinun on ylläpidettävä näitä riippuvuuksia huolellisesti projekteissasi.

Tämä lisäsi JavaScriptin kehitykseen uuden monimutkaisuuskerroksen.

Tyypillisellä React-sovelluksellasi on ainakin nämä riippuvuudet:

  • staattinen kirjoittaminen - Flow / TypeScript
  • muuttumattomuus - muuttumatonJS
  • reititys - ReactRouter
  • muotoilu - kauniimpi
  • maalaus - ESLint
  • auttajatoiminto - Ramda / Lodash

Vaihdetaan nyt JavaScriptin reagointi ReasonReactiin.

Tarvitsemmeko edelleen kaikkia näitä riippuvuuksia?

  • staattinen kirjoitus - sisäänrakennettu
  • muuttumattomuus - sisäänrakennettu
  • reititys - sisäänrakennettu
  • muotoilu - sisäänrakennettu
  • linting - sisäänrakennettu
  • auttajatoiminnot - sisäänrakennettu

Voit oppia lisää näistä sisäänrakennetuista ominaisuuksista toisessa viestissäni.

ReasonReact-sovelluksessa et tarvitse näitä ja monia muita riippuvuuksia, koska monet tärkeät ominaisuudet, jotka helpottavat kehitystäsi, sisältyvät jo itse kieleen. Joten pakettien ylläpito tulee helpommaksi, eikä monimutkaisuus kasvaa ajan myötä.

Tämä johtuu yli 20 vuotta vanhasta OCamlista. Se on kypsytetty kieli, jonka kaikki perusperiaatteet ovat paikoillaan ja vakaa.

Paketoida

Alussa Reason-tekijöillä oli kaksi vaihtoehtoa. Voit ottaa JavaScriptin ja tehdä siitä jotenkin parempaa. Tekemällä sen heidän on myös käsiteltävä sen historiallisia rasitteita.

He kuitenkin menivät eri polulle. He pitivät OCamlia kypsänä kielenä erinomaisella suorituskyvyllä ja muuttivat sitä niin, että se muistuttaa JavaScriptiä.

React perustuu myös OCamlin periaatteisiin. Siksi saat paljon paremman kehittäjäkokemuksen, kun käytät sitä Reasonin kanssa. React in Reason on turvallisempi tapa rakentaa React-komponentteja, koska vahva tyyppinen järjestelmä on saanut selkänsä eikä sinun tarvitse käsitellä suurimpaa osaa JavaScript (vanhat) ongelmista.

Mitä seuraavaksi?

Jos olet tulossa JavaScriptin maailmasta, sinun on helpompi päästä alkuun Reason-sovelluksesta, koska sen syntaksi on samanlainen kuin JavaScript. Jos olet ohjelmoinut Reaktyessa, se on sinulle entistä helpompaa, koska voit käyttää kaikkea Reaktin tietosi, koska ReasonReactilla on sama henkinen malli kuin Reaktalla ja hyvin samanlainen työnkulku. Tämä tarkoittaa, että sinun ei tarvitse aloittaa tyhjästä. Opit järkeä kehittyessäsi.

Paras tapa aloittaa syyn käyttö projektiissasi on tehdä se asteittain. Olen jo maininnut, että voit ottaa syykoodin ja käyttää sitä JavaScriptinä, ja päinvastoin. Voit tehdä saman asian ReasonReactilla. Otat ReasonReact-komponentin ja käytät sitä React JavaScript -sovelluksessa ja päinvastoin.

Tämän asteittaisen lähestymistavan ovat valinneet Facebook-kehittäjät, jotka käyttävät syytä laajasti Facebook Messenger -sovelluksen kehittämiseen.

Jos haluat rakentaa sovelluksen React in Reason -sovelluksella ja oppia Reason-perusteet käytännöllisellä tavalla, tutustu muuhun artikkeliini, jossa rakennamme yhdessä Tic Tac Toe -pelin.

Jos sinulla on kysyttävää, kritiikkiä, havaintoja tai parannusvinkkejä, kirjoita kommentti alla tai tavoita minua Twitterin tai blogin kautta.