Artigo de Scott Taylor, publicado originalmente pelo New York Times. A tradução foi feita pela Redação iMasters com autorização. 

 

O website do The New York Times está mudando, e a tecnologia que estamos utilizando para realizar a mudança também está mudando.

Conforme o novo website for sendo apresentado durante os próximos meses, uma olhada por trás das mudanças apresentará uma quantidade de novas tecnologias, desenvolvidas para deixar o site mais rápido e mais fácil de ser utilizado – para os leitores, mais consideravelmente, mas também para nossos desenvolvedores.

No centro disso, está a adoção do React, Relay e GraphQL.

O Problema que estamos solucionando

Há mais de um ano, quando começamos a conversar sobre a tecnologia que seria utilizada em nosso novo site, simplificar nossa pilha tecnológica era uma de nossas maiores prioridades.

Nossos sites atuais para desktop e para plataformas móveis são escritos em linguagens completamente diferentes. Para desktop é utilizado predominantemente o PHP; para dispositivos móveis é utilizado o Node. Outros produtos, como os sites em idiomas estrangeiros, são executados em suas bases de códigos únicas (Espanhol, Chines). Alguns nem estão enquadrados em nosso Sistema de Gerenciamento de Conteúdo, o Scoop. Todos esses sites leem os dados de diferentes origens e de maneiras diferentes. É difícil encontrar um denominador comum entre todos.

Se eu quiser desenvolver um novo aplicativo amanhã, existem chances de eu precisar:

• Obter credenciais de vários web services;
• Escrever um cliente HTTP (pela enésima vez) para interagir com esses web services;
• Criar minha camada de visualização, provavelmente do zero, pois não existe um repositório real para os componentes do NYT.

Nós achamos que seria bom se existisse apenas um lugar para adicionarmos e buscarmos informações e uma maneira de se autenticar nele. Também seria útil se existisse uma linguagem comum e um repositório para a criação e reutilização de componentes. Se um novo desenvolvedor se juntar a nossa equipe, eu quero mostrar para ele uma única página de documentação que explique como começar a fazer as coisas – e que ele possa começar a construir os aplicativos – de preferência – no mesmo dia.

Esse não é um cenário dos sonhos. Estamos nos movendo em sua direção. Esse futuro está no Relay e no GraphQL.

GraphQL e Relay

O Relay é um projeto open source do Facebook que apresenta um framework que eles têm utilizado internamente por anos. É a cola que une os componentes escritos em React com os dados recuperados dos servidores GraphQL. O Relay é escrito em JavaScript, e estamos utilizando ele como base para o código de nosso novo website para executar nossas versões desktop e móvel como uma, utilizando o Node.

O GraphQL é uma “linguagem query para APIs”, que tem uma implementação padrão para o Node. O Facebook desenvolveu ele para obter uma fonte de dados que possa evoluir sem causar problemas no código existente e para favorecer a velocidade em aparelhos móveis de baixa potência. O esquema pode evoluir, e não deveria apresentar problemas. Os produtos são descritos em gráficos e consultas, ao invés da noção REST de endpoints.

Funciona assim: as consultas GraphQL contém nós, e somente os nós que solicitamos são enviados como resposta. Os nós GraphQL não tem que representar uma estrutura de dados uniforme – cada nó pode ser resolvido de uma maneira personalizada. Aqui está um exemplo simples de busca GraphQL:

{
  me {
    name
    age 
    friends {
      id
      name  
    } 
  }
}

Não importa como a consulta é resolvida. O trabalho duro inicial é projetar ele de uma maneira que sobrevida às reestruturas, migrações no backend e mudanças de frameworks.

Uma consulta pode ser resolvida por múltiplas fontes de dados: APIs REST, bancos de dados, um arquivo JSON. Um produto pode começar retornando dados a partir de um arquivo CSV simples, e depois pode ser estendido para retornar dados a partir de um cluster de bancos de dados ou armazenamentos externos como o BigTable.

O GraphQL é simplesmente um repositório para consultas. Ele também traz uma ferramenta chamada GraphiQL que permite que você visualize e corrija suas consultas visualmente. E o Facebook tornou a biblioteca open-source, chamada DataLoader, que facilita consultar em vários pontos de backend assincronamente sem ter que escrever uma lógica Promise personalizada que acabe em outros retornos.

O Relay funciona como um parceiro para o GraphQL e o React. Uma busca de alto nível geralmente acontece em uma rota – um padrão URL que carrega um componente quando existe a combinação.

// queries/Page.js

import { graphql } from 'react-relay';

const PageQuery = graphql`
  query Page_Query($slug: String!) {
    viewer {
      ...Page_viewer
    }
  }
`;

// routes/index.js
import Route from 'found/lib/Route';
import Page from 'routes/Page';
import PageQuery from 'queries/Page';
<Route
  path=":slug"
  Component={Page}
  query={PageQuery}
  render={renderProp}
/>

Os “fragmentos” GraphQL são co-localizados com seus componentes React. Um componente descreve quais fatias de informação ele precisa em certos tipos. As consultas Relay “espalham” os fragmentos de outros componentes. Nesse caso particular, o termo é extraído do caminho URL e passado para nossa consulta GraphQL. O componente da página será preenchido com uma propriedade de visualização que contenha os dados especificados abaixo:

// routes/Page/index.js
import { graphql, createFragmentContainer } from 'react-relay';
import styles from './Page.scss';
const Page = ({ viewer: { page } }) => {
  if (!page) {
    return <Error />;
  }

  const { title, content, featuredMedia } = page;

  return (
    <article className={styles.content}>
      <header>
        <h1 className={styles.title}>{title}</h1>
      </header>
      {featuredMedia && <Media media={featuredMedia} />}
      <section dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
};

export default createFragmentContainer(
  Page,
  graphql`
    fragment Page_viewer on Viewer {
      page(slug: $slug) {
        title
        content
        featuredMedia {
          ... on Image {
            source_url
          }
          ...Media_media
        }
      }
    }
  `
);

Conforme os componentes do React se tornam mais aninhados, as consultas podem se tornar mais complexas. No Relay clássico, todas as lógicas das consultas aconteciam em tempo de execução. Com o Relay Moderno, as consultas agora são executadas em tempo de construção e ficam estáticas no tempo de execução. Isso é ótimo para a performance.

Um Aviso

Migrar do clássico para o moderno pode ser um grande salto. O projeto forneceu um guia de compatibilidade para permitir ao seu código adotar de maneira incremental novas funcionalidades, mas a natureza fragmentada do ecossistema Node pode tornar isso complexo. Sua base de código pode estar na versão mais nova, mas algumas das suas dependências podem estar ligadas à uma versão anterior.

Nós tratamos muita complexidade entre as atualizações e dependências utilizando nosso projeto open source, kyt. O Relay moderno é uma melhoria massiva que requer uma transferência do código antigo para o novo.

No entanto, os benefícios são empolgantes. Por padrão, as consultas GraphQL são enviadas para o servidor pelo Relay como um corpo HTTP POST contendo o texto de uma pesquisa e as variáveis necessárias para preenche-los. As pesquisas compiladas pelo Relay moderno em tempo de construção podem ser mantidas em uma base de dados, e as identificações podem ser enviadas para o servidor GraphQL. Nós buscamos tirar vantagem dessa otimização.

Tem sido empolgante mover nossa base de código para o React e definir as funcionalidades que o kyt fornece, tais como os Modulos CSS. Estamos finalmente criando o repositório central de componentes que havíamos aguardado.

Conforme migramos da utilização de APIs REST, nós não temos que consultar a representação canônica de um artigo, quando tudo o que nós realmente precisaremos em alguns modos de exibição serão de 5 a 7 campos.

Quando nós quisermos atualizar os projetos de nossos produtos, não vamos mais precisar realizar mudanças em várias bases de códigos. Isso é a realidade para a qual estamos caminhando. Nós achamos que o Relay e o GraphQL são ferramentas perfeitas para nós ajudar a atingir o objetivo.

 

***

 

Artigo de Scott Taylor, publicado originalmente pelo New York Times. A tradução foi feita pela Redação iMasters com autorização, e você pode acompanhar o artigo em inglês no link: https://open.nytimes.com/react-relay-and-graphql-under-the-hood-of-the-times-website-redesign-22fb62ea9764