Reagir o desenvolvimento de aplicativos usando ReasonReact

Você usa o React para criar interfaces de usuário? O autor do material, cuja tradução publicamos, diz que ele também trabalha com o React. Aqui ele quer falar sobre por que vale a pena escrever o ReasonML para aplicativos React.



React é uma ferramenta de desenvolvimento de interface muito boa. Você pode torná-lo ainda melhor? Para melhorar seu trabalho com o React, primeiro você precisa entender seus principais problemas. Em particular, um problema cujas origens residem no fato de o React ser uma biblioteca JavaScript.

Reagir e JavaScript

Se você observar com atenção o React, perceberá que alguns dos princípios subjacentes a esta biblioteca são estranhos ao JavaScript. Em particular, estamos falando sobre imutabilidade, sobre os princípios de programação funcional e sobre o sistema de tipos.

A imunidade é um dos princípios básicos do React. Mutações nas propriedades dos componentes ou no estado de um aplicativo são altamente indesejáveis, pois isso pode levar a consequências imprevisíveis. O JavaScript não possui mecanismos padrão para fornecer imunidade. As estruturas de dados são tornadas imutáveis, aderindo a certas convenções ou usando bibliotecas como immutable-js .

A biblioteca React é baseada nos princípios da programação funcional, pois os aplicativos React são composições de funções. Embora o JavaScript tenha alguns recursos de programação funcional, como funções de primeira classe, ele não é uma linguagem de programação funcional. Se você precisar escrever um bom código declarativo em JavaScript, precisará recorrer a bibliotecas de terceiros como Lodash / fp ou Ramda .

O que há de errado com o sistema de tipos? React tem o conceito de PropTypes . É usado para simular tipos em JavaScript, pois esse idioma em si não é estaticamente digitado. Para tirar proveito da digitação estática em JS, novamente, você precisa recorrer a ferramentas de terceiros, como Flow e TypeScript .


Compare React e JavaScript

Como você pode ver, o JavaScript não é compatível com os princípios básicos do React.

Existe uma linguagem de programação melhor que o JavaScript consistente com o React?
Você pode dar uma resposta positiva a esta pergunta. Este idioma é ReasonML .

A razão implementa a imutabilidade. Como ele é baseado no OCaml , uma linguagem de programação funcional, os recursos correspondentes também são incorporados ao Reason. Esse idioma também possui seu próprio sistema de tipos adequado para o React.


Compare React, JavaScript e Razão

Acontece que a Razão é compatível com os princípios básicos do React.

Razão

Razão não é um novo idioma. É uma sintaxe alternativa e um kit de ferramentas semelhante ao JavaScript para OCaml, uma linguagem de programação funcional que existe há mais de 20 anos. O Reason foi criado por desenvolvedores do Facebook que já usavam o OCaml em seus projetos ( Flow , Infer ).


OCaml

A sintaxe do tipo C do Reason disponibiliza o OCaml para programadores familiarizados com linguagens comuns como JavaScript ou Java. A razão fornece ao desenvolvedor uma documentação melhor do que o OCaml, e uma comunidade crescente de entusiastas se formou à sua volta. Além disso, o que está escrito no Reason é fácil de integrar aos projetos JS existentes.


Razão

O núcleo do Reason é o OCaml. O motivo tem a mesma semântica que o OCaml, apenas a sintaxe é diferente. Isso significa que o Reason torna possível escrever código OCaml usando sintaxe semelhante a JavaScript. Como resultado, o programador possui recursos maravilhosos do OCaml, como um sistema estrito de tipos e um mecanismo de correspondência de padrões.

Dê uma olhada no snippet de código Reason para se familiarizar com sua sintaxe.

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)) }; 

Embora esse padrão use um mecanismo de correspondência de padrões, ele permanece muito semelhante ao JavaScript.

O único idioma que funciona nos navegadores é o JavaScript; portanto, para escrever para navegadores em qualquer idioma, precisamos compilá-lo em JavaScript.

BuckleScript

Um dos recursos mais interessantes do Reason pode ser chamado de compilador BuckleScript, que pega o código escrito em Reason e o converte em código JS legível e produtivo, além de eliminá-lo de construções não utilizadas.


BuckleScript

A legibilidade dos resultados do BuckleScript será útil se você trabalhar em uma equipe na qual nem todos estão familiarizados com o Reason. Essas pessoas, pelo menos, poderão ler o código JS resultante.

Às vezes, o código de razão é tão semelhante ao código JS que o compilador não precisa convertê-lo. Com esse estado de coisas, você pode aproveitar os benefícios da digitação estática e escrever código estático do Reason que parece estar escrito em JavaScript.

Aqui está um exemplo de código que funcionará em Reason e JavaScript:

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

O BuckleScript vem com quatro bibliotecas. Essa é uma biblioteca padrão chamada Belt ( a biblioteca padrão do OCaml não é suficiente aqui) e as ligações para JavaScript, Node.js e a API do DOM.

Como o BuckleScript é baseado no compilador OCaml, a compilação é muito rápida - muito mais rápida que Babel e várias vezes mais rápida que TypeScript.

Usando BuckleScript, compilamos o fragmento de código Reason acima que contém a função fizzbuzz() em JavaScript.


Compilando código de razão em JavaScript usando BuckleScript

Como você pode ver, o código JS acabou sendo bastante legível. Parece que foi escrito por um homem.

Os programas escritos em Reason são compilados não apenas em JavaScript, mas também em código nativo e em código de bytes. Como resultado, por exemplo, você pode escrever um aplicativo no Reason e executá-lo em um navegador, no MacOS, em smartphones com Android e iOS. Existe um jogo Gravitron escrito por Jared Forsyth em Reason. Pode ser executado em todas as plataformas acima.

Organização de interação com JavaScript

O BuckleScript possibilita organizar a interação do Reason e do JavaScript. Isso significa não apenas a possibilidade de usar o código JS em funcionamento na base de códigos do Reason, mas também a possibilidade de interação do código gravado no Reason com esse código JavaScript. Como resultado, o código escrito em Reason é fácil de integrar nos projetos JS existentes. Além disso, no código Reason, você pode usar pacotes JavaScript do NPM. Por exemplo, você pode criar um projeto que compartilhe Flow, TypeScript e Reason.

No entanto, nem tudo é tão simples. Para usar o código ou as bibliotecas JavaScript no Reason, primeiro você deve portá-los usando as ligações do Reason. Em outras palavras, para usar o sistema estrito do tipo Reason, precisamos de tipos para código JavaScript regular.

Se você precisar usar qualquer biblioteca JavaScript no código do Reason, primeiro acesse o Reason Package Index ( Redex ) e descubra se essa biblioteca já foi portada para o Reason. O projeto Redex é um catálogo de bibliotecas e ferramentas escritas nas bibliotecas Reason e JavaScript com ligações Reason. Se você conseguiu encontrar a biblioteca necessária nesse diretório, poderá instalá-la como uma dependência e usá-la em um aplicativo Reason.

Se você não encontrou a biblioteca desejada, precisará escrever os fichários. Se você está apenas começando com o Reason, lembre-se de que escrever fichários não é uma tarefa para iniciantes. Essa é uma das tarefas mais difíceis que é preciso resolver para quem programa no Reason. De fato, este é um tópico para um artigo separado.

Se você precisar apenas de algumas funcionalidades limitadas de alguma biblioteca JavaScript, não precisará gravar ligações para toda a biblioteca. Isso só pode ser feito para as funções ou componentes necessários.

ReasonReact

No início do artigo, falamos sobre como ele é dedicado ao desenvolvimento de aplicativos React usando o Reason. Você pode fazer isso graças à biblioteca ReasonReact .

Talvez agora você esteja pensando: "Ainda não entendo por que é necessário escrever aplicativos React no Reason". No entanto, já discutimos o principal motivo para o uso do pacote React e Reason, que é o fato de o React ser melhor compatível com o Reason do que com o JavaScript. Por que isso é assim? O fato é que o React foi criado com base no motivo, ou melhor, no OCaml.

Caminho para ReasonReact

O primeiro protótipo React foi desenvolvido pelo Facebook e foi escrito na Standard Meta Language ( StandardML ), em uma linguagem que é parente do OCaml. Em seguida, o React foi transferido para o OCaml, além disso, o React foi portado para JavaScript. Isso foi feito devido ao fato de toda a Web usar JavaScript e provavelmente não seria razoável fazer declarações como: “Agora vamos escrever a interface do usuário no OCaml”. A tradução de React para JavaScript valeu a pena e levou à ampla distribuição desta biblioteca.

Como resultado, todos estão acostumados a perceber o React como uma biblioteca JS. O React, assim como outras bibliotecas e linguagens como Elm , Redux , Recompose , Ramda e PureScript , ajudaram a popularizar o estilo funcional de programação em JavaScript. E, graças à disseminação do Flow e TypeScript no JavaScript, a digitação estática também se tornou popular. Como resultado, o paradigma da programação funcional usando tipos estáticos se tornou dominante no mundo do desenvolvimento de front-end.

Em 2006, a Bloomberg criou e transferiu para a categoria de projetos de código aberto o compilador BuckleScript, que converte OCaml em JavaScript. Isso lhes permitiu escrever um código de front-end melhor e mais seguro usando o sistema estrito do tipo OCaml. Eles pegaram o compilador OCaml otimizado e muito rápido e o fizeram gerar código JavaScript.

A popularidade da programação funcional e o lançamento do BuckleScript criaram um clima ideal que permitiu ao Facebook retornar à ideia original do React - uma biblioteca originalmente escrita em StandardML.


ReasonReact

Eles misturaram a semântica do OCaml com a sintaxe JavaScript e criaram o Reason. Além disso, eles criaram um wrapper Reason para React, apresentado na forma de uma biblioteca ReasonReact, que possui funções adicionais, como encapsular os princípios do Redux em componentes com estado. Tendo feito isso, eles trouxeram o React de volta às suas origens .

Sobre os recursos de reação no motivo

Quando a biblioteca do React foi traduzida para JavaScript, os recursos do idioma foram personalizados para as necessidades do React, criando várias bibliotecas e ferramentas. Essa abordagem, em particular, significa a necessidade de um grande número de dependências para projetos. Não diremos que essas bibliotecas estão em constante evolução e ocorrem mudanças regularmente nelas, tornando suas novas versões incompatíveis com as antigas. Como resultado, o desenvolvedor deve ser muito sério e cuidadoso ao manter as bibliotecas das quais seus projetos dependem.

Isso adiciona uma camada extra de complexidade ao desenvolvimento do JavaScript. Por exemplo, um aplicativo React típico geralmente contém pelo menos as dependências que podem ser vistas na figura a seguir.


Dependências típicas de aplicativos de reação

Aqui estão as tarefas que essas dependências resolvem:

• Digitação estática - Flow / TypeScript.
• Imunidade - ImutávelJS.
• Roteamento - ReactRouter.
• Formatação de código - mais bonita.
• Linting - ESLint.
• Funções auxiliares - Ramda / Lodash.

Agora usaremos, em vez de React for JavaScript, a biblioteca ReasonReact. Com essa abordagem, precisamos de todas essas dependências?


Mudando para ReasonReact

Depois de analisar a mesma lista de tarefas que foram resolvidas anteriormente usando ferramentas adicionais, descobrimos que todas elas podem ser resolvidas usando as ferramentas ReasonReact integradas. Você pode ler mais sobre eles aqui .

Em um aplicativo preparado pelo ReasonReact, todas essas e muitas outras dependências não são necessárias. O fato é que muitos dos recursos mais importantes que simplificam o desenvolvimento já estão incluídos na linguagem. Como resultado, o trabalho com dependências é simplificado e, à medida que o aplicativo cresce e se desenvolve, esse trabalho não se torna complicado.

Tudo isso é possível graças ao uso da linguagem OCaml, que tem mais de 20 anos. É uma linguagem madura, cujos princípios e mecanismos básicos são testados e estáveis.

O que vem a seguir?

Se você é do mundo JavaScript, é fácil começar com o Reason, porque a sintaxe dessa linguagem é semelhante ao JavaScript. Se você escreveu os aplicativos React antes, a mudança para o Reason será ainda mais fácil, pois você pode usar todo o seu conhecimento no campo do React ao trabalhar com o ReasonReact. No coração do ReasonReact está o mesmo modelo de pensamento do núcleo do React, o processo de trabalhar com eles também é muito semelhante. Isso significa que, quando você muda para o Reason, não precisa começar do zero. Você lidará com a Razão no processo.

A melhor maneira de começar a usar o Reason em seus projetos é introduzir gradualmente fragmentos escritos no Reason. Como já mencionado, o código Reason pode ser usado em projetos JS, bem como o código JS em projetos Reason. Essa abordagem também é aplicável ao usar ReasonReact. Você pode pegar o componente ReasonReact e usá-lo em um aplicativo React tradicional escrito em JavaScript.

Essa é exatamente a abordagem incremental escolhida pelos desenvolvedores do Facebook, que usaram amplamente o Reason ao desenvolver o messenger do Facebook .

Se você deseja escrever um aplicativo React usando o Reason e aprender o básico dessa linguagem na prática, dê uma olhada neste material, onde o desenvolvimento do jogo “Tic Tac Toe” é passo a passo.

Sumário

Os criadores do Reason tinham duas opções. O primeiro foi pegar o JavaScript e, de alguma forma, melhorá-lo. Se eles escolhessem esse caminho, teriam que lidar com as falhas históricas da JS.

Eles, no entanto, escolheram o segundo caminho associado ao OCaml. Eles pegaram o OCaml, uma linguagem madura com excelente desempenho, e a modificaram para se parecer com JavaScript.

O React também se baseia nos princípios do OCaml. É por isso que escrever aplicativos React é muito mais fácil e agradável usando o Reason. Trabalhar com o React in Reason oferece uma abordagem mais estável e segura para a criação de componentes do React, uma vez que um sistema de tipo estrito assegura o desenvolvedor e não precisa lidar com a maioria dos problemas históricos do JavaScript.

Caros leitores! Você já experimentou o ReasonReact?