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

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

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

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

React изначально не был разработан для JavaScript

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

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

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

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

Реакт и сравнение JavaScript

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

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

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

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

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

Разум совместим с основными принципами React.

причина

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

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

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

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

let fizzbuzz = (i) =>
  переключатель (я мод 3, я мод 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Жужжание"
  | _ => string_of_int (i)
  };
для (я от 1 до 100) {
  Js.log (FizzBuzz (я))
};

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

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

BuckleScript

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

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

let add = (a, b) => a + b;
добавить (6, 9);

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

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

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

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

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

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

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

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 самостоятельно. Если вы только начинаете с Reason, имейте в виду, что написание привязок - это не то, с чего вы хотите начать, поскольку это одна из наиболее сложных задач в экосистеме Reason.

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

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

ReasonReact

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

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

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

Дорога к ReasonReact

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

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

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

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

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

ReasonReact

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

Сила Реакции в Разуме

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

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

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

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

Давайте теперь поменяем 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 в своих проектах - делать это постепенно. Я уже упоминал, что вы можете взять код Reason и использовать его в JavaScript, и наоборот. Вы можете сделать то же самое с ReasonReact. Вы берете свой компонент ReasonReact и используете его в своем приложении React JavaScript, и наоборот.

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

Если вы хотите создать приложение с использованием React в Reason и изучить основы Reason на практике, ознакомьтесь с моей другой статьей, где мы вместе создадим игру Tic Tac Toe.

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