DEV Community: Isabel Rubim

Como melhorar o desempenho da sua aplicação em React de forma simples e rápida

Isabel Rubim — Wed, 06 Dec 2023 14:52:04 +0000

Olá, pessoas! Hoje vou falar um pouco de desempenho para vocês, algo que uma hora ou outra aparece no nosso dia a dia.

Vamos lá 📝

Em React, temos uma coisa crucial chamada renderização, nada mais é, e resumindo de forma rasa, é quando um componente aparece na tela pela a primeira vez. Com isso, surge a re-renderização que é o mesmo processo, mas o componente já está na tela.

Esse dois estágios são normais no React, eles fazem parte do ciclo de desenvolvimento. Mas a questão é, quando o estágio de re-renderização se torna tão frequente que a aplicação começa a dar sinais que não está funcionando bem, surgindo a lentidão nas aplicações em React.

Bom, digamos que temos uma barra de pesquisa em uma página inicial que tem vários outros componentes super pesados.

Um exemplo da re-renderização com a barra de pesquisa e os outros componentes pesados, ao digitar na barra de pesquisa, toda a página que contém o componente de pesquisa é atualizada, a cada caracter digitado. Isso porque quando temos um estado no componente, e ele é atualizado, o componente é renderizado novamente.

A lista faz parte da pesquisa realizada, mas todos os outros não, todos esses componentes serão renderizados cada vez que um usuário digitar algo na barra de pesquisa, podemos imaginar o quão ruim ficará a experiência do usuário.

Você pode pensar em mover esse estado para um hook e continuar chamando ele junto com os outros componentes, mas ainda assim teremos os componentes pesados re-renderizando em conjunto, porque o estado ainda continua ligado a todos os componentes. Ou até mesmo pegar esse estado como props, mas ainda teremos a maldita re-renderização porque o estado estará compartilhado com os outros componentes também.

Tá bem, Isabel... Entendi, e como podemos resolver isso? Já que não consigo resolver com hooks, props…

— Dev irritado

A solução é bastante simples e direta, para resolvermos isso, devemos pensar em uma pirâmide, isso mesmo, em uma pirâmide porque vamos mover tudo que usa o estado para baixo. Então, tudo que precisamos fazer é isolar o estado, independentemente de estar oculto em um hook ou usado diretamente, ou por prop.

Movemos o nosso componente de barra de pesquisa para um componente menor:

export default function SearchBar() {
  const [searchInput, setSearchInput] = useState("");

  const onSearch = (e) => {
    e.preventDefault();
    setSearchInput(e.target.value);
  };

  return (
    <>
      <input
        type="search"
        placeholder="Search here"
        onChange={onSearch}
        value={searchInput}
      />

      <List search={searchInput} />
    </>
  );
}

E então, chamamos onde ele começou inicialmente, ficando assim o resultado final:

export default function App() {

  return (
    <>
      <SearchBar />
      <SlowComponentOne />
      <SlowComponentTwo />
      <VerySlowComponent />
    </>
  );
}

O estado ainda muda, mas apenas o componente menor da barra de pesquisa é afetado. O componente pai que renderiza todos os nossos componentes pesados não tem mais estado e nunca é re-renderizado novamente.

Esse é um exemplo bem simplificado e direto de como funciona a re-renderização no React, e como pode nos ajudar nas soluções rápidas do dia a dia, mas o mundo da re-renderização não acaba por aqui, tem muito para explorar, se querem mais exemplos do que a re-renderização é capaz com soluções diferentes, deixe me saber.

Até a próxima 😄

O início da jornada

Isabel Rubim — Thu, 29 Dec 2022 17:24:45 +0000

Algumas pessoas sempre me perguntam, por onde começar a aprender desenvolvimento web, especificamente mais no contexto de front-end, então aqui vai uma lista de recursos que me ajudaram a conseguir meu primeiro emprego como estagiária em uma startup e me deu uma base para seguir como front-end:

Cursos 👩‍💻

Responsive Web Design - freeCodeCamp

Meu primeiro contato com o desenvolvimento web foi através do Free Code Camp, eles são excelentes para quem ainda não tem nenhum conhecimento sobre nada no mundo da programação, e além disso é tudo grátis!! E após cada conteúdo que você vai completando, eles vão disponibilizando exercícios sobre aquele conteúdo para você praticar o que foi estudado. Foram 300 horas de curso, sim, muitas horas, mas foi um passo muito importante na minha jornada.

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Em paralelo ao curso do Free Code Camp, eu busquei alguns cursos na Udemy e nisso eu encontrei os cursos do instrutor Jonas Schmedtmann, e que instrutor ótimo, explica super bem e com muitos exemplos, esse curso me deu um vasto conhecimento sobre tudo que envolve estrutura de um site e os estilos, foi muito bom. Os projetos que compõem o curso, são super bem feitos, ele vai começando com um projeto simples e conforme o conteúdo avança os projetos também vão ficando mais avançados também. Os cursos da Udemy são pagos, alguns raramente são grátis, mas sempre são cursos com preços muito acessíveis e os cursos do Jonas são de ótima qualidade, então com certeza vale o preço. Recomendo todos os cursos do Jonas, foi a peça chave para eu conseguir meu primeiro emprego.

The Complete JavaScript Course 2023: From Zero to Expert!

Após ter um vasto conhecimento de como estruturar um site e como estiliza-lo, era hora de encaixar as coisas para torna-las mais dinamicamente, então foi aí que encarei mais um curso do Jonas novamente, esse curso foi maravilhoso, ele mostrou como o JavaScript funciona por baixo dos panos detalhadamente do zero, e com vários projetos de alto nível. Foi o curso que me deu a ideia do que o JavaScript é capaz.

JavaScript: Understanding the Weird Parts

Depois de ter a ideia do que o JavaScript é capaz com o curso do Jonas, eu percebi que tinha muitas partes do JavaScript que eu não entendia direito, então busquei um curso que vasculhava as peculiaridades dessa linguagem e foi aí que descobri esse curso que mostra como entender as "partes estranhas" do JavaScript, perfeito, né?! 😆

Esse curso me mostrou também como o JavaScript pode te deixar na mão, se você não souber os truques dele!

Modern JavaScript (Complete guide, from Novice to Ninja)

Depois de ter feito dois cursos sobre JavaScript e fazer muitos exercícios, eu queria reforçar ainda mais meu conhecimento sobre essa linguagem, então fiz o curso do instrutor Ninja, que por sinal é um ótimo instrutor também, recomendo para todos que estão começando os cursos dele também. Além disso, ele tem um canal no youtube com muitos cursos sobre tudo que você pode imaginar no mundo da programação!

Git a Web Developer Job: Mastering the Modern Workflow

Após ter concluído a base do desenvolvimento web, eu queria entender como as pessoas trabalhavam em equipe em uma empresa, nisso eu encontrei esse curso do Brad, recomendo para quem não tem nenhuma ideia de como trabalhar com versionamento de código, GitFlow e GitHub. Esse curso foi ótimo para ter essa ideia de como trabalhar com várias pessoas em um projeto, como se fosse no mundo real.

Newsletters 🗞

Além dos cursos, eu assinei várias newsletter para me atualizar sobre conteúdos de programação em geral por e-mail, foram elas:

É isso, essa lista me ajudou a conseguir meu primeiro emprego na área de programação ainda quando estava na faculdade, espero que ajude você de alguma forma também.

Implementando Webpack em um projeto MVC com JavaScript

Isabel Rubim — Wed, 23 Mar 2022 15:53:30 +0000

Imagine um cenário em que um site só é feito em HTML, CSS e JavaScript (JS), esse site começa a tomar proporções maiores do que imaginávamos, o arquivo JS que contém as funcionalidades começa a ficar gigantesco, começamos a criar arquivos JS para dividir cada funcionalidade, importamos cada script em uma ordem muito especifica no HTML.

Mas isso vai ficando enorme e cada deslize o site quebra, você pode ver que esse cenário pode ir de mal a pior e com isso ficando impossível de trabalhar.

Neste artigo, vamos falar como webpack pode melhorar nosso desenvolvimento e como ele é aplicado em um pequeno projeto que construí nesse post explicando a arquitetura Model View Controller (MVC).

Você pode clonar diretamente do GitHub já estruturado para iniciar a configuração do webpack.

O que é webpack?

Webpack nada mais é do que um empacotador de módulos, ele serve para que não tenhamos arquivos gigantescos e que podemos dividir eles tranquilamente sem ter necessariamente uma ordem especifica como comentei, ao invés disso podemos importar cada um em seu respectivo lugar que será usado. E tudo isso é compactado em uma pasta dist que é usada para quando o projeto estiver no ar 🎉

O que vai ter nesse projeto com Webpack configurado?

Esse projeto vai conter arquivos de configuração Babel que é um tradutor para JS mais moderno que traduz para um JS mais antigo que é suportado em vários navegadores, assim não precisamos nos preocupar em usar os recursos mais modernos do JS, além disso usando a arquitetura MVC. Muito bom, né? Sem mais delongas vamos sujar nossas mãos e configurar nosso projeto.

Criando um arquivo webpack.config.js

Na raiz do projeto, vamos criar um arquivo chamado webpack.config.js nele será configurado tudo que precisamos para ter o webpack no nosso projeto. Após criar o arquivo, vamos instalar o webpack. Em seu terminal digite o seguinte comando:

npm install webpack webpack-cli webpack-dev-server --save-dev

No comando contém 3 pacotes:

webpack: instalará o webpack de fato;
webpack-cli: fornece vários comandos para que podemos configurar o webpack personalizado;
webpack-dev-server: isso nos ajudará no desenvolvimento, podendo assistir nossas mudanças no código com recarregamento automático.

Voltando no arquivo webpack.config.js, vamos colar o seguinte código:

const path = require("path");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "src"),
    },
    compress: true,
    port: 9000,
  },
  },
};

Para entendermos o que está acontecendo aqui, primeiramente:

A propriedade entry é o ponto que define onde o projeto iniciará e está recebendo o arquivo principal index.js que é o nosso Controller da arquitetura MVC.

Já o output é onde definimos como será nossa saída depois do agrupamento dos arquivos, aqui estamos dizendo a propriedade path do objeto output para que crie uma pasta dist que terá um arquivo bundle dentro da pasta js que está sendo definido no filename.

E o devServer que nada mais é onde definimos a pasta em que o webpack fica olhando as mudanças que ocorre no desenvolvimento e reflete em nosso navegador fazendo o recarregamento após salvar o arquivo.

Configurando o Babel

Inicialmente, precisamos instalar o babel e alguns pacotes relacionados, em seu terminal digite:

npm install @babel/core @babel/preset-env --save-dev

@babel/core: é onde contém as funcionalidades principais de todo o babel;
@babel/preset-env: contém vários plugins que ajuda a traduzir nosso JS.

E em seguida precisamos instalar o polyfill do babel que irá ligar o babel com o webpack, no terminal digite:

npm install @babel/polyfill --save

Após instalar os pacotes, na raiz do projeto vamos criar um arquivo chamado .babelrc nele irá conter nossas configurações para traduzir o JS moderno para o mais antigo, no arquivo coloque:

{
  "presets": [
      ["@babel/preset-env", {
          "targets": {
            /* 
            * Suporta as últimas 5 versões de cada navegador e certifica de que 
            * todas as versões do IE (a partir da 8) sejam compatíveis.
            */
            "browsers": [
                "last 5 versions",
                "ie >= 8"
            ]
          }
      }]
  ]
}

A propriedade targets que contém a propriedade browsers diz para suportar as últimas 5 versões de cada navegador e certifica de que todas as versões a partir da 8 do Internet Explorer sejam compatíveis.

Agora vamos até o arquivo webpack.config.js que criamos e vamos acrescentar o polyfill do babel no na propriedade entry, ficando assim nosso arquivo:

const path = require("path");

module.exports = {
  entry: ["@babel/polyfill", "./src/js/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "src"),
    },
    compress: true,
    port: 9000,
  },
};

Instalando plugins

Os plugins no webpack é um facilitador para otimizar o nosso desenvolvimento em determinadas tarefas.

O primeiro que vamos instalar é o html-webpack-plugin que faz com que nosso HTML esteja na pasta de saída com os pacotes e com os arquivos usados já importados como o index.js no nosso arquivo HTML.

Em seu terminal, digite:

npm install html-webpack-plugin --save-dev

Em seguida, vamos instalar um plugin muito útil também que se chama mini-css-extract-plugin em conjunto com o css-loader:

npm install mini-css-extract-plugin css-loader --save-dev

mini-css-extract-plugin: separa os arquivos CSS por arquivo JS que contém CSS;
css-loader: usado para interpretar import, url(), require() em arquivos JS.

Agora vamos adicionar nossos plugins no nosso arquivo webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    /*...*/
    plugins: [
        new HtmlWebpackPlugin({
          filename: "index.html", // Arquivo de saída em nossa pasta dist
          template: path.resolve(__dirname, "./src/index.html"), // Nosso arquivo HTML do projeto
        }),
        new MiniCssExtractPlugin({
          filename: "css/[name].css", // Arquivo de saída em nossa pasta dist
        }),
    ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
        ],
    },
}

E no index.js importamos o nosso arquivo css:

import "../css/styles.css";

Scripts

No package.json, adicione os scripts:

 "scripts": {
    "build": "webpack --mode production", // Gera a pasta dist
    "start": "webpack-dev-server --mode development --open" // Inicia a aplicação para o desenvolvimento
  },

Agora vamos rodar um comando para gerar a pasta dist:

npm run build

E em seguida o comando para rodar nossa aplicação e abrir ela no navegador pelo endereço http://localhost:9000/:

npm start

Podemos ver a pasta dist que contém um HTML empacotado, pasta css com nosso arquivo main.css e a pasta js com nosso arquivo bundle.js apenas com recursos do JS suportados para os browsers que definimos no arquivo de configuração babel.

Conclusão

Criamos um arquivo de configuração para o webpack 5 simples, pronto para seu uso em produção, com Babel, MVC, otimização em produção e um servidor de desenvolvimento. Webpack tem muitas outras funcionalidades, mas esse artigo pode ser um começo, mas recomendo entrar em mais detalhes, um exemplo é como você pode implementar o SASS em seu projeto em conjunto com a configuração que utilizamos nesse post. Com isso, você tem uma bagagem para criar outras aplicações com Framework ou o que preferir 🤯😄

Agora divirta-se, qualquer dúvida, pode enviar no meu twitter que estarei por lá 🤗

Construindo um simples projeto MVC do zero com JavaScript

Isabel Rubim — Thu, 14 Oct 2021 12:38:36 +0000

Gostaria de mostrar um pouco do que é a arquitetura Model View Controller (MVC) com um aplicativo simples, no começo parece ser um conceito muito abstrato e difícil, mas com uma demostração pode tornar o aprendizado mais fácil, então vem comigo que vou te ensinar como construir um projeto do zero para te ajudar a entender um pouco da arquitetura MVC apenas com JavaScript!

O projeto que vamos construir é bem simples, vamos utilizar a API do GitHub para buscar seu perfil e alguns dados 😜

Mas antes deixa eu te dar uma breve introdução do que seria uma arquitetura MVC.

Model ele é o manipulador de dados, no caso aqui vamos consumir a API do GitHub e tratar esse dados no model;
A View é o que você quer mostrar na tela e também manipular elementos que estão diretamente ligados a visualização;
O Controller é o que faz a comunicação entre o Model e a View, é ele que vai saber qual dado é transitado entre os dois.

Ok, agora que sabemos um pouco do que é MVC, mãos à obra 🔨

Inicialmente, vamos criar nosso HTML sendo estruturado assim:

<body>
  <header>
    GitHub App - Model View Controller (MVC)
  </header>

  <main class="container">
    <section class="profile">
    </section>

    <form class="filter">
      <input type="text" value="" />
      <button type="submit">Buscar</button>
    </form>

    <section class="repo">
      <h2>Repositórios favoritos</h2>
      <div class="repo-list"></div>
    </section>
  </main>

  <script type="module" src="js/index.js"></script>
</body>

Você deve estar pensando, porque exitem essas seções "vazias" sem conteúdo ou todo o código HTML com essas classes definidas nas tags, bem elas vão ser para referenciamos na nossa View!

Vamos criar uma pasta na raiz do nosso projeto chamada js que terá essa estrutura:

A pasta para as views, models e o arquivo index.js que será nosso controller.

Vamos continuar nas views, nela vamos ter 3 arquivos.

Vamos começar pelo o arquivo base.js que vamos ter funções e elementos que manipula as visualizações. Primeiro, vamos criar um objeto elements que terá referências das nossas classes definidas no HTML, para que a gente possa usar como referência quando quisermos adicionar ou tirar alguma elemento da visualização 🎨

Ele será assim:

export const elements = {
  profile: document.querySelector(".profile"),
  input: document.querySelector("input"),
  repos: document.querySelector(".repo-list"),
};

Em seguida, vamos criar um arquivo de userView.js dentro da pasta views, ele terá uma função renderUser que vai montar nosso HTML quando receber os dados do usuário do GitHub:

import { elements } from "./base.js";

export const renderUser = ({
  avatar_url,
  html_url,
  public_repos,
  followers,
  following,
}) => {
  const markup = `
    <div class="profile-header">
      <img src="${avatar_url}" alt="Avatar">
      <a href="${html_url}" target="_blank">Visitar perfil</a>
    </div>   
    <ul class="profile-list">
      <li>Repositórios: ${public_repos}</li>
      <li>Seguidores: ${followers}</li>
      <li>Seguindo: ${following}</li>
    </ul> 
  `;

  elements.profile.insertAdjacentHTML("afterbegin", markup);
};

A função renderUser utilizamos nosso objeto elements para referenciar a classe profile, utilizamos essa referência para inserir ela dentro da nossa section profile definida no nosso HTML com o método insertAdjacentHTML que recebe a posição como primeiro parâmetro e como segundo o nosso HTML.

Ok, agora vamos para o model da nossa view user.

Dentro da pasta models vamos criar um arquivo chamado User.js, ele vai conter uma classe User que vai fazer uma requisição para API do GitHub e como resposta irá retornar os dados do usuário que vamos utilizar na nossa view.

class User {
  constructor(user) {
    this.user = user;
  }

  async getUser() {
    try {
      const apiUrl = `https://api.github.com/users/${this.user}`;
      const apiUrlStarred = `https://api.github.com/users/${this.user}/starred`;
      const response = await fetch(apiUrl);
      const result = await response.json();

      this.avatar_url = result.avatar_url;
      this.followers = result.followers;
      this.following = result.following;
      this.public_repos = result.public_repos;
      this.html_url = result.html_url;
      this.starred_url = apiUrlStarred;
    } catch (error) {
      console.log(error);
    }
  }
}

export { User };

Agora que terminamos a nossa view e model para o User, vamos para o Repo que vai conter tudo relacionado a repositórios do GitHub que vamos utilizar.

Vamos começar da view do repo, dentro da pasta views, vamos criar um arquivo chamado repoView.js

import { elements } from "./base.js";

export const renderRepositories = (repositories) => {
  let markup = "";

  repositories.forEach(({ html_url, name }) => {
    markup += `
      <a href="${html_url}" class="repo-url" target="_blank">
        ${name}
      </a>
    `;
  });

  elements.repos.innerHTML = markup;
};

Com a mesma dinâmica para o userView.js, fizemos aqui para o repositório, a função renderRepositories vai receber uma lista de repositórios e vai montar a visualização dos repos.

Para o nosso model do repositório, vamos criar um arquivo dentro da pasta models chamado Repo.js

class Repo {
  constructor(repoUrl) {
    this.repoUrl = repoUrl;
  }

  async getRepositories() {
    try {
      const response = await fetch(this.repoUrl);
      this.repos = await response.json();
    } catch (error) {
      console.log(error);
    }
  }
}

export { Repo };

A classe Repo irá receber uma URL que vai retornar os repositórios do usuário que vamos buscar.

Estamos quase lá para finalizarmos nosso projeto, só falta um arquivo e não menos importante que é... 🥁

Isso mesmo, o nosso Controller 🎮

Lembra do arquivo index.js que está na raiz da pasta js? Então, vamos nele!

Vamos criar duas funções controller, uma para pegar os dados do usuário do nosso model User e renderizar a nossa view User e outra para pegar os repositórios do nosso model Repo e enviar para a nossa view Repo.

Veja que aqui deixa bem claro que ele é o comunicador entre o model e a view.

import { User } from "./models/User.js";
import { Repo } from "./models/Repo.js";

import * as userView from "./views/userView.js";
import * as repoView from "./views/repoView.js";

import { clearUI, elements } from "./views/base.js";

const state = {};

const controlFavoriteRepositories = async (url) => {
  try {
    state.repositories = new Repo(url);

    await state.repositories.getRepositories();

    repoView.renderRepositories(state.repositories.repos);
  } catch (error) {
    console.log(error);
  }
};

const controlSearch = async (event) => {
  event.preventDefault();

  try {
    const searched = elements.input.value;

    state.user = new User(searched);

    await state.user.getUser();

    clearUI();

    userView.renderUser(state.user);

    await controlFavoriteRepositories(state.user.starred_url);

    elements.input.value = "";
  } catch (error) {
    console.log(error);
  }
};

window.addEventListener("submit", controlSearch);
window.addEventListener("load", controlSearch);

Vamos começar pela função controlSearch que tem como objetivo receber o nome do usuário que foi digitado no input e que será enviado para o nosso model User. Em seguida, com os dados do usuário, guardamos esse valor dentro de um state global definido no inicio do arquivo, para futuramente se quisermos utilizar algum dado que já fizemos requisição, podemos chamar o state e usar os valores que contém nele.

Depois chamamos o método getUser() que irá trazer os dados do usuário, logo depois chamamos a função clearUI() que foi criada no arquivo base para remover o HTML existente e montar uma nova visualização do usuário assim que for pesquisado o seu user. Dentro do arquivo base.js vamos criar ela assim:

export const clearUI = () => {
  elements.profile.innerHTML = "";
};

Com o bloco profile vazio, chamamos a função para renderizar a visualização do usuário pesquisado. Em seguida, chamamos o controller controlFavoriteRepositories passando a URL que obtemos para renderizar os repositórios favoritos do usuário pesquisado.

O controller para renderizar os repositórios segue o mesmo padrão do usuário, primeiro chamamos a classe Repo e em seguida obtemos os dados para passar para a view e assim mostrando na tela os repositórios favoritos.

Alguns detalhes para finalizarmos, no final do arquivo index.js contém dois eventos submit e load, o submit vai ser acionado assim que for pesquisado algum nome de usuário e o load para renderizar o valor default do input definido no HTML, ambos chamando a função controlSearch.

Coloquei meu nome de usuário como default no value do input, mas fique a vontade de colocar o seu nome de usuário do GitHub!

 <input type="text" value="IsabelRubim" />

Além disso, criei uma pasta chamada css na raiz do projeto e um arquivo styles.css dentro da pasta para colocar alguns estilos que você pode copiar aqui. E depois chamei os estilos no HTML dentro da tag head:

<link rel="stylesheet" href="css/styles.css" />

Por último, chamamos nosso controller dentro da tag body do HTML:

  <script type="module" src="js/index.js"></script>

E pronto, um aplicativo simples que consulta qualquer usuário do GitHub, livre de bibliotecas e que mostra como funciona a arquitetura Model View Controller. E aqui está os links de demostração e código fonte:

Espero que esse tutorial tenha ajudado você a entender MVC. É um padrão facilmente utilizado em projetos reais e que pode ser um ótimo conhecimento para você.