Forem: Lucas N. Santos

Aumente o Desempenho das suas Aplicações Web com o Poder do Code Splitting!

Lucas N. Santos — Wed, 24 May 2023 17:33:39 +0000

Introdução

Nos últimos anos, a criação de aplicações web cada vez mais complexas se tornou comum. Com essa complexidade crescente, é importante garantir aplicações cada vez mais otimizadas e uma experiência de usuário fluida.

Uma abordagem eficaz para alcançar esses objetivos é o code splitting (divisão de código), uma técnica que permite carregar partes específicas do código de forma assíncrona sob demanda.

Neste artigo, exploraremos o code splitting, discutindo suas dificuldades de implementação e os benefícios de desempenho que essa abordagem oferece.

O que é “Code Splitting”?

O code splitting é uma técnica que divide o código de uma aplicação em pacotes menores, permitindo que sejam carregados apenas quando necessários. Em vez de carregar todo o código da aplicação de uma vez só, o code splitting permite que os pacotes sejam carregados de forma assíncrona, conforme o usuário navega pela aplicação.

Dificuldades de Implementação

Embora o code splitting traga benefícios significativos para o desempenho de uma aplicação, a sua implementação pode apresentar alguns desafios. Abaixo, destacamos algumas dificuldades comuns:

Identificação de pontos de divisão: Identificar os pontos no código em que a divisão pode ocorrer é um desafio inicial. É necessário analisar e entender a estrutura da aplicação para determinar quais componentes ou rotas podem ser separados em pacotes distintos.
Gerenciamento de estado compartilhado: Ao dividir o código, é fundamental garantir que o estado compartilhado entre os pacotes seja gerenciado corretamente. O uso de gerenciadores de estado, pode ajudar a lidar com esse desafio, permitindo que o estado seja compartilhado de maneira eficiente entre os diferentes pacotes.
Manutenção da estrutura de rotas: É necessário garantir que a estrutura de rotas seja preservada. É importante que cada rota corresponda ao pacote de código apropriado, garantindo que apenas os componentes necessários sejam carregados em cada página.

Resultados

Para os meus primeiros testes, decidi seguir duas estratégias, por ROTAS e pelos COMPONENTES maiores e com maior número de dependências, assim poderia diminuir o “Circular Dependencies” para itens que não precisariam serem carregados, essa simples estratégia quase me rendeu 1 segundo de carregamento.

Resultados adquiridos sem Spliting

Resultados adquiridos com Code Spliting

Aqui vocês podem notar a diferença de um “build” feito com e sem “Code-Splitting”.

Build sem Code Spliting

Build com Code Spliting

No mundo web sabemos que sistemas que demoram mais 5 segundos para seu primeiro carregamento, são drasticamente penalizados pelos indexadores de conteúdos, fiquei muito feliz com resultado, outras estratégias devem ser aliadas para melhorar esses resultados.

Fica minha dica para as pessoas que não estudaram essa técnica, pode ser um bom ponto de partida para melhorias de desempenhos dos seus sistemas.

Benefícios alcançados

A adoção do code splitting traz diversos benefícios de desempenho.

Vejamos alguns deles:

Carregamento mais rápido: Ao dividir o código em pacotes menores, é possível reduzir o tamanho do pacote inicial que precisa ser carregado pelo navegador. Isso resulta em tempos de carregamento mais curtos, o que é especialmente crucial para usuários em conexões de internet mais lentas ou dispositivos com recursos limitados.
Melhor experiência do usuário: Ao carregar apenas o código necessário para cada rota, a experiência do usuário melhora significativamente. As transições entre páginas se tornam mais rápidas e suaves, aumentando a satisfação do usuário e diminuindo a taxa de rejeição.
Otimização de recursos: Com o code splitting, apenas o código necessário é carregado, evitando o carregamento desnecessário de componentes ou bibliotecas em páginas que não os utilizam. Isso resulta em uma utilização mais eficiente dos recursos do navegador, como memória e CPU.

Conclusão

O code splitting é uma abordagem poderosa para otimizar o desempenho de aplicações. Embora a implementação possa apresentar desafios, os benefícios obtidos são significativos. Ao dividir o código em pacotes menores e carregá-los de forma assíncrona sob demanda, podemos melhorar o tempo de carregamento das aplicações, proporcionar uma experiência do usuário mais fluida e otimizar o uso dos recursos do navegador. Ao considerar o code splitting em seus projetos, é importante entender os benefícios em relação às dificuldades de implementação, buscando alcançar um equilíbrio ideal entre desempenho e complexidade.

Referências

Transforme seus componentes Angular com variáveis CSS

Lucas N. Santos — Sat, 20 May 2023 03:41:14 +0000

Introdução

Como engenheiros de software sabemos que existem inúmeras maneiras de resolvermos um problema. Sabemos também que existem boas ou não tão boas soluções e que elas podem ser impactadas por diversos fatores como falta de tempo, baixo conhecimento da tecnologia utilizada no projeto, falta de documentação técnica e de negócio.

Compartilho com vocês uma solução que pode não ser a melhor, mas foi, a solução que atendeu bem a demanda impactada pela perda de conhecimento técnico e de negócio da jornada que precisava do desenvolvimento de uma funcionalidade bem pontual.

Funcionalidade

A funcionalidade em si era bem tranquila, precisávamos alterar algumas cores dos componentes de uma jornada do nosso sistema, com base em uma informação do usuário.

Após efetuarmos uma análise mais aprofundada nos projetos, identificamos que seria muito complicado implementarmos uma lógica que permitisse alterar de forma dinâmica os componentes.

Escolhemos trazer a responsabilidade da mudança dos componentes para o projeto principal. Começamos a desenhar algumas soluções, como a jornada foi desenvolvida em Angular, inicialmente consideramos criar vários arquivos de SCSS específicos para serem carregados, sempre que o usuário, com a informação necessária para troca dos componentes, efetuasse login em nosso sistema.

Uma pequena observação sobre essa jornada: ela faz parte de um projeto em uma arquitetura de “micro-frontend”, logo, essa abordagem foi desenvolvimento levando essa ponto em consideração.

Implementando Service

O dado que precisamos é disponibilizado via um BFF (Backend for Frontend) desenvolvido para essa jornada, implementamos um novo endpoint, que retorna se o cliente contém ou não a informação que precisamos para efetuarmos as alterações no componente.

Com endpoint implementado, o próximo passo foi desenvolver o service, que tem a responsabilidade de chamar o serviço sempre que fosse necessário.

@Injectable({ providedIn: 'root' })
export class ComponentService {
  constructor(
    private http: HttpClient,
  ) {}

  getComponentInfo(): Observable<ComponentModel> {
    return this.http.get<ComponentModel>('url do BFF');
  }
}

Implementando Guard

No nosso “micro-forntend” implementamos um guard, que fica responsável por solicitar ao BFF a informação do cliente, sempre que o usuário acessa uma rota específica em nosso sistema.

@Injectable({
  providedIn: 'root',
})
export default class ComponentGuard implements CanActive {
  constructor(
    private readonly componentService: ComponentService,
  ) { }

  canActive(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    const keyName = localStorage.getItem('keyName');
    if (!keyName) {
      this.componentService.getItem().subscribe((componentType: boolean) => {
        localStorage.setItem('keyName', componentType.keyName);
        styleProperties.map((style: IStyleProperties) => {
          document.documentElement.style.setProperty(
            `--${style.nameProperty}`,
            `${componentType.type ? style.newValueProperty : style.defaultValueProperty}`
          );
        });
      });
    } else {
      styleProperties.map((style: IStyleProperties) => {
        document.documentElement.style.setProperty(
          `--${style.nameProperty}`,
          `${keyName ? style.newValueProperty : style.defaultValueProperty}`
        );
      });
    }
    return true;
  }
}

Agora entraremos um pouco mais em detalhes da implementação.

Detalhes do Guard

Verificamos que o dado não está armazenado no localStorage, efetuamos uma nova chamada para BFF, para saber se o usuário possui ou não a informação que precisamos.

this.componentService.getItem().subscribe((componentType: boolean) => {});

Depois, adicionamos novamente no localStorage.

localStorage.setItem('keyName', componentType.keyName);

Criamos um arquivo de type bem simples, que contém informações de tipagem dos objetos que usamos para criação das variáveis de forma dinâmica.

export type IStyleProperties = {
  nameProperty: string,
  newValueProperty: string,
  defaultValueProperty: string,
}

Também, criamos um arquivo que contém todos os dados que precisamos para efetuar a customização na nossa jornada.

import { IStyleProperties } from 'IStyleProperties';

export const styleProperties: IStyleProperties[] = [
  {
    nameProperty: 'component-class',
    componentMain: '#000',
    componentDefault: '#fff'
  },
  ...
];

Partimos agora para o trecho código do nosso guard, responsável por adicionar as variáveis de CSS. Usando a função [map](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map), pegamos todos os dados do arquivo de propriedades e criamos todas as variáveis necessárias para customização dos componentes.

styleProperties.map((style: IStyleProperties) => {
  document.documentElement.style.setProperty(
    `--${style.nameProperty}`,
    `${componentType.type ? style.newValueProperty : style.defaultValueProperty}`
  );
});

O document.documentElement retorna o [Elemento](https://developer.mozilla.org/pt-BR/docs/Web/API/Element) que é o elemento raiz do [documento](https://developer.mozilla.org/pt-BR/docs/Web/API/Document) (por exemplo, o elemento <html> para documentos HTML).

O [setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) define um novo valor para uma propriedade em um objeto de declaração de estilo CSS.

No arquivo app.component.scss recuperamos os valores das variáveis e alteramos o que precisamos dos componentes, para esse exemplo alteramos as fontes, background e algumas cores.

:host ::ng-deep component-selector .component-class {
  background-color: var(--component-class-background-color);
  color: var(--component-class-color);
  font-size: var(--component-class-font-size)
}

:host ::ng-deep other-component-selector .other-component-class {
  border-radius: var(--other-component-class-border-radius)
}

O seletor [:host](https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function), seleciona o nódulo raiz do shadow DOM, que no caso pode ser representado por <gui-lher-me>`. No exemplo ele é responsável por mudar a cor do fundo.

A aplicação da pseudoclasse [::dg-deep](https://angular.io/guide/component-styles) a qualquer regra CSS desativa completamente o encapsulamento de exibição dessa regra. Qualquer estilo com ::dg-deep aplicado torna-se um estilo global.

Por fim, implementamos o método localStorage.removeItem('keyName'); para limparmos o localStorage sempre que o usuário desloga do sistema.

Conclusão

Meu objetivo em trazer esse case é mostrar que muitas vezes pensamos sempre em entregar a melhor solução possível, para área de negócio e os usuários finais, porém, algumas dessas vezes por questões tecnológicas e por falta de conhecimento do projeto, precisamos entregar a melhor solução naquele contexto que estamos inseridos.

Espero que gostem do conteúdo, deixem o seu like, comentem e compartilhem a opinião de vocês, com dicas e sugestões de melhorias.

~> LinkedIn