Psst! Ezért van az, hogy a ReasonReact a legjobb módszer a React megírásához

A React segítségével felhasználói felületeket épít? Nos, én is az vagyok. És most megtudhatja, miért kell a ReasonML használatával megírnia a React alkalmazásokat.

A React egy nagyon jó módszer a felhasználói felületek írására. De tehetnénk még hűvösebbé? Jobb?

Annak érdekében, hogy jobb legyen, először meg kell határoznunk a problémáit. Tehát mi a React mint JavaScript könyvtár fő problémája?

A React eredetileg nem JavaScript-hez lett kifejlesztve

Ha jobban megnézi a React-et, akkor látni fogja, hogy néhány fő elve idegen a JavaScript-től. Beszéljünk elsősorban a változhatatlanságról, a funkcionális programozási elvekről és a típusrendszerről.

A változtathatatlanság a React egyik alapelve. Nem akarja megváltoztatni a kellékeit vagy az állapotát, mert ha megteszi, akkor kiszámíthatatlan következményeket tapasztalhat. A JavaScript-ben nincs változtathatóság a dobozon kívül. Adatstruktúráinkat változatlan formában tartjuk megegyezéssel, vagy olyan könyvtárakat használunk, mint például az immutableJS.

A React a funkcionális programozás elvein alapul, mivel alkalmazásai funkciók összetételei. Bár a JavaScript rendelkezik néhány ilyen funkcióval, például első osztályú funkciókkal, ez nem egy funkcionális programozási nyelv. Ha szép deklaratív kódot akarunk írni, akkor olyan külső könyvtárakat kell használnunk, mint a Lodash / fp vagy a Ramda.

Szóval, mi van a típusrendszerrel? A React-ben PropTypes-ek voltak. Felhasználtuk őket a JavaScript típusainak utánzására, mivel ez maga nem statikusan beírt nyelv. A fejlett statikus gépelés előnyeinek kihasználásához ismét külső függőségeket kell használnunk, mint például a Flow és a TypeScript.

Mint látható, a JavaScript nem kompatibilis a React alapelveivel.

Van még egy programozási nyelv, amely jobban kompatibilis lenne a React-vel, mint a JavaScript?

Szerencsére van ReasonML.

A Reason-ben megváltoztathatatlanságot kapunk ki a dobozból. Mivel az OCaml-re, a funkcionális programozási nyelvre épül, ilyen funkciók vannak beépítve magában a nyelvbe is. Az Reason önmagában is egy erős típusú rendszert biztosít számunkra.

Az ész kompatibilis a React alapelveivel.

Ok

Ez nem új nyelv. Ez egy alternatív JavaScript-szerű szintaxis és eszköztár az OCaml számára, amely egy funkcionális programozási nyelv, amely már több mint 20 éve létezik. Az okot a Facebook fejlesztői hozták létre, akik már az OCamlt használták projektjeikben (Flow, Infer).

A Reason a C-szerű szintaxisával elérhetővé teszi az OCaml-t a mainstream nyelvekből, például a JavaScript-ből vagy a Java-ból származó emberek számára. Jobb dokumentációt (az OCaml-hez képest) és a környező növekvő közösséget biztosít Önnek. Ráadásul megkönnyíti a meglévő JavaScript kódbázissal való integrációt.

Az OCaml az Reason háttérnyelveként szolgál. Az Reason szemantikája megegyezik az OCaml-lel - csak a szintaxis különbözik. Ez azt jelenti, hogy az OCaml-t a Reason JavaScript-szerű szintaxisával írhatja. Ennek eredményeként kihasználhatja az OCaml fantasztikus szolgáltatásainak előnyeit, mint például az erős típusú rendszer és a minták illesztése.

Vessünk egy pillantást a Reason szintaxisára.

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

Bár ebben a példában a mintaillesztést használjuk, még mindig elég hasonló a JavaScript-hez, igaz?

A böngészők számára azonban az egyetlen használható nyelv továbbra is a JavaScript, vagyis fordítanunk kell hozzá.

BuckleScript

A Reason egyik legerősebb tulajdonsága a BuckleScript fordító, amely elveszi a Reason kódodat, és olvasható és teljesítő JavaScript-be fordítja, nagyszerű elhalt kód eltávolítással. Nagyra értékelni fogja az olvashatóságot, ha olyan csapatban dolgozik, ahol nem mindenki ismeri az Okot, mivel továbbra is képesek lesznek elolvasni a lefordított JavaScript kódot.

A hasonlóság a JavaScript-szel annyira szoros, hogy a Reason kódjának egy részét a fordítónak egyáltalán nem kell megváltoztatnia. Tehát élvezheti a statikusan begépelt nyelv előnyeit a kód bármilyen változtatása nélkül.

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

Érvényes és JavaScript-ben is érvényes kód.

A BuckleScript négy könyvtárral kerül kiszállításra: a Belt nevű standard könyvtár (az OCaml standard könyvtár nem elegendő), valamint a JavaScript, a Node.js és a DOM API-khoz való kötések.

Mivel a BuckleScript az OCaml fordítón alapul, lenyűgözően gyors összeállítást kap, amely sokkal gyorsabb, mint a Babel, és többször gyorsabb, mint a TypeScript.

Állítsuk össze az Reason to JavaScript-be írt FizzBuzz algoritmust.

Amint láthatja, a kapott JavaScript-kód elég jól olvasható. Úgy tűnik, mintha egy JavaScript-fejlesztő írta volna.

Az Reason nemcsak a JavaScript-be, hanem a natív és bytecode-ba is fordít. Tehát egyetlen alkalmazást írhat a Reason szintaxissal, és futtathatja azt a böngészőben MacOS, Android és iOS telefonokon. Van egy Jared Forsyth által a Gravitron nevű játék, amelyet a Reason írt, és az általam említett platformokon futtatható.

JavaScript interop

A BuckleScript JavaScript interoperabilitást is biztosít számunkra. Nemcsak beillesztheti működő JavaScript kódját a Reason kódbázisába, hanem az Reason kód is kölcsönhatásba léphet azzal a JavaScript kóddal. Ez azt jelenti, hogy könnyen beillesztheti az Reason kódot a meglévő JavaScript kódbázisba. Ezenkívül használhatja az NPM ökoszisztéma összes JavaScript-csomagját az Ok-kódjában. Például egyesítheti a Flow, a TypeScript és az Reason egyetlen projektben.

Ez azonban nem ilyen egyszerű. A JavaScript könyvtárak vagy kódok Reason használatához először a Reason összerendeléseken keresztül kell azt a Reasonre portálnia. Más szavakkal, a be nem írt JavaScript kódok típusaira van szükség ahhoz, hogy kihasználhassa a Reason erős típusú rendszerének előnyeit.

Amikor egy JavaScript könyvtárat kell használnia az okkódban, ellenőrizze, hogy a könyvtár már a Portra van-e portálva, az Reason Package Index (Redex) adatbázis böngészésével. Ez egy olyan webhely, amely összesíti a Reason és a JavaScript könyvtárakba írt különböző könyvtárakat és eszközöket Reason kötéssel. Ha ott találta a könyvtárát, egyszerűen telepítheti függőségként, és felhasználhatja az Ok alkalmazásában.

Ha azonban nem találta meg a könyvtárát, akkor magának kell írnia az Ok-összerendeléseket. Ha csak a Reason-ről indul ki, ne feledje, hogy a kötések írása nem az a dolog, amellyel el szeretné kezdeni, mivel ez a Reason ökoszisztémájának egyik legnagyobb kihívást jelentő dolga.

Szerencsére csak egy bejegyzést írok az Ok-összerendelések megírásáról, szóval tartsatok velünk!

Ha valamilyen funkcionalitásra van szüksége egy JavaScript-könyvtárból, akkor nem kell megírnia az egész könyvtár Ok-összerendelését. Ezt csak a használni kívánt funkciókhoz vagy összetevőkhöz teheti meg.

OkReact

Ez a cikk a React in Reason írásáról szól, amelyet a ReasonReact könyvtárnak köszönhet.

Talán most arra gondolsz, hogy "még mindig nem tudom, miért kellene használnom a Reakciót az ésszerűségben."

Ennek fő okát már említettük - az Reason jobban kompatibilis a React-vel, mint a JavaScript. Miért kompatibilisebb? Mivel a React-ot a Reason, pontosabban az OCaml számára fejlesztették ki.

Road to ReasonReact

A React első prototípusát a Facebook fejlesztette ki, és az OCaml unokatestvére, a Standard Meta Language (StandardML) nyelven íródott. Aztán áthelyezték az OCaml-ba. A React a JavaScript-re is át lett írva.

Ennek oka az volt, hogy az egész internet JavaScriptet használt, és valószínűleg nem volt okos azt mondani: "Most az UCaml-t építjük fel." És sikerült - A React in JavaScript széles körben elfogadott.

Tehát hozzászoktunk a React-hoz, mint JavaScript könyvtárhoz. Reagáljon más könyvtárakkal és nyelvekkel - az Elm, a Redux, az Újrakomponálás, a Ramda és a PureScript - segítségével a JavaScript funkcionális programozása népszerűvé vált. A Flow és a TypeScript térnyerésével a statikus gépelés is népszerűvé vált. Ennek eredményeként a statikus típusokkal rendelkező funkcionális programozási paradigma mainstream lett a front-end világában.

2016-ban a Bloomberg kifejlesztette és nyílt forráskódú BuckleScript-et fordította, amely az OCamlt JavaScript-vé alakítja. Ez lehetővé tette számukra, hogy biztonságos kódot írhassanak a kezelőfelületre az OCaml erős típusú rendszerével. Elvették az optimalizált és lángolóan gyors OCaml fordítót, és kicserélték annak háttérgeneráló natív kódját egy JavaScript generálóra.

A funkcionális programozás népszerűsége a BuckleScript kiadásával együtt ideális légkört teremtett a Facebook számára, hogy visszatérjen a React eredeti elképzeléséhez, amelyet eredetileg ML nyelven írtak.

Elvették az OCaml szemantikáját és a JavaScript szintaxisát, és létrehozták az Okot. Létrehozták a Reason wrappert a React körül - ReasonReact könyvtárat - további funkciókkal, például a Redux-elvek állapotkomponensekbe foglalásával. Ezzel visszaadták a React eredeti gyökereit.

A Reakció ereje az értelemben

Amikor a React bekerült a JavaScript-be, különféle könyvtárak és eszközök bevezetésével igazítottuk a JavaScriptet a React igényeihez. Ez több függőséget jelentett projektjeinknél is. Nem is beszélve arról, hogy ezek a könyvtárak még fejlesztés alatt állnak, és rendszeresen bevezetnek törő változásokat. Tehát óvatosan kell fenntartania ezeket a függőségeket a projektjeiben.

Ez újabb bonyolultsági réteget adott a JavaScript fejlesztéséhez.

A tipikus React alkalmazásnak legalább ezek a függőségei lesznek:

  • statikus gépelés - Flow / TypeScript
  • változhatatlanság - megváltoztathatatlanJS
  • útválasztás - ReactRouter
  • formázás - szebb
  • szöszösítés - ESLint
  • segítő funkció - Ramda / Lodash

Cseréljük le most a JavaScript React-et a ReasonReact-ra.

Szükségünk van még ezekre a függőségekre?

  • statikus gépelés - beépített
  • változtathatatlanság - beépített
  • útválasztás - beépített
  • formázás - beépített
  • szöszös - beépített
  • segítő funkciók - beépített

Ezekről a beépített funkciókról többet tudhat meg a másik bejegyzésemben.

A ReasonReact alkalmazásban nincs szüksége ezekre és sok más függőségre, mivel számos olyan alapvető funkció, amely megkönnyíti a fejlesztését, már magában a nyelvben is szerepel. Tehát a csomagok karbantartása könnyebbé válik, és az idő múlásával nem növekszik a bonyolultság.

Ez köszönhető az OCaml-nak, amely több mint 20 éves. Ez egy érett nyelv, amelynek minden alapelve helyben van és stabil.

Összecsomagolás

Az elején a Reason készítőinek két lehetőségük volt. JavaScriptet használni, és valahogy jobbá tenni. Ezzel nekik is meg kell küzdeniük annak történelmi terheivel.

Azonban más utat jártak be. Nagy teljesítményű, érett nyelvként vették az OCaml-t, és úgy módosították, hogy hasonlítson a JavaScript-re.

A React az OCaml elvein is alapul. Ezért sokkal jobb fejlesztői élményt fog szerezni, amikor a Reason-szal használja. A React in Reason a React összetevők biztonságosabb felépítését jelenti, mivel az erős típusú rendszer visszakapta a hátát, és nem kell foglalkoznia a JavaScript (örökölt) problémák nagy részével.

Mi a következő lépés?

Ha a JavaScript világából származik, könnyebben kezdheti el a Reason használatát, mivel a szintaxisa hasonló a JavaScript-hez. Ha a React-ban programozott, akkor még könnyebb lesz Önnek, mivel minden React-tudását felhasználhatja, mivel a ReasonReact-nak ugyanaz a mentális modellje van, mint a React-nek, és nagyon hasonló munkafolyamat. Ez azt jelenti, hogy nem kell a nulláról kezdeni. Meg fogja tanulni az Értelmet, ahogy fejlődik.

A Reason használatának legjobb módja a projektekben az, ha fokozatosan hajtja végre. Már említettem, hogy felveheti az Reason kódot, és használhatja azt JavaScript-ben, és fordítva is. Ugyanezt megteheti a ReasonReact alkalmazással is. Fogja a ReasonReact összetevőt, és használja a React JavaScript alkalmazásban, és fordítva.

Ezt az inkrementális megközelítést a Facebook fejlesztői választották, akik a Reason-ot széles körben használják a Facebook Messenger alkalmazás fejlesztésében.

Ha egy alkalmazást szeretne készíteni a React in Reason használatával, és gyakorlati módon megtanulja az Reason alapjait, olvassa el a másik cikkemet, ahol együtt építünk egy Tic Tac Toe játékot.

Ha bármilyen kérdése, kritikája, észrevétele vagy tippje van a fejlesztéssel kapcsolatban, írjon bátran alább, vagy keressen meg a Twitteren vagy a blogomon keresztül.