Psst! Štai kodėl „ReasonReact“ yra geriausias būdas rašyti „React“

Ar naudojate „React“ norėdami sukurti vartotojo sąsajas? Na, aš taip pat. O dabar sužinosite, kodėl turėtumėte rašyti „React“ programas naudodami „ReasonML“.

Reaguoti yra gana šaunus būdas rašyti vartotojo sąsajas. Bet ar galėtume jį padaryti dar vėsesnį? Geriau?

Norėdami tai padaryti geriau, pirmiausia turime nustatyti jos problemas. Taigi, kokia yra pagrindinė „React“ kaip „JavaScript“ bibliotekos problema?

Iš pradžių „React“ nebuvo sukurtas „JavaScript“

Atidžiau pažvelgę ​​į „React“, pamatysite, kad kai kurie pagrindiniai jo principai nėra „JavaScript“. Pakalbėkime apie nekeičiamumą, funkcinio programavimo principus ir visų pirma tipo sistemą.

Nekeičiamumas yra vienas pagrindinių „React“ principų. Nenorite mutuoti savo rekvizitų ar būsenos, nes jei tai padarysite, galite patirti nenuspėjamų padarinių. „JavaScript“ versijoje mes neturime nekeičiamumo. Mes savo duomenų struktūras laikome nekeičiamais pagal konvenciją arba tam naudojame bibliotekas, tokias kaip nekintamasJS.

„React“ remiasi funkcinio programavimo principais, nes jo taikymai yra funkcijų kompozicijos. Nors „JavaScript“ yra keletas šių funkcijų, pavyzdžiui, pirmos klasės funkcijos, ji nėra funkcinė programavimo kalba. Kai norime parašyti gražų deklaratyvų kodą, turime naudoti išorines bibliotekas, tokias kaip „Lodash / fp“ ar „Ramda“.

Taigi, kas nutinka su tipo sistema? Reaktyvoje mes turėjome „PropTypes“. Mes juos panaudojome „JavaScript“ tipams imituoti, nes tai nėra pati statiškai įvesta kalba. Norėdami pasinaudoti patobulinto statinio spausdinimo pranašumais, vėl turime naudoti išorines priklausomybes, tokias kaip „Flow“ ir „TypeScript“.

Reaguoti ir „JavaScript“ palyginimas

Kaip matote, „JavaScript“ nesuderinamas su pagrindiniais „React“ principais.

Ar yra kita programavimo kalba, kuri labiau derėtų su „React“ nei „JavaScript“?

Laimei, mes turime „ReasonML“.

Priežasties dėka mes galime nenugalėti daiktų. Kadangi ji pagrįsta OCaml, funkcine programavimo kalba, mes turime tokių funkcijų, integruotų ir pačioje kalboje. Priežastis taip pat suteikia mums stiprią tipo sistemą.

„Reaguoti“, „JavaScript“ ir Priežasties palyginimas

Priežastis suderinama su pagrindiniais „React“ principais.

Priežastis

Tai nėra nauja kalba. Tai yra alternatyvi „JavaScript“ tipo sintaksė ir įrankių grandinė „OCaml“ - funkcinei programavimo kalbai, egzistuojančiai daugiau nei 20 metų. Priežastį sukūrė „Facebook“ kūrėjai, kurie jau naudojo OCaml savo projektuose („Flow“, „Infer“).

Priežastis, turinti C tipo sintaksę, daro „OCaml“ prieinamą žmonėms, atvykstantiems iš pagrindinių kalbų, tokių kaip „JavaScript“ ar „Java“. Tai suteikia jums geresnę dokumentaciją (palyginti su OCaml) ir aplink ją augančią bendruomenę. Be to, tai lengviau integruoti su esama „JavaScript“ bazine baze.

„OCaml“ yra pagrindinė priežasties kalba. Priežastis turi tokią pačią semantiką kaip ir OCaml - skiriasi tik sintaksė. Tai reiškia, kad galite parašyti OCaml naudodami „Reason“ „JavaScript“ tipo sintaksę. Todėl galite pasinaudoti nuostabiomis „OCaml“ funkcijomis, tokiomis kaip stiprios sistemos sistema ir modelio atitikimas.

Pažvelkime į Priežasties sintaksės pavyzdį.

tegul fizzbuzz = (i) =>
  jungiklis (i mod 3, i mod 5) {
  | (0, 0) => „FizzBuzz“
  | (0, _) => „Fizz“
  | (_, 0) => „Buzz“
  | _ => string_of_int (i)
  };
už (i nuo 1 iki 100) {
  Js.log („fizzbuzz“ (i))
};

Nors šiame pavyzdyje naudojame modelio atitikimą, jis vis tiek yra panašus į „JavaScript“, tiesa?

Tačiau vienintelė naudojama naršyklių kalba vis dar yra „JavaScript“, tai reiškia, kad turime ją kompiliuoti.

Sagtis

Viena iš galingiausių „Reason“ funkcijų yra „BuckleScript“ kompiliatorius, kuris paima jūsų „Reason“ kodą ir sudaro jį taip, kad jis būtų lengvai skaitomas ir naudingas „JavaScript“, be pašalinio kodo pašalinimo. Jūs įvertinsite skaitomumą, jei dirbate komandoje, kurioje ne visi yra susipažinę su Priežastimi, nes jie vis tiek galės skaityti sudarytą „JavaScript“ kodą.

Panašumas su „JavaScript“ yra toks artimas, kad kompiliatoriui nereikia keisti kai kurių „Priežasties“ kodų. Taigi, jūs galite mėgautis statiškai įvestos kalbos pranašumais nepakeisdami kodo.

tegul prideda = (a, b) => a + b;
pridėti (6, 9);

Tai galiojantis kodas tiek „Priežastyje“, tiek „JavaScript“.

„BuckleScript“ siunčiamos su keturiomis bibliotekomis: standartine biblioteka, vadinama „Belt“ („OCaml“ standartinės bibliotekos nepakanka), ir įrišimais į „JavaScript“, „Node.js“ ir, DOM API.

Kadangi „BuckleScript“ remiasi „OCaml“ kompiliatoriumi, gausite nepaprastai greitą kompiliaciją, kuri yra daug greitesnė nei „Babel“ ir kelis kartus greitesnė nei „TypeScript“.

Sudarykime mūsų „FizzBuzz“ algoritmą, parašytą Priežastis, kad „JavaScript“.

Priežasties kodo rinkinys į „JavaScript“ naudojant „BuckleScript“

Kaip matote, gautas „JavaScript“ kodas yra gana lengvai skaitomas. Panašu, kad ją parašė „JavaScript“ kūrėjas.

Priežastis ne tik derina „JavaScript“, bet taip pat ir vietinius bei baitinius kodus. Taigi, naudodami „Reason“ sintaksę galite parašyti vieną programą ir galėsite ją paleisti „MacOS“, „Android“ ir „iOS“ telefonų naršyklėje. Yra Jaredo Forsytho žaidimas „Gravitron“, kuris parašytas „Priežastis“ ir kurį galima paleisti visose mano paminėtose platformose.

„JavaScript“ sąsaja

„BuckleScript“ taip pat suteikia „JavaScript“ sąveiką. Ne tik galite įklijuoti darbinį „JavaScript“ kodą į savo „Reason“ bazę, bet ir „Reason“ kodas gali sąveikauti su ta „JavaScript“. Tai reiškia, kad „Reason“ kodą galite lengvai integruoti į esamą „JavaScript“ bazę. Be to, savo priežasties kode galite naudoti visus „JavaScript“ paketus iš NPM ekosistemos. Pvz., Galite sujungti „Flow“, „TypeScript“ ir „Priežastis“ viename projekte.

Tačiau tai nėra taip paprasta. Jei norite naudoti „JavaScript“ bibliotekas ar kodą „Reason“, pirmiausia turite jį perkelti į „Reason“ naudodami „Reason“ įrišimus. Kitaip tariant, norint įgyti stiprios „Reason“ tipo sistemos pranašumus, reikia įvesti netašytą „JavaScript“ kodą.

Kai jums reikia naudoti „JavaScript“ biblioteką „Priežasties“ kode, patikrinkite, ar biblioteka jau buvo perkelta į „Priežastis“, naršydami „Priežasties paketo indekso“ („Redex“) duomenų bazę. Tai svetainė, kurioje kaupiamos įvairios bibliotekos ir įrankiai, parašyti „Reason“ ir „JavaScript“ bibliotekose su „Priežastimis“. Jei ten radote savo biblioteką, galite ją tiesiog įdiegti kaip priklausomybę ir naudoti savo programoje „Priežastis“.

Tačiau, jei neradote savo bibliotekos, turėsite patys parašyti „Priežastys“. Jei jūs tik pradedate nuo Priežasties, atminkite, kad įrišimų rašymas nėra dalykas, nuo kurio norite pradėti, nes tai yra vienas iš sudėtingesnių dalykų „Priežasties“ ekosistemoje.

Laimei, aš rašau tik įrašą apie Priežasties įrišimus, todėl būkite budrūs!

Kai jums reikia tam tikrų „JavaScript“ bibliotekos funkcijų, nereikia rašyti visos bibliotekos „Priežastys“. Tai galite padaryti tik naudodami funkcijas ar komponentus.

„ReasonReact“

Šis straipsnis yra apie „React in Reason“ rašymą, kurį galite padaryti naudodamiesi „ReasonReact“ biblioteka.

Galbūt jūs dabar galvojate „Aš vis dar nežinau, kodėl turėčiau naudoti priežastį„ Reaguoti “.

Mes jau minėjome pagrindinę priežastį tai padaryti - Priežastis yra labiau suderinama su „React“ nei „JavaScript“. Kodėl jis labiau suderinamas? Nes „React“ buvo sukurtas „Priežastis“, arba, tiksliau sakant, „OCaml“.

Kelias į „ReasonReact“

Pirmąjį „React“ prototipą sukūrė „Facebook“ ir jis buvo parašytas standartine Meta kalba (StandardML), OCaml pusbroliu. Tada jis buvo perkeltas į OCaml. Reaktyva taip pat buvo perrašyta į „JavaScript“.

Taip buvo todėl, kad visas internetas naudojo „JavaScript“, ir greičiausiai nebuvo protinga sakyti: „Dabar mes sukursime vartotojo sąsają OCaml“. Ir tai suveikė - „JavaScript“ reagavimas buvo plačiai pritaikytas.

Taigi, mes įpratome reaguoti kaip „JavaScript“ biblioteka. Reaguokite kartu su kitomis bibliotekomis ir kalbomis - „Elm“, „Redux“, „Compose“, „Ramda“ ir „PureScript“ - atliktas populiarus „JavaScript“ funkcinis programavimas. Atsiradus srautui ir „TypeScript“, statinis spausdinimas taip pat išpopuliarėjo. Dėl to funkcinio programavimo paradigma su statiniais tipais tapo pagrindine „front-end“ pasaulyje.

2016 m. „Bloomberg“ sukūrė ir atvirą „BuckleScript“, kompiliatorių, kuris „OCaml“ paverčia „JavaScript“. Tai leido jiems įrašyti saugų kodą į „front-end“, naudojant stiprią „OCaml“ tipo sistemą. Jie pasirinko optimizuotą ir nepaprastai greitą „OCaml“ kompiliatorių ir pakeitė jo pagrindinį kodą generuojantį „JavaScript“ generuojantį kodą.

Funkcinio programavimo populiarumas kartu su „BuckleScript“ išleidimu sukūrė „Facebook“ idealų klimatą grįžti prie pirminės „React“ idėjos, kuri iš pradžių buvo parašyta ML kalba.

„ReasonReact“

Jie perėmė „OCaml“ semantiką ir „JavaScript“ sintaksę bei sukūrė „Priežastį“. Jie taip pat sukūrė „Reason“ įvyniojimą aplink „React“ - „ReasonReact“ biblioteką - su papildomomis funkcijomis, tokiomis kaip „Redux“ principų kapsuliavimas į valstybingus komponentus. Tai atlikę, jie sugrąžino Reaktyvo pradines šaknis.

Reakcijos galia protu

Kai „React“ įsijungė į „JavaScript“, „JavaScript“ pritaikėme „React“ poreikiams, pristatydami įvairias bibliotekas ir įrankius. Tai taip pat reiškė didesnę priklausomybę nuo mūsų projektų. Jau neminint to, kad šios bibliotekos vis dar tobulinamos ir reguliariai įvedamos naujausios permainos. Taigi, jūs turite atsargiai išlaikyti šias priklausomybes savo projektuose.

Tai dar labiau padidino „JavaScript“ kūrimo sudėtingumą.

Jūsų tipiška „React“ programa turės bent šias priklausomybes:

  • statinis spausdinimas - srautas / šriftas
  • nekintamumas - nekintamasJS
  • maršruto parinkimas - „ReactRouter“
  • formatavimas - gražiau
  • pamušalas - ESLint
  • pagalbininko funkcija - Ramda / Lodash

Dabar pakeisime „JavaScript React“ į „ReasonReact“.

Ar mums vis dar reikia visų šių priklausomybių?

  • statinis spausdinimas - įmontuotas
  • nekintamumas - įmontuotas
  • maršruto parinkimas - įmontuotas
  • formatavimas - įmontuotas
  • pamušalas - įmontuotas
  • pagalbinės funkcijos - įmontuota

Galite sužinoti daugiau apie šias įmontuotas funkcijas kitame mano įraše.

„ReasonReact“ programoje jums nereikia šių ir daugelio kitų priklausomybių, nes daugelis esminių funkcijų, kurios palengvina jūsų plėtrą, jau įtrauktos į pačią kalbą. Taigi, prižiūrėti savo pakuotes bus lengviau ir laikui bėgant nepablogėsite.

Tai dėka OCaml, kuriam daugiau nei 20 metų. Tai subrendusi kalba, turinti visus pagrindinius principus ir stabili.

Apvyniokite

Pradžioje „Reason“ kūrėjai turėjo dvi galimybes. Paimti „JavaScript“ ir kažkaip patobulinti. Tai darydami, jie taip pat turės kovoti su istorine našta.

Tačiau jie nuėjo kitu keliu. Jie priėmė „OCaml“ kaip subrendusią kalbą su dideliu našumu ir pakeitė ją taip, kad ji primena „JavaScript“.

Reaktyva taip pat remiasi OCaml principais. Štai kodėl jūs gausite daug geresnį kūrėjų patirtį, kai naudosite jį su „Priežastis“. „React in Reason“ yra saugesnis „React“ komponentų kūrimo būdas, nes stiprios rūšies sistema turi jūsų užnugarį ir jums nereikia spręsti daugumos „JavaScript“ (senųjų) problemų.

Kas toliau?

Jei esate iš „JavaScript“ pasaulio, jums bus lengviau pradėti naudotis „Priežastimi“ dėl jos sintaksės panašumo su „JavaScript“. Jei programavote „React“, jums bus dar lengviau, nes galėsite naudoti visas savo „React“ žinias, nes „ReasonReact“ turi tą patį psichinį modelį kaip „React“ ir labai panašią darbo eigą. Tai reiškia, kad jums nereikia pradėti nuo nulio. Tobulindamiesi mokysitės proto.

Geriausias būdas pradėti naudoti „Reason“ savo projektuose - tai daryti palaipsniui. Aš jau minėjau, kad galite naudoti priežasties kodą ir naudoti jį „JavaScript“, ir atvirkščiai. Tą patį veiksmą galite padaryti naudodami „ReasonReact“. Jūs paimate savo „ReasonReact“ komponentą ir naudojate jį „React JavaScript“ programoje, ir atvirkščiai.

Šį papildomą požiūrį pasirinko „Facebook“ kūrėjai, kurie plačiai naudoja „Reason“ kurdami „Facebook Messenger“ programą.

Jei norite sukurti programą naudodami „React in Reason“ ir praktiškai išmokti „Reason“ pagrindų, pažiūrėkite kitą mano straipsnį, kur kartu sukursime „Tic Tac Toe“ žaidimą.

Jei turite klausimų, kritikos, pastebėjimų ar patarimų, kaip tobulėti, rašykite žemiau arba susisiekite su manimi per „Twitter“ ar mano tinklaraštį.