Psst! Eis por que ReasonReact é a melhor maneira de escrever React

Você está usando o React para criar interfaces de usuário? Bem, eu também sou. E agora, você aprenderá por que deve escrever seus aplicativos React usando o ReasonML.

React é uma maneira bem legal de escrever interfaces de usuário. Mas, podemos torná-lo ainda mais legal? Melhor?

Para torná-lo melhor, precisamos identificar seus problemas primeiro. Então, qual é o principal problema do React como uma biblioteca JavaScript?

O React não foi desenvolvido inicialmente para JavaScript

Se você analisar o React com mais atenção, verá que alguns de seus princípios principais são estranhos ao JavaScript. Vamos falar sobre imutabilidade, princípios de programação funcional e sistema de tipos em particular.

A imutabilidade é um dos princípios fundamentais do React. Você não deseja alterar seus adereços ou seu estado porque, se o fizer, poderá sofrer consequências imprevisíveis. Em JavaScript, não temos imutabilidade imediata. Estamos mantendo nossas estruturas de dados imutáveis ​​por uma convenção ou usamos bibliotecas como o immutableJS para alcançá-lo.

O React é baseado nos princípios da programação funcional, pois suas aplicações são composições de funções. Embora o JavaScript tenha alguns desses recursos, como funções de primeira classe, não é uma linguagem de programação funcional. Quando queremos escrever um bom código declarativo, precisamos usar bibliotecas externas como Lodash / fp ou Ramda.

Então, o que há com o sistema de tipos? No React, tivemos PropTypes. Nós os usamos para imitar os tipos de JavaScript, pois não é uma linguagem de tipo estaticamente. Para tirar proveito da digitação estática avançada, precisamos novamente usar dependências externas, como Flow e TypeScript.

Reagir e comparação com JavaScript

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

Existe outra linguagem de programação que seria mais compatível com React que JavaScript?

Felizmente, temos o ReasonML.

Em razão, tiramos a imutabilidade da caixa. Como é baseado no OCaml, a linguagem de programação funcional, também temos esses recursos incorporados na própria linguagem. A razão também nos fornece um sistema de tipos forte por si só.

Comparação de reação, JavaScript e razão

A razão é compatível com os princípios fundamentais do React.

Razão, motivo

Não é um novo idioma. É uma sintaxe e cadeia de ferramentas alternativas para 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).

O motivo, com sua sintaxe do tipo C, torna o OCaml acessível para pessoas provenientes de linguagens comuns, como JavaScript ou Java. Ele fornece uma documentação melhor (em comparação com o OCaml) e uma comunidade crescente em torno dele. Além disso, facilita a integração com a base de código JavaScript existente.

O OCaml serve como idioma de suporte para o Reason. O motivo tem a mesma semântica que o OCaml - apenas a sintaxe é diferente. Isso significa que você pode escrever OCaml usando a sintaxe semelhante ao JavaScript do Reason. Como resultado, você pode tirar proveito dos recursos impressionantes do OCaml, como seu forte sistema de tipos e correspondência de padrões.

Vamos dar uma olhada em um exemplo da sintaxe do Reason.

vamos fizzbuzz = (i) =>
  switch (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => sequência_de_int (i)
  };
para (i em 1 a 100) {
  Js.log (fizzbuzz (i))
};

Embora estejamos usando a correspondência de padrões neste exemplo, ele ainda é bastante semelhante ao JavaScript, certo?

No entanto, a única linguagem utilizável para navegadores ainda é o JavaScript, o que significa que precisamos compilar com ela.

BuckleScript

Um dos recursos avançados do Reason é o compilador BuckleScript, que pega seu código Reason e o compila em JavaScript legível e com bom desempenho, com excelente eliminação de código morto. Você apreciará a legibilidade se estiver trabalhando em uma equipe em que nem todos estão familiarizados com o Reason, pois eles ainda poderão ler o código JavaScript compilado.

A semelhança com o JavaScript é tão próxima que parte do código de Reason não precisa ser alterado pelo compilador. Assim, você pode aproveitar os benefícios da linguagem de tipo estaticamente sem nenhuma alteração no código.

vamos adicionar = (a, b) => a + b;
adicione (6, 9);

Este é um código válido em razão e JavaScript.

O BuckleScript é enviado com quatro bibliotecas: a biblioteca padrão chamada Belt (a biblioteca padrão do OCaml é insuficiente) e as ligações às APIs JavaScript, Node.js e DOM.

Como o BuckleScript é baseado no compilador OCaml, você obtém uma compilação incrivelmente rápida que é muito mais rápida que Babel e várias vezes mais rápida que TypeScript.

Vamos compilar nosso algoritmo FizzBuzz escrito em Motivo para JavaScript.

Compilação de código da razão para JavaScript através do BuckleScript

Como você pode ver, o código JavaScript resultante é bastante legível. Parece que foi escrito por um desenvolvedor JavaScript.

O Reason não apenas compila para JavaScript, mas também para nativo e bytecode. Portanto, você pode escrever um único aplicativo usando a sintaxe Reason e executá-lo no navegador em telefones MacOS, Android e iOS. Existe um jogo chamado Gravitron, de Jared Forsyth, que está escrito em Reason e pode ser executado em todas as plataformas que acabei de mencionar.

Interoperabilidade JavaScript

O BuckleScript também nos fornece interoperabilidade com JavaScript. Não apenas você pode colar o código JavaScript em funcionamento na base de código do Reason, mas também pode interagir com o código do Reason. Isso significa que você pode integrar facilmente o código Reason à sua base de código JavaScript existente. Além disso, você pode usar todos os pacotes JavaScript do ecossistema NPM no seu código Reason. Por exemplo, você pode combinar Flow, TypeScript e Reason juntos em um único projeto.

No entanto, não é assim tão simples. Para usar bibliotecas ou código JavaScript no Reason, é necessário portá-lo para o Reason primeiro por meio de ligações do Reason. Em outras palavras, você precisa de tipos para o seu código JavaScript não digitado para poder tirar vantagem do sistema de tipos fortes da Reason.

Sempre que você precisar usar uma biblioteca JavaScript em seu código do Reason, verifique se a biblioteca já foi portada para o Reason navegando no banco de dados do Reason Package Index (Redex). É um site que agrega diferentes bibliotecas e ferramentas escritas nas bibliotecas Reason e JavaScript com ligações Reason. Se você encontrou sua biblioteca lá, é possível instalá-la como uma dependência e usá-la no aplicativo Reason.

No entanto, se você não encontrou sua biblioteca, precisará escrever as ligações do Reason. Se você está apenas começando com o Reason, lembre-se de que escrever ligações não é algo que você deseja começar, pois é uma das coisas mais desafiadoras no ecossistema do Reason.

Felizmente, estou apenas escrevendo um post sobre como escrever ligações Reason, portanto, fique atento!

Quando você precisa de alguma funcionalidade de uma biblioteca JavaScript, não precisa escrever as ligações do Motivo para uma biblioteca como um todo. Você pode fazer isso apenas para as funções ou componentes que precisa usar.

ReasonReact

Este artigo é sobre como escrever React in Reason, o que você pode fazer graças à biblioteca ReasonReact.

Talvez agora você esteja pensando: "Ainda não sei por que devo usar o React no Reason".

Já mencionamos o principal motivo para fazer isso: o motivo é mais compatível com o React do que com o JavaScript. Por que é mais compatível? Porque o React foi desenvolvido para o Reason, ou mais precisamente, para o OCaml.

Caminho para a Razão

O primeiro protótipo do React foi desenvolvido pelo Facebook e foi escrito em Standard Meta Language (StandardML), um primo do OCaml. Em seguida, foi movido para o OCaml. React também foi transcrito para JavaScript.

Isso ocorreu porque toda a web estava usando JavaScript e provavelmente não era inteligente dizer: "Agora criaremos a interface do usuário no OCaml". E funcionou - a reação ao JavaScript foi amplamente adotada.

Então, nos acostumamos a reagir como uma biblioteca JavaScript. Reagir junto com outras bibliotecas e linguagens - Elm, Redux, Recompose, Ramda e PureScript - tornou popular a programação funcional em JavaScript. E com o surgimento do Flow e do TypeScript, a digitação estática também se tornou popular. Como resultado, o paradigma de programação funcional com tipos estáticos se tornou popular no mundo do front-end.

Em 2016, a Bloomberg desenvolveu e criou o BuckleScript de código aberto, o compilador que transforma o OCaml em JavaScript. Isso lhes permitiu escrever código seguro no front-end usando o sistema de tipo forte do OCaml. Eles pegaram o compilador OCaml otimizado e incrivelmente rápido e trocaram seu código nativo de geração de back-end por um código gerador de JavaScript.

A popularidade da programação funcional, juntamente com o lançamento do BuckleScript, gerou o clima ideal para o Facebook voltar à ideia original do React, que foi inicialmente escrita em uma linguagem ML.

ReasonReact

Eles pegaram a semântica do OCaml e a sintaxe do JavaScript e criaram o Reason. Eles também criaram o wrapper Reason em torno da biblioteca React - ReasonReact - com funcionalidades adicionais, como o encapsulamento dos princípios Redux em componentes com estado. Ao fazer isso, eles retornaram o React às suas raízes originais.

O poder de reagir na razão

Quando o React entrou no JavaScript, ajustamos o JavaScript às necessidades do React, apresentando várias bibliotecas e ferramentas. Isso também significou mais dependências para nossos projetos. Sem mencionar que essas bibliotecas ainda estão em desenvolvimento e as mudanças recentes são introduzidas regularmente. Portanto, você precisa manter essas dependências com cuidado em seus projetos.

Isso adicionou outra camada de complexidade ao desenvolvimento do JavaScript.

Seu aplicativo React típico terá pelo menos estas dependências:

  • digitação estática - Flow / TypeScript
  • imutabilidade - immutableJS
  • roteamento - ReactRouter
  • formatação - Mais bonita
  • linting - ESLint
  • função auxiliar - Ramda / Lodash

Agora vamos trocar o JavaScript React por ReasonReact.

Ainda precisamos de todas essas dependências?

  • digitação estática - embutida
  • imutabilidade - embutido
  • roteamento - incorporado
  • formatação - incorporada
  • fiapos - embutido
  • funções auxiliares - incorporadas

Você pode aprender mais sobre esses recursos internos em minha outra postagem.

No aplicativo ReasonReact, você não precisa dessas e de muitas outras dependências, pois muitos recursos cruciais que facilitam seu desenvolvimento já estão incluídos no próprio idioma. Portanto, manter seus pacotes ficará mais fácil e você não aumentará a complexidade ao longo do tempo.

Isso se deve ao OCaml, que tem mais de 20 anos. É uma linguagem amadurecida com todos os seus princípios básicos em vigor e estáveis.

Embrulhar

No começo, os criadores do Reason tinham duas opções. Para usar JavaScript e, de alguma forma, torná-lo melhor. Ao fazer isso, eles também precisam lidar com seus encargos históricos.

No entanto, eles seguiram um caminho diferente. Eles usaram o OCaml como uma linguagem amadurecida com ótimo desempenho e o modificaram para se parecer com JavaScript.

O React também se baseia nos princípios do OCaml. É por isso que você obtém uma experiência muito melhor do desenvolvedor ao usá-lo com o Reason. O React in Reason representa uma maneira mais segura de criar componentes do React, uma vez que o sistema de tipos fortes está a seu favor e você não precisa lidar com a maioria dos problemas de JavaScript (legado).

Qual é o próximo?

Se você é do mundo do JavaScript, será mais fácil começar com o Reason, devido à semelhança de sintaxe com o JavaScript. Se você programou o React, será ainda mais fácil, pois você pode usar todo o seu conhecimento do React, pois o ReasonReact possui o mesmo modelo mental do React e um fluxo de trabalho muito semelhante. Isso significa que você não precisa começar do zero. Você aprenderá a razão à medida que se desenvolver.

A melhor maneira de começar a usar o Reason em seus projetos é fazê-lo de forma incremental. Já mencionei que você pode pegar o código Reason e usá-lo em JavaScript, e vice-versa. Você pode fazer o mesmo com o ReasonReact. Você pega o componente ReasonReact e o usa no aplicativo React JavaScript e vice-versa.

Essa abordagem incremental foi escolhida pelos desenvolvedores do Facebook que usam o Reason extensivamente no desenvolvimento do aplicativo Facebook Messenger.

Se você deseja criar um aplicativo usando o React in Reason e aprender o básico do Reason de uma maneira prática, verifique meu outro artigo, onde construiremos um jogo Tic Tac Toe juntos.

Se você tiver alguma dúvida, crítica, observação ou dica de melhoria, sinta-se à vontade para escrever um comentário abaixo ou me contate via Twitter ou meu blog.