DEV Community: Stanley Gomes

Sobre Micro Front-ends

Stanley Gomes — Sat, 18 Dec 2021 11:47:30 +0000

Hoje eu vou abordar um tema que está em pleno uso e cada vez mais se tornando um padrão de arquitetura de desenvolvimento no frontend, o conceito de Micro Front-end.

Não posso falar de Micro Front-end sem abordar a forma como eram construídas as aplicações antes do seu surgimento. Antigamente, ao desenvolver uma aplicação frontend, todo o código era feito dentro um repositório e totalmente interdependente.

Com o tempo, os programadores foram adaptando várias formas de separar o frontend, de forma que ele se tornasse mais desacoplado.

Com o surgimento do conceito de Micro Front-end, agora uma aplicação é dividida em módulos de forma que algumas partes específicas da tela são separadas em diferentes repositórios.

Cada módulo é uma aplicação com sua stack particular (react, angular, vue etc), funcionando de forma independente, sem um estado global ou compartilhamento de recursos.

Apesar de serem independentes, os micro serviços no frontend precisam ter alguma forma de se comunicar, afinal, juntos eles são uma única aplicação. Geralmente usa-se o recurso de localstorage ou frameworks específicas para lidar com esse cenário, como o Single SPA.

Por fim, com todo esse hype sobre esse tema, acabam aparecendo os questionamentos: "Será que devo parar de escrever aplicações monlíticas?". A resposta é simples: Não. Cada projeto vai demandar uma arquitetura própria pensada considerando o resultado que se espera. O micro front-ends são flexíveis para grandes aplicações, com escalabilidade e várias equipes, mas não são tão vantajosos para projetos com poucas pessoas.

Se você quiser contribuir mais sobre o conceito de Micro Front-ends, comenta aqui embaixo.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Monorepo? O que é? Devo usar?

Stanley Gomes — Wed, 03 Nov 2021 16:09:25 +0000

Monorepo é simplesmente a definição de arquitetura em que você utiliza apenas um repositório que podem conter vários projetos ao inves de distribuir esses projetos em vários repositórios. Você pode ter, por exemplo, um repositório que contenha um subdiretório de sua aplicação web, outro para seu aplicativo e outro para sua API.

Esses projetos estão conectados e podem compartilhar o gerenciamento de dependências.

Quando se fala em Monorepo, rapidamente vem a comparação com outra arquitetura que é a de Polirepo. Fazendo o paralelo entre elas, podemos notar semelhanças e diferenças.

As principais semelhanças são inerentes a própria forma como são essas arquiteturas.

Existem projetos (grandes e pequenos) bem sucedidos utilizando utilizando Monorepo ou Polirepo, como também existem projetos que fracassaram utilizando qualquer um dos dois;
Ambas arquiteturas são simples de manter, implementar e escalar quando o projeto está no começo. Quando ele começa a crescer as dificuldades de manter um super repositório crescem, no caso do Monorepo e as dificuldades de manter dezenas ou centenas de repositórios também crescem, no caso do Polirepo.

Isso mostra que não existe uma arquitetura superior e sim que o desenvolvedor precisa analisar quando deve usar um caso ou outro.

Podemos citar alguns problemas nessa arquitetura.

Pasta .git pode ficar gigante no repositório;
O Git clone fica lento;
Alto número de commits e de branchs afetam a performance do repositório;
Tempo de build pode ser demorado (pelo número de arquivos);

Algumas soluções que podem ser implementadas.

Manter poucas branchs que tenham uma longa vida para que o git tenha que se preocupar com menos referencias;
Colocar arquivos de midia como gif, imagens e vídeos em um outro serviço, como o Git LFS;
Não limita o acesso a determinadas partes do código a equipes ou pessoas específicas;

Monorepo é diferente de repositório monolito

Agora vamos para os pontos positivos de utilização do conceito de Monorepo.

Em um único lugar você tem todas as configurações, CI/CD, testes de forma que tudo fica padronizado para todos os subprojetos;
Refatorar um problema ou uma melhoria de uma vez só em vários projetos em um único pull request (dependencia com problema de segurança, por exemplo);
Gerenciamento e manutenção de dependencias centralizada e simplificada;
Reutilização e compartilhamento de código para executar uma mesma tarefa em múltiplos repositórios;

Se você conhece algum outra informação relevante sobre os Monorepos, comenta aqui embaixo.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Escalonando aplicações frontend

Stanley Gomes — Wed, 20 Oct 2021 12:59:07 +0000

Sempre que começamos a desenvolver um novo projeto de software, temos que considerar a escalabilidade de até onde e quantas pessoas vão conseguir utilizar nossa ferramenta simultaneamente. É um consenso que escalar a aplicação é um grande desafio e envolve um planejamento desde o início do desenvolvimento.

Nesse post, o objetivo é abordar os tópicos sobre dicas de por onde começar a escalar o seu código frontend. Quando falamos sobre escalar a infraestrutura (seja verticalmente ou horizontalmente), fica mais fácil de entender e executar, mas quando se trata de código, a demanda é se aprofundar mais no assunto.

Código escalável

Um código escalável tem fundamentos básicos que podemos definir como regras. Começamos definindo que o código precisa ser eficiente e como, de maneira geral, ele vai utilizar os recursos de processamento do cliente, para que ele possa ser acessado a partir do maior número de pessoas, ele precisa ter eficiência de processamento, baixo consumo de banda e responsividade.

Outros fatores fundamentais para um código escalável é possuir recursos pequenos e independentes (single responsability principle), que podem ser servidos de forma independente. Isso é requisito para facilitar manutenção e provisão de recursos.

Abaixo vou tentar listar algumas outras dicas para escalonar o seu frontend:

Backend desacoplado do frontend, escalation separado;
Se sua aplicação tem SSR (server side rendering) garanta que apenas as páginas que realmente precisam ser geradas no server sejam;
Lazy loading: Carregue apenas recursos que sejam necessários na usabilidade do usuário. Os demais recursos serão carregados sob demanda (Scripts, imagens, fontes, css);
Trabalhe com CDN e caching com eficiência para reduzir o consumo de recursos de servidor de forma inteligênte e diminuir tempo de resposta e carregamento do frontend;
Reduza a complexidade do código e trabalhe com código limpo. Dessa forma, toda equipe terá facilidade de entender, evoluir e corrigir o código, evitando bugs inesperados e indisponibilidade da plataforma. É muito importante também que você remova o código e funcionalidades que não são utilizadas;
Transite o mínimo necessário de informação nas requests para o backend para reduzir o consumo de recursos de banda e aumentar velocidade de resposta;
Crie testes automatizados para garantir mais velocidade de entrega com menos riscos de quebra da aplicação;
Monitore sua aplicação com rotinas automatizadas que gerem métricas e capturem erros, como por exemplo, o Sentry(https://sentry.io);

Se você conhece alguma outra técnica para otimizar o frontend, comenta aqui embaixo.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Este post foi baseado no artigo do Nagendra Prajwal:
https://www.linkedin.com/pulse/intro-scalable-frontend-what-how-write-one-nagendra-prajwal

AMP, já era?

Stanley Gomes — Wed, 28 Jul 2021 13:09:18 +0000

AMP é um framework HTML criado pelo google para criação de páginas otimizadas para um carregamento instantâneo em dispositivos móveis. Em maio de 2021, o Google avisou que vai parar de priorizar sites AMP nos mecanismos do ranking de busca.

Mesmo com essa notícia, o PWA ainda é muito utilizado, tem muito espaço e muitas vantagens. É na parte das vantagens que vou focar nessa postagem.

O principal resultado do uso dessa tecnologia é a melhora da experiência do usuário em utilizar sites e também melhorias no ranking de buscas para SEO.

O ganho expressivo de velocidade de carregamento de páginas em um site com AMP se deve a utilização de um conjunto de especificações no HTML, que são impulsionadas pelo uso de Javascript, mas o principal fator é devido a rede de cache do próprio Google que funciona como uma CDN, que guarda uma versão daquela página para acesso imediato.

O AMP não é apenas um framework para performance. Seus componentes HTML, fáceis de usar, também auxiliam na criação de páginas com elementos dinâmicos e funcionalidades como outros sites. Como é um projeto aberto para comunidade, surgem novos componentes e melhorias constantemente.

Muitos sites de notícias e conteúdos em geral estão utilizando AMP, como The Washington Post, ecommerces como Ebay, sites de eventos, como EventBrite etc.

Mais recentemente o AMP tem expandido para outras áreas como páginas HTML por email e ads. Com essas novas expansões, ele pode levar as vantagens que são aplicadas no sites, para novos serviços que demandam renovação tecnológica.

Enfim, se seu site é mais rápido, logo ele é mais competitivo e converte mais vendas/visitas. Pesquisas mostram que páginas lentas podem aumentar em mais de 100% a taxa de rejeição e desistência de pessoas a esperar uma página de carrega lentamente.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Kanban - Comece agora

Stanley Gomes — Fri, 23 Jul 2021 00:57:47 +0000

Pessoal, vamos direto ao ponto. Kanban é uma metodologia de fluxo de trabalho contínuo. Embora seja cada vez mais popular atualmente, estas técnicas foram concebidas pela Toyota na década de 60.

Para a Toyota, o kanban trouxe mais transparência e visibilidade da cadeia de processos, reduzindo desperdício e facilitando a comunicação.

Visão completa do fluxo

O kanban propõe a utilização de cartões ou post-its em um quadro para organizar o andamento do fluxo de trabalho e atividades. Ele também possibilita uma gestão em que toda equipe tem visibilidade de todo o processo. Sendo assim, a interação entre os membros é mais fluída.

Prioridades

Um dos conceitos mais fortes no Kanban é o WIP (Work in Progress ou Trabalho em andamento). Ele consiste em definir as prioridades de trabalho em andamento para os membros da equipe. Limitar essa quantidade é um princípio base do Kanban.

Facilidade para gestão

Os gestores de uma equipe orientada a Kanban tem visibilidade da evolução, status e responsáveis por cada tarefa de maneira muito prática, podendo definir datas de entrega com mais segurança.

Vale apontar que essas facilidades também se extendem a todos os membros do time, que podem vir a ser futuros gestores.

Ferramentas

Existem diversas ferramentas web ou aplicativos para fazer a gestão dos cartões online.

Com certeza o Trello é a ferramenta mais conhecida, mas também podemos citar o run-run-it, Asana, Jira dentre outros.

Mesmo que, onde você trabalha não utilize a metodologia kanban, por ser muito versátil, esses conceitos podem ser aplicados em sua vida pessoal ou mesmo em algum freelance que você trabalhe.

Começando?

A melhor parte do Kanban é que ele é totalmente flexível e adaptável ao fluxo de entrega de qualquer negócio. Comece implementando seu fluxo atual dentro de uma ferramenta e com o tempo você evolui e o melhora.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Vida longa ao PWA

Stanley Gomes — Wed, 14 Jul 2021 15:22:44 +0000

Hoje o assunto é sobre PWA. PWA (Progressive Web Application) é um tipo de aplicação construída com as tecnologias da web (HTML, CSS e JS) com objetivo de funcionar em qualquer plataforma ou dispositivo, dependendo apenas de um navegador de internet compatível.

Os PWAs são um marco da história da internet, pois possibilitam aos desenvolvedores proporcionar uma experiência de uso de um app utilizando o navegador. A web é muito utilizada para pesquisa de conteúdo e serviços, e nem todos esses estão instalados como apps no dispositivo do usuário.

Por que construir um PWA

Vamos analisar os principais pontos que um PWA pode se diferenciar de um site comum.

Velocidade

Sites rápidos aumentam a capacidade de captura de leads consideralmente.

Disponibilidade

Um PWA que segue os requisitos pode funcionar em diversos navegadores e atingir uma massa de clientes muito maior, escrevendo apenas um código para todas os mais diversos dispositivos.

Adaptabilidade

Uma aplicação adaptável e responsiva construída para funcionar em celulares, tablets ou computadores possibilita que mais usuários consumam seu produto/serviço.

Aplicativo instalável

Se o cliente desejar, pode instalar seu app com apenas um clique, durante a navegação na sua aplicação. Como a base de código é pequena e utiliza o browser do dispositivo, as instalações são pequenas (medidas em Kbs) e rápidas. Ao aproveitar bem os recursos do PWA, você pode construir aplicativos com excelente performance de resposta e execução.

Offline-first

Seu app pode ter funcionalidades que continuem atendendo determinadas demandas do cliente, mesmo que ele esteja com baixa velocidade ou mesmo sem internet.

APIs do dispositivo

Por vezes, sua aplicação demanda alguns recursos que precisariam de um aplicativo nativo. Funcionalidades que dependem de armazenamento de arquivos, controle de audio, acesso ao GPS, contatos ou mesmo notificações, são implementáveis numa aplicação PWA.

Casos de sucesso

Os PWAs estão há um bom tempo no mercado, com resultados demonstráveis na prática. O google montou alguns estudos de casos, que você pode ver neste link.

O Google Photos é um bom exemplo de PWA.

Muitos dos casos mostram como o percentual de conversão aumentou depois da mudança. As grandes e mais diversas empresas estão utilizando amplamente os recursos de PWA para tornar suas aplicações mais amigáveis ao usuário.

Por onde começar

Primeiro, você precisa entender que PWA não é uma linguagem de programação, mas uma metodologia de desenvolvimento. Os navegadores de internet adotaram algumas APIs e padrões para estas aplicações.

Você pode começar utilizando um boilerplate com algumas configurações como o Juggernaut, por exemplo.

Caso você já tenha uma aplicação rodando, também é possível ir migrando aos poucos e um bom parâmetro do que você pode melhorar é a ferramenta DevTools do Chrome. Ela aponta problemas no seu código e como corrigí-los.

Vale resaltar que a adoção dos PWAs só não é maior, devido a uma oposição forte da empresa Apple, que é muito fechada nos seus dispositivos. A preocupação deles no momento é de perder parte do lucro que é imposto de taxação sobre cada venda feita nos apps de sua loja (App Store).

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Entrega ágil com Scrum

Stanley Gomes — Wed, 30 Jun 2021 11:38:24 +0000

Pessoal, hoje vou "falar" um pouco sobre metodologia ágil. Vantagens, motivação e aplicação. Mais especificamente sobre o Scrum. Vamos direto ao ponto.

O Scrum é um framework gestão de projetos, fundamentalmente construído com base em experiências adquiridas durante o próprio processo de desenvolvimento. Ou seja, as demandas, pessoas e prioridades são construídas com base em decisões passadas e aprendizado.

Esta característica é marcante devido ao foco de aplicação do scrum em projetos com incerteza ou pouco conhecimento do produto final. Sendo assim, a equipe scrum deve estar sempre apta a trabalhar em um ambiente de constante mudança.

O scrum também sugere a participação constante do cliente na construção do produto desde o início, fornecendo feedbacks constantes em ciclos previamente definidos.

Cerimônias e Termos

São vários os termos utilizados no Scrum. Dentre eles, podemos destacar alguns principais. Como dito anteriormente, o scrum trabalha em ciclos definidos e estes ciclos são compostos de etapas recorrentes.

Tudo começa com a definição de tempo de ciclo de tarefas, conhecidas como Sprints. A cada Sprint é definido a lista de atividades a serem desenvolvidas e entregues no ciclo (o Sprint Backlog), numa reunião chamada Product Planning.

Durante a fase de desenvolvimento, em cada ciclo, é feita uma reunião diária conhecida como Daily, na qual a equipe fica de pé e cada integrante comenta de forma breve sobre o status do andamento da suas atividades.

Logo ao final da Sprint, é realizada uma reunião que reune dois conceitos do scrum (Sprint Review e Sprint Retrospective) com a finalidade de revisar o que foi feito, entender o que deu certo ou errado e fazer alterações no Backlog de atividades do produto, se necessário.

Papéis

As equipes que trabalham com o Scrum são pequenas e tem papéis bem definidos. Existe o Product Owner, que é o responsável pela entrega do produto ("Dono do produto"). Já o Scrum Master lida com a manutenção do Scrum, reuniões e comunicação e fluidez de trabalho do time. Por fim, a equipe também conta com os desenvolvedores do produto.

O Product Owner (PO) também é responsável pela gestão do Product Backlog e priorização do que é mais importante.

O Scrum é amplamente utilizado em ambientes de desenvolvimento de software, porém, ele pode ser adaptado para desenvolvimento de produto em geral, principalmente em projetos de alta complexidade, pelo fato de fazer entregas rápidas, baseadas em feedback do cliente e aprendizado constante.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Primeiros passos com Git

Stanley Gomes — Sat, 19 Jun 2021 17:40:28 +0000

O que é o Git?

Hoje o assunto é GIT. O Git é a melhor ferramenta para gerenciamento e versionamento de código e também a mais utilizada atualmente.

Não importa se você é desenvolvedor Javascript, Java, Python ou C++, com certeza você vai precisar utilizar o Git. Meu objetivo neste post é mostrar o básico de Git (publicando o primeiro commit) para quem está começando na área de desenvolvimento.

Por que usar o Git?

Vamos direto ao ponto: as duas principais facilidades oferecidas para quem está começando com Git é salvar seu código em um servidor na nuvem e o controle de versionamento de todas as alterações feitas nele.

Você já deve ter ouvido falar do github, bitbucket ou do gitlab. Estes são serviços de empresas que hospedam as versões dos códigos dos seus projetos utilizando a tecnologia do Git.

Com o seu código hospedado em um servidor, você tem a garantia de um backup, caso aconteça algo com seu computador e também pode compartilhar esse código para que outras pessoas possam trabalhar nele.

Já o versionamento de código te garante uma rastreabilidade das mudanças que foram feitas com o tempo, possibilitando também que você desfaça o código que você desenvolveu com facilidade.

O primeiro repositório

Antes de mais nada, você precisa criar um repositório (que nada mais é do que um projeto). Escolha uma pasta do seu computador.

mkdir meu-projeto
cd meu-projeto
git init

Quando você cria um repositório em um dos serviços apresentados anteriormente, eles fornecem uma URL para hospedar seu projeto. Nesse momento, vamos adicionar a URL do projeto no repositório local.

git remote add origin http://urlDoServico.com/seuProjeto

O próximo passo é adicionar seus arquivos dentro dessa pasta. Para em seguida, fazer o primeiro commit (que é forma como o git grava uma versão de alteração no seu código). Primeiro, vamos adicionar os arquivos que queremos commitar.

# adicionar todos os arquivos da pasta
git add .

# deixe uma mensagem que explique o que você desenvolveu
git commit -m "Criando meu primeiro commit"

O último passo agora é enviar o código para o repositório online.

git push origin master

Este é apenas o começo. O Git oferece diversas possibilidades, as quais abordarei em próximos posts.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

React Hooks: Ref e State

Stanley Gomes — Wed, 16 Jun 2021 16:10:50 +0000

Pessoal, nesse post vou abordar mais um pouco sobre os React Hooks. Nós vamos observar os casos de uso dos hooks useRef, createRef, useState e useReducer.

Os hooks nos permitem utilizar estado e outros recursos do react como memoization, ciclo de vida do componente etc sem a necessidade de criar o componente como uma classe.

Nesse post abaixo, eu mostrei um pouco sobre a parte de memoization com o useMemo.

Performance com Memo e useMemo

Stanley Gomes ・ Mar 24 '21

#usecallback #usememo #react #javascript

Ref

Vamos começar com o ref. Podemos utilizar o hook useRef para acessar os elementos DOM do HTML.

No exemplo abaixo, vamos o usar o hook para que quando o botão for clicado, o campo de input seja focado para digitação.

import React, { useRef } from "react";

export default App = () => {
  const ref = useRef(null);

  const onClick = () => {
    ref.current.focus();
  };

  return (
    <div className="App">
      <h1>Utilizando useRef</h1>
      <input ref={ref} type="text" />
      <button onClick={onClick}>Focar no campo</button>
    </div>
  );
}

O useRef foi criado com objetivo de ser uma proposta de hook como alternativa ao createRef. O createRef é uma API do React que desempenha o mesmo papel.

Nesse exemplo abaixo, eu utilizei o mesmo código do exemplo anterior, porém desta vez criando a referencia com o createRef. O resultado será o mesmo.

import React, { createRef } from "react";

export default App = () => {
  const ref = createRef(null);

  const onClick = () => {
    ref.current.focus();
  };

  return (
    <div className="App">
      <h1>Utilizando useRef</h1>
      <input ref={ref} type="text" />
      <button onClick={onClick}>Focar no campo</button>
    </div>
  );
}

Uma diferença entre essas duas funcionalidades é que o useRef
cria a referência apenas uma vez, logo quando o componente é renderizado. Já o createRef cria uma nova referência para o elemento toda vez que ocorre o re-render do componente, sendo assim menos performático.

State

O próximo hook que vamos ver é uma solução para gerenciamento de estado do componente, o useState.

Nesse exemplo abaixo, é possível armazenar no estado do componente, o número de vezes que o botão foi clicado.

import React, { useState } from 'react'

export default App = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
       Você clicou {count} vezes!
      <button onClick={() => setCount(count + 1)}>
        Mais um!
      </button>
    </div>
  )
}

O useState(0) é uma função e seu parâmetro é o valor inicial do estado que você quer gerenciar, nesse caso a contagem. Já essa primeira parte [count, setCount] com o array de variáveis utiliza uma funcionalidade do Js, o Destructuring assignment , que é retornada pelo useState.

O primeiro elemento count é uma variável com o valor atual do estado e o segundo elemento setCount é a função que altera o valor do estado.

Reducer

O useReducer é mais um hook criado para componentes de classe. Este com o propósito também de gerenciamento de estado de componente, mas com uma abordagem para casos em que o gerenciamento dos dados é mais complexo.

Nesse exemplo abaixo (retirado da documentação do react), vou utilizar uma função de contador com as opções de incrementar e decrementar o valor.

const initialState = { count: 0 };

const reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error('Operador não implementado');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Contador: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Em casos que o estado é mais simples, é recomendada a utilização do useState, por ser mais simples de implementar e gerenciar.

Este post não seria possível sem o trabalho de pesquisa e discussão do time do capítulo de frontend do LuizaLabs.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Até mais.

Next.js - Presente e futuro 🚀

Stanley Gomes — Sun, 16 May 2021 18:40:43 +0000

O que é? Para que serve?

Next.js é um framework de renderização estática no lado do servidor, para a lib Reactjs. Traduzindo: seu código react é compilado no servidor, que retorna para o browser o HTML, CSS e Js.

O Next.js é usado amplamente na comunidade de desenvolvedores javascript e atualmente é mantido pela empresa vercel, que tem criado uma série de serviços
para montar um ecosistema que facilite o trabalho do desenvolvedor.

Mesmo que a vercel ofereça este ecosistema, você pode hospedar seu projeto em qualquer outro lugar. O Next.js é open source.

Principais recursos

De cara, podemos apontar o quanto é fácil iniciar um projeto next.js. Não precisa configurar nada, apenas customizar de acordo com sua necessidade.

O NextJS oferece suporte a todos os navegadores modernos e o IE11. Também suporta code spliting. Ele tem suporte nativo para Typescript, com configuração simples e compilador em tempo real.

No desenvolvimento você escreve o código e as mudanças são refletidas automaticamente no browser graças ao fast refresh.

Ecosistema vercel

Com o Next.js Analytics é um serviço desse ecosistema. É uma métrica de boa experiência de usuário em seu site. Foi construido para responder perguntas como: seu site carrega rápido? é responsivo? é visualmente estável?

Outra funcionalidade legal da plataforma é o deploy da sua ferramenta, que pode ser feito em apenas um comando e você pode acompanhar todo log de build da aplicação no site da vercel. Você também pode conectar um repositório do github e configurar deploy automatizado quando fizer um push na branch master, por exemplo.

SSR: Server Side Rendering

O SSR é uma técnica utilizada em que o bundle da aplicação react é compilado no servidor e retorna o código compilado para o browser em HTML, CSS e JS. Sem essa técnica, é necessário aguardar o carregamento de todo o bundle que contém o código da sua página para definir como será a página.

Como a compilação é feita no lado do servidor, a renderização da página é mais rápida, aumentando assim a retenção do usuário e também ajudando pessoas com dispositivos antigos e conexões de internet com baixa velocidade.

Outra grande vantagem é que dessa forma, os motores de busca como Google, Yahoo e Bing ao lerem o HTML da sua página vão ter muito mais facilidade para indexar o seu conteúdo, visto que tudo já estará compilado.

Futuro

Observando a curva de crescimento de trending do Next.js na comunidade javascript é possível perceber que a utilização está em ascenção e já por tempo considerável. É uma framework completa, estável e muito atualizada.

Esses fatores indicam que é uma tecnologia que ainda vai crescer muito e aumentar ainda mais sua participação de mercado. Com certeza é algo que vale investir um tempo de estudo e implementação em futuros projetos.

Este post não seria possível sem o trabalho de pesquisa e discussão no time do capítulo de frontend do LuizaLabs.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Até mais.

Consistência de estilo entre editores/IDEs

Stanley Gomes — Sat, 08 May 2021 01:52:58 +0000

Pessoal, hoje vou trazer uma configuração para você colocar no seu repositório para determinar algumad regras que os editores de código/IDEs fiquem padronizados.

Você já deve passado pela situação de commitar seu código e no momento de olhar o diff no git, você commitou diversos espaços no arquivo, sendo que você alterou apenas uma linha.

Isso acontece por que seu editor de código (vscode, atom, sublime text etc) possui configurações diferentes de indentação.

Para resolver esse tipo de problema você pode utilizar um arquivo chamado .editorconfig. Neste arquivo você vai definir regras como indentação (espacos ou tabs) e charset padrão.

Veja abaixo um exemplo de arquivo com as propriedades disponíveis.

# define que a pasta onde o arquivo está, é a raiz do projeto
root = true

# Padrão de de nova linha nk Unix
[*]
end_of_line = lf
insert_final_newline = true

# Charset padrão
[*.{js,py}]
charset = utf-8

# Indentação com 4 espaços
Você pode escolher entre tab ou space
[*.py]
indent_style = space
indent_size = 4

# sobrepor configuração para um diretório específico.
[lib/**.js]
indent_style = space
indent_size = 2

Bora implementar esse arquivo nos nossos projetos.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Debaixo do capô: Entendendo a performance no React

Stanley Gomes — Wed, 05 May 2021 14:41:52 +0000

Pessoal, muito se fala sobre a alta performance de renderização de aplicações desenvolvidas utilizando React. Um dos motivos que mais são importantes quando se toca neste ponto é o React Conciliation.

Esta API do React é responsável por observar e gerenciar o que muda a cada ciclo de re-renderização da sua aplicação/componentes. Nesse processo o React utiliza um algoritmo chamado React’s “diffing” algorithm, que é responsável por entender melhor o que muda a cada renderização e alterar o DOM da forma mais performática possível.

Existem algumas ações simples que o algoritmo faz para entender essas diferenças entre as versões de renderizações, que nós podemos observar para trabalhar com mais performance.

Elementos de diferentes tipos

Quando o React compara as versões, ele observa o tipo de elemento que está renderizando aquela árvore de componentes. Quando o elemento é alterado, todos seus filhos são re-renderizados. Veja no exemplo abaixo:

Neste cenário, eu vou alterar um elemento que era do tipo div e mudou para o tipo span.

<!-- Versão anterior do componente -->
<div>
  <ListaDeUsuarios />
</div>

<!-- Nova versão do componente -->
<span>
  <ListaDeUsuarios />
</span>

Neste caso acima, todo esse componente será re-renderizado.

Elementos de mesmo tipo

Quando o elemento mantem seu tipo entre as versões o react analisa outras características para decidir o que vai ser re-renderizado.

Neste caso abaixo, o componente mantêm o tipo div entre as versões, porém o conteúdo da prop title é alterado. Neste caso, o React vai renderizar apenas esta alteração individual da prop.

<!-- Versão anterior do componente -->
<div className="header" title="Meu App" />

<!-- Nova versão do componente -->
<div className="header" title="Meu App - Usuários" />

Um outro exemplo é a tag style, que é tratada de forma especial. Nesse caso abaixo, apenas a propriedade color do CSS do elemento em questão é alterada, então o React vai entender que apenas essa propriedade deve ser re-renderizada, ao mesmo tempo que o textAlign continua imutável.

<!-- Versão anterior do componente -->
<div style={{color: 'red', textAlign: 'left'}} />

<!-- Nova versão do componente -->
<div style={{color: 'green', textAlign: 'left'}} />

Lista de elementos

Ao renderizar uma lista de elementos, você pode utilizar uma propriedade chamada key para que instruí-lo a re-renderizar os elementos da lista que mudaram as keys.

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
  <li key="third">third</li>
</ul>

Caso a ordem desses elementos seja alterada, os elementos que mantiverem mesmas keys não serão re-renderizados.

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="second">second</li>
  <li key="first">first</li>
</ul>

Estas são técnicas que nos ajudam a escrever um código que o motor de renderização do React compreenda a melhor forma de re-renderizar nossos componentes e assim ganhamos performance.

Este post foi baseado na documentação do React Conciliation, usando os mesmos exemplos apresentados na DOC.

Este post não seria possível sem o trabalho de pesquisa e discussão do time do capítulo de frontend do LuizaLabs.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Até mais.