Psst! Zde je důvod, proč je ReasonReact nejlepším způsobem, jak napsat React

Používáte React k vytváření uživatelských rozhraní? Já jsem taky. A nyní se dozvíte, proč byste měli psát své aplikace React pomocí ReasonML.

React je docela skvělý způsob, jak psát uživatelská rozhraní. Ale mohli bychom to ještě vylepšit? Lepší?

Abychom to mohli zlepšit, musíme nejprve identifikovat její problémy. Jaký je tedy hlavní problém React jako knihovny JavaScriptu?

React nebyl původně vyvinut pro JavaScript

Pokud se blíže podíváte na React, uvidíte, že některé z jeho hlavních principů jsou pro JavaScript cizí. Pojďme mluvit o neměnitelnosti, funkčních principech programování a zejména typu systému.

Immutabilita je jedním ze základních principů React. Nechcete mutovat své rekvizity ani svůj stav, protože pokud tak učiníte, můžete mít nepředvídatelné důsledky. V JavaScriptu nemáme neměnitelnost po vybalení z krabice. Udržujeme své datové struktury neměnné konvencí, nebo k jejich dosažení používáme knihovny, jako je immeableJS.

React je založen na principech funkčního programování, protože jeho aplikace jsou složením funkcí. Přestože JavaScript obsahuje některé z těchto funkcí, například prvotřídní funkce, nejedná se o funkční programovací jazyk. Pokud chceme napsat pěkný deklarativní kód, musíme použít externí knihovny jako Lodash / fp nebo Ramda.

Co je tedy s typovým systémem? V React jsme měli PropTypes. Použili jsme je k napodobování typů v JavaScriptu, protože se nejedná o staticky typizovaný jazyk. Abychom mohli využít pokročilého statického psaní, musíme znovu použít externí závislosti, jako je Flow a TypeScript.

Reagujte a porovnejte JavaScript

Jak vidíte, JavaScript není kompatibilní s hlavními principy React.

Existuje jiný programovací jazyk, který by byl kompatibilnější s React než JavaScript?

Naštěstí máme ReasonML.

V rozumu dostaneme neměnitelnost z krabice. Protože je založen na funkčním programovacím jazyce OCaml, máme takové funkce zabudované také do samotného jazyka. Důvod také poskytuje silný systém typu sám o sobě.

Reakce, JavaScript a srovnání důvodů

Důvod je slučitelný s hlavními principy React.

Důvod

Není to nový jazyk. Jedná se o alternativní syntaxi podobnou JavaScriptu a toolchain pro OCaml, funkční programovací jazyk, který existuje již více než 20 let. Důvod byl vytvořen vývojáři Facebooku, kteří již ve svých projektech používali OCaml (Flow, Infer).

Důvod je díky své syntaxi typu C přístupný pro OCaml pro lidi přicházející z běžných jazyků, jako je JavaScript nebo Java. Poskytuje vám lepší dokumentaci (ve srovnání s OCaml) a rostoucí komunitu kolem ní. Navíc to usnadňuje integraci s vaší existující kódovou základnou JavaScriptu.

OCaml slouží jako doprovodný jazyk pro důvod. Důvod má stejnou sémantiku jako OCaml - liší se pouze syntaxe. To znamená, že můžete OCaml psát pomocí syntaxe podobné JavaScriptu. Díky tomu můžete využít úžasných funkcí společnosti OCaml, jako je silný systém typu a přizpůsobení vzorů.

Pojďme se podívat na příklad Reasonovy syntaxe.

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

Ačkoli v tomto příkladu používáme párování vzorů, stále je to docela podobné JavaScriptu, že?

Jediným použitelným jazykem pro prohlížeče je však stále JavaScript, což znamená, že do něj musíme kompilovat.

BuckleScript

Jednou z výkonných funkcí Reason je kompilátor BuckleScript, který vezme váš kód Reason a zkompiluje jej do čitelného a výkonného JavaScriptu s velkou eliminací mrtvého kódu. Oceníte čitelnost, pokud pracujete v týmu, kde není každý obeznámen s Důvodem, protože bude stále schopen číst kompilovaný kód JavaScript.

Podobnost s JavaScriptem je tak blízká, že některý z Reasonových kódů nemusí kompilátor vůbec měnit. Můžete si tedy užívat výhod staticky psaného jazyka bez jakékoli změny kódu.

nechť add = (a, b) => a + b;
přidat (6, 9);

Toto je platný kód v důvodech i v JavaScriptu.

BuckleScript je dodáván se čtyřmi knihovnami: standardní knihovna s názvem Belt (standardní knihovna OCaml je nedostatečná) a vazby na JavaScript, Node.js a DOM API.

Protože BuckleScript je založen na kompilátoru OCaml, dostanete neuvěřitelně rychlou kompilaci, která je mnohem rychlejší než Babel a několikrát rychlejší než TypeScript.

Zkompilujme náš FizzBuzz algoritmus napsaný v Důvod pro JavaScript.

Kompilace kódu Reason do JavaScriptu pomocí BuckleScript

Jak vidíte, výsledný kód JavaScript je dobře čitelný. Vypadá to, že byl napsán vývojářem JavaScriptu.

Rozumí se nejen JavaScript, ale také nativní a bajtkód. Můžete tedy napsat jednu aplikaci pomocí syntaxe Reason a být schopen ji spustit v prohlížeči na telefonech MacOS, Android a iOS. Existuje hra Gravitron od Jareda Forsytha, která je napsána v Rozumu a lze ji spustit na všech platformách, které jsem právě zmínil.

JavaScript interop

BuckleScript nám také poskytuje interoperabilitu JavaScriptu. Můžete nejen vložit svůj funkční kód JavaScript do kódové základny Reason, ale váš kód Reason může s tímto kódem JavaScript také interagovat. To znamená, že kód Reason můžete snadno integrovat do své stávající kódové základny JavaScriptu. Kromě toho můžete ve svém kódu důvodu použít všechny balíčky JavaScriptu z ekosystému NPM. Můžete například kombinovat Flow, TypeScript a Reason společně do jednoho projektu.

Není to však tak jednoduché. Chcete-li používat knihovny jazyka JavaScript nebo kód v programu Reason, musíte jej nejprve přenést do Reason prostřednictvím vazeb Reason. Jinými slovy, pro to, abyste mohli využít nevyužitý kód JavaScriptu, potřebujete typy, abyste mohli využít výhod systému Reason's strong type.

Kdykoli potřebujete použít knihovnu JavaScriptu ve svém kódu důvodů, zkontrolujte, zda již byla knihovna přivedena do programu Důvod procházením databáze indexu balíčků příčiny (Redex). Je to web, který sdružuje různé knihovny a nástroje napsané v knihovnách Reason a JavaScript s vazbami Reason. Pokud jste tam knihovnu našli, stačí ji nainstalovat jako závislost a použít ji v aplikaci Důvod.

Pokud však svou knihovnu nenajdete, budete muset napsat vazby rozumu sami. Pokud teprve začínáte s Reasonem, mějte na paměti, že psaní vazeb není věcí, se kterou chcete začít, protože je to jedna z nejnáročnějších věcí v ekosystému Reason.

Naštěstí píšu příspěvek o psaní vazeb rozumu, takže zůstaňte naladěni!

Pokud potřebujete nějakou funkci z knihovny JavaScriptu, nemusíte psát vazby rozumu pro knihovnu jako celek. Můžete to udělat pouze pro funkce nebo komponenty, které potřebujete použít.

Odůvodnění

Tento článek pojednává o psaní React in Reason, což můžete udělat díky knihovně ReasonReact.

Možná si teď myslíš: „Stále nevím, proč bych měl použít Reagovat v rozumu.“

Již jsme zmínili hlavní důvod, proč tak učinit - důvod je kompatibilnější s React než JavaScript. Proč je kompatibilnější? Protože React byl vyvinut pro důvod nebo přesněji pro OCaml.

Cesta k odůvodnění

První prototyp Reactu byl vyvinut společností Facebook a byl napsán ve Standard Meta Language (StandardML), bratranci OCaml. Poté byl přesunut do OCamlu. React byl také přepsán do JavaScriptu.

Důvodem bylo to, že celý web používal JavaScript, a pravděpodobně nebylo chytré říci: „Nyní vytvoříme UI v OCamlu.“ A fungovalo to - React in JavaScript byl široce přijat.

Takže jsme si zvykli reagovat jako knihovna JavaScriptu. Reagujte společně s dalšími knihovnami a jazyky - Elm, Redux, Recompose, Ramda a PureScript - populární funkční programování v JavaScriptu. A díky vzestupu Flow a TypeScript se stalo populární také statické psaní. V důsledku toho se funkční paradigma programování se statickými typy stala hlavním proudem ve světě front-endu.

V roce 2016 společnost Bloomberg vyvinula a otevře zdrojový kód BuckleScript, kompilátor, který transformuje OCaml na JavaScript. To jim umožnilo psát bezpečný kód na front-end pomocí systému typu OCaml. Vzali optimalizovaný a neúprosně rychlý kompilátor OCaml a vyměnili svůj nativní kód generující back-end za kód generující JavaScript.

Popularita funkčního programování spolu s vydáním BuckleScript vytvořila ideální klima pro Facebook, aby se vrátil k původní myšlence React, která byla původně napsána v jazyce ML.

Odůvodnění

Vzali sémantiku OCaml a syntaxi jazyka JavaScript a vytvořili důvod. Také vytvořili obal Reason kolem React - knihovny ReasonReact - s dalšími funkcemi, jako je zapouzdření principů Reduxu do stavových komponent. Tímto způsobem vrátili React do původních kořenů.

Síla Reagovat v rozumu

Když React přišel do JavaScriptu, upravili jsme JavaScript podle potřeb Reactu zavedením různých knihoven a nástrojů. To také znamenalo více závislostí pro naše projekty. Nemluvě o tom, že tyto knihovny jsou stále ve vývoji a pravidelné změny jsou zavedeny. Musíte tedy tyto závislosti udržovat ve svých projektech opatrně.

To přidalo další vrstvu složitosti vývoje JavaScriptu.

Typická aplikace React bude mít alespoň tyto závislosti:

  • statické psaní - Flow / TypeScript
  • nezměnitelnost - nezměnitelnýJS
  • směrování - ReactRouter
  • formátování - hezčí
  • podšívka - ESLint
  • pomocná funkce - Ramda / Lodash

Pojďme nyní zaměnit JavaScript React za ReasonReact.

Potřebujeme všechny tyto závislosti?

  • statické psaní - vestavěné
  • neměnitelnost - vestavěný
  • směrování - vestavěný
  • formátování - vestavěné
  • linting - vestavěný
  • pomocné funkce - vestavěné

O těchto vestavěných funkcích se můžete dozvědět více v mém druhém příspěvku.

V aplikaci ReasonReact nepotřebujete tyto a mnoho dalších závislostí, protože mnoho klíčových funkcí, které usnadňují váš vývoj, je již zahrnuto v samotném jazyce. Údržba vašich balíčků bude tedy snazší a časem nebudete mít větší složitost.

Je to díky OCaml, který je starší 20 let. Je to vyzrálý jazyk se všemi jeho základními principy a stabilními.

Zabalit

Tvůrci Reason měli zpočátku dvě možnosti. Chcete-li vzít JavaScript a nějak to zlepšit. Tím by se také museli vypořádat s historickou zátěží.

Šli však jinou cestou. Vzali OCaml jako vyzrálý jazyk s velkým výkonem a upravili ho tak, aby připomínal JavaScript.

React je také založen na principech OCaml. To je důvod, proč získáte mnohem lepší vývojářskou zkušenost, když ji používáte s Reason. React in Reason představuje bezpečnější způsob vytváření komponent React, protože systém se silným typem má záda a vy nemusíte řešit většinu problémů se skriptem JavaScript.

Co bude dál?

Pokud přicházíte ze světa JavaScriptu, bude pro vás jednodušší začít s Důvodem kvůli jeho syntaktické podobnosti s JavaScriptem. Pokud jste programovali v React, bude to pro vás ještě snazší, protože můžete využít všechny své znalosti React, protože ReasonReact má stejný mentální model jako React a velmi podobný pracovní postup. To znamená, že nemusíte začínat od nuly. Dozvíte se rozum, jak se vyvíjíte.

Nejlepší způsob, jak začít používat Důvod ve svých projektech, je to postupně. Již jsem zmínil, že můžete vzít kód důvodu a použít ho v JavaScriptu a naopak. S ReasonReact můžete udělat totéž. Berete komponentu ReasonReact a použijete ji v aplikaci React JavaScript, a naopak.

Tento přírůstkový přístup si vybrali vývojáři Facebooku, kteří při vývoji aplikace Facebook Messenger používají Důvod.

Pokud chcete vytvořit aplikaci pomocí React in Reason a naučit se základy Reason praktickým způsobem, podívejte se na můj další článek, ve kterém společně sestavíme hru Tic Tac Toe.

Máte-li jakékoli dotazy, kritiku, postřehy nebo tipy na zlepšení, můžete napsat níže uvedený komentář nebo se na mě dostat přes Twitter nebo můj blog.