Psst! Вот почему ReasonReact – самый лучший способ написать React

1656533788 psst vot pochemu reasonreact – samyj luchshij sposob napisat react

Вы используете React для создания пользовательских интерфейсов? Ну, я тоже. Теперь вы узнаете, почему вы должны писать свои программы React с помощью ReasonML.

React – это достаточно крутой способ писать интерфейсы пользователя. Но можем ли мы сделать это еще прохладнее? Лучше?

Чтобы сделать его лучше, мы должны сначала определить его проблемы. Итак, какова основная проблема React как библиотеки JavaScript?

Сначала React не разрабатывался для JavaScript

Если вы внимательнее посмотрите на React, вы увидите, что некоторые из его основных принципов чужды JavaScript. Поговорим о неизменности, принципах функционального программирования и системе типов в частности.

Неизменяемость является одним из основных принципов React. Вы не хотите менять свой реквизит или свое состояние, потому что если вы это сделаете, вы можете ощутить непредсказуемые последствия. В JavaScript у нас нет неизменяемости из коробки. Мы сохраняем наши структуры данных неизменными по конвенции, или используем библиотеки, такие как immutableJS для достижения этого.

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

Итак, что с системой типов? В React мы имели PropTypes. Мы использовали их для имитации типов в JavaScript, поскольку сам язык не является статически типизированным. Чтобы воспользоваться преимуществами расширенной статической типизации, нам снова нужно использовать внешние зависимости, такие как Flow и TypeScript.

MBTOborji3cqg5Fulhsv9cA3tiEoSi8fu3l4
React и сравнение JavaScript

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

Существует ли другой язык программирования, который был бы более совместим с React, чем JavaScript?

К счастью, у нас есть ReasonML.

В Reason мы получаем неизменность из коробки. Поскольку он основан на OCaml, функциональном языке программирования, мы также имеем следующие функции, встроенные в сам язык. Reason также дает нам сильную систему типов самостоятельно.

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

Reason совместима с основными принципами React.

Причина

Это не новый язык. Это альтернативный JavaScript-подобный синтаксис и цепочка инструментов для OCaml, функционального языка программирования, который существует уже более 20 лет. Reason создали разработчики Facebook, уже использовавшие OCaml в своих проектах (Flow, Infer).

iZOPlVop1OKOO36dranfKTTg9P0b0PGtCR6x

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

FeHSk51tA2kwbv2sVbu-QinVHCzYipvQUMWp

OCaml служит языком поддержки Reason. Reason имеет ту же семантику, что и OCaml, только синтаксис отличается. Это означает, что вы можете писать OCaml, используя синтаксис Reason, подобный JavaScript. В результате вы можете воспользоваться преимуществами отличных функций OCaml, таких как сильная система типов и соответствие шаблону.

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

let fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int(i)
  };
for (i in 1 to 100) {
  Js.log(fizzbuzz(i))
};

Хотя мы используем соответствие шаблона в этом примере, оно все еще очень похоже на JavaScript, не правда ли?

Однако единственным языком, который можно использовать для браузеров, все еще остается JavaScript, то есть нам нужно его скомпилировать.

BuckleScript

X36FEoHL7z2YWiiLNhNWbOy0Wx5O7FTEerBX

Одной из мощных функций Reason является компилятор BuckleScript, который берет ваш код Reason и компилирует его в читаемый и производительный JavaScript с отличным устранением мертвого кода. Вы оцените читабельность, если вы работаете в команде, где не все знакомы с Reason, поскольку они все равно смогут прочесть скомпилированный код JavaScript.

Сходство с JavaScript настолько близко, что часть кода Reason компилятор вообще не нуждается в изменениях. Таким образом, вы можете наслаждаться преимуществами языка статического типа без изменений в коде.

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

Это действительный код как в Reason, так и JavaScript.

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

Поскольку BuckleScript основан на компиляторе OCaml, вы получите очень быструю компиляцию, которая гораздо быстрее, чем Babel, и в несколько раз быстрее, чем TypeScript.

Давайте компилируем наш алгоритм FizzBuzz, написанный на Reason, JavaScript.

IQVd0AQHgI7i26a21uf9kALk6xi2CzpGcoiM
Компиляция кода Reason на JavaScript через BuckleScript

Как видите, полученный код JavaScript достаточно читабельный. Похоже, его написал разработчик JavaScript.

Reason компилирует не только в JavaScript, но и в нативный и байт-код. Таким образом, вы можете написать одно приложение, используя синтаксис Reason, и иметь возможность запускать его в браузере на телефонах MacOS, Android и iOS. Существует игра под названием Gravitron от Джареда Форсайта, написанная на Reason, и ее можно запускать на всех платформах, которые я только что упомянул.

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

BuckleScript также обеспечивает нам совместимость JavaScript. Вы можете не только вставить свой рабочий код JavaScript в базу кодов Reason, но и ваш код причины может взаимодействовать с этим кодом JavaScript. Это означает, что вы можете легко интегрировать код Reason в существующую кодовую базу JavaScript. Кроме того, вы можете использовать все пакеты JavaScript из экосистемы NPM в вашем коде причины. К примеру, вы можете объединить Flow, TypeScript и Reason вместе в одном проекте.

Однако это не так-то просто. Чтобы использовать библиотеки или JavaScript в Reason, необходимо сначала перенести их на Reason через привязки Reason. Иными словами, вам нужны типы для вашего нетипизированного кода JavaScript, чтобы воспользоваться преимуществами сильной системы типов Reason.

Каждый раз, когда вам нужно использовать библиотеку JavaScript в коде Reason, проверьте, была ли библиотека перенесена на Reason, просмотрев базу данных Reason Package Index (Redex). Это веб-сайт, объединяющий различные библиотеки и инструменты, написанные на Reason и библиотеках JavaScript с привязками Reason. Если вы нашли свою библиотеку, вы можете просто установить ее как зависимость и использовать ее в своей программе Reason.

Однако если вы не нашли свою библиотеку, вам придется самостоятельно написать привязки Reason. Если вы только начинаете работать с Reason, помните, что написание привязок – это не то, с чего вы хотите начинать, поскольку это одна из самых сложных вещей в экосистеме Reason.

К счастью, я просто пишу сообщение о написании привязок Reason, поэтому следите за обновлениями!

Если требуется определенная функциональность библиотеки JavaScript, вам не нужно писать привязки Reason для библиотеки в целом. Это можно сделать только для функций или компонентов, которые необходимо использовать.

ReasonReact

Эта статья посвящена написанию React в Reason, что вы можете сделать благодаря библиотеке ReasonReact.

Возможно, вы сейчас думаете: «Я все еще не знаю, почему я должен использовать React in Reason».

Мы уже упоминали главную причину этого – Reason более совместим с React, чем JavaScript. Почему он более совместим? Потому что React был разработан для Reason, а точнее для OCaml.

Путь к ReasonReact

biX58BUYBBeSlVU4t3h4n-wBYAqi8oFUXReH

Первый прототип React был разработан Facebook и был написан на стандартном языке (StandardML), двоюродном брате OCaml. Затем его переместили в OCaml. React также был транскрибирован на JavaScript.

Это произошло потому, что весь Интернет использовал JavaScript, и, вероятно, было глупо говорить: «Теперь мы создадим пользовательский интерфейс в OCaml». И это сработало – React в JavaScript получил широкое распространение.

Итак, мы привыкли к React как библиотеке JavaScript. React вместе с другими библиотеками и языками – Elm, Redux, Recompose, Ramda и PureScript – сделали функциональное программирование на JavaScript популярным. И с развитием Flow и TypeScript статический тип печати также стал популярным. В результате парадигма функционального программирования со статическими типами стала основной в мире front-end.

В 2016 году Bloomberg разработал BuckleScript с открытым кодом, компилятор, превращающий OCaml в JavaScript. Это позволило им писать безопасный код на интерфейсе с помощью мощной системы типов OCaml. Они взяли оптимизированный и чрезвычайно быстрый компилятор OCaml и заменили его генерирующий внутренний код на код, который генерирует JavaScript.

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

XrSsanYlN4ilFGc7k97yqreJTWjNx0IQrOHl
ReasonReact

Они приняли семантику OCaml и синтаксис JavaScript и создали Reason. Они также создали обертку Reason вокруг React – библиотеку ReasonReact – с дополнительными функциональными возможностями, такими как инкапсуляция принципов Redux в компонентах с определением состояния. Таким образом они вернули React к его начальным корням.

Сила React in Reason

Когда React вошел в JavaScript, мы настроили JavaScript в соответствии с потребностями React, представив различные библиотеки и инструменты. Это также означало больше зависимости для наших проектов. Не говоря уже о том, что эти библиотеки все еще находятся на стадии разработки, а критические изменения вносятся регулярно. Поэтому вам нужно аккуратно поддерживать эти зависимости в своих проектах.

Это добавило еще один уровень сложности в разработке JavaScript.

Ваша типичная программа React будет иметь по крайней мере следующие зависимости:

AAN8F1esKaCoYudXoz90QfiWd40IrF8B4IRc
  • статический ввод — Flow/TypeScript
  • неизменность – неизменный JS
  • маршрутизация — ReactRouter
  • форматирование — приятнее
  • linting — ESLint
  • вспомогательная функция — Ramda/Lodash

Теперь поменяем JavaScript React на ReasonReact.

Нужны ли нам все эти зависимости?

tMqUDBPlT3UvrGwf9UqaBTXanS6QgUqEmosi
  • статический ввод — встроенный
  • неизменность — встроенный
  • маршрутизация встроенный
  • форматирование встроенный
  • ворсинка встроенный
  • вспомогательные функции встроенный

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

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

Это благодаря OCaml, которому больше 20 лет. Это зрелый язык со всеми своими основными действующими и стабильными принципами.

Подведение итогов

Первоначально у создателей Reason было два варианта. Чтобы взять JavaScript и как-то улучшить его. Делая это, им тоже придется справиться с его историческим бременем.

Однако они пошли по другому пути. Они взяли OCaml как зрелый язык с превосходной производительностью и модифицировали его, чтобы он напоминал JavaScript.

React основан на принципах OCaml. Вот почему вы получите гораздо лучший опыт разработчика, когда используете его с Reason. React in Reason представляет собой более безопасный способ создания компонентов React, поскольку сильная система типов поддерживает вашу спину, и вам не нужно сталкиваться с большинством проблем с JavaScript (устаревшими).

Что дальше?

yD9SkLowMRhycLIc0Zz4X0VjYig9qDQb7EjK

Если вы пришли из мира JavaScript, вам будет легче начать работу с Reason из-за его синтаксического сходства с JavaScript. Если вы программировали на React, вам будет еще проще, поскольку вы можете использовать все свои знания по React, поскольку ReasonReact имеет ту же ментальную модель, что и React, и очень похож рабочий процесс. Это значит, что вам не нужно начинать с нуля. Развиваясь, вы научитесь разуму.

Лучший способ начать использовать Reason в своих проектах – делать это постепенно. Я уже упоминал, что вы можете взять код Reason и использовать его в JavaScript и наоборот. Вы можете сделать то же самое с ReasonReact. Вы берете компонент ReasonReact и используете его в своей программе React JavaScript, и наоборот.

Этот поэтапный подход был выбран разработчиками Facebook, широко использующими Reason при разработке программы Facebook Messenger.

Если вы хотите создать приложение с помощью React in Reason и на практике изучить основы Reason, посмотрите мою другую статью, где мы вместе создадим игру в крестики-нолики.

Если у вас есть вопросы, критика, замечания или советы по улучшению, не стесняйтесь написать комментарий ниже или связаться со мной через Twitter или мой блог.

Добавить комментарий

Ваш адрес email не будет опубликован.