Не забравяйте, Ето защо 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

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

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

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

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

Сравнение на React, JavaScript и Reason

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

причина

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

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

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

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

нека fizzbuzz = (i) =>
  превключвател (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
за (i в 1 до 100) {
  Js.log (fizzbuzz (I))
};

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

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

BuckleScript

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

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

нека add = (a, b) => a + b;
добавете (6, 9);

Това е валиден код както в Причина, така и в JavaScript.

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

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

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

Причината за компилиране на код в JavaScript чрез BuckleScript

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

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

JavaScript interop

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

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

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

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

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

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

ReasonReact

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

Може би сега си мислите: "Все още не знам защо трябва да използвам React в разума."

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

Път към ReasonReact

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

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

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

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

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

ReasonReact

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

Силата на Реагира в разума

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

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

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

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

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

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

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

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

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

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

Увийте-нагоре

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

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

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

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

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

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

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

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

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