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

Як бачите, JavaScript не сумісний з основними принципами React.

Чи існує інша мова програмування, яка буде більш сумісною з React, ніж JavaScript?

На щастя, у нас є ReasonML.

У Причині ми отримуємо незмінність поза коробкою. Оскільки він заснований на OCaml, функціональній мові програмування, у нас є такі функції, вбудовані і в саму мову. Причина також забезпечує нас сильною системою типу.

Порівняння реакцій, JavaScript та причин

Розум сумісний з основними принципами React.

Причина

Це не нова мова. Це альтернативний синтаксис і ланцюжок інструментів для JavaScript для OCaml, функціональної мови програмування, яка існує вже більше 20 років. Причину створили розробники Facebook, які вже використовували OCaml у своїх проектах (Flow, Infer).

Причина, завдяки синтаксису, подібному С, робить OCaml доступним для людей, що походять з основних мов, таких як JavaScript або Java. Він надає вам кращу документацію (порівняно з OCaml) та зростаючу спільноту навколо неї. Крім того, це полегшує інтеграцію з існуючою базою кодів JavaScript.

OCaml служить мовою підтримки для Розуму. Розум має ту саму семантику, що й OCaml - лише синтаксис інший. Це означає, що ви можете написати OCaml, використовуючи синтаксис JavaScript, що нагадує Reason. Як результат, ви можете скористатися чудовими можливостями OCaml, такими як його система сильного типу та відповідність шаблонів.

Давайте подивимось на приклад синтаксису Reason.

нехай fizzbuzz = (i) =>
  перемикач (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Фіз"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
для (i в 1 до 100) {
  Js.log (fizzbuzz (i))
};

Хоча в цьому прикладі ми використовуємо відповідність шаблонів, вона все ще схожа на JavaScript, правда?

Однак єдиною зручною мовою для браузерів є все ще JavaScript, тобто ми повинні компілювати його.

BuckleScript

Однією з найпотужніших функцій Reason є компілятор BuckleScript, який бере ваш код Reason і компілює його для читання та виконання JavaScript з великим усуненням мертвого коду. Ви будете оцінені читальністю, якщо працюєте в команді, де не всі знайомі з Причиною, оскільки вони все ще зможуть прочитати зібраний код 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 від Джареда Форсайта, написана в «Розум», і її можна проводити на всіх платформах, про які я щойно згадував.

Інтероп JavaScript

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, вам не потрібно писати прив'язки Причини для бібліотеки в цілому. Це можна зробити лише для функцій або компонентів, які потрібно використовувати.

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

Ця стаття стосується написання React in Reason, що ви можете зробити завдяки бібліотеці ReasonReact.

Можливо, ви зараз думаєте: "Я досі не знаю, чому я повинен використовувати React у розумі".

Ми вже згадували головну причину цього - Розум сумісніший з React, ніж JavaScript. Чому він більш сумісний? Тому що React був розроблений для Розуму, а точніше, для OCaml.

Дорога до ReasonReact

Перший прототип React був розроблений Facebook і був написаний мовою Standard Meta Language (StandardML), двоюрідним братом OCaml. Потім його перенесли до OCaml. React також був переписаний на JavaScript.

Це було через те, що вся мережа використовувала JavaScript, і, мабуть, не було розумно сказати: "Зараз ми створимо інтерфейс користувача в OCaml".

Отже, ми звикли реагувати як бібліотека JavaScript. Реагуйте разом з іншими бібліотеками та мовами - Elm, Redux, Recompose, Ramda і PureScript - функціональне програмування зробило популярним у JavaScript. І з підйомом Flow і TypeScript статична типізація також стала популярною. В результаті парадигма функціонального програмування зі статичними типами стала мейнстрімом у світі переднього плану.

У 2016 році Bloomberg розробив і відкритий BuckleScript - компілятор, який перетворює OCaml в JavaScript. Це дозволило їм записати безпечний код на передній частині, використовуючи систему сильного типу OCaml. Вони взяли оптимізований і надзвичайно швидкий компілятор OCaml і замінили його "back-end", генеруючи нативний код на JavaScript, що генерує.

Популярність функціонального програмування разом із випуском BuckleScript створила ідеальний клімат для Facebook, щоб повернутися до початкової ідеї React, яка спочатку була написана мовою ML.

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

Вони взяли семантику OCaml та синтаксис JavaScript і створили Reason. Вони також створили обгортку Reason навколо бібліотеки React - ReasonReact - з додатковими функціоналами, такими як інкапсуляція принципів Redux у важливі компоненти. Тим самим вони повернули Реагу до своїх початкових коренів.

Сила Реагувати в Розумі

Коли React увійшов у JavaScript, ми адаптували JavaScript до потреб React, ввівши різні бібліотеки та інструменти. Це також означало більше залежностей від наших проектів. Не кажучи вже про те, що ці бібліотеки все ще знаходяться на стадії розробки, а постійні зміни впроваджуються регулярно. Тож вам потрібно з обережністю підтримувати ці залежності у своїх проектах.

Це додало ще один рівень складності розробці JavaScript.

Ваша типова програма React матиме принаймні такі залежності:

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

Тепер обміняємо JavaScript React на ReasonReact.

Чи потрібні нам все ці залежності?

  • статичний набір тексту - вбудований
  • незмінність - вбудована
  • маршрутизація - вбудована
  • форматування - вбудований
  • вагонка - вбудована
  • допоміжні функції - вбудовані

Ви можете дізнатися більше про ці вбудовані функції у моїй іншій публікації.

У додатку ReasonReact вам не потрібні ці та багато інших залежностей, оскільки багато важливих функцій, які полегшують ваш розвиток, вже включені в саму мову. Таким чином, обслуговування ваших пакетів стане простішим, і ви не будете збільшувати складність з часом.

Це завдяки OCaml, якому більше 20 років. Це зріла мова з усіма основними принципами на місці та стабільним.

Підбивання

На початку у творців Розуму було два варіанти. Взяти JavaScript і якось покращити його. Роблячи це, вони також повинні мати справу з його історичним тягарем.

Однак вони пішли іншим шляхом. Вони сприйняли OCaml як дозрілу мову з великою продуктивністю та модифікували її так, що вона нагадує JavaScript.

Реакція також заснована на принципах OCaml. Ось чому ви отримаєте набагато кращий досвід для розробників, використовуючи його з Reason. React in Reason - це безпечніший спосіб побудови компонентів React, оскільки система міцного типу отримала ваші спини, і вам не потрібно вирішувати більшість проблем JavaScript (застарілих).

Що далі?

Якщо ви приїжджаєте зі світу JavaScript, вам буде легше розпочати роботу з Reason, завдяки його синтаксичній схожості з JavaScript. Якщо ви програмували в React, вам стане ще простіше, оскільки ви можете використовувати всі свої знання React, оскільки ReasonReact має ту саму ментальну модель, як React та дуже схожий робочий процес. Це означає, що вам не потрібно починати з нуля. Ви дізнаєтесь Розум, коли розвинетесь.

Найкращий спосіб почати використовувати Розум у своїх проектах - це робити це поступово. Я вже згадував, що ви можете взяти код Reason і використовувати його в JavaScript і навпаки. Те ж саме можна зробити і з ReasonReact. Ви берете свій компонент ReasonReact і використовуєте його в додатку React JavaScript, і навпаки.

Цей поступовий підхід було обрано розробниками Facebook, які широко використовують Розум у розробці програми Facebook Messenger.

Якщо ви хочете створити додаток за допомогою React in Reason і вивчити основи розуму практичним способом, перегляньте мою іншу статтю, де ми створимо гру Tic Tac Toe разом.

Якщо у вас є якісь питання, критики, зауваження чи поради щодо вдосконалення, не соромтесь написати коментар нижче або зв’яжіться зі мною через Twitter або мій блог.