Psst! Dit is waarom ReasonReact de beste manier is om React te schrijven

Gebruik je React om gebruikersinterfaces te bouwen? Nou, ik ook. En nu leert u waarom u uw React-toepassingen met ReasonML zou moeten schrijven.

Reageren is een vrij coole manier om gebruikersinterfaces te schrijven. Maar kunnen we het nog koeler maken? Beter?

Om het beter te maken, moeten we eerst de problemen identificeren. Wat is dus het grootste probleem van React als JavaScript-bibliotheek?

React was aanvankelijk niet ontwikkeld voor JavaScript

Als je React van naderbij bekijkt, zul je zien dat enkele van de belangrijkste principes vreemd zijn aan JavaScript. Laten we het hebben over onveranderlijkheid, functionele programmeerprincipes en het type systeem in het bijzonder.

Veranderlijkheid is een van de kernprincipes van React. Je wilt je rekwisieten of je staat niet muteren, want als je dat doet, kun je onvoorspelbare gevolgen ondervinden. In JavaScript hebben we geen onveranderlijkheid uit de doos. We houden onze datastructuren onveranderlijk door een conventie, of we gebruiken bibliotheken zoals immutableJS om dit te bereiken.

React is gebaseerd op de principes van functioneel programmeren, omdat de toepassingen samenstellingen van functies zijn. Hoewel JavaScript enkele van deze functies heeft, zoals eersteklas functies, is het geen functionele programmeertaal. Als we wat leuke declaratieve code willen schrijven, moeten we externe bibliotheken zoals Lodash / fp of Ramda gebruiken.

Wat is er aan de hand met het type systeem? In React hadden we PropTypes. We hebben ze gebruikt om de typen in JavaScript na te bootsen, omdat het zelf geen statisch getypte taal is. Om te profiteren van geavanceerd statisch typen, moeten we opnieuw externe afhankelijkheden gebruiken, zoals Flow en TypeScript.

Reageren en JavaScript-vergelijking

Zoals u ziet, is JavaScript niet compatibel met de kernprincipes van React.

Is er een andere programmeertaal die meer compatibel zou zijn met React dan JavaScript?

Gelukkig hebben we ReasonML.

In Rede krijgen we onveranderlijkheid uit de doos. Omdat het gebaseerd is op OCaml, de functionele programmeertaal, hebben we dergelijke functies ook in de taal zelf ingebouwd. Reason biedt ons ook een sterk type systeem op zichzelf.

Reactie, JavaScript en redenvergelijking

Reden is compatibel met de kernprincipes van React.

Reden

Het is geen nieuwe taal. Het is een alternatieve JavaScript-achtige syntaxis en toolchain voor OCaml, een functionele programmeertaal die al meer dan 20 jaar bestaat. Reden is gecreëerd door Facebook-ontwikkelaars die OCaml al in hun projecten gebruikten (Flow, Infer).

Reden, met zijn C-achtige syntax, maakt OCaml toegankelijk voor mensen uit reguliere talen zoals JavaScript of Java. Het biedt u betere documentatie (vergeleken met OCaml) en een groeiende gemeenschap eromheen. Bovendien maakt het het eenvoudiger om te integreren met uw bestaande JavaScript-codebase.

OCaml dient als achtergrondtaal voor Reason. Reden heeft dezelfde semantiek als OCaml - alleen de syntaxis is anders. Dit betekent dat u OCaml kunt schrijven met behulp van de JavaScript-achtige syntaxis van Reason. Als gevolg hiervan kunt u profiteren van de geweldige functies van OCaml, zoals het sterke type systeem en het matchen van patronen.

Laten we een voorbeeld van de syntaxis van Reason bekijken.

laat fizzbuzz = (i) =>
  schakelaar (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
voor (i in 1 tot 100) {
  Js.log (fizzbuzz (i))
};

Hoewel we in dit voorbeeld patroonvergelijking gebruiken, lijkt het nog steeds op JavaScript, toch?

De enige bruikbare taal voor browsers is echter nog steeds JavaScript, wat betekent dat we het moeten compileren.

BuckleScript

Een van de krachtige functies van Reason is de BuckleScript-compiler, die uw Reason-code neemt en deze compileert naar leesbaar en performant JavaScript met geweldige eliminatie van dode code. U zult de leesbaarheid op prijs stellen als u in een team werkt waar niet iedereen bekend is met Reason, omdat ze nog steeds de gecompileerde JavaScript-code kunnen lezen.

De gelijkenis met JavaScript is zo dichtbij dat sommige code van Reason helemaal niet hoeft te worden gewijzigd door de compiler. U kunt dus genieten van de voordelen van de statisch getypte taal zonder de code te veranderen.

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

Dit is een geldige code in zowel Reason als JavaScript.

BuckleScript wordt geleverd met vier bibliotheken: de standaardbibliotheek Belt (OCaml-standaardbibliotheek is onvoldoende) en bindingen met JavaScript, Node.js en, DOM API's.

Aangezien BuckleScript is gebaseerd op OCaml-compiler, krijgt u een razendsnelle compilatie die veel sneller is dan Babel en meerdere keren sneller dan TypeScript.

Laten we ons FizzBuzz-algoritme, geschreven in Reason, compileren naar JavaScript.

Reden code compilatie naar JavaScript via BuckleScript

Zoals u ziet, is de resulterende JavaScript-code behoorlijk leesbaar. Het lijkt erop dat het is geschreven door een JavaScript-ontwikkelaar.

Reason compileert niet alleen met JavaScript, maar ook met native en bytecode. U kunt dus een enkele applicatie schrijven met behulp van Reason-syntaxis en deze in de browser op MacOS-, Android- en iOS-telefoons kunnen uitvoeren. Er is een spel genaamd Gravitron van Jared Forsyth dat is geschreven in Reason en het kan worden uitgevoerd op alle platforms die ik zojuist heb genoemd.

JavaScript interop

BuckleScript biedt ons ook JavaScript-interoperabiliteit. U kunt niet alleen uw werkende JavaScript-code in uw Reason-codebase plakken, maar uw Reason-code kan ook met die JavaScript-code communiceren. Dit betekent dat u Reason-code eenvoudig kunt integreren in uw bestaande JavaScript-codebase. Bovendien kunt u alle JavaScript-pakketten van het NPM-ecosysteem in uw Reason-code gebruiken. U kunt bijvoorbeeld Flow, TypeScript en Reason samenvoegen in één project.

Het is echter niet zo eenvoudig. Als u JavaScript-bibliotheken of code in Reason wilt gebruiken, moet u deze eerst naar Reason porteren via Reason-bindingen. Met andere woorden, u hebt typen nodig voor uw niet-getypeerde JavaScript-code om te kunnen profiteren van het sterke type-systeem van Reason.

Wanneer u een JavaScript-bibliotheek in uw Reason-code moet gebruiken, controleer dan of de bibliotheek al naar Reason is geporteerd door de Reason Package Index-database (Redex) te doorbladeren. Het is een website die verschillende bibliotheken en tools verzamelt die zijn geschreven in Reason- en JavaScript-bibliotheken met Reason-bindingen. Als je je bibliotheek daar hebt gevonden, kun je deze gewoon installeren als een afhankelijkheid en gebruiken in je Reason-toepassing.

Als u uw bibliotheek echter niet hebt gevonden, moet u Reason-bindingen zelf schrijven. Als je net begint met Reason, houd er dan rekening mee dat het schrijven van bindingen niet iets is waarmee je wilt beginnen, omdat het een van de meer uitdagende dingen is in het ecosysteem van Reason.

Gelukkig schrijf ik gewoon een bericht over het schrijven van Reason-bindingen, dus houd het in de gaten!

Als u functionaliteit uit een JavaScript-bibliotheek nodig hebt, hoeft u de Reason-bindingen niet voor een hele bibliotheek te schrijven. U kunt dat alleen doen voor de functies of componenten die u moet gebruiken.

ReasonReact

Dit artikel gaat over het schrijven van React in Reason, wat je kunt doen dankzij de ReasonReact-bibliotheek.

Misschien denk je nu: "Ik weet nog steeds niet waarom ik React in Reason zou moeten gebruiken."

We hebben de belangrijkste reden hiervoor al genoemd: reden is beter compatibel met React dan JavaScript. Waarom is het beter compatibel? Omdat React werd ontwikkeld om reden, of beter gezegd, voor OCaml.

Road to ReasonReact

Het eerste prototype van React werd ontwikkeld door Facebook en werd geschreven in Standard Meta Language (StandardML), een neef van OCaml. Vervolgens werd het verplaatst naar OCaml. React werd ook getranscribeerd naar JavaScript.

Dit was omdat het hele web JavaScript gebruikte en het was waarschijnlijk niet slim om te zeggen: "Nu gaan we UI in OCaml bouwen." En het werkte - Reageren in JavaScript is alom aangenomen.

Dus we waren gewend om te reageren als een JavaScript-bibliotheek. Reageer samen met andere bibliotheken en talen - Elm, Redux, Recompose, Ramda en PureScript - maakte functionele programmering in JavaScript populair. En met de opkomst van Flow en TypeScript werd statisch typen ook populair. Als gevolg hiervan werd het functionele programmeerparadigma met statische typen mainstream in de wereld van de front-end.

In 2016 ontwikkelde Bloomberg BuckleScript met een open source, de compiler die OCaml omzet in JavaScript. Dit stelde hen in staat om veilige code op de front-end te schrijven met behulp van het sterke type systeem van OCaml. Ze namen de geoptimaliseerde en razendsnelle OCaml-compiler en verwisselden de back-end genererende native code voor een JavaScript-genererende code.

De populariteit van functioneel programmeren samen met de release van BuckleScript genereerde het ideale klimaat voor Facebook om terug te keren naar het oorspronkelijke idee van React, dat aanvankelijk in een ML-taal was geschreven.

ReasonReact

Ze namen OCaml-semantiek en JavaScript-syntaxis en creëerden Reason. Ze creëerden ook de Reason-wrapper rond React - ReasonReact-bibliotheek - met extra functionaliteiten zoals de inkapseling van de Redux-principes in stateful componenten. Door dit te doen, keerden ze React terug naar zijn oorspronkelijke wortels.

De kracht van React in Reason

Toen React in JavaScript kwam, hebben we JavaScript aangepast aan de behoeften van React door verschillende bibliotheken en tools te introduceren. Dit betekende ook meer afhankelijkheden voor onze projecten. Om nog maar te zwijgen van het feit dat deze bibliotheken nog in ontwikkeling zijn en dat er regelmatig veranderingen worden doorgevoerd. U moet deze afhankelijkheden dus zorgvuldig handhaven in uw projecten.

Dit voegde een nieuwe laag complexiteit toe aan de JavaScript-ontwikkeling.

Uw typische React-applicatie zal ten minste deze afhankelijkheden hebben:

  • statisch typen - Flow / TypeScript
  • onveranderlijkheid - onveranderlijk JS
  • routing - ReactRouter
  • opmaak - Prettier
  • linting - ESLint
  • helpfunctie - Ramda / Lodash

Laten we nu JavaScript React omruilen voor ReasonReact.

Hebben we nog steeds al deze afhankelijkheden nodig?

  • statisch typen - ingebouwd
  • onveranderlijkheid - ingebouwd
  • routing - ingebouwd
  • opmaak - ingebouwd
  • linting - ingebouwd
  • helpfuncties - ingebouwd

Je kunt meer leren over deze ingebouwde functies in mijn andere bericht.

In de applicatie ReasonReact heb je deze en vele andere afhankelijkheden niet nodig, omdat veel cruciale functies die je ontwikkeling gemakkelijker maken al in de taal zelf zijn opgenomen. Het onderhoud van uw pakketten wordt dus eenvoudiger en u zult in de loop van de tijd niet meer complex worden.

Dit is te danken aan de OCaml, die meer dan 20 jaar oud is. Het is een volwassen taal met al zijn kernprincipes op zijn plaats en stabiel.

Inpakken

In het begin hadden de makers van Reason twee opties. Om JavaScript te gebruiken en het op de een of andere manier beter te maken. Door dat te doen, zouden ze ook moeten omgaan met de historische lasten.

Ze gingen echter een ander pad. Ze namen OCaml als een volwassen taal met geweldige prestaties en hebben het aangepast zodat het lijkt op JavaScript.

React is ook gebaseerd op de principes van OCaml. Dat is waarom je een veel betere ontwikkelaarservaring krijgt als je het met Reason gebruikt. React in Reason is een veiligere manier om React-componenten te bouwen, omdat het sterke type-systeem je de rug toekeert en je de meeste JavaScript-problemen (oud) niet hoeft op te lossen.

Wat is het volgende?

Als je uit de wereld van JavaScript komt, kun je gemakkelijker aan de slag met Reason vanwege de syntaxisovereenkomst met JavaScript. Als je in React hebt geprogrammeerd, is het nog eenvoudiger voor je, omdat je al je React-kennis kunt gebruiken, omdat ReasonReact hetzelfde mentale model heeft als React en een zeer vergelijkbare workflow heeft. Dit betekent dat u niet helemaal opnieuw hoeft te beginnen. Je leert reden terwijl je je ontwikkelt.

De beste manier om Reason in uw projecten te gebruiken, is door het stapsgewijs te doen. Ik heb al gezegd dat je Reason-code kunt gebruiken en deze in JavaScript kunt gebruiken, en andersom. U kunt hetzelfde doen met ReasonReact. U neemt uw ReasonReact-component en gebruikt deze in uw React JavaScript-toepassing en vice versa.

Deze incrementele aanpak is gekozen door Facebook-ontwikkelaars die Reason op grote schaal gebruiken bij de ontwikkeling van de Facebook Messenger-app.

Als je een toepassing wilt bouwen met React in Reason en op een praktische manier de basis van Reason wilt leren, bekijk dan mijn andere artikel waar we samen een Tic Tac Toe-game gaan bouwen.

Als je vragen, kritiek, opmerkingen of tips voor verbetering hebt, kun je hieronder een reactie schrijven of me bereiken via Twitter of mijn blog.