DEV Community: João Vitor Minosso

Performance no front-end

João Vitor Minosso — Thu, 26 Sep 2024 12:59:31 +0000

Recentemente, identifiquei uma lacuna significativa em uma biblioteca extremamente popular para front-end em aplicações hashtag#React.

Essa lacuna pode resultar em uma queda de desempenho de 100% a 500% na sua aplicação.

Mas no que isso implica? Um baixo desempenho pode afetar tarefas intensivas ou que impactam diretamente o usuário, incluindo re-renderizações que são comprovadas através de ferramentas de profiling.
Para corrigir e evitar esse problema no seu projeto, você deve analisar os resultados que obtive e considerar o tamanho da sua aplicação e suas metas de performance. Para isso, desenvolvi um projeto que mensura o impacto de duas bibliotecas de componentes e o hospedei na hashtag#Vercel. Nele, você pode observar o impacto em milissegundos de apenas 5 componentes na tela.

Acesse pelo link: https://lnkd.in/dPRJR6tt

Após visualizar o projeto, você pode pensar: "O desempenho vai de 30ms para 120ms; ninguém percebe isso."
Claro, com apenas 5 componentes, essa diferença pode passar despercebida. No entanto, considere uma tabela com 400 linhas ou uma tela que carrega componentes que utilizam useEffect para buscar e hidratar dados.
Se uma tela já leva 3 segundos para carregar, agora pode levar 12. Isso significa que seu usuário pode desistir, especialmente se estiver acessando pelo celular.

🤝 Deixe seu like para que este conteúdo chegue a mais pessoas e, se você já passou por essa situação, comente neste post para disseminar informações!

Explicação Mais Técnica
Implementei várias bibliotecas de estilo em diferentes tipos de aplicações, como Chakra UI, Tailwind, Material UI, Ant Design, entre outras. Contudo, nunca tinha encontrado uma biblioteca que tornasse o site tão lento quanto a do Ant Design, que leva cerca de 10 segundos para carregar uma página da documentação.
Diante disso, decidi testar. Ao abrir o profiler, percebi que o site que estava desenvolvendo estava sofrendo com re-renderizações excessivas. O desempenho havia caído e, como estava começando a usar a biblioteca e havia pouca informação na tela, isso não era perceptível para mim, mas ferramentas de teste de desempenho como Lighthouse e o profiler mostraram claramente o problema.
Verifiquei que duas bibliotecas diferentes estavam fazendo chamadas à API e recarregando a tela e seus componentes simultaneamente: Ant Design e Iconify. Ambas buscam e armazenam em cache os componentes na primeira carga da tela, ao contrário do Material UI e do código nativo (usando apenas HTML e CSS).
Pesquisei sobre melhorias de desempenho nessas aplicações e, após um tempo, cheguei à conclusão: "Se houvesse uma maneira de melhorar, eles já teriam feito isso na documentação." Assim, decidimos usar menos essas duas bibliotecas para evitar gargalos no futuro!
Se você quiser contribuir com este projeto, sinta-se à vontade para abrir um PR no repositório: https://lnkd.in/d4SDRqk8
Ficarei feliz com sua contribuição!

🚀 Exciting News! 🚀

João Vitor Minosso — Mon, 04 Sep 2023 13:52:04 +0000

I'm excited to share my latest project with you all, my online portfolio powered by NextJS from Vercel and React!
The portfolio is fully bilingual, featuring both a dark and light theme to suit your preferences and scores a perfect 💯 on Google PageSpeed!

Check it out now: https://portfolio-kallarari.vercel.app/

I'd appreciate your visit and any feedback you might have, so please feel free to connect and let's discuss about this. Thank you for your support!

I want your opinion!

João Vitor Minosso — Fri, 25 Aug 2023 23:10:09 +0000

I'm in the process of developing my portfolio website and have been on the lookout for captivating designs that align with my light theme. However, I've noticed that the color scheme I've been using tends to render the website somewhat lackluster.

So far, so good!

I would greatly appreciate any constructive feedback or advice you may have for my website. Please bear in mind that it's still a work in progress, and certain elements, such as the footer on all web pages, have yet to be implemented.

You can access my website through the following link: https://portfolio-kallarari.vercel.app/

How I make dark/light theme

João Vitor Minosso — Wed, 23 Aug 2023 22:52:21 +0000

I'm developing a website that requires a dark/light theme switch, and I've come across various approaches to achieve this, including:

Using Tailwind CSS
Creating a Context to store the theme
Utilizing an external React library
Employing TypeScript styled components
Simply using CSS

How would you choose an approach for a small application? I opted to use just CSS because it's the method I'm less familiar with. Now, I realize that it's actually the simplest way to accomplish this task. I used the :root:has(#theme-switch:not(:checked)) selector, and it worked smoothly in all my module.css files.