Psst! Ето защо ReasonReact е най-добрият начин да напишете React

Използвате ли React за изграждане на потребителски интерфейси? Е, и аз съм. И сега ще научите защо трябва да пишете вашите React приложения, използвайки ReasonML.

React е доста готин начин за писане на потребителски интерфейси. Но можем ли да го направим още по-хладен? По-добре?

За да го направим по-добре, първо трябва да идентифицираме проблемите му. И така, какъв е основният проблем на React като JavaScript библиотека?

React първоначално не е разработен за JavaScript

Ако разгледате по-отблизо React, ще видите, че някои от основните му принципи са чужди на JavaScript. Нека поговорим за неизменността, принципите на функционалното програмиране и в частност системата за типове.

Неизменността е един от основните принципи на React. Не искате да мутирате реквизита си или състоянието си, защото ако го направите, може да изпитате непредсказуеми последствия. В JavaScript нямаме неизменност от кутията. Ние поддържаме нашите структури от данни неизменни по конвенция или използваме библиотеки като неизменяеми JS, за да го постигнем.

React се основава на принципите на функционалното програмиране, тъй като приложенията му са композиции от функции. Въпреки че JavaScript има някои от тези функции, като първокласни функции, това не е функционален език за програмиране. Когато искаме да напишем хубав декларативен код, трябва да използваме външни библиотеки като Lodash / fp или Ramda.

И така, какво става с типовата система? В React имахме PropTypes. Използвали сме ги, за да имитират типовете в JavaScript, тъй като самият той не е статично въведен език. За да се възползваме от усъвършенстваното статично писане, отново трябва да използваме външни зависимости, като Flow и TypeScript.

Както можете да видите, JavaScript не е съвместим с основните принципи на React.

Има ли друг език за програмиране, който би бил по-съвместим с React от JavaScript?

За щастие имаме ReasonML.

В Причина получаваме неизменност от кутията. Тъй като се основава на OCaml, функционалният език за програмиране, имаме такива функции, вградени и в самия език. Причината също така ни предоставя силна тип система сама по себе си.

Причината е съвместима с основните принципи на React.

Причина

Това не е нов език. Това е алтернативен JavaScript синтаксис и верига от инструменти за OCaml, функционален език за програмиране, съществуващ повече от 20 години. Причината е създадена от разработчици на Facebook, които вече са използвали OCaml в своите проекти (Flow, Infer).

Причината със своя синтаксис, подобен на C, прави OCaml достъпен за хора, идващи от основните езици като JavaScript или Java. Той ви предоставя по-добра документация (в сравнение с OCaml) и нарастваща общност около нея. Освен това улеснява интегрирането с вашата съществуваща кодова база на JavaScript.

OCaml служи като спомагателен език за Разума. Причината има същата семантика като OCaml - само синтаксисът е различен. Това означава, че можете да пишете OCaml, използвайки синтаксиса, подобен на JavaScript на Reason. В резултат на това можете да се възползвате от страхотните функции на OCaml, като неговата силна система от тип и съвпадение на шаблоните.

Нека да разгледаме пример за синтаксиса на Reason.

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

Въпреки че използваме съвпадение на шаблони в този пример, той все още е доста подобен на JavaScript, нали?

Въпреки това, единственият използваем език за браузърите все още е JavaScript, което означава, че трябва да компилираме към него.

BuckleScript

Една от мощните функции на Reason е компилаторът BuckleScript, който взема вашия код на Reason и го компилира в четлив и ефективен JavaScript с голямо премахване на мъртъв код. Ще оцените четливостта, ако работите в екип, в който не всички са запознати с Причината, тъй като все пак ще могат да четат съставения JavaScript код.

Приликата с JavaScript е толкова близка, че част от кода на причината изобщо не трябва да се променя от компилатора. Така че, можете да се насладите на предимствата на статично написания език, без никаква промяна в кода.

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

Това е валиден код както в Reason, така и в JavaScript.

BuckleScript се доставя с четири библиотеки: стандартната библиотека, наречена Belt (стандартната библиотека на OCaml е недостатъчна), и обвързването към API на JavaScript, Node.js и DOM.

Тъй като BuckleScript се основава на компилатора OCaml, ще получите изключително бърза компилация, която е много по-бърза от Babel и няколко пъти по-бърза от TypeScript.

Нека да компилираме нашия алгоритъм FizzBuzz, написан в Reason в JavaScript.

Както можете да видите, полученият JavaScript код е доста четим. Изглежда, че е написано от разработчик на JavaScript.

Reason се компилира не само в JavaScript, но и в родния и байт кода. Така че, можете да напишете едно приложение, използвайки синтаксиса на Reason и да можете да го стартирате в браузъра на MacOS, Android и iOS телефони. Има игра, наречена Gravitron от Jared Forsyth, която е написана в Reason и може да се изпълнява на всички платформи, които току-що споменах.

Взаимодействие с JavaScript

BuckleScript ни предоставя и оперативна съвместимост на JavaScript. Не само можете да поставите вашия работещ код на JavaScript във вашата база данни на Reason, но вашият код на Reason може да взаимодейства и с този код на JavaScript. Това означава, че можете лесно да интегрирате кода на причината в съществуващата си кодова база на JavaScript. Освен това можете да използвате всички JavaScript пакети от екосистемата NPM във вашия код на причината. Например можете да комбинирате Flow, TypeScript и Reason заедно в един проект.

Това обаче не е толкова просто. За да използвате JavaScript библиотеки или код в Reason, първо трябва да ги пренесете в Reason чрез обвързване на Reason. С други думи, имате нужда от типове за вашия нетипизиран JavaScript код, за да можете да се възползвате от силната система на типа на Reason.

Винаги, когато трябва да използвате библиотека на JavaScript в кода на причината, проверете дали библиотеката вече е пренесена в Reason, като разгледате базата данни Reason Package Index (Redex). Това е уебсайт, който обединява различни библиотеки и инструменти, написани в библиотеки Reason и JavaScript с обвързване Reason. Ако сте намерили библиотеката си там, можете просто да я инсталирате като зависимост и да я използвате във вашето приложение Reason.

Ако обаче не сте намерили библиотеката си, ще трябва сами да напишете обвързвания на причините. Ако тепърва започвате с Reason, имайте предвид, че писането на обвързващи елементи не е нещо, с което искате да започнете, тъй като това е едно от най-предизвикателните неща в екосистемата на Reason.

За щастие, аз просто пиша публикация за писане на обвързвания на Разум, така че следете!

Когато имате нужда от някаква функционалност от JavaScript библиотека, не е нужно да пишете обвързванията на Reason за библиотека като цяло. Можете да направите това само за функциите или компонентите, които трябва да използвате.

Причина Реакция

Тази статия е за писане на React in Reason, което можете да направите благодарение на библиотеката ReasonReact.

Може би сега си мислите „Все още не знам защо да използвам React in Reason.“

Вече споменахме основната причина за това - Причината е по-съвместима с React, отколкото JavaScript. Защо е по-съвместим? Защото React е разработен за Разум или по-точно за OCaml.

Пътят към ReasonReact

Първият прототип на React е разработен от Facebook и е написан на Standard Meta Language (StandardML), братовчед на OCaml. След това беше преместено в OCaml. React също е транскрибиран в JavaScript.

Това беше така, защото цялата мрежа използваше JavaScript и вероятно не беше умно да се каже „Сега ще изградим потребителски интерфейс в OCaml.“ И работи - React в JavaScript е широко приет.

И така, свикнахме да реагираме като JavaScript библиотека. Реагирайте заедно с други библиотеки и езици - Elm, Redux, Recompose, Ramda и PureScript - направиха популярното функционално програмиране в JavaScript. И с възхода на Flow и TypeScript статичното писане също стана популярно. В резултат на това парадигмата за функционално програмиране със статични типове стана основна в света на предния край.

През 2016 г. Bloomberg разработи и с отворен код BuckleScript, компилаторът, който трансформира OCaml в JavaScript. Това им позволи да напишат безопасен код във фронт-енда, използвайки системата за силен тип на OCaml. Те взеха оптимизирания и невероятно бърз компилатор на OCaml и замениха неговия генериращ вграден код за JavaScript, генериращ такъв.

Популярността на функционалното програмиране заедно с пускането на BuckleScript генерира идеалния климат за Facebook да се върне към първоначалната идея на React, която първоначално беше написана на ML език.

Те взеха семантиката на OCaml и синтаксиса на JavaScript и създадоха Reason. Те също така създадоха обвивката Reason около React - библиотеката ReasonReact - с допълнителни функционалности, като капсулирането на принципите Redux в компоненти с състояние. По този начин те върнаха React към първоначалните му корени.

Силата на React in Reason

Когато React влезе в JavaScript, ние приспособихме JavaScript към нуждите на React чрез въвеждане на различни библиотеки и инструменти. Това също означаваше повече зависимости за нашите проекти. Да не говорим, че тези библиотеки все още са в процес на разработка и редовни промени се въвеждат. Затова трябва внимателно да поддържате тези зависимости във вашите проекти.

Това добави още един слой сложност към разработката на JavaScript.

Типичното ви приложение React ще има поне следните зависимости:

  • статично писане - Flow / TypeScript
  • неизменност - неизменяемJS
  • маршрутизиране - ReactRouter
  • форматиране - По-хубаво
  • облицовка - ESLint
  • помощна функция - Ramda / Lodash

Нека сега разменим JavaScript React с ReasonReact.

Все още ли се нуждаем от всички тези зависимости?

  • статично писане - вградено
  • неизменност - вградена
  • маршрутизация - вградена
  • форматиране - вградено
  • облицовка - вградена
  • помощни функции - вградени

Можете да научите повече за тези вградени функции в другата ми публикация.

В приложението ReasonReact нямате нужда от тези и много други зависимости, тъй като много важни функции, които улесняват развитието ви, вече са включени в самия език. Така поддържането на вашите пакети ще стане по-лесно и няма да имате повишена сложност с времето.

Това е благодарение на OCaml, който е на повече от 20 години. Това е узрял език с всички основни принципи на място и стабилен.

Обобщение

В началото създателите на Reason имаха две възможности. Да вземем JavaScript и някак да го направим по-добър. Правейки това, те също ще трябва да се справят с историческите тежести.

Те обаче тръгнаха по друг път. Те възприеха OCaml като узрял език със страхотна производителност и го модифицираха, така че да прилича на JavaScript.

React също се основава на принципите на OCaml. Ето защо ще получите много по-добро изживяване за разработчици, когато го използвате с Reason. React in Reason представлява по-безопасен начин за изграждане на React компоненти, тъй като системата от силен тип е с гръб и не е нужно да се справяте с повечето проблеми с JavaScript (наследство).

Какво следва?

Ако идвате от света на JavaScript, ще ви бъде по-лесно да започнете с Reason, поради сходството на синтаксиса с JavaScript. Ако сте програмирали в React, ще ви бъде още по-лесно, тъй като можете да използвате всичките си знания за React, тъй като ReasonReact има същия умствен модел като React и много подобен работен процес. Това означава, че не е нужно да започвате от нулата. Ще научите Разума, докато се развивате.

Най-добрият начин да започнете да използвате Причината във вашите проекти е да го правите постепенно. Вече споменах, че можете да вземете Reason код и да го използвате в JavaScript и обратно. Можете да направите същото с ReasonReact. Вземете своя компонент ReasonReact и го използвайте във вашето приложение React JavaScript и обратно.

Този допълнителен подход е избран от разработчиците на Facebook, които широко използват Reason при разработването на приложението Facebook Messenger.

Ако искате да създадете приложение, използвайки React in Reason и да научите основите на Reason по практически начин, проверете другата ми статия, в която заедно ще изградим игра Tic Tac Toe.

Ако имате някакви въпроси, критики, наблюдения или съвети за подобрение, не се колебайте да напишете коментар по-долу или да се свържете с мен чрез Twitter или моя блог.