使用ReasonReact进行应用程序开发

您是否使用React创建用户界面？ 该材料的作者（我们发表了译文）说他也与React一起工作。 在这里，他想谈谈为什么ReasonML值得为React应用程序编写。



React是一个非常好的界面开发工具。 你能做得更好吗？ 为了改善您使用React的工作，您首先需要了解它的主要问题。 特别是，一个问题的根源在于React是一个JavaScript库。

React和JavaScript

如果仔细观察React，您会注意到该库的某些基本原理与JavaScript无关。 特别是，我们谈论的是不变性，功能编程的原理以及类型系统。

免疫是React的基本原则之一。 组件属性或应用程序状态的更改非常不受欢迎，因为这可能导致不可预测的后果。 JavaScript没有提供抗扰性的标准机制。 通过遵守某些约定或使用像immutable-js这样的库，可以使数据结构不可变 。

由于React应用程序是功能的组合，因此React库基于函数式编程的原理。 尽管JavaScript具有某些功能性编程功能，例如一流的功能，但它不是功能性编程语言。 如果需要用JavaScript编写良好的声明性代码，则必须诉诸于Lodash / fp或Ramda之类的第三方库。

类型系统有什么问题？ React具有PropTypes的概念。 由于该语言本身不是静态类型，因此它用于模拟JavaScript中的类型。 为了充分利用JS中的静态类型，必须再次使用第三方工具，例如Flow和TypeScript 。


比较React和JavaScript

如您所见，JavaScript与React的基本原理不兼容。

是否有比React更好的JavaScript语言？
您可以对这个问题给出肯定的答案。 这种语言是ReasonML 。

理性实现不变性。 由于它基于功能性编程语言OCaml ，因此相应的功能也内置在Reason中。 这种语言也有自己的适用于React的类型系统。


比较React，JavaScript和原因

事实证明，Reason与React的基本原理兼容。

原因

原因不是一种新语言。 它是OCaml的另一种类似于JavaScript的语法和工具包，OCaml是一种功能编程语言，已有20多年的历史了。 原因是由Facebook的开发人员创建的，他们已经在其项目中使用了OCaml（ Flow ， Infer ）。


OCaml

Reason的C语言语法使OCaml对熟悉JavaScript或Java等常见语言的程序员可用。 与OCaml相比，Reason为开发人员提供了更好的文档，并且围绕他的爱好者不断发展。 此外，使用Reason编写的内容易于与现有JS项目集成。


原因

原因的核心是OCaml。 原因与OCaml具有相同的语义，只是语法不同。 这意味着Reason使得可以使用类似JavaScript的语法编写OCaml代码。 结果，程序员具有出色的OCaml功能，例如严格的类型系统和模式匹配机制。

查看一下原因代码片段，以熟悉其语法。

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，因此，为了以任何语言为浏览器编写代码，我们需要在JavaScript中进行编译。

BuckleScript

Reason最为有趣的功能之一可以称为BuckleScript编译器，该编译器将用Reason编写的代码转换为可读且高效的JS代码，此外，还可以清除未使用的构造。


BuckleScript

如果您在并非每个人都熟悉Reason的团队中工作，那么BuckleScript结果的可读性将派上用场。 至少这些人将能够阅读生成的JS代码。

原因代码有时与JS代码非常相似，以至于编译器根本不需要对其进行转换。 在这种情况下，您可以享受Reason静态类型的好处，并编写看起来像用JavaScript编写的代码。

这是可以在Reason和JavaScript中使用的代码示例：

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

BuckleScript带有四个库。 这是一个称为Belt的标准库（这里的OCaml标准库还不够），以及JavaScript，Node.js和DOM API的绑定。

由于BuckleScript基于OCaml编译器，因此编译非常快 -比Babel快得多，比TypeScript快几倍。

使用BuckleScript，我们在JavaScript中编译了上面的Reason代码片段，其中包含fizzbuzz()函数。


使用BuckleScript在JavaScript中编译原因代码

如您所见，JS代码变得可读性强。 看起来好像是男人写的。

用Reason编写的程序不仅可以用JavaScript进行编译，还可以使用本机代码和字节代码进行编译。 因此，例如，您可以在Reason上编写应用程序，然后在MacOS上的浏览器，运行Android和iOS的智能手机上运行该应用程序。 贾里德·福赛斯（Jared Forsyth）在理性上有一款Gravitron游戏。 它可以在上述所有平台上运行。

与JavaScript交互的组织

BuckleScript使组织Reason和JavaScript的交互成为可能。 这不仅意味着有可能在Reason代码库中使用有效的JS代码，而且还意味着有可能将使用Reason语言编写的代码与此JavaScript代码进行交互。 结果，用Reason编写的代码很容易集成到现有的JS项目中。 此外，在原因代码中，您可以使用NPM的JavaScript包。 例如，您可以创建共享Flow，TypeScript和Reason的项目。

但是，一切并非如此简单。 为了在Reason中使用JavaScript代码或库，您必须首先使用Reason绑定移植它们。 换句话说，为了使用严格的Reason类型系统，我们需要常规JavaScript代码的类型。

如果您需要在原因代码中使用任何JavaScript库，则应首先转到原因包索引（ Redex ），然后确定该库是否已移植到Reason。 Redex项目是用Reason和带有Reason绑定的JavaScript库编写的库和工具的目录。 如果设法在此目录中找到必要的库，则可以将其安装为依赖项，并在Reason应用程序中使用它。

如果找不到所需的库，则必须自己编写活页夹。 如果您刚开始使用Reason，请记住，编写活页夹不是初学者的任务。 对于那些使用Rational进行编程的人来说，这是必须解决的最困难的任务之一。 实际上，这是另一篇文章的主题。

如果只需要某些JavaScript库的某些有限功能，则无需为整个此类库编写绑定。 只能对必要的功能或组件执行此操作。

原因反应

在本文的开头，我们讨论了它如何专门用于使用Reason开发React应用程序。 您可以通过ReasonReact库来执行此操作 。

也许现在您在想：“我仍然不明白为什么要用Reason编写React应用程序。” 但是，我们已经讨论了使用React和Reason捆绑软件的主要原因，这就是说React与Reason的兼容性比与JavaScript的兼容性更好。 为什么会这样呢？ 问题是React是基于Reason或基于OCaml创建的。

理性之路

第一个React原型是由Facebook开发的，并且是使用OCaml的相对语言使用标准元语言（ StandardML ）编写的。 然后将React转移到OCaml，此外，将React移植到JavaScript。 这样做是由于整个Web都使用JavaScript，并且做出这样的声明可能是不合理的：“现在我们将在OCaml上编写UI”。 从React到JavaScript的翻译获得了回报，并导致了该库的广泛分发。

结果，每个人都习惯于将React视为JS库。 React以及其他库和语言（例如Elm ， Redux ， Recompose ， Ramda和PureScript ）已帮助普及了JavaScript编程的功能样式。 由于Flow和TypeScript在JavaScript中的广泛应用，静态类型也变得很流行。 结果，在前端开发领域，使用静态类型的函数式编程已成为主流。

2006年， 彭博社创建了BuckleScript编译器并将其转移到开源项目类别中，该编译器将OCaml转换为JavaScript。 这使他们可以使用严格的OCaml类型系统编写更好，更安全的前端代码。 他们采用了经过优化且非常快速的OCaml编译器，并使其生成JavaScript代码。

函数式编程的普及以及BuckleScript的发布创造了一种理想的氛围，使Facebook可以返回到React的原始想法-一个最初用StandardML编写的库。


原因反应

他们将OCaml语义与JavaScript语法混合在一起，并创建了Reason。 此外，他们还为React创建了一个Reason包装器，以ReasonReact库的形式提供，它具有其他功能，例如将Redux原理封装在有状态的组件中。 这样做之后，他们将React带回了它的起源 。

关于合理的React功能

当将React库翻译成JavaScript时，通过创建各种库和工具，可根据React的需求对语言的功能进行定制。 尤其是，这种方法意味着需要大量依赖项目。 我们不会说此类库在不断发展，并且经常在其中进行更改，从而使其新版本与旧版本不兼容。 因此，开发人员必须非常认真和谨慎地维护其项目所依赖的库。

这为JavaScript开发增加了一层额外的复杂性。 例如，典型的React应用程序通常至少包含依赖关系，如下图所示。


典型的React应用依赖

这些依赖项可以解决以下任务：

• 静态类型-Flow / TypeScript。
• 免疫-ImmutableJS。
• 路由-ReactRouter。
• 代码格式化-更漂亮。
• Linting-ESLint。
• 辅助功能-Ramda / Lodash。

现在，我们将使用ReasonReact库而不是React for JavaScript。 通过这种方法，我们需要所有这些依赖吗？


切换到ReasonReact

在分析了以前使用其他工具可以解决的相同任务列表之后，我们发现可以使用内置的ReasonReact工具解决所有任务。 您可以在此处阅读有关它们的更多信息。

在ReasonReact准备的应用程序中，不需要所有这些依赖关系和许多其他依赖关系。 事实是，简化语言的许多最重要的功能已经包含在该语言中。 结果，简化了依赖项的工作，并且随着应用程序的增长和发展，这项工作不会变得复杂。

由于使用了20多年的OCaml语言，所有这些都是可能的。 这是一门成熟的语言，其基本原理和机制经过时间的考验和稳定。

接下来是什么？

如果您是来自JavaScript世界的人，那么使用Reason会很容易，因为该语言的语法类似于JavaScript。 如果您之前编写过React应用程序，那么切换到Reason将会更加轻松，因为您可以在使用ReasonReact时使用React领域的全部知识。 ReasonReact的核心与React的核心一样，具有相同的思维模式，使用它们的过程也非常相似。 这意味着当您切换到Reason时，您不必从头开始。 您将在此过程中处理Reason。

在您的项目中开始使用Reason的最佳方法是逐步将用Reason编写的片段引入其中。 如前所述，Reason代码可以在JS项目中使用，也可以在原因项目中使用JS代码。 当使用ReasonReact时，此方法也适用。 您可以使用ReasonReact组件，并在用JavaScript编写的传统React应用程序中使用它。

这正是Facebook开发人员选择的增量方法，他们在开发Facebook Messenger时广泛使用了Reason。

如果您想使用Reason编写React应用程序并在实践中学习该语言的基础知识，请查看此材料，其中逐步开发了“井字游戏”游戏。

总结

Reason的创建者有两种选择。 首先是采用JavaScript并以某种方式进行改进。 如果他们选择这条道路，他们将不得不处理JS的历史缺陷。

但是，他们选择了与OCaml相关的第二条路径。 他们选择了OCaml（一种性能卓越的成熟语言），并将其修改为类似于JavaScript。

React也基于OCaml的原理。 这就是为什么使用Reason编写React应用程序变得更加轻松和有趣的原因。 在理性中使用React提供了一种更稳定和安全的方法来创建React组件，因为严格的类型系统可以确保开发人员而且他不必面对大多数历史JavaScript问题。

亲爱的读者们！ 您是否尝试过ReasonReact？