Psst! Lūk, kāpēc ReasonReact ir labākais veids, kā rakstīt React

Vai jūs izmantojat React, lai izveidotu lietotāja saskarnes? Nu, es arī esmu. Un tagad jūs uzzināsit, kāpēc jums vajadzētu rakstīt savas React lietojumprogrammas, izmantojot ReasonML.

React ir diezgan foršs veids, kā rakstīt lietotāja saskarnes. Bet, vai mēs to varētu padarīt vēl vēsāku? Labāk?

Lai to uzlabotu, mums vispirms jāidentificē tās problēmas. Tātad, kāda ir galvenā React kā JavaScript bibliotēkas problēma?

React sākotnēji nebija izstrādāts JavaScript

Ja rūpīgāk izpētīsit React, redzēsit, ka daži no tās galvenajiem principiem ir sveši JavaScript. Parunāsim par nemainību, funkcionālās programmēšanas principiem un jo īpaši tipa sistēmu.

Neizmaināmība ir viens no React pamatprincipiem. Jūs nevēlaties mutēt savu butaforiju vai stāvokli, jo, ja jūs to darāt, jums var rasties neparedzamas sekas. JavaScript valodā mums nav negrozāmības. Mēs saglabājam savas datu struktūras nemainīgas ar konvenciju, vai arī mēs to izmantojam tādas bibliotēkas kā nemavableJS.

React pamatā ir funkcionālās programmēšanas principi, jo tā lietojumi ir funkciju kompozīcijas. Kaut arī JavaScript ir dažas no šīm funkcijām, piemēram, pirmās klases funkcijas, tā nav funkcionālā programmēšanas valoda. Kad mēs vēlamies uzrakstīt jauku deklaratīvu kodu, mums jāizmanto tādas ārējās bibliotēkas kā Lodash / fp vai Ramda.

Tātad, kas notiek ar tipa sistēmu? Reaktīvā mums bija PropTypes. Mēs tos esam izmantojuši, lai atdarinātu tipus JavaScript, jo tā pati nav statiski drukāta valoda. Lai izmantotu uzlabotās statiskās mašīnrakstīšanas priekšrocības, mums atkal ir jāizmanto ārējās atkarības, piemēram, Flow un TypeScript.

Reaģēt un JavaScript salīdzinājums

Kā redzat, JavaScript nav saderīgs ar React galvenajiem principiem.

Vai ir kāda cita programmēšanas valoda, kas būtu saderīgāka ar React nekā JavaScript?

Par laimi, mums ir ReasonML.

Iemesls ir tas, ka mēs negrozāmību iegūstam. Tā kā tās pamatā ir OCaml, funkcionālā programmēšanas valoda, šādas funkcijas ir iebūvētas arī pašā valodā. Iemesls mums arī nodrošina spēcīgu tipa sistēmu.

React, JavaScript un Reason salīdzinājums

Iemesls ir saderīgs ar React galvenajiem principiem.

Iemesls

Tā nav jauna valoda. Tā ir alternatīva JavaScript līdzīga sintakse un rīku ķēde OCaml - funkcionālai programmēšanas valodai, kas pastāv jau vairāk nekā 20 gadus. Iemeslu radīja Facebook izstrādātāji, kuri jau izmantoja OCaml savos projektos (Flow, Infer).

Iemesls ar tā C veida sintakse padara OCaml pieejamu cilvēkiem, kuri nāk no tādām vispārzināmām valodām kā JavaScript vai Java. Tas nodrošina labāku dokumentāciju (salīdzinājumā ar OCaml) un ap to pieaugošo kopienu. Turklāt tas ļauj vieglāk integrēties ar jūsu esošo JavaScript kodu bāzi.

OCaml kalpo kā pamata pamatvaloda. Iemeslam ir tāda pati semantika kā OCaml - tikai sintakse ir atšķirīga. Tas nozīmē, ka jūs varat rakstīt OCaml, izmantojot Reason JavaScript līdzīgu sintakse. Tā rezultātā jūs varat izmantot OCaml satriecošās iespējas, piemēram, spēcīgo tipu sistēmu un modeļa atbilstību.

Apskatīsim Reason sintakses piemēru.

ļaujiet fizzbuzz = (i) =>
  slēdzis (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
par (i no 1 līdz 100) {
  Js.log (fizzbuzz (i))
};

Lai gan šajā piemērā mēs izmantojam paraugu saskaņošanu, tas joprojām ir diezgan līdzīgs JavaScript, vai ne?

Tomēr vienīgā pārlūkprogrammām izmantojamā valoda joprojām ir JavaScript, kas nozīmē, ka mums tā ir jāapkopo.

Sprādze

Viena no Reason spēcīgajām funkcijām ir BuckleScript kompilators, kurš ņem jūsu Reason kodu un apkopo to lasāmam un izpildošam JavaScript, ar lielisku mirušā koda novēršanu. Jūs novērtēsit lasāmību, ja strādājat komandā, kurā ne visi ir pazīstami ar iemeslu, jo viņi joprojām varēs lasīt apkopoto JavaScript kodu.

Līdzība ar JavaScript ir tik tuvu, ka kompilatoram vispār nav jāmaina daži no Reason kodiem. Tātad jūs varat izbaudīt statiskās valodas priekšrocības, nemainot kodu.

ļaujiet pievienot = (a, b) => a + b;
pievienot (6, 9);

Šis ir derīgs kods gan pamatos, gan JavaScript.

Sprādze tiek piegādāta ar četrām bibliotēkām: standarta bibliotēka ar nosaukumu Belt (OCaml standarta bibliotēka ir nepietiekama) un saistījumi ar JavaScript, Node.js un, DOM API.

Tā kā BuckleScript pamatā ir OCaml kompilators, jūs iegūsit pārsteidzoši ātru kompilāciju, kas ir daudz ātrāka nekā Bābele un vairākas reizes ātrāka nekā TypeScript.

Apkoposim mūsu FizzBuzz algoritmu, kas rakstīts pamatos uz JavaScript.

Iemeslu koda kompilācija uz JavaScript caur BuckleScript

Kā redzat, iegūtais JavaScript kods ir diezgan lasāms. Liekas, ka to ir uzrakstījis JavaScript izstrādātājs.

Iemesls ne tikai apkopo JavaScript, bet arī vietējos un baitkodus. Tātad, izmantojot Reason sintakse, varat uzrakstīt vienu lietojumprogrammu un varēsit to palaist pārlūkprogrammā MacOS, Android un iOS tālruņos. Džareds Forsītihs ir spēle ar nosaukumu Gravitron, kas ir rakstīta saprātā, un to var palaist uz visām platformām, kuras es tikko pieminēju.

JavaScript savietojamība

Arī BuckleScript nodrošina JavaScript savietojamību. Jūs varat ne tikai ielīmēt strādājošo JavaScript kodu savā Reason kodu bāzē, bet arī Reason kods var mijiedarboties ar šo JavaScript. Tas nozīmē, ka jūs varat viegli integrēt Reason kodu savā esošajā JavaScript kodu bāzē. Turklāt savā Iemesla kodā varat izmantot visas JavaScript paketes no NPM ekosistēmas. Piemēram, vienā projektā varat apvienot Flow, TypeScript un Reason.

Tomēr tas nav tik vienkārši. Lai programmā Reason izmantotu JavaScript bibliotēkas vai kodu, tas vispirms jāpārnes uz Reason, izmantojot Reason saistošās saites. Citiem vārdiem sakot, jums ir nepieciešami veidi, lai jūsu neievadīts JavaScript kods varētu izmantot Reason spēcīgā tipa sistēmas priekšrocības.

Ikreiz, kad savā Iemes kodā ir jāizmanto JavaScript bibliotēka, pārbaudiet, vai bibliotēka jau ir pārvietota uz Iemeslu, pārlūkojot Reason Package Index (Redex) datu bāzi. Tā ir vietne, kurā tiek apkopotas dažādas bibliotēkas un rīki, kas rakstīti Reason un JavaScript bibliotēkās, izmantojot Saistītās saites. Ja tur atradāt savu bibliotēku, varat to vienkārši instalēt kā atkarību un izmantot savā lietojumprogrammā Iemesls.

Tomēr, ja jūs neatradāt savu bibliotēku, jums pašiem būs jāraksta saistību iemesls. Ja jūs tikai sākat ar Reason, ņemiet vērā, ka iesiešanas rakstīšana nav lieta, ar kuru vēlaties sākt, jo tā ir viena no sarežģītākajām lietām Reason ekosistēmā.

Par laimi es rakstu tikai rakstu par saikņu rakstīšanu, tāpēc sekojiet līdzi!

Ja jums ir nepieciešama kāda JavaScript bibliotēkas funkcionalitāte, jums nav jāraksta visu bibliotēkas saistību iemesls. To var izdarīt tikai tām funkcijām vai komponentiem, kas jums jāizmanto.

ReasonReact

Šis raksts ir par React in Reason rakstīšanu, ko jūs varat darīt, pateicoties ReasonReact bibliotēkai.

Varbūt jūs tagad domājat: “Es joprojām nezinu, kāpēc man vajadzētu izmantot Reakciju saprātā”.

Mēs jau esam minējuši galveno iemeslu to darīt - iemesls ir vairāk saderīgs ar React nekā JavaScript. Kāpēc tas ir saderīgāks? Tā kā React tika izstrādāts iemesls, vai precīzāk, OCaml.

Ceļš uz ReasonReact

React pirmo prototipu izstrādāja Facebook, un tas tika uzrakstīts standarta meta valodā (StandardML), OCaml brālēns. Pēc tam tas tika pārvietots uz OCaml. React arī tika pārrakstīts uz JavaScript.

Tas notika tāpēc, ka viss tīmeklis izmantoja JavaScript, un, iespējams, nebija prātīgi teikt: “Tagad mēs UI veidosim OCaml.” Un tas darbojās - Reaģēt uz JavaScript ir plaši izmantots.

Tātad, mēs esam pieraduši reaģēt kā JavaScript bibliotēka. Reaģējiet kopā ar citām bibliotēkām un valodām - Elm, Redux, recompose, Ramda un PureScript - populārā JavaScript funkcionālā programmēšana. Un, palielinoties Flow un TypeScript, kļuva populāra arī statiskā rakstīšana. Rezultātā funkcionālās programmēšanas paradigma ar statiskajiem tipiem kļuva par galveno priekšdaļas pasaulē.

2016. gadā Bloomberg izstrādāja un atklāja BuckleScript, kompilatoru, kas pārveido OCaml uz JavaScript. Tas ļāva viņiem rakstīt drošu kodu priekšpusē, izmantojot OCaml spēcīgā tipa sistēmu. Viņi izvēlējās optimizēto un uzkrītoši ātro OCaml kompilatoru un nomainīja tā pamatteksta ģenerēšanas vietni uz JavaScript ģenerējošo vietni.

Funkcionālās programmēšanas popularitāte līdz ar BuckleScript izlaišanu radīja ideālu atmosfēru Facebook, lai atgrieztos pie sākotnējās React idejas, kas sākotnēji tika uzrakstīta ML valodā.

ReasonReact

Viņi pārņēma OCaml semantiku un JavaScript sintakse un izveidoja Reason. Viņi arī izveidoja Reason aptinumu ap React - ReasonReact bibliotēku - ar tādām papildu funkcijām kā Redux principu iekapsulēšana valstiskos komponentos. Šādi rīkojoties, viņi atgriezās React sākotnējās saknēs.

Reakcijas spēks saprātā

Kad React ienāca JavaScript, mēs pielāgojām JavaScript atbilstoši React vajadzībām, ieviešot dažādas bibliotēkas un rīkus. Tas nozīmēja arī lielāku atkarību no mūsu projektiem. Nemaz nerunājot par to, ka šīs bibliotēkas joprojām tiek izstrādātas, un regulāri tiek ieviestas ievērojamas izmaiņas. Tāpēc jums ir rūpīgi jāuztur šīs atkarības savos projektos.

Tas pievienoja JavaScript attīstības vēl vienu sarežģītības pakāpi.

Jūsu tipiskajai React lietojumprogrammai būs vismaz šādas atkarības:

  • statiskā mašīnrakstīšana - Flow / TypeScript
  • negrozāmība - negrozāmaJS
  • maršrutēšana - ReactRouter
  • formatēšana - Prettier
  • iekrāsošana - ESLint
  • palīga funkcija - Ramda / Lodaša

Tagad apmainīsimies ar Java React par ReasonReact.

Vai mums joprojām ir vajadzīgas visas šīs atkarības?

  • statiskā mašīnrakstīšana - iebūvēts
  • negrozāmība - iebūvēts
  • maršrutēšana - iebūvēts
  • formatēšana - iebūvēts
  • apmetums - iebūvēts
  • palīga funkcijas - iebūvētas

Jūs varat uzzināt vairāk par šīm iebūvētajām funkcijām citā manā rakstā.

Lietojumprogrammā ReasonReact jums nav nepieciešama šī un daudzas citas atkarības, jo daudzas būtiskas funkcijas, kas atvieglo jūsu attīstību, jau ir iekļautas pašā valodā. Tātad pakešu uzturēšana kļūs vienkāršāka, un laika gaitā jums nepalielināsies sarežģītība.

Tas ir pateicoties OCaml, kuram ir vairāk nekā 20 gadu. Tā ir nobriedusi valoda, kurai ir visi pamatprincipi un kas ir stabili.

Satīt

Sākumā Reason veidotājiem bija divas iespējas. Lai ņemtu JavaScript un kaut kā to uzlabotu. To darot, viņiem būs jārisina arī vēsturiskie pienākumi.

Tomēr viņi gāja citu ceļu. Viņi ņēma OCaml kā nobriedušu valodu ar lielisku sniegumu un pārveidoja to tā, lai tas atgādinātu JavaScript.

React arī balstās uz OCaml principiem. Tāpēc, lietojot Reason, jūs iegūsit daudz labāku izstrādātāja pieredzi. React in Reason ir drošāks React komponentu veidošanas veids, jo spēcīgā tipa sistēma ir saņēmis muguru un jums nav jārisina vairums JavaScript (mantoto) problēmu.

Ko tālāk?

Ja esat ieradies no JavaScript vietnes, jums būs vieglāk sākt darbu ar Reason, pateicoties tā sintakse līdzībai ar JavaScript. Ja esat programmējis React, jums tas būs vēl vienkāršāk, jo jūs varat izmantot visas savas React zināšanas, jo ReasonReact ir tāds pats mentālais modelis kā React un ļoti līdzīga darbplūsma. Tas nozīmē, ka jums nav jāsāk no nulles. Attīstoties, jūs iemācīsities saprātu.

Labākais veids, kā sākt izmantot saprātu savos projektos, ir darīt to pakāpeniski. Es jau minēju, ka jūs varat ņemt Reason kodu un izmantot to JavaScript, un otrādi. To pašu var izdarīt arī ar ReasonReact. Jūs uzņemat savu ReasonReact komponentu un izmantojat to savā React JavaScript lietojumprogrammā, un otrādi.

Šo papildinošo pieeju ir izvēlējušies Facebook izstrādātāji, kas plaši izmanto saprātu, izstrādājot lietotni Facebook Messenger.

Ja vēlaties izveidot lietojumprogrammu, izmantojot React in Reason, un praktiski iemācīties saprāta pamatus, skatiet manu citu rakstu, kurā mēs kopā veidosim Tic Tac Toe spēli.

Ja jums ir kādi jautājumi, kritika, novērojumi vai padomi uzlabojumiem, droši rakstiet zemāk komentāru vai sazinieties ar mani, izmantojot Twitter vai manu emuāru.