Ferramentas mais interessantes para você estudar.
Provavelmente você já percebeu que o ecossistema do React é muito aquecido e diversas tecnologias por volta dessa ferramenta surgem todos os dias: GraphQL, Flow, NextJS, Apollo, Relay, etc…
Claro que seu tempo é limitado e por isso vamos analisar nesse post as ferramentas mais interessantes para você estudar.
Chega de conversa fiada e bora pra lista!
1. Apollo / Relay (GraphQL)
O GraphQL está crescendo muito e, com isso, todo o ecossistema por volta dessa tecnologia também. Se você ainda não sabe o que é GraphQL, eu dei uma breve introdução sobre suas vantagens nesse post.
O Apollo e o Relay quando aplicados junto ao React servem como clientes para uma API construída com GraphQL, ou seja, são utilizados diretamente para consumir os dados do back-end.
As duas ferramentas facilitam o entendimento dos tipos de requisições, parâmetros, filtros, paginação e seus resultados para o React, que por sua vez, consegue ler os dados retornados da requisição e renderizar em um componente.
Mas qual utilizar, Apollo ou Relay? Na minha opinião, hoje, é melhor ir pelo Apollo. Com uma sintaxe mais clara e com menor curva de aprendizado o Apollo está crescendo desenfreadamente. Por outro lado, o Relay tem se mostrado uma alternativa mais apta para escalabilidade e estruturas mais complexas por lidar melhor com cache em grandes aplicações, por exemplo.
Ah, vale a pena dar uma olhada já que o Relay está tentando diminuir a complexidade do código com sua nova versão Relay Modern (quem sabe o Apollo não fica pra trás).
2. Flow / TypeScript (Tipagem estática)
Outro ponto que é praticamente essencial para TODOS programadores React é a tipagem estática. Geralmente aprendemos a utilizar apenas as PropTypes que fazem a tipagem de propriedades dos nossos componentes de forma dinâmica, isso é, o erro acontece apenas enquanto a aplicação está executando.
Com o crescimento e adoção de técnicas para tipagem estática, bibliotecas como TypeScript e Flow tem se tornado cada vez mais comum por oferecer tipagem para propriedades, estado, parâmetros, retornos de funções, etc, já durante o desenvolvimento, ou seja, o seu editor mostrará qualquer erro de parâmetro sendo passado em tempo-real.
O que mudaria basicamente em um componente ReactJS utilizando Flow, por exemplo? Veja o exemplo abaixo de um componente sem tipagem estática:
// Sem flow import React, { Component } from 'react'; export default class Button extends Component { state = { counter: 0, }; updateCounter = () => { this.setState(state => ({ counter: state.counter + 1 })); }; render() { return ( <button onClick={this.updateCounter} type={this.props.type}> {this.props.children} </button> ); } }
Agora adicionando tipagem às propriedades e estado do componente:
// Com flow import * as React from 'react'; type Props = { type: string, children: React.Node, }; type State = { count: number, }; export default class Button extends Component<Props, State> { state = { counter: 0, }; updateCounter = () => { this.setState(state => ({ counter: state.counter + 1 })); }; render() { return ( <button onClick={this.updateCounter} type={this.props.type}> {this.props.children} </button> ); } }
Veja que apenas repassamos um objeto informando o tipo de valores para cada propriedade e informação no estado do componente. A tipagem estática vai muito além do que apenas isso mas a essência é essa.
Mas qual utilizar? Flow ou TypeScript? Hoje estamos em um cenário com o TypeScript dominando grande parte do ecossistema Javascript e o Flow crescendo aos poucos. Já que o Flow é uma ferramenta da Facebook provavelmente veremos ela sendo “empurrada” dentro das bibliotecas do Facebook como ReactJS e React Native.
Nesse caso a decisão é a seguinte, se você está estudando para ter algum resultado imediato em alguma vaga, por exemplo, vá de TypeScript. Caso você esteja apostando para o futuro vá de Flow já que provavelmente o suporte será mais intenso à essa alternativa dentro do React.