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

Vai izmantojat React, lai izveidotu lietotāja saskarnes? Nu, es arī esmu. Un tagad jūs uzzināsiet, 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 foršāku? Labāk?

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

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

Ja rūpīgāk apskatīsit React, redzēsiet, ka daži no tā galvenajiem principiem nav sveši JavaScript. Parunāsim par nemainīgumu, funkcionālajiem programmēšanas principiem un tipu sistēmu.

Nemainīgums ir viens no React pamatprincipiem. Jūs nevēlaties mutēt savus rekvizītus vai savu stāvokli, jo, ja to izdarīsit, var rasties neparedzamas sekas. JavaScript valodā mēs nemaināmies no kastes. Mēs saglabājam datu struktūras nemainīgas pēc konvencijas, vai arī izmantojam tādas bibliotēkas kā nemaināmās JS, lai to panāktu.

React ir balstīts uz funkcionālās programmēšanas principiem, jo ​​tā pielietojums ir funkciju sastāvs. Lai gan JavaScript ir dažas no šīm funkcijām, piemēram, pirmās klases funkcijas, tā nav funkcionāla programmēšanas valoda. Kad mēs vēlamies uzrakstīt kādu jauku deklaratīvu kodu, mums jāizmanto ārējās bibliotēkas, piemēram, Lodash / fp vai Ramda.

Tātad, kas notiek ar tipa sistēmu? Reakcijā mums bija PropTypes. Mēs tos izmantojām, lai atdarinātu JavaScript veidus, jo tā pati nav statiski ierakstīta valoda. Lai izmantotu uzlabotas statiskās rakstīšanas priekšrocības, mums atkal jāizmanto ārējās atkarības, piemēram, Flow un TypeScript.

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

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

Par laimi mums ir ReasonML.

Sadaļā Reason mēs nemainām no kastes. Tā kā tā pamatā ir funkcionālā programmēšanas valoda OCaml, šādas funkcijas ir iebūvētas arī pašā valodā. Saprāts mums arī nodrošina spēcīgu tipa sistēmu.

Iemesls ir saderīgs ar React pamatprincipiem.

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 izveidoja Facebook izstrādātāji, kuri jau savos projektos izmantoja OCaml (Flow, Infer).

Iemesls ar savu C veida sintaksi padara OCaml pieejamu cilvēkiem, kuri nāk no tādām galvenajām valodām kā JavaScript vai Java. Tas nodrošina labāku dokumentāciju (salīdzinot ar OCaml) un arvien lielāku kopienu ap to. Turklāt tas atvieglo integrāciju ar esošo JavaScript koda bāzi.

OCaml ir pamatojuma valoda kā pamatvaloda. Reason ir tāda pati semantika kā OCaml - tikai sintakse atšķiras. Tas nozīmē, ka jūs varat rakstīt OCaml, izmantojot Reason JavaScript līdzīgo sintaksi. Tā rezultātā jūs varat izmantot OCaml lielisko iespēju priekšrocības, piemēram, tās spēcīgo tipu sistēmu un modeļu saskaņošanu.

Apskatīsim Reason sintakses piemēru.

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

Lai gan šajā piemērā mēs izmantojam modeļu atbilstību, vai ne?

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

BuckleScript

Viena no Reason spēcīgākajām funkcijām ir BuckleScript kompilators, kas paņem jūsu Reason kodu un apkopo to lasāmā un efektīvā JavaScript ar ļoti mirušu koda izslēgšanu. Jūs novērtēsiet salasāmību, ja strādājat komandā, kurā ne visi ir pazīstami ar iemeslu, jo viņi joprojām varēs izlasīt apkopoto JavaScript kodu.

Līdzība ar JavaScript ir tik cieša, ka kompilatoram nemaz nav jāmaina daži Reason kodi. Tātad, jūs varat izbaudīt statiski ierakstītās valodas priekšrocības, nemainot kodu.

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

Šis ir derīgs kods gan iemeslā, gan JavaScript.

BuckleScript tiek piegādāts ar četrām bibliotēkām: standarta bibliotēka ar nosaukumu Belt (OCaml standarta bibliotēka ir nepietiekama) un piesaistes JavaScript, Node.js un DOM API.

Tā kā BuckleScript pamatā ir OCaml kompilators, jūs iegūsiet ārkārtīgi ātru kompilāciju, kas ir daudz ātrāka nekā Bābele un vairākas reizes ātrāk nekā TypeScript.

Apkoposim mūsu FizzBuzz algoritmu, kas rakstīts Reason to JavaScript.

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

Reason apkopo ne tikai JavaScript, bet arī vietējo un baitkodu. Tātad, jūs varat rakstīt vienu lietojumprogrammu, izmantojot Reason sintaksi, un to var palaist pārlūkprogrammā MacOS, Android un iOS tālruņos. Ir Jared Forsyth spēle, ko sauc par Gravitron, kas ir rakstīts Reason, un to var palaist visās tikko pieminētajās platformās.

JavaScript savietot

BuckleScript nodrošina mums arī JavaScript savietojamību. Jūs varat ne tikai ielīmēt savu darbojošos JavaScript kodu savā Reason koda bāzē, bet arī Reason kods var mijiedarboties ar šo JavaScript kodu. Tas nozīmē, ka jūs varat viegli integrēt Reason kodu savā esošajā JavaScript koda bāzē. Turklāt savā Reason kodā varat izmantot visus JavaScript pakotnes 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, vispirms tas jāpāriet uz Reason, izmantojot Reason saistījumus. Citiem vārdiem sakot, jums ir nepieciešami tipi, lai jūsu neievadītais JavaScript kods varētu izmantot Reason spēcīgā tipa sistēmas priekšrocības.

Ikreiz, kad iemesla kodā ir jāizmanto JavaScript bibliotēka, pārbaudiet, vai bibliotēka jau ir pārnesta uz Reason, pārlūkojot Reason Package Index (Redex) datu bāzi. Tā ir vietne, kas apkopo dažādas bibliotēkas un rīkus, kas rakstīti Reason un JavaScript bibliotēkās, izmantojot Reason saistījumus. Ja tur atradāt savu bibliotēku, varat to vienkārši instalēt kā atkarību un izmantot savā Reason lietojumprogrammā.

Tomēr, ja neatradāt savu bibliotēku, jums pašiem būs jāraksta pamatojuma saites. Ja jūs tikai sākat ar Reason, paturiet prātā, ka iesējumu 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 tikai rakstu ierakstu par Reason iesējumu rakstīšanu, tāpēc sekojiet līdzi jaunumiem!

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

IemeslsReakcija

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

Varbūt jūs tagad domājat: "Es joprojām nezinu, kāpēc man vajadzētu izmantot React in Reason."

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āta Reason, precīzāk, OCaml.

Ceļš uz ReasonReact

React pirmo prototipu izstrādāja Facebook, un tas tika uzrakstīts OCaml brālēnā Standard Meta Language (StandardML). Tad tas tika pārvietots uz OCaml. React tika pārrakstīts arī uz JavaScript.

Tas notika tāpēc, ka viss tīmeklis izmantoja JavaScript, un droši vien nebija gudri teikt: "Tagad mēs izveidosim lietotāja interfeisu OCaml." Un tas darbojās - React in JavaScript ir plaši pieņemts.

Tātad, mēs pieradām pie React kā JavaScript bibliotēkas. Reaģējiet kopā ar citām bibliotēkām un valodām - Elm, Redux, Recompose, Ramda un PureScript - padarīja JavaScript populāru funkcionālu programmēšanu. Līdz ar Flow un TypeScript pieaugumu populāra kļuva arī statiskā rakstīšana. Tā rezultātā funkcionālā programmēšanas paradigma ar statiskiem tipiem kļuva par galveno front-end pasaulē.

2016. gadā Bloomberg izstrādāja un atvērtu avotu BuckleScript, kompilatoru, kas OCaml pārveido par JavaScript. Tas viņiem ļāva ierakstīt drošu kodu priekšējā galā, izmantojot OCaml spēcīgā tipa sistēmu. Viņi paņēma optimizēto un izcili ātro OCaml kompilatoru un nomainīja tā aizmugures ģenerējošo vietējo kodu JavaScript ģenerējošajam.

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

Viņi izmantoja OCaml semantiku un JavaScript sintaksi un izveidoja Reason. Viņi arī izveidoja Reason iesaiņotāju ap React - ReasonReact bibliotēku - ar papildu funkcionalitātēm, piemēram, Redux principu iekapsulēšanu statusa komponentos. To darot, viņi atgrieza React sākotnējās saknēs.

Reakcijas spēks pamatojumā

Kad React nonāca JavaScript, mēs pielāgojām JavaScript 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 pārsteidzošas izmaiņas. Tāpēc projektos jums rūpīgi jāuztur šīs atkarības.

Tas JavaScript izstrādei pievienoja vēl vienu sarežģītības slāni.

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

  • statiskā rakstīšana - Flow / TypeScript
  • nemainīgums - nemaināmsJS
  • maršrutēšana - ReactRouter
  • formatēšana - skaistāka
  • savārstījums - ESLint
  • palīga funkcija - Ramda / Lodašs

Tagad nomainīsim JavaScript React pret ReasonReact.

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

  • statiskā rakstīšana - iebūvēta
  • nemainīgums - iebūvēts
  • maršrutēšana - iebūvēta
  • formatējums - iebūvēts
  • uzliku - iebūvēta
  • palīga funkcijas - iebūvētas

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

Lietojumprogrammā ReasonReact jums nav vajadzīgas šīs un daudzas citas atkarības, jo daudzas svarīgas funkcijas, kas atvieglo attīstību, jau ir iekļautas pašā valodā. Tātad paku uzturēšana kļūs vieglāka, un laika gaitā jums nepalielināsies sarežģītība.

Tas ir pateicoties OCaml, kas ir vairāk nekā 20 gadus vecs. Tā ir nobriedusi valoda ar visiem tās pamatprincipiem un stabilu.

Satīt

Sākumā Reason veidotājiem bija divas iespējas. Lai ņemtu JavaScript un kaut kā uzlabotu to. To darot, viņiem arī jātiek galā ar vēsturisko slogu.

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

React pamatā ir arī OCaml principi. Tāpēc jūs iegūsiet daudz labāku izstrādātāju pieredzi, kad izmantojat to kopā ar Reason. React in Reason ir drošāks veids, kā izveidot React komponentus, jo spēcīgā tipa sistēma ir ieguvusi muguru un jums nav jārisina lielākā daļa JavaScript (mantoto) problēmu.

Ko tālāk?

Ja jūs nākat no JavaScript pasaules, jums būs vieglāk sākt darbu ar Reason, pateicoties tā sintakses līdzībai ar JavaScript. Ja jūs esat programmējis programmā React, jums tas būs vēl vieglāk, jo jūs varat izmantot visas savas React zināšanas, jo ReasonReact ir tāds pats garīgais 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 uzzināsiet Reason.

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

Šo pieaugošo pieeju ir izvēlējušies Facebook izstrādātāji, kuri plaši izmanto Reason Facebook Messenger lietotnes izstrādē.

Ja vēlaties izveidot lietojumprogrammu, izmantojot React in Reason, un praktiskā veidā uzzināt Reason pamatus, skatiet manu citu rakstu, kur mēs kopā izveidosim Tic Tac Toe spēli.

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