Por que mudei de AngularJS para React

Em 2011, quando meu código começou a ficar cheio de seletores e retornos de chamada jQuery, o AngularJS veio como um salva-vidas que ajudou no melhor gerenciamento, desenvolvimento rápido e muito mais funcionalidades prontas para uso. A ligação bidirecional do AngularJS e a filosofia de “modelar como a única fonte de verdade” me surpreenderam e reduziram a redundância de dados em todo o meu aplicativo.

Com o tempo, no entanto, descobri que o AngularJS tem alguns pontos problemáticos próprios. Eventualmente, isso me causou frustração suficiente para que eu começasse a procurar soluções alternativas.

Pontos de dor no AngularJS 1.x

• DOM para execução

  Angular depende fortemente do DOM para seu fluxo de execução. No bootstrap padrão das aplicações, ele varre o DOM e o compila com prioridades de diretivas o que dificulta a depuração e teste da ordem de execução.

• Sua própria injeção de dependência

  O JavaScript não possui um gerenciador de pacotes e um resolvedor de dependência próprio. Mas ultimamente, implementações como AMD, UMD e CommonJS têm resolvido muito bem esse problema. Infelizmente, o AngularJS não é útil com nenhum deles. Em vez disso, ele introduz uma injeção de dependência (DI) própria; embora existam implementações não oficiais do AngularJS DI usando o RequireJS.

• A encadernação bidirecional é uma faca de dois gumes

  É tentador usar a ligação bidirecional, mas à medida que a complexidade do seu componente aumenta, isso pode levar a um desastre de desempenho.

  Como a ligação bidirecional afeta o desempenho? Bem, o JavaScript ES5 não possui nenhuma implementação para notificar qualquer alteração em suas variáveis ​​ou objetos, então o Angular usa algo chamado “verificação suja” para rastrear alterações de dados e sincronizá-lo com a interface do usuário. A verificação suja é realizada após qualquer operação realizada no escopo do Angular (ciclo $digest), o que leva a um desempenho mais lento à medida que o número de ligações aumenta.

  Outro problema com a ligação bidirecional é que muitos componentes diferentes na página são capazes de alterar os dados, levando a várias fontes de entrada de dados. Se não for bem tratado, pode levar a uma situação ambígua. Mas, para ser justo, isso é puramente uma questão de implementação.

• Angular tem seu próprio mundo

  Cada operação em Angular deve passar por seu ciclo de resumo ou seus componentes não serão sincronizados com seus modelos de dados. Portanto, se você estiver usando qualquer biblioteca JavaScript existente de terceiros, precisará envolvê-la com a função $apply do Angular se envolver alterações de dados ou precisará convertê-la em um serviço se for uma biblioteca de utilitários. É como reinventar todos os módulos JavaScript disponíveis para Angular.

• Muitos conceitos e curva de aprendizado íngreme

  Aprender Angular requer aprender uma tonelada de conceitos, incluindo módulos, controladores, diretivas, escopos, modelos, funções de vinculação, filtros e injeção de dependência.

Conheça o React

React, a nova biblioteca JS de código aberto do Facebook e Instagram, é uma maneira diferente de escrever aplicativos JavaScript. Quando foi apresentado na JSConf EU em maio de 2013, o público ficou chocado com alguns de seus princípios de design, como “fluxo de dados unidirecional” e “DOM virtual”.

O site oficial do React diz: “React é uma biblioteca JavaScript para construir interfaces de usuário” e sim, apenas interfaces e nada mais. Não é um framework como o AngularJS. Mas você pode escrever componentes independentes que mais ou menos se comparam às diretivas Angular. Visão geral rápida

React repensa as melhores práticas em desenvolvimento web. O Reach incentiva o fluxo de dados unidirecional e acredita em uma filosofia de que os componentes são máquinas de estado acionadas por dados. Enquanto a maioria dos outros frameworks gostam de trabalhar com o DOM e manipulá-lo diretamente, o React odeia o DOM e trabalha para proteger o desenvolvedor dele. O React fornece apenas a API básica necessária para definir qualquer componente de interface do usuário e nada mais. O Reach segue a filosofia UNIX: Pequeno é bonito. Faça uma coisa e faça melhor.

Esta é uma comparação muito legal entre os dois por Pete Hunt (da equipe do Instagram)

É apenas uma biblioteca. Precisamos de um framework com React?

Resposta curta: Sua escolha.

Usando React, você pode construir interfaces de usuário, mas ainda precisamos gerenciar dependências, fazer chamadas AJAX, aplicar filtros de dados. Se precisamos de um framework, por que abandonar o AngularJS?

Frameworks são um conjunto de pacotes e um conjunto de regras. E se eu não precisar de alguns pacotes ou quiser trocar por outro pacote. Como eu faço isso? Precisamos de um gerenciador de pacotes. Como gerenciamos pacotes no AngularJS? A escolha é sua, mas o Angular tem seu próprio mundo. Você precisará envolver todos os pacotes externos no mundo do Angular e usá-lo. Mas React é apenas JavaScript, e qualquer pacote escrito em JavaScript não precisa de nenhum encapsulamento em React.

Portanto, é melhor escolhermos nossos próprios pacotes de um repositório de pacotes como o npm e organizá-los como quisermos. A boa notícia é que o React incentiva o uso do npm, que possui muitos pacotes prontos para uso. Para começar com o React, você pode usar um desses Kits Iniciais Full-Stack

Vantagens do React

Então, por que eu realmente mudei para o React?

Reagir é rápido!

O React tem uma abordagem diferente de outros frameworks. Ele não permite que você trabalhe diretamente com o DOM. Em vez disso, ele introduz uma camada de DOM virtual entre sua lógica JavaScript e o DOM real. Isso ajuda a melhorar a velocidade drasticamente. Em renderizações sucessivas, o React faz um diff no Virtual DOM e atualiza apenas a parte do DOM real que precisa ser atualizada.

O Virtual DOM também ajuda a resolver problemas entre navegadores, pois fornece uma API unificada entre navegadores que funciona até no Internet Explorer 8. (Ufa!)

Tudo é um componente (widget de interface do usuário)

A escrita de componentes de interface do usuário independentes modulariza seu aplicativo e separa as preocupações de cada um deles. Cada componente pode ser desenvolvido e testado isoladamente e, por sua vez, usar outros componentes, aumentando a capacidade de manutenção.

Fluxo de dados unidirecional para a vitória!

Flux é uma arquitetura para criar camadas de dados unidirecionais em aplicativos JavaScript. Ele foi projetado no Facebook junto com a biblioteca de visualização React. Isso torna o desenvolvimento mais simples e facilita o rastreamento e a correção de bugs. O fluxo é mais um conceito do que uma implementação. Pode ser implementado em outros frameworks também. Alex Rattray tem uma implementação muito boa do Flux usando Backbone Collection e Model em React.

JavaScript e nada mais

Os aplicativos da web modernos funcionam de maneira diferente da web tradicional. A camada View precisa ser atualizada com as interações do usuário sem atingir o servidor. E, portanto, View e Controller precisam confiar muito um no outro. Muitos outros frameworks usam mecanismos de modelagem como Handlebars e Mustache para sua camada View, mas o React acredita que as duas partes são tão interdependentes que devem residir em um único local sem o uso de qualquer mecanismo de modelagem de terceiros e sem deixar o escopo de JavaScript.

JavaScript isomórfico

A maior desvantagem dos aplicativos da Web JavaScript de página única é que eles têm limitações quando rastreados pelos mecanismos de pesquisa. O React tem uma solução para isso. O React pode pré-renderizar aplicativos no servidor antes de enviá-los para o navegador e também pode restaurar o mesmo estado no aplicativo ao vivo a partir do conteúdo estático pré-renderizado do servidor. Como os rastreadores do mecanismo de pesquisa dependem muito da resposta do servidor em vez da execução do JavaScript, a pré-renderização desses aplicativos ajuda na otimização do mecanismo de pesquisa.

React funciona bem com RequireJS, Browserify e Webpack

Loaders e bundlers são muito necessários quando você está construindo um aplicativo grande. Infelizmente, a versão atual do JavaScript não fornece um empacotador ou carregador de módulo, embora seja proposto na próxima versão do EcmaScript 6 (System.import). Felizmente temos algumas alternativas como RequireJS e Webpack, que são bastante decentes.

O React é construído com o Browserify, mas se você deseja injetar recursos de imagem e compilar LESS ou CoffeeScript, provavelmente o Webpack é uma opção melhor.

Mudei para React com alguma dor.

• Como o AngularJS é um framework, ele vem com muitos recursos, que incluem um wrapper AJAX no serviço $http, $q como um serviço de promessa, ng-show, ng-hide, ng-class e ng-if como instruções de controle para modelo.

• O React não é um framework, mas uma biblioteca para construir a interface do usuário, então você precisa pensar em todas as outras partes por conta própria. Estou trabalhando em um projeto de código aberto que pode ser usado com React para facilitar seu desenvolvimento, e a comunidade também está contribuindo ativamente com componentes reutilizáveis ​​semelhantes.

  React-components.com é um site de diretório não oficial onde você pode encontrar esses componentes de código aberto.

• A filosofia do React não encoraja você a usar a ligação bidirecional, o que traz muita dor quando você está lidando com elementos de formulário e grades de dados editáveis. No entanto, à medida que você começa a entender o fluxo de dados e os armazenamentos do Flux, as coisas ficam mais claras, simples e fáceis.

O React é novo e, portanto, levará algum tempo para a comunidade crescer.

Angular ganhou enorme popularidade nos últimos tempos e tem um número relativamente grande de extensões disponíveis, como AngularUI e Retangular. A comunidade de código aberto do React é nova, mas está crescendo rapidamente, com extensões como o React Bootstrap. É apenas uma questão de tempo até que tenhamos mais componentes disponíveis, e o React pode ser facilmente usado para o desenvolvimento rápido de aplicativos web.

Conclusão

Se você já usou o AngularJS antes, então você pode odiar o React no início, principalmente por causa de seu fluxo de dados unidirecional e falta de “framework” onde você precisa cuidar de muitas outras coisas sozinho. Mas assim que você se sentir confortável com o padrão de design Flux e a filosofia do React, você perceberá sua beleza.

O Facebook e o Instagram usam React. O novo Atom Editor do Github é construído usando React. O próximo Yahoo Mail está sendo reconstruído em React. Quais outros exemplos você precisa? Experimente o React hoje.