Como criar aplicativos da Web escaláveis ​​com React JS – SitePoint


A escalabilidade não é apenas uma palavra da moda – é crucial para a sobrevivência de qualquer aplicativo. É a capacidade do seu aplicativo de lidar com mais usuários, dados ou recursos sem degradação do desempenho. Um aplicativo escalável se adapta, permitindo que você se concentre em novos recursos, não corrigindo problemas de desempenho.

Os três pilares de aplicativos da Web escaláveis

Construir um aplicativo da Web escalável repousa em três pilares fundamentais:

  • Desempenho: Seu aplicativo deve ficar rápido. Renderização eficiente, busca de dados otimizados e gerenciamento de recursos garantem capacidade de resposta. Mais da metade dos usuários móveis abandonam sites que carregam mais de três segundos, destacando essa necessidade crítica.
  • Manutenção: Padrões claros de código, separação de preocupações e efeitos colaterais mínimos mantêm sua base de código compreensível, depurável e extensível. Isso impede a dívida técnica, que pode consumir uma parcela significativa do tempo de um desenvolvedor.
  • Flexibilidade: Seus componentes e arquitetura devem se adaptar à mudança de requisitos sem quebrar a funcionalidade existente. Isso permite que seu aplicativo evolua perfeitamente com as necessidades de negócios.

Esses pilares estão interconectados: o desempenho geralmente depende de um código sustentável e flexível e dos benefícios de flexibilidade de uma arquitetura eficiente e limpa.

Fundação da React para escalabilidade

React, introduzido pelo Facebook em 2011, revolucionou o desenvolvimento da interface do usuário. Seu DOM virtual, design baseado em componentes e fluxo de dados unidirecionais o tornam uma excelente opção para escalar complexidade e tamanho e melhorar a colaboração da equipe. O React alcança isso melhorando:

  • Desempenho: Minimizar operações caras de DOM direto.
  • Manutenção: Incentivando as UIs a serem divididas em componentes reutilizáveis ​​e responsáveis.
  • Flexibilidade: Fornecendo componentes declarativos que são facilmente adaptados a novos requisitos.

A reação pode ser inúmeras aplicações escaláveis, do próprio Facebook para o Netflix e o Airbnb, provando sua eficácia no mundo real.

Compreendendo os principais recursos do React para escalabilidade

O modelo de desenvolvimento exclusivo da UI do React e a arquitetura principal abordam diretamente os desafios de escala em grandes aplicações. Quatro recursos principais tornam o React bem adequado para escalabilidade.

1. Arquitetura baseada em componentes: quebrando interfaces complexas

O modelo de componente do React incentiva a divisão de sua interface do usuário em peças independentes e reutilizáveis, em vez de páginas monolíticas.


function Button({ onClick, children, variant = 'primary' }) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

function LoginForm() {
  return (
    <form>
      {}
      <Button variant="success" onClick={handleLogin}>
        Log In
      </Button>
      <Button variant="secondary" onClick={handleReset}>
        Reset
      </Button>
    </form>
  );
}

Este modelo fornece isolamento, reutilização, facilita a colaboração da equipe e permite atualizações incrementais mais seguras.

2. Virtual Dom: o motor por trás da renderização eficiente

A manipulação direta de DOM é lenta. O Virtual Dom da React, uma representação da interface do usuário da memória, otimiza a renderização por:

  1. Criando um instantâneo Virtual DOM.
  2. “Diffing” o novo instantâneo com o anterior na mudança de estado.
  3. Calculando operações mínimas de DOM.
  4. Batching e aplicação dessas atualizações ao DOM real.

Esse processo garante desempenho consistente, atualizações em lotes e uso otimizado de recursos, crítico para aplicações grandes.

3. UI declarativa: Tornando o gerenciamento de estado complexo compreensível

A abordagem declarativa do React muda seu foco de como Para atualizar a interface do usuário para o que A interface do usuário deve parecer para um determinado estado. Em vez de instruções de DOM passo a passo, você declara o resultado desejado:

function NotificationBadge({ count }) {
  return (
    <div className="badge">
      {count === 0
        ? <span>No notifications</span>
        : count === 1
          ? <span>1 notification</span>
          : <span>{count} notifications</span>}
    </div>
  );
}

Isso leva a um comportamento previsível (UI como uma função direta do estado), menos efeitos colaterais e um modelo mental mais simples para UIs complexas.

4. Fluxo de dados unidirecionais: Gerenciamento de estado previsível

O React emprega um fluxo de dados claro e unidirecional: os dados fluem por meio de adereços (pai para filho) e os eventos fluem por retornos de chamada (filho para pai).

function TodoApp() {
  const (todos, setTodos) = useState((
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build scalable app', completed: false }
  ));

  const toggleTodo = id => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

Isso garante alterações previsíveis do estado, simplifica a depuração e fornece uma base robusta para padrões avançados de gerenciamento de estado.

Melhores práticas para a construção de aplicativos de reação escalável

Enquanto o React oferece uma base sólida, aplicativos realmente escaláveis ​​exigem técnicas adicionais. Vamos explorar abordagens que ajudam seus aplicativos de reação a crescer graciosamente.

Otimize o tamanho do seu pacote com divisão de código e carregamento preguiçoso

Grandes pacotes de JavaScript afetam significativamente os tempos de carga. A divisão de código divide seu aplicativo em pedaços menores que carregam sob demanda, melhorando drasticamente o desempenho.

Divisão de código baseada em rota

Código de carregamento apenas para a visualização atual. Esta é geralmente a divisão mais impactante, garantindo que os usuários baixem o código necessário apenas para a página atual.


import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import LoadingSpinner from '@/components/LoadingSpinner';

const Home = lazy(() => import('@/pages/Home'));
const Dashboard = lazy(() => import('@/pages/Dashboard'));


function App() {
  return (
    <BrowserRouter>
      <Navbar/>
      <Suspense fallback={<LoadingSpinner/>}>
        <Routes>
          <Route path="https://www.sitepoint.com/" element={<Home/>}/>
          <Route path="/dashboard" element={<Dashboard/>}/>
          {}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

O suspense com preguiçoso (usando importação dinâmica ()) permite isso, mostrando um fallback durante a carga.

Divisão de código no nível do componente

Você também pode carregar preguiçosamente componentes pesados ​​nas páginas, por exemplo, um widget mostrado apenas quando uma guia específica está ativa.


import React, { Suspense, lazy, useState } from 'react';


const AnalyticsWidget = lazy(() => import('@/widgets/AnalyticsWidget'));


function Dashboard() {
  const (activeTab, setActiveTab) = useState('analytics');
  
  return (
    <div className="dashboard-layout">
      {}
      <main className="dashboard-content">
        <Suspense fallback={<LoadingIndicator/>}>
          {activeTab === 'analytics' && <AnalyticsWidget/>}
          {}
        </Suspense>
      </main>
    </div>
  );
}

export default Dashboard;

Imagens de carregamento preguiçoso

As imagens geralmente dominam o tamanho da carga útil. O carregamento preguiçoso nativo é direto:

<img src={product.imageUrl} alt={product.name} loading="lazy" width="300" height="200" />

Para mais controle, use o IntersectionObserver para carregar imagens apenas quando elas estiverem próximas da visualização.

Gerenciamento de Estado eficiente: encontrando o equilíbrio certo

À medida que seu aplicativo cresce, a complexidade do gerenciamento de estado aumenta. O React oferece várias abordagens:

Estado componente-local (Usestate, UserEduces)

Use o uso de uso para estado simples e isolado. Empregue o UserEduces para transições estaduais locais mais complexas.


function Counter() { const (count, setCount) = useState(0);  }

function EditCalendarEvent() { const (event, updateEvent) = useReducer(reducerFn, initialState);  }

Consulta de reação: Estado do servidor de domesticação

Para dados folhados com servidor, o React-Query (ou @tanStack/react-query) é indispensável. Ele fornece cache automático, desduplicação, renovação de fundo, revalidado de obsoletos e manuseio simplificado de paginação e rolagem infinita.

import { useQuery } from 'react-query'; 

function ProductList() {
  const { data, isLoading, error } = useQuery(('products'), fetchProducts);
  
}

function fetchProducts() { 
  return fetch('/api/products').then(res => res.json()); 
}

O React-Query também lida com mutações graciosamente com a invalidação do uso de usautação e do cache, oferecendo controle de granulação fina com opções como staletwime, Cachetime e tentativa.

Reacto contexto para estado compartilhado

A API de contexto passa dados através de componentes sem perfuração de suporte, ideal para o estado global da interface do usuário (por exemplo, temas, status de autenticação).


const ThemeContext = React.createContext('light');


function App() {
  const (theme, setTheme) = useState('light');
  
  return (
    <ThemeContext.Provider value={{theme, setTheme}}>
      <MainLayout/>
    </ThemeContext.Provider>
  );
}


function ThemedButton() {
  const {theme, setTheme} = useContext(ThemeContext);
  
  return (
    <button 
      className={`btn-${theme}`} 
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

Para a dica: Os contextos divididos por preocupação (por exemplo, UserContext, ThemeContext) para evitar renderizadores desnecessários. Os componentes apenas renderizam se os dados de contexto específicos que eles consomem alterações.

Gerenciamento de estado externo: soluções modernas

Para um estado global muito complexo em grandes aplicações, as bibliotecas externas fornecem mais estrutura.

Redux Toolkit: Reduz o Redux Boilerplate.

import { createSlice, configureStore } from '@reduxjs/toolkit';

Doença: Oferece uma API mais leve e baseada em gancho.

import create from 'zustand';

Takeaway -chave: Escolha a ferramenta certa: Usestate/UserEduces para o estado local; Reação consulta para o estado do servidor; API de contexto para alterar frequentemente o estado do cliente compartilhado; e bibliotecas externas para um estado global complexo que precisa de middleware ou devtools avançados. Comece simples, adicione complexidade apenas quando realmente necessário.

Usando composição de componentes e ganchos personalizados de maneira eficaz

Composição de componentes estratégicos

Em vez de “perfurar de suporte” (passando adereços através de muitos componentes intermediários), passe componentes como adereços. Isso simplifica a árvore e torna explícito o fluxo de dados.


<PageLayout
  header={
    <Header 
      profileMenu={<ProfileMenu user={user}/>}
    />
  }
  content={<MainContent/>}
/>

Aproveitando ganchos personalizados para lógica reutilizável

Extraia e compartilhe a lógica com estado usando ganchos personalizados. Isso reduz a duplicação e mantém os componentes focados na interface do usuário.

function useForm(initialValues ) {
  const (values, setValues) = useState(initialValues);
  
  
  return { values, errors, isSubmitting, handleChange, handleSubmit };
}

Os ganchos personalizados tornam os componentes mais limpos, separando “como” (lógica no gancho) de “o quê” (interface do usuário no componente).

Otimizando o desempenho para escalabilidade

A verdadeira escalabilidade exige otimização incansável de desempenho. Mesmo com a eficiência inerente do React, grandes aplicações requerem abordagens proativas para renderizar ciclos, manuseio de dados e tempos iniciais de carregamento.

Minimizando os renderizadores: prevenção de trabalho desnecessário

A reconciliação do React é rápida, mas as renderizações desnecessárias de árvores componentes complexas podem criar gargalos. Garanta que os componentes apenas renderizem quando seus adereços ou estado realmente mudarem.

React.memo (componentes funcionais): Memoiza a saída do componente, impedindo os renderizadores se os adereços não forem alterados. Use para componentes caros e renderizados frequentemente com adereços estáveis.

const ProductCard = React.memo(({ product, onAddToCart }) => {  });

useememo (valores de memórias): Os cache dos resultados da função, re-executando apenas se as dependências mudarem. Ideal para cálculos caros dentro de um componente.

function ShoppingCart({ items }) {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, (items));
  
  return (  );
}

Usecallback (funções de memórias): Memoiza as definições de função, impedindo a recriação em cada renderização se as dependências não forem alteradas. Crucial ao passar por retornos de chamada para componentes infantis memorados.

function ParentComponent() {
  const (count, setCount) = useState(0);
  
  const handleClick = useCallback(
    () => setCount(prevCount => prevCount + 1), 
    (count)
  );
  
  return <ChildComponent onClick={handleClick} />;
}

const ChildComponent = React.memo(({ onClick }) => { 
   
});

Renderização do lado do servidor (SSR) e geração estática do local (SSG)

Para uma carga inicial mais rápida, o SEO aprimorado e a visibilidade do conteúdo antes da execução do JavaScript, SSR e SSG são inestimáveis.

  • Renderização do lado do servidor (SSR): Renderiza reagem ao HTML no servidor por solicitação. O cliente recebe uma página HTML completa para renderização imediata e, em seguida, reaja “hidrate”.
    • Benefícios: Carga percebida mais rápida (tempo até o primeiro byte), SEO aprimorado.
    • Implementação: Estruturas como Next.js.
  • Geração estática do local (SSG): Construa todo o aplicativo React em HTML estático, CSS e JS em construir tempo. Esses arquivos pré-criados são servidos a partir de uma CDN.
    • Benefícios: Tempos de carregamento extremamente rápido, excelente SEO, muito barato para sediar.
    • Implementação: Next.jsAssim, Gatsby.

Lidar com grandes conjuntos de dados com eficiência

Exibir centenas ou milhares de pontos de dados diretamente no DOM prejudicará o desempenho. Use estas estratégias para experiências suaves do usuário:

  • Listas virtualizadas (Windowing): Torna apenas itens atualmente visíveis na visualização.
    • Bibliotecas: React-window, react-virtualizou.
    • Benefícios: Reduz drasticamente os nós DOM, melhorando a renderização e a memória.
  • Paginação: Quebra grandes conjuntos de dados em páginas menores e gerenciáveis.
    • Implementação: Busque dados em pedaços da API (por exemplo ,? Page = 1 & Limit = 20).
  • Rolagem infinita: Carrega mais dados à medida que o usuário rola no final da lista atual.
    • Implementação: Use um intersectionObserver para acionar as chamadas de API para novos dados.
    • Bibliotecas: O UsoInfiniteQuery da React-Query suporta isso.

Exemplo do mundo real: escalar um catálogo de produtos de comércio eletrônico

Considere uma plataforma de comércio eletrônico que enfrentou problemas de desempenho com um catálogo de produtos em rápido crescimento e tráfego de usuários.

Desafios iniciais:

  • Carga inicial lenta: Pacote JS grande (3MB+), impactando o celular.
  • Grades de produtos machucados: A rolagem através de centenas de produtos causou congelamento da interface do usuário.
  • Estado complexo de check -out: O check-out de várias etapas foi propenso a erros.
  • Busca de dados ineficientes: As chamadas redundantes da API levaram a solicitações de cascata.

Soluções de escalabilidade implementadas:

  1. Divisão de código e carregamento preguiçoso:

Baseado em rota: React.Lazy () e Suspense para rotas como /Produto /: ID, /Checkout. Carga inicial reduzida da página inicial em mais de 50%.


import ProductPage from './pages/ProductPage';


const ProductPage = lazy(() => import('./pages/ProductPage'));


<Route 
  path="/product/:id" 
  element={
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  } 
/>

Nível de componente: Componentes menos críticos carregados com menos críticos (por exemplo, widget de revisão) sob demanda.

const ReviewWidget = lazy(() => import('./components/ReviewWidget'));



{showReviews && (
  <Suspense fallback={<div>Loading Reviews...</div>}>
    <ReviewWidget productId={currentProductId} />
  </Suspense>
)}
  • Otimização de imagem: Usado carregamento = “Lazy” e CDN para dimensionamento de imagem adaptável.
  1. Gerenciamento de estado eficiente com a consulta React:
    • Estado do servidor: React-Query adotado para todos os dados adquiridos pelo servidor (produtos, carrinho).
    • Cache e desduplicação: Impediu solicitações redundantes de rede.
    • Stale-while-revavalidate: Garantiu a interface do usuário instantânea na revisitar com a atualização de dados em segundo plano.
    • Mutações: Lidou com atualizações de carrinho/pedido com a UsoMutação e o queryclient.invalidateQueries para sincronização da interface do usuário.
<!-- end list -->


function ProductList() {
  const { data: products, isLoading } = useQuery(
    ('products', { category: 'electronics' }),
    fetchProductsByCategory
  );
  
  
}


const queryClient = useQueryClient();

const addToCartMutation = useMutation(addProductToCart, {
  onSuccess: () => {
    queryClient.invalidateQueries(('cart')); 
  },
});
  1. Arquitetura baseada em componentes e ganchos personalizados:
    • Design atômico: Rigorosamente quebrou componentes em átomos, moléculas, organismos para uma estrutura clara.

Lógica de forma reutilizável: Built UseForm Gancho personalizado para o estado/validação de formulário comum, reduzindo a caldeira.

function useCheckoutForm() { 
   
}
  • Evitação de perfuração de propr: Utilizou a API de contexto dividido (por exemplo, AuthContext, ThemeContext) para preocupações globais.
  1. Listas virtualizadas para grades de produtos:

React-Window: Implementado para grades de produtos, renderizando apenas 20 a 30 itens visíveis em centenas.

import { FixedSizeGrid } from 'react-window';



<FixedSizeGrid
  columnCount={columns}
  columnWidth={300}
  height={600}
  rowCount={Math.ceil(products.length / columns)}
  rowHeight={400}
  width={listWidth}
>
  {({ columnIndex, rowIndex, style }) => {
    const index = rowIndex * columns + columnIndex;
    const product = products(index);
    return product ? <ProductCard product={product} style={style} /> : null;
  }}
</FixedSizeGrid>
  • Eliminado rolando Jank, garantindo a navegação fluida.

Resultado:

O site de comércio eletrônico alcançou melhorias significativas:

  • Tempo inicial de carregamento: Reduzido em 60%, aumentando o SEO e diminuindo as taxas de rejeição.
  • Responsabilidade da UI: Rolagem e interações suaves, mesmo com grandes conjuntos de dados.
  • Produtividade do desenvolvedor: Desenvolvimento de recursos mais rápido e integração de equipes mais fácil.
  • Manutenção: Diminuição da dívida técnica e riscos reduzidos de hotfix.

Ao aplicar essas forças principais do React e otimizações avançadas, você pode criar um aplicativo da Web verdadeiramente escalável e sustentável.



Source link