Psst! Preto je ReasonReact najlepším spôsobom, ako napísať React

Používate React na vytváranie používateľských rozhraní? Aj ja som. A teraz sa dozviete, prečo by ste mali písať svoje aplikácie React pomocou ReasonML.

React je celkom skvelý spôsob, ako písať používateľské rozhrania. Ale mohli by sme to urobiť ešte chladnejším? Lepšie?

Aby sme to zlepšili, musíme najprv identifikovať jeho problémy. Aký je hlavný problém programu React ako knižnice jazyka JavaScript?

React nebol pôvodne vyvinutý pre JavaScript

Ak sa bližšie pozriete na React, uvidíte, že niektoré z jeho hlavných princípov sú pre JavaScript cudzie. Poďme hovoriť o nemennosti, princípoch funkčného programovania a zvlášť o typovom systéme.

Immutability je jedným zo základných princípov React. Nechcete mutovať svoje rekvizity alebo svoj stav, pretože ak tak urobíte, môžete mať nepredvídateľné následky. V skripte JavaScript nemôžeme zameniť. Udržiavame svoje dátové štruktúry nemenné na základe konvencie, alebo na ich dosiahnutie používame knižnice, ako je immeableJS.

React je založený na princípoch funkčného programovania, pretože jeho aplikácie sú zložením funkcií. Aj keď JavaScript obsahuje niektoré z týchto funkcií, napríklad prvotriedne funkcie, nejde o funkčný programovací jazyk. Ak chceme napísať pekný deklaratívny kód, musíme použiť externé knižnice ako Lodash / fp alebo Ramda.

Čo je teda s typovým systémom? V Reacte sme mali PropTypes. Použili sme ich na napodobnenie typov v JavaScripte, pretože to nie je samotný staticky napísaný jazyk. Aby sme mohli využívať pokročilé statické písanie, musíme znova použiť vonkajšie závislosti, ako napríklad Flow a TypeScript.

Reagujte a porovnajte JavaScript

Ako vidíte, JavaScript nie je kompatibilný s hlavnými princípmi React.

Existuje iný programovací jazyk, ktorý by bol kompatibilnejší s programom React ako JavaScript?

Našťastie máme ReasonML.

V odôvodnení dostaneme nemennosť z krabice. Keďže je založený na funkčnom programovacom jazyku OCaml, máme takéto vlastnosti zabudované aj do samotného jazyka. Dôvod nám tiež poskytuje silný systém typu.

Reagujte, porovnajte JavaScript a Dôvod

Dôvod je zlučiteľný s hlavnými zásadami React.

Dôvod

Nie je to nový jazyk. Je to alternatívna syntax a súbor nástrojov podobný jazyku JavaScript pre OCaml, funkčný programovací jazyk, ktorý existuje už viac ako 20 rokov. Dôvod bol vytvorený vývojármi Facebooku, ktorí už OCaml používali vo svojich projektoch (Flow, Infer).

Dôvod, vďaka svojej syntaxi podobnej C, robí OCaml prístupným pre ľudí prichádzajúcich z bežných jazykov, ako je JavaScript alebo Java. Poskytuje vám lepšiu dokumentáciu (v porovnaní s OCaml) a rastúcu komunitu okolo nej. Navyše to uľahčuje integráciu s vašou existujúcou kódovou základňou kódu JavaScript.

OCaml slúži ako podporný jazyk pre Dôvod. Dôvod má rovnakú sémantiku ako OCaml - odlišná je iba syntax. To znamená, že OCaml môžete písať pomocou syntaxe podobnej JavaScriptu, ako je Reason. Výsledkom je, že môžete využívať úžasné funkcie OCamlu, ako je napríklad silný systém typu a prispôsobenie vzorov.

Pozrime sa na príklad syntaxe Reason.

nech fizzbuzz = (i) =>
  prepínač (i mod 3, i mod 5) {
  | (0, 0) => „FizzBuzz“
  | (0, _) => „Fizz“
  | (_, 0) => „Buzz“
  | _ => string_of_int (i)
  };
pre (i v 1 až 100) {
  Js.log (fizzbuzz (i))
};

Aj keď v tomto príklade používame párovanie vzorov, stále je dosť podobný JavaScriptu, však?

Jediným použiteľným jazykom pre prehliadače je však stále JavaScript, čo znamená, že do neho musíme kompilovať.

BuckleScript

Jednou z výkonných funkcií Reason je kompilátor BuckleScript, ktorý vezme váš kód príčiny a zostaví ho do čitateľného a výkonného JavaScriptu s veľkým odstránením mŕtveho kódu. Čitateľnosť oceníte, ak pracujete v tíme, v ktorom nie každý pozná príčinu, pretože stále dokáže prečítať kompilovaný kód JavaScript.

Podobnosť s JavaScriptom je natoľko blízka, že kompilátor nemusí zmeniť niektoré z Reasonových kódov. Takže si môžete vychutnať výhody staticky napísaného jazyka bez toho, aby sa kód vôbec zmenil.

nechať pridať = (a, b) => a + b;
pridať (6, 9);

Toto je platný kód v odôvodnení aj v jazyku JavaScript.

BuckleScript sa dodáva so štyrmi knižnicami: štandardná knižnica s názvom Belt (štandardná knižnica OCaml je nedostatočná) a väzby na rozhrania JavaScript, Node.js a DOM API.

Pretože BuckleScript je založený na kompilátore OCaml, získate neuveriteľne rýchlu kompiláciu, ktorá je omnoho rýchlejšia ako Babel a niekoľkokrát rýchlejšia ako TypeScript.

Zostavme náš algoritmus FizzBuzz napísaný v odôvodnení pre JavaScript.

Kompilácia kódu Reason do JavaScriptu cez BuckleScript

Ako vidíte, výsledný kód JavaScript je celkom čitateľný. Zdá sa, že bol napísaný vývojárom jazyka JavaScript.

Dôvod sa nielen kompiluje do JavaScriptu, ale aj do rodného kódu a bytového kódu. Takže môžete napísať jednu aplikáciu pomocou syntaxe Dôvod a byť schopný ju spustiť v prehliadači na telefónoch MacOS, Android a iOS. Existuje hra Gravitron od Jareda Forsytha, ktorá je napísaná v Reason a môže byť spustená na všetkých platformách, ktoré som práve spomenula.

Interop JavaScript

BuckleScript nám tiež poskytuje interoperabilitu JavaScriptu. Nielenže môžete vložiť svoj pracovný kód JavaScript do kódovej základne Reason, ale váš kód Reason môže s týmto kódom JavaScript tiež interagovať. To znamená, že kód Reason môžete ľahko integrovať do svojej existujúcej kódovej základne JavaScriptu. Okrem toho môžete vo svojom kóde príčiny použiť všetky balíky JavaScript z ekosystému NPM. Napríklad môžete skombinovať Flow, TypeScript a Reason spolu do jedného projektu.

Nie je to však také jednoduché. Ak chcete používať knižnice jazyka JavaScript alebo kód v Reason, musíte ich najprv portovať do Reason pomocou väzieb Reason. Inými slovami, na to, aby ste mohli využiť výhodu silného systému typu Dôvod, potrebujete typy, ktoré neobsahujú váš typ JavaScript.

Kedykoľvek potrebujete použiť knižnicu JavaScriptu vo svojom kóde príčiny, skontrolujte, či už bola knižnica už prenesená na príčinu prehľadaním databázy indexu príčin (Redex). Je to web, ktorý spája rôzne knižnice a nástroje napísané v knižniciach Reason a JavaScript s väzbami na Reason. Ak ste tam našli svoju knižnicu, môžete ju jednoducho nainštalovať ako závislosť a použiť ju v aplikácii Dôvod.

Ak ste však svoju knižnicu nenájdu, budete musieť napísať väzby odôvodnenia sami. Ak práve začínate s Reasonom, nezabudnite, že písanie väzieb nie je vecou, ​​s ktorou chcete začať, pretože je to jedna z najnáročnejších vecí v ekosystéme Reason.

Našťastie píšem len príspevok o písaní väzieb rozumu, takže zostaňte naladení!

Ak potrebujete z knižnice JavaScript nejakú funkčnosť, nemusíte písať príčiny odôvodnenia pre knižnicu ako celok. Môžete to urobiť iba pre funkcie alebo komponenty, ktoré potrebujete použiť.

ReasonReact

Tento článok je o písaní React in Reason, čo môžete urobiť vďaka knižnici ReasonReact.

Možno si teraz myslíte: „Stále neviem, prečo by som mal používať Reagovať v odôvodnení.“

Už sme spomenuli hlavný dôvod, prečo tak urobiť - Dôvod je kompatibilnejší s React ako JavaScript. Prečo je kompatibilnejšia? Pretože React bol vyvinutý pre Dôvod alebo presnejšie pre OCaml.

Cesta k odôvodneniu

Prvý prototyp Reactu bol vyvinutý spoločnosťou Facebook a bol napísaný v Standard Meta Language (StandardML), bratranci OCaml. Potom bol presunutý do OCamlu. React bol tiež prepisovaný do JavaScriptu.

Dôvodom bolo, že celý web používal JavaScript, a pravdepodobne nebolo inteligentné povedať: „Teraz vytvoríme UI v OCaml.“ A fungovalo to - React in JavaScript bol široko prijatý.

Takže sme si zvykli reagovať ako knižnica JavaScript. Reagujte spolu s ostatnými knižnicami a jazykmi - Elm, Redux, Recompose, Ramda a PureScript - populárne funkčné programovanie. A so vzostupom Flow a TypeScript sa stalo populárnym aj statické písanie. V dôsledku toho sa funkčné programovacie paradigma so statickými typmi stalo hlavným prúdom vo svete front-end.

V roku 2016 spoločnosť Bloomberg vyvinula a otvoril zdrojový kód BuckleScript, kompilátor, ktorý transformuje OCaml na JavaScript. To im umožnilo písať bezpečný kód na klientske rozhranie pomocou silného systému OCaml. Vzali optimalizovaný a neúprosne rýchly kompilátor OCaml a vymenili svoj natívny kód generujúci back-end za generátor JavaScript.

Popularita funkčného programovania spolu s vydaním BuckleScript vytvorila pre Facebook ideálnu klímu na návrat k pôvodnej myšlienke React, ktorá bola pôvodne napísaná v jazyku ML.

ReasonReact

Zobrali sémantiku OCaml a syntax jazyka JavaScript a vytvorili dôvod. Vytvorili tiež obal odôvodnenia okolo knižnice React - ReasonReact - s ďalšími funkciami, ako je napríklad zapuzdrenie princípov Redux do stavových komponentov. Týmto spôsobom vrátili React do pôvodných koreňov.

Sila Reagovať v odôvodnení

Keď React prišiel do JavaScriptu, prispôsobili sme JavaScript podľa potrieb Reactu zavedením rôznych knižníc a nástrojov. To tiež znamenalo viac závislostí pre naše projekty. Nehovoriac o tom, že tieto knižnice sú stále vo vývoji a pravidelné zmeny sa zavádzajú. Preto musíte vo svojich projektoch tieto závislosti udržiavať opatrne.

To pridalo ďalšiu vrstvu zložitosti do vývoja JavaScriptu.

Vaša typická aplikácia React bude mať aspoň tieto závislosti:

  • statické písanie - Flow / TypeScript
  • nemennosť - nemennýJS
  • smerovanie - ReactRouter
  • formátovanie - krajšie
  • podšívka - ESLint
  • pomocná funkcia - Ramda / Lodash

Poďme si teraz vymeniť reakciu jazyka JavaScript za funkciu ReasonReact.

Potrebujeme stále všetky tieto závislosti?

  • statické písanie - vstavané
  • nemennosť - vstavaný
  • smerovanie - vstavaný
  • formátovanie - vstavaný
  • vložka - vstavaná
  • pomocné funkcie - vstavaný

Viac informácií o týchto vstavaných funkciách sa môžete dozvedieť v mojom ďalšom príspevku.

V aplikácii ReasonReact nepotrebujete tieto a mnoho ďalších závislostí, pretože mnohé kľúčové funkcie, ktoré uľahčujú váš vývoj, sú už zahrnuté v samotnom jazyku. Údržba vašich balíkov sa tak zjednoduší a nebudete mať v priebehu času narastajúcu zložitosť.

Je to vďaka OCaml, ktorý má viac ako 20 rokov. Je to vyzretý jazyk so všetkými jeho základnými princípmi a stabilnými.

Zabaliť

Na začiatku tvorcovia Reason mali dve možnosti. Zobrať JavaScript a nejakým spôsobom ho vylepšiť. Tým by sa tiež museli vysporiadať s historickou záťažou.

Išli však inou cestou. Vzali OCaml ako vyzretý jazyk s veľkým výkonom a upravili ho tak, aby sa podobal JavaScriptu.

React je tiež založený na zásadách OCaml. Preto pri používaní s programom Dôvod získate oveľa lepšiu skúsenosť vývojárov. Reagovať v odôvodnení predstavuje bezpečnejší spôsob zostavovania komponentov React, pretože systém so silným typom sa dostal späť a nemusíte sa zaoberať väčšinou problémov s kódom JavaScript (staršie verzie).

Čo bude ďalej?

Ak prichádzate zo sveta JavaScriptu, bude pre vás jednoduchšie začať s Dôvodom kvôli jeho syntaktickej podobnosti s JavaScriptom. Ak ste programovali v Reacte, bude to pre vás ešte jednoduchšie, pretože všetky svoje znalosti React môžete použiť, pretože ReasonReact má rovnaký mentálny model ako React a veľmi podobný pracovný tok. To znamená, že nemusíte začať od nuly. Dozviete sa z toho, ako sa vyvíjate.

Najlepším spôsobom, ako začať používať Dôvod vo svojich projektoch, je postupný postup. Už som spomenul, že môžete použiť kód príčiny a použiť ho v JavaScripte a naopak. To isté môžete urobiť aj s ReasonReact. Beriete komponent ReasonReact a použijete ho v aplikácii React JavaScript, a naopak.

Tento prírastkový prístup si vybrali vývojári Facebooku, ktorí pri vývoji aplikácie Facebook Messenger používajú Dôvod.

Ak chcete zostaviť aplikáciu pomocou React in Reason a naučiť sa základy Reason praktickým spôsobom, prečítajte si môj ďalší článok, v ktorom vytvoríme hru Tic Tac Toe spolu.

Ak máte akékoľvek otázky, kritiku, pripomienky alebo tipy na zlepšenie, napíšte nižšie komentár alebo sa na mňa obráťte prostredníctvom Twitteru alebo môjho blogu.