Pszt! Ez az oka annak, hogy a ReasonReact a legjobb módja annak, hogy Reakciót írjon

A Reaktust használja felhasználói felületek készítéséhez? Nos, én is én vagyok. És most megtudhatja, miért kell írni a React alkalmazásokat a ReasonML használatával.

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

A jobb fejlesztés érdekében először meg kell határoznunk a problémákat. Mi tehát a React, mint JavaScript könyvtár fő problémája?

A React kezdetben nem volt kifejlesztve a JavaScript számára

Ha közelebbről megvizsgálja a Reaktust, látni fogja, hogy néhány fő alapelve idegen a JavaScript számára. Beszéljünk különösen a megváltoztathatatlanságról, a funkcionális programozási alapelvekről és különösen a típusrendszerről.

A megváltoztathatatlanság a React egyik alapelve. Nem akarod módosítani a kellékeidet vagy az államodat, mert ha igen, kiszámíthatatlan következményekkel járhat. A JavaScript-ben nincs megváltoztathatatlanság a dobozból. Adatszerkezeteinket konvenciókkal változtathatatlanul tartjuk, vagy ennek eléréséhez könyvtárakat, például az immvableJS-t használunk.

A React a funkcionális programozás alapelvein alapszik, mivel alkalmazásai a funkciók összetételét jelentik. Noha a JavaScript rendelkezik ezekkel a funkciókkal, például az első osztályú funkciókkal, ez nem funkcionális programozási nyelv. Ha szép deklaratív kódot akarunk írni, külső könyvtárakat kell használni, például Lodash / fp vagy Ramda.

Szóval, mi a helyzet a típusrendszerrel? A Reactben PropTypes volt. Használtuk ezeket a típusok utánozására a JavaScript-ben, mivel ez nem egy statikusan tipizált nyelv. A fejlett statikus gépelés előnyeinek kihasználásához ismét külső függőségeket kell használni, mint például a Flow és a TypeScript.

Reagálás és a JavaScript összehasonlítása

Mint láthatja, a JavaScript nem kompatibilis a React alapelveivel.

Van-e egy másik programozási nyelv, amely kompatibilis lenne a React, mint a JavaScript használatával?

Szerencsére van ReasonML.

Indokolásban megváltoztathatatlanná válunk a dobozból. Mivel az OCaml-en, a funkcionális programozási nyelven alapszik, ilyen funkciókat beépítettünk magába a nyelvbe is. Az oka önmagában is erős típusú rendszert biztosít számunkra.

Reagálás, JavaScript és ok összehasonlítás

Az ok összeegyeztethető a React alapelveivel.

Ok

Ez nem új nyelv. Ez egy alternatív JavaScript-szerű szintaxis és szerszámlánc az OCaml-nek, egy funkcionális programozási nyelvnek, amely több mint 20 éve működik. Az okot a Facebook fejlesztői alkották, akik már használtak OCaml-ot a projektjeikben (Flow, Infer).

Az oka a C-szerű szintaxisával az OCaml-t megközelíthetõvé teszi olyan emberek számára, akik olyan mainstream nyelvektõl érkeznek, mint a JavaScript vagy a Java. Jobb dokumentációt nyújt (az OCaml-hoz képest) és egyre növekvő közösséget kínál körülötte. Ezenkívül megkönnyíti az integrációt a meglévő JavaScript-adatbázisba.

Az OCaml az oka háttere. Az ok ugyanaz a szemantika, mint az OCaml - csak a szintaxis különbözik. Ez azt jelenti, hogy az OCaml-t az Reason JavaScript-szerű szintaxisával írhatja. Ennek eredményeként kihasználhatja az OCaml fantasztikus tulajdonságait, például az erős típusú rendszerét és a mintázatait.

Vessen egy pillantást az Reason szintaxisára.

legyen fizzbuzz = (i) =>
  kapcsoló (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Zümm"
  | _ => string_of_int (i)
  };
(i-ben 1-től 100-ig) {
  Js.log (fizzbuzz (i))
};

Bár ebben a példában a mintaegyezést használjuk, az még mindig nagyon hasonlít a JavaScriptre, igaz?

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

BuckleScript

Az Reason egyik leghatékonyabb tulajdonsága a BuckleScript fordító, amely átveszi az Ok kódját, és összeállítja olvasható és teljesítő JavaScriptre nagyszerű holt kód kiküszöböléssel. Nagyon értékelni fogja az olvashatóságot, ha olyan csapaton dolgozik, ahol nem mindenki ismeri az okot, mivel továbbra is képesek lesznek olvasni a lefordított JavaScript kódot.

A JavaScript-hez való hasonlóság olyan szoros, hogy az Reason néhány kódját az összeállítónak egyáltalán nem kell megváltoztatnia. Tehát élvezheti a statikusan gépelt nyelv előnyeit a kód megváltoztatása nélkül.

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

Ez érvényes kód mind az oka, mind a JavaScript esetében.

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

Mivel a BuckleScript az OCaml fordítón alapszik, egy izgalmasan gyors összeállítást kap, amely sokkal gyorsabb, mint a Bábel, és többször is gyorsabb, mint a TypeScript.

Összeállítsuk a FizzBuzz algoritmust, amely a Reason to JavaScript-hez írt.

Az oka kód-összeállítása JavaScript-re a BuckleScript segítségével

Mint láthatja, a kapott JavaScript kód nagyon jól olvasható. Úgy tűnik, hogy egy JavaScript fejlesztő írta.

A Reason nem csak a JavaScript-hez fordul, hanem a natív és a byte-kódokhoz is. Így egyetlen alkalmazást is írhat a Reason szintaxis segítségével, és futtathatja azt a böngészőben MacOS, Android és iOS telefonokon. Van egy Jared Forsyth nevű Gravitron játék, amelynek oka van, és az összes platformon futtatható, amelyet már említettem.

JavaScript interop

A BuckleScript JavaScript interoperabilitást is biztosít számunkra. Nemcsak beillesztheti a működő JavaScript kódot az 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 integrálhatja a Reason kódot a meglévő JavaScript-adatbázisba. Ráadásul az NPM ökoszisztéma összes JavaScript csomagját felhasználhatja az Ok kódjában. Például egyesítheti a Flow, a TypeScript és az Reason egy projektet.

Ez azonban nem olyan egyszerű. A JavaScript könyvtárak vagy kód használatához a Reason-ban előbb a Reason-hez kell átvinni a Reason-összerendelések segítségével. Más szavakkal, be kell írnia a be nem írt JavaScript kódot, hogy kihasználhassa az Reason erős típusú rendszerének előnyeit.

Ha bármikor JavaScript-könyvtárat kell használni az Ok-kódban, ellenőrizze, hogy a könyvtár már át lett-e érve a Reason-hoz, az Reason-csomag index (Redex) adatbázis böngészésével. Ez egy olyan webhely, amely az Reason és a JavaScript könyvtárakban írt különféle könyvtárakat és eszközöket az Reason kötésekkel összesíti. Ha ott találta könyvtárát, telepítheti függőségként, és felhasználhatja az Ok alkalmazásban.

Ha azonban nem találta meg a könyvtárat, saját magának is meg kell írnia az okakötéseket. Ha csak az Ésszerűvel kezdi, ne feledje, hogy a kötések írása nem olyan dolog, amellyel kezdeni szeretne, mivel ez az egyik legnagyobb kihívást jelentő dolog az Reason ökoszisztémájában.

Szerencsére csak egy hozzászólást írok az okakötések írásáról, szóval maradj velünk!

Ha valamilyen funkcióra van szüksége egy JavaScript-könyvtárból, akkor nem kell írnia a könyvtár egészének Ok-összerendeléseit. Ezt csak a használni kívánt funkciókhoz vagy összetevőkhez teheti meg.

ReasonReact

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

Talán most arra gondolsz, hogy „még mindig nem tudom, miért kellene a Reakciót okosan használni.”

Már említettük a fő okát - az ok inkább összeegyeztethető a Reaktussal, mint a JavaScript-kel. Miért kompatibilis? Mivel a Reaktust az oka, vagy pontosabban az OCaml számára fejlesztették ki.

Út a ReasonReact-hoz

A React első prototípusát a Facebook fejlesztette ki, és az OCaml unokatestvére, Standard Meta Language (StandardML) nyelven írta. Ezután az OCaml-ba költözött. A Reaktust is átírták a JavaScriptre.

Ennek oka az volt, hogy az egész weben JavaScriptet használták, és valószínűleg nem volt okos azt mondani: „Most az UAM-ot építjük az OCaml-ban.” És működött - a JavaScript reagálása széles körben elfogadott.

Tehát hozzászoktunk ahhoz, hogy JavaScript-könyvtárként reagáljunk. Reagáljon más könyvtárakkal és nyelvekkel - az Elm, a Redux, az Összeállítás, a Ramda és a PureScript - közösen a JavaScript működő programozásával. A Flow és a TypeScript növekedésével a statikus gépelés is népszerűvé vált. Ennek eredményeként a statikus típusok funkcionális programozási paradigmája mainstream lett a front-end világában.

2016-ban a Bloomberg kifejlesztette és nyílt forráskódú BuckleScript-et hozott létre, amely az OCaml-t JavaScriptté alakítja. Ez lehetővé tette számukra, hogy biztonságos kódot írjanak a kezelőfelületre az OCaml erős típusú rendszerével. Vették az optimalizált és lágyan gyors OCaml fordítót, és a háttér-generáló natív kódot kicserélték egy JavaScript előállítására.

A funkcionális programozás népszerűsége és a BuckleScript megjelenése ideális légkört teremtett a Facebook számára, hogy visszatérjen a React eredeti ötletéhez, amelyet eredetileg ML nyelven írtak.

ReasonReact

Fogtak OCaml szemantikát és JavaScript szintaxist, és létrehozták az Okot. Készítették a Reason körét is a React köré - ReasonReact könyvtár -, olyan további funkciókkal, mint például a Redux alapelveinek beépítése az állami komponensekbe. Így visszatértek a Reaktúrához eredeti gyökereihez.

A reagálás ereje az okban

Amikor a React bekerült a JavaScript-be, különféle könyvtárak és eszközök bevezetésével a JavaScriptet a React igényeihez igazítottuk. Ez további függőségeket jelentett a projektjeinkhez is. Nem is említve, hogy ezek a könyvtárak még fejlesztés alatt állnak, és rendszeresen bevezetik a törésváltásokat. Tehát ezeket a függőségeket gondosan kell fenntartania a projektjeiben.

Ez további bonyolultságot adott a JavaScript fejlesztéséhez.

A tipikus React alkalmazás legalább az alábbi függőségekkel rendelkezik:

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

Most cseréljük ki a JavaScripti Reakciót a ReasonReact számára.

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

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

A beépített funkciókról többet megtudhat a másik bejegyzésemben.

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

Ennek köszönhetően az OCaml több, mint 20 éve van. Ez egy érett nyelv, amelynek minden alapelve a helyén van és stabil.

Wrap-up

A Reason alkotóinak elején két lehetőség volt. Hogy átvegye a JavaScriptet, és valahogy jobbá tegye. Ezzel meg kell birkózniuk a történelmi terheivel is.

Más utat azonban mentek. Kiváló teljesítmény mellett az OCaml-t érett nyelvként vették át, és úgy módosították, hogy hasonló legyen a JavaScript-hez.

A React az OCaml alapelvein is alapul. Ez az oka annak, hogy sokkal jobb fejlesztői élményt kap, ha a Reason-nal használja. A React in Reason biztonságosabb módszert képvisel a React összetevők felépítésében, mivel az erős típusú rendszer megkapta a hátadját, és nem kell a JavaScript (régebbi) problémák legtöbbjével foglalkoznia.

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

Ha a JavaScript világából jössz, könnyebb lesz az indoklás elindításában, mivel a Java szintaxis hasonlít. Ha a Reaktúrában programozott, akkor az még neked is könnyebb lesz, mivel felhasználhatja az összes React tudását, mivel a ReasonReact ugyanazzal a mentális modellel rendelkezik, mint a React, és nagyon hasonló munkafolyamatot használ. Ez azt jelenti, hogy nem kell a nulláról kezdenie. Megtanulod az okot, ahogy fejlődsz.

A Reason a projektekben való használatának legjobb módja az, ha fokozatosan teszed ezt. Már említettem, hogy elfogadhatja az Ok kódját, és felhasználhatja azt a JavaScript-ben, és fordítva. Ugyanezt megteheti a ReasonReact segítségével. Ön elveszi a ReasonReact komponenst, és felhasználja azt a React JavaScript alkalmazásban, és fordítva.

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

Ha olyan alkalmazást szeretne létrehozni, amely a React in Reason programot használja, és gyakorlati módon megtanulja az Reason alapjait, akkor olvassa el a másik cikket, ahol együtt készítünk Tic Tac Toe játékot.

Ha bármilyen kérdése, kritikája, megfigyelése vagy fejlesztési tippe van, nyugodtan írjon egy megjegyzést az alábbiakhoz, vagy keressen velem Twitter-en vagy blogomon keresztül.