DEV Community: Gabriel Duete

The Art of Lazy Loading: How to improve your frontend app performance. (Next.js/React)

Gabriel Duete — Mon, 17 Feb 2025 12:55:51 +0000

Introduction

You noted that your application is freezing at certain times or showing poor performance? Maybe using lazy loading can resolve your performance problems.

Lazy Loading is a performance optimization strategy. With this strategy, we ensure that some resources are loaded only when they are really needed, when they are about to enter the page's viewport (visible area).

Overview

By default we can use Lazy Loading in Javascript, CSS, Fonts, Images and iframes.

We can instantiate the loading attribute on an img or iframe element:

With this, we are able to instruct the browser that we need the loading of this element to be delayed until it arrives in the browser's viewport.

Lazy Loading in Nextjs

Using nextjs, things work differently, we have two main native strategies that we can use to create components with lazy loading, but I want to add one more to make our lives easier:

Dynamic Imports

With the Dynamic Imports of Nextjs, we can do dynamic imports, very useful for when a React component is not required in the initial page loading.

A good example of use is in feedback components such as modes or alerts, are usually displayed after some particular user action, so why load it in the initial load?

We can only import it when it is really necessary!

Let's see an example where I have a button component and a Snackbar component of the material ui. After clicking the snackbar button should be opened with a warning:

Result:

We can see that the Snackbar and Alert component is initially charged on the page, but is it only used if the user clicks the button, so why load it initially? What if the user doesn't click the button?Snackbar and Alert loading becomes useless.

Let's look at Build's time, pay attention to the first point of Size and First Load JS:

OK. Now let's make the same page, but using dynamic imports on Snackbar and Alert, after all they should only be charged if the click the button is done.

Same result:

Build:

We can see that the size of the size of First Load JS fell sponsoly!

From 43 KB to 35.6 KB
And from 148 KB to 141 KB

You may be claiming, "But wasn't that little?" We are talking about just one page with a simple functionality and it was already a gain, now imagine the total gains that your site would have if it was more pages?

Let's calculate the total size for 10 pages before and after optimization:

Before optimization:
- Size per page: 43 KB
- Total for 10 pages: 43 KB × 10 = 430 KB
After optimization:
- Size per page: 35.6 KB
- Total for 10 pages: 35.6 KB × 10 = 356 KB

Total Savings

Total reduction: 430 KB - 356 KB = 74 KB
Percentage reduction: (74 KB ÷ 430 KB) × 100 ≈ 17.2%

This shows that in a website with multiple pages, small optimizations can make a significant difference in overall resource consumption and loading speed.

We have seen how dynamic imports can impact page load times, it's a great and easy resource to use and raise the performance of your projects.

Lazy React

We can also use Lazy native react functionality that allows us to make dynamic imports, very similar to the Next.js Dynamic Imports, but has a difference.

In Lazy, we need to use suspense as the component's father we want to render, and pass a component that in Fallback, which will be shown in a loading while the component is being imported. But this will only happen the first time the component will be imported, the next no longer will be loading, because the component has been loaded, unless the page is recharged, so will have the loading in the first load.

Let's see in practice:

Result:

Note that in the first click of the button, it was displaying an element with "loading ...", that's what we went through in the component's fallback. But it will be displayed only the first time the component is clicked, and will only be displayed if the page is recharged.

Ok, but let's see now with data, the impact Lazy had on page loading:

Note that it had a higher reduction to the Dynamic Imports of Next.js! But on the other hand, it will now have an extra loading component, which can interfere with UX (user experience).

So this type of practice should be aligned with the design and product team, to understand what type of loading would be used, but it is not recommended, as it can negatively impact user experience, so it is recommended to use only in specific cases, such as For example the page is really slow.

React Lazyload

React-Lazyload works slightly different from previous ones, and does not directly impact the initial loading on the page. React-Lazyload monitors the position of the elements in relation to the page. When a Lazyload Son element is close to Viewport, it is rendered.

So we can put elements that are heavy to render as the user Scrolla the page.

Let's see in practice:

The code basically generates 15 images and displays on the screen, imagine how heavy it would be for the user to download it all at once? With Lazyload, it can download by steps, as you browse the page.

Result:

We can see in the Network tab, that the generated images are downloaded while scrolling the page, this brings us a large increase in performance, and ensuring that the user's internet can download everything without bottlenecks.

Imagine the performance gains we would have in our applications using Lazyload and dynamic imports at the same time? 🤯

It will surely positiously impact the user's experience, and he will be grateful for using a service without crashes or bottlenecks.

If you want, you can view the code here.

Conclusion

We have seen some valuable practices on how to improve the performance of your applications using Lazy Loading in Next JS, how advantageous it can be for the user's exhibition, load something only when really needed.

I hope it was clear in the explanations. Any questions can call me to talk, stay with God and good studies! =)

Mastering Compound Components: Building Flexible and Reusable React Components

Gabriel Duete — Sat, 09 Nov 2024 17:07:01 +0000

Introduction

One of the most useful and widely used concepts in the world of React is design patterns, as they help keep code scalable and give added meaning to the components we create.

There are various patterns, and in this article, we’ll discuss Compound Components, an advanced pattern that is especially useful for creating flexible and composable interfaces.

What is Compound Components?

Compound Components is an advanced pattern in React. Its goal is to create a more flexible design by enabling the sharing of state and logic among a group of components. This way, communication between the parent component and child components can be achieved in a flexible manner.

The components work together to achieve certain behaviors without creating complex prop trees or overly complicated logic that would be difficult to refactor or understand in the future.

This pattern helps eliminate prop drilling, where we pass down a large number of props through several component layers. Prop drilling can be problematic, as it may cause unnecessary re-renders every time the state is updated, since each state change will update all child components.

An example of Compound Components can be seen in the HTML structure of select and option tags:

The select element works as the interface’s state manager, while the option elements configure how the select component should function.

Example Using Compound Components

In this example, we’ll create a Modal, which is divided into two compound components: Toggle and Content. They will share the open/close state of the modal.

Let’s walk through how to create this component step by step:

We can start by creating the context that will manage the open/close state of the modal:

Creating the base of the Modal component:

Notice that we’re using children to grab the components that will be placed inside the Modal. We want to use it like this:

Now we need to create the toggle component, which will be responsible for opening the Modal:

We also need a content component that will be responsible for displaying the Modal’s content:

Finally, we can add both components to our Modal component, and it’s ready to go! 😊

Usage:

Result:

This way, we make creating and using modals extremely flexible and reusable. Modal.Toggle is responsible for triggering the modal display, while Modal.Content should display the modal content.

This structure allows developers to easily customize the behavior and content of modals according to the specific needs of their applications, making the code cleaner and more organized.

Other Examples

We can also use Compound Components in other contexts, such as:

Accordion components:

Menu components:

All of these examples are flexible and adaptable, making development, scalability, and component usage easier.

Exercise

We noticed that the close button was placed inside the content component, but it would be interesting to have a component dedicated to managing the closing of the modal. You could create something like <Modal.Close>Close</Modal.Close>. Try experimenting and adding this component as well!

Conclusion

We’ve seen how writing components using the Compound Components pattern can be useful in our applications. We also explored how to implement it and reviewed examples of where this pattern can fit.

Feel free to explore and experiment with creating components using Compound Components. Use it wisely and assess if it makes sense to apply in your context, as if not implemented well, it could end up being more of a hindrance than a help.

Note: I posted this same content on react4noobs, a BR repository that brings together articles created by developers in the React universe. It’s worth checking out!

Dominando Compound Components: Construindo Componentes React Flexíveis e Reutilizáveis

Gabriel Duete — Fri, 08 Nov 2024 23:19:16 +0000

Introdução

Algo que é muito útil e abrangente no mundo do React são os seus design patterns, pois eles ajudam a manter o código escalável e adicionam significado aos componentes que criamos.

Existem vários padrões, e neste artigo falaremos sobre Compound Components, um padrão avançado que é especialmente útil para criar interfaces flexíveis e compostas.

O Que é Compound Components?

O Compound Components é um padrão avançado em React. Tem como objetivo criar um design mais flexível, permitindo o compartilhamento de estado e lógica entre um grupo de componentes, onde a comunicação entre o componente pai e os componentes filhos devem ser feitas de maneira flexível.

Os componentes devem trabalhar juntos para realizarem algum comportamento sem criar árvores de props embaraçosas ou uma lógica complexa demais para ser refatorado ou compreendido futuramente.

Esse padrão nos ajuda a eliminar inflamações de props, onde temos que passar uma árvore de props entre os componentes. Essa injeção de props é um problema, pois pode causar vários re-renders desnecessários a cada estado que for atualizado, já que cada estado irá atualizar todos os componentes filho.

Temos um exemplo de Compound Components na estrutura do select e option das tags em HTML:

O select funciona como um gerenciador de estados da inferface, enquanto o option são configurados em como o select deve funcionar.

Exemplo utilizando Compound Components

Neste exemplo, vamos criar um Modal, que é dividida em dois componentes compostos: Toggle e Content. Onde vão compartilhar o estado de abrir e fechar o modal entre eles.

Vamos ver como seria criar esse componente passo a passo:

Podemos começar criando a context responsável por gerênciar o state de abrir e fechar o modal

Criando a base do componente Modal

Perceba que estamos usando children, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:

Agora precisamos criar o componente toggle, que vai ser responsável por abrir o Modal

Também precisamos do componente content que vai ser responsável por exibir o conteúdo do Modal

Por fim, podemos atribuir os dois ao nosso componente Modal e já ta no jeito (:

Utilizando

Resultado

Assim, a gente torna a criação e o uso de modais extremamente flexíveis e reutilizáveis. Modal.Toggle é responsável por ativar a exibição do modal, enquanto Modal.Content deve exibir o conteúdo do nosso modal.

Essa estrutura permite que os desenvolvedores personalizem facilmente o comportamento e o conteúdo dos modais de acordo com as necessidades específicas de suas aplicações, tornando o código mais limpo e organizado.

Outros exemplos

Também podemos utilizar Compound Components em outros contextos, por exemplo:

Componentes de Accordion:

Componentes de Menu:

Todos são flexivéis e adptavéis, facilitando o desenvolvimento, escalabilidade e uso do componente.

Exercício

Vimos que o botão de fechar ficou dentro do componente do conteúdo, seria interessante ter um componente para gerenciar o fechamento do modal, algo que poderíamos usar como <Modal.Close>Fechar</Modal.Close/>, vale a pena dar uma brincada e incluir esse componente também.

Conclusão

Vimos o quanto escrever componentes no padrão Compound Components pode ser útil em nossas aplicações, vimos também como utilizar e alguns exemplos em que esse padrão pode encaixar.

Fique à vontade para explorar e brincar criando componentes com Compoud Components, use com sabedoria e veja se realmente faz sentido aplicar no seu contexto, as vezes, se não for bem aplicado, ele pode mais atrapalhar doque ajudar.

OBS: Postei esse mesmo conteúdo no react4noobs, repositório destinado a agrupar artigos criados por desenvolvedores no universo do react. Vale a pena conferir =).

Conceitos de internet - HTTP/HTTPS, DNS, DOMÍNIO E SERVIDOR

Gabriel Duete — Fri, 14 Jul 2023 01:56:40 +0000

Conceitos de internet

Introdução

Entender alguns conceitos da internet é crucial no dia a dia de um programador, acredite! Compreender esses termos pode salvar você inúmeras vezes ao resolver problemas em suas tarefas ou ao lidar com situações em produção. Isso o ajudará a identificar rapidamente os problemas e economizar várias horas de trabalho extra.

Vamos agora explorar os principais e mais básicos conceitos da internet.

Funcionamento HTTP

Hipertext Transfer Protocol (Protocolo de transferência de hipertexto) é o protocolo de comunicação utilizado no WWW, ou seja, utilizado na comunicação entre cliente e servidor.

Vejamos no diagrama a seguir um exemplo simples de uma comunicação HTTP:

Perceba que o usuário envia uma requisição de determinados dados pro servidor, essa requisição é denominada de HTTP REQUEST. Por outro lado, o servidor recebe a requisição feita pelo usuário e retorna uma resposta de acordo, a resposta é denominada de HTTP RESPONSE.

Métodos HTTP

GET

O método GET solicita um recurso do serviço/servidor, onde deve ser retornado os dados da requisição.

Veja a imagem a seguir:

Podemos definir o HTTP REQUEST como um método GET, que iria solicitar algum dado do servidor ou serviço.

HEAD

O método HEAD é semelhante do GET, a diferença é que não tem contém o corpo da resposta no response.

POST

O POST é responsável por enviar dados para o serviço, o serviço por sua vez, recebe os dados e armazena.

PUT

O método PUT tem a responsabilidade de atualizar/substituir o dado do serviço. Seria preciso enviar os dados que seriam necessários para atualizar essa entidade. Também é importante saber que é possível criar um recurso em uma entidade usando o PUT, por exemplo, se tentarmos fazer uma modificação em um usuário com o id 1234, ele seria criado com todos os dados, e caso existisse, seria modificado.

DELETE

O método DELETE é usado para remover um dado específico.

CONNECT

O connect é o menos utilizado, serve para fazer a conexão entre aplicações que possuem configurações de proxy. Basicamente é utilizado em aplicações com seguranças específicas, onde seria preciso se conectar a um servidor proxy pra seguir com a conexão.

OPTIONS

O OPTIONS é usado para retornar informações do serviço/servidor. É o principal método utilizado em plataformas que realizam deploys de aplicações, porque é o método responsável por pegar as configurações necessárias para o deploy.

PATCH

O método PATCH é semelhante ao PUT, nele você consegue alterar alguns dados de um recurso, como por exemplo mudar apenas o nome de um usuário, sem a necessidade de passar todos os dados. Além disso, não é possível criar um recurso como no PUT.

TRACE

O método TRACE funciona como uma espécie de debug do serviço, é responsável por realizar um teste de loopback enviando a última request para o servidor, e percorre a conexão para verificar se ocorreu tudo corretamente.

Exemplo real

Podemos usar um exemplo real para pegar o método GET.

Se entrarmos na página inicial do Youtube, podemos ir no buscador e fazer a busca por algum vídeo.

Comecei buscando por ‘’Teste GET’’ e em seguida ele já mostrou algumas sugestões de pesquisa. Se entrarmos na inspecionar elemento e buscar pela aba de Network, conseguimos enxergar as conexões sendo feitas.

Confira as imagens:

Indo em Network, depois clicando na requisição e indo em preview, podemos ver a resposta do servidor ao nosso método GET, que foi responsável por puxar do servidor as informações de sugestão para nossa pesquisa ‘’Teste GET’’. Além do status code da requisição que retornou 200.

HTTPS

A sigla HTTPS vem de "Hypertext Transfer Protocol Secure" ou "Protocolo de Transferência de Hipertexto Seguro". Percebe-se que é bastante semelhante a sigla HTTP, com a diferença do "s" atribuído para segurança.

O HTTPS oferece uma camada extra de segurança para proteger suas informações utilizando a tecnologia de criptografia TLS/SSL, onde as transferências de dados são criptografadas. Todo e qualquer dado contendo em um site utilizando o HTTPS será codificado em uma mensagem hiper complexa, dessa maneira irá proteger seus dados de serem capturados e decodificados, a não ser que possua a chave de criptografia. Note que na maioria dos sites que utilizam o protocolo HTTPS possuem a flag de ''site seguro'' nos navegadores.

Para utilizar do protocolo HTTPS em um site é necessário utilizar o certificado SSL nele. Existem algumas maneira de conseguir o certificado, a maioria das plataformas oferecem planos que já contem o certificado SSL, vai da sua preferência a forma de adquiri-lo.

Funcionamento DNS

DNS ou Domain Name System(Sistema de nome de Domínio) é um banco de dados responsável por armazenar endereços de sites e traduzi-los para nomes simples.

Quando hospedamos algo na web, por padrão, o endereço do site é registrado em um IP, como por exemplo: 192.46.254.15. Imagina sempre que ter que fazer uma busca, buscar por esse tipo de nome? Seria péssimo em vários aspectos. Porém com o DNS configurado, ele consegue fazer a conversão desse IP para uma nome que você preferir, contanto que esteja no padrão estabelecido.

Observe a imagem a seguir:

Vimos que o navegador faz a requisição da página ‘’www.gabriel.com’’, então o DNS retorna o IP do site, para que o navegador solicite no servidor web uma cópia dos arquivos da página solicitada.

A entidade responsável por armazenar os endereço de IP é a Internet Corporation for Assigned Names and Numbers (ICANN), em português “Corporação da Internet para Atribuição de Nomes e Números”. A ICANN não possui fins lucrativos e é mantida por vários comitês ao redor do mundo.

Funcionamento de um Domínio

Como vimos antes, cada site tem um endereço especifico baseado em IP’s, em que o DNS converte em um nome específico. Podemos dizer que nesse endereço: http://www.meusitehehe.com.br, tudo que vem depois do www. seria o domínio do site, ficando meusitehehe.com.br.

O domínio é como se fosse o endereço físico do seu site. É através dele que os usuários conseguem identifica-lo, sem precisar saber de cabeça o endereço IP dele.

Para realizar uma hospedagem de um site, precisamos registrar o domínio em uma plataforma, que fica responsável por entrar em contato com ICANN ou RegistroBR e liberar o domínio. Porém existe algumas regras, como por exemplo, o site deve ter um domínio único nunca escolhido antes na web.

Domínios nacionais e internacionais

Quando vamos escolher uma plataforma para fazer a hospedagem do nosso site, devemos escolher entre domínios nacionais e Internacionais.

Domínios nacional

O domínio brasileiro é coordenado pelo RegistroBR, que é responsável pelo registro e manutenção dos domínios no Brasil, o domínio mais comum tem a terminação .com.br, também pode se deparar com outros domínios governamentais, como .gov.br, ou de pessoas físicas como .blog.br, e por ai vai.

Domínios internacionais

Nos domínios internacionais temos alguns mais conhecidos, como ***.com, .org, .net,* etc… Lembrando que são mantidos pela ICANN e qualquer site brasileiro pode usar os domínios internacionais.

Funcionamento de um Servidor

O que é?

Basicamente um servidor é uma espécie de computador, só que bem mais potentes do que um comum, com processadores bem mais avançados, além de outros componentes, como banco de memórias, placa mãe, fonte de alimentação, refrigeração, etc…

Os servidores são úteis para fornecer serviços de maneira centralizada, assim não é necessário realizar os mesmos procedimentos de um serviço em todas as maquinas que usam do mesmo serviço, só é preciso realizar os procedimentos(como instalação do serviço) no lado do servidor e todas as máquinas irão obter o mesmo resultado.

Um servidor tem diversos tipos e serviços para oferecer, segue uma lista com alguns exemplos de serviços:

Hospedagem
Banco de dados
Serviços de e-mail
Armazenamento de arquivos
Aplicações de telefonia
Sistemas de pagamentos

Como funciona?

A maneira como um servidor funciona depende do tipo dele, como vimos anteriormente, existem vários tipos e serviços diferentes. Entre todos podemos entender como funciona um servidor web, já que tratamos assuntos semelhantes anteriormente e usaremos os mesmos conceitos.

Quando buscamos algum endereço na aba de pesquisa do navegador passamos pelo processo do DNS, onde será feito o processo de tradução e identificação do endereço. Após isso passamos pelo processo do protocolo do HTTP, onde o navegador irá solicitar ao servidor os arquivos referentes ao endereço pesquisado e retornar uma cópia desses arquivos para o usuário, que no caso de sucesso, irá visualizar a página. Lembrando que o armazenamento desses arquivos pode variar de servidor pra servidor.

Conclusão

Ao final desse artigo espero que você tenha entendido noções sobre como funciona o HTTP, HTTPS, DNS, domínio e servidor. Brinque um pouco no seu navegador usando a aba de network do devtools para acompanhar de perto os processos.

Se quiser ir mais afundo nos assuntos recomendo ver sobre status code, tipos de servidor, hardware de um servidor e praticar os métodos HTTP.

Qualquer dúvida ou sugestão estarei aqui para interagir. Valeuu!

O que é gitflow? - Entendendo gitflow

Gabriel Duete — Tue, 28 Feb 2023 07:14:51 +0000

Introdução

Nós desenvolvedores, trabalhamos com git quase todo dia, afinal, o versionamento nos permite acompanhar as mudanças aplicadas nos nossos projetos. Imagina o caos que era antes do Linus ter essa brilhante ideia!

E com o surgir do git, também sugiram alguns modelos de fluxo de trabalho, que nos auxiliam a trabalhar com o versionamento. Os mais populares e recomendados hoje em dia é o fluxo de desenvolvimento baseado em tronco e o Gitflow. Pessoalmente, eu costumo sempre trabalhar com o Gitflow em qualquer projeto. Então nesse artigo será apresentado os principais conceitos do Gitflow.

É interessante que você tenha algum conhecimento básico em git e desenvolvimento de software, para melhor assimilação do conteúdo, já que usarei alguns termos dessas áreas.

O que é gitflow?

O Gitflow foi publicado e divulgado pelo engenheiro de software Vincent Driessen. Esse modelo pode ser usado na maioria dos projetos, sendo privados ou públicos, mas é altamente recomendando para projetos com ciclos de lançamentos agendados e/ou entregas contínuas. Também é importante entender que você pode fazer alterações no modelo conforme as suas necessidades.

Um dos benefícios de utilizar o gitflow, é não permitir que os desenvolvedores façam commits diretamente na branch de produção, já que isso pode trazer diversos problemas, como por exemplo: enviar alterações indesejadas, causando uma dor de cabeça gigante para resolver o problema, não só para o desenvolvedor, mas também pros negócios do projeto. O gitflow trambém traz outros benefícios importantes como revisões de pull request, POCS(experimentos isolados) e até torna a colaboração do time bem mais eficiente. Vamos entender mais como o gitflow funciona.

Entendendo o Gitflow

O gitfow modulariza duas branchs principais, sendo elas a branch Main/Master onde é feita o deploy do projeto, e a branch Develop, onde deve ser trabalhado as integrações dos recursos que estão sendo desenvolvidos. A branch develop deve conter todo os históricos de commits do projeto, e também vai ser a branch onde os desenvolvedores que desejam contribuir devem bifurcar. Já a master deve conter a versão final e alterações abreviadas que a branch de develop lançou.

A melhor maneira de configurar a branch Develop, é com apenas um desenvolvedor, de preferência alguém de senioridade avançada na equipe, criando uma ramificação develop no local e fazendo o push. Já a branch master já vem pre-configurada ao criarmos o repositório no github, mas fique a vontade para fazer quaisquer alterações.

Então temos a branch main e develop, precisamos agora de uma terceira ramificação, que chamaremos de Feature, a feature é uma branch gerada localmente por qualquer desenvolvedor que irá acrescentar, corrigir, ou refatorar algo no projeto. Então, para subir essa feature para a branch develop, deve-se abrir uma PULL REQUEST criado a partir da ramificação de develop mais recente, e ser aprovado por outros desenvolvedores responsáveis pelo projeto, além de aplicar correções e sugestões dos mesmos.

Após ter aplicado as alterações e ter recebido os aproves dos demais devs, a branch é mergeada para a branch de develop. Então a branch de develop já atualizada com suas devidas features, pode-se ser megeada para a branch master onde é realizado o deploy para a produção!

Vejamos a seguir um fluxograma que demonstra como funciona o gitflow com as ramificações que apresentamos até agora:

Percebemos que são geradas novas versões da branch master toda vez que a branch de develop é mesclada, note também que cada bolinha laranja é uma feature(Pull request) que após passar por suas etapas de aprovação, é mesclado para a branch develop, que após receber X número de features, que provavelmente foram planejadas, é mesclado para a branch master, dando fim ao fluxo.

Release

Podemos progredir mais, e entender o processo de Release. Release é uma ramificação que serve como ponte para o merge da branch develop para a master, também é nela onde são realizados os testes estabelecidos no projeto/empresa. Essa ramificação é responsável pelo próximo lançamento, então depois de criada, nenhuma nova feature deve ser adicionada nessa ramificação, somente em caso de alterações, onde deve-se realizar as alterações em uma branch de feature, mesclar com a develop e realizar novamente a mesclagem da develop na release.

Vamos analisar o fluxograma a seguir:

Mantemos a branch Master, Develop e Features, mas perceba que para que haja o merge das alterações de develop para master, é realizado o processo de Release, é preciso subir as alterações da branch de develop para a branch de Release, onde será realizados todos os testes, e finalmente após ser aprovado, podemos subir para a master! É importante saber que caso haja alguma alteração solicitada pelo QA/Tester, a alteração deve ser feita seguindo o começo do fluxo normalmente, abrindo uma PR, subindo pra developer e novamente mesclando e testando na branch de Release.

Note também que após realizarmos o merge da release, precisamos manter a branch develop atualizada com a última release, para que possa seguir o fluxo de desenvolvimento com a versão correta do projeto.

Hotfix

Vamos falar agora sobre Hotfix, que é uma ramificação usada para corrigir bugs e ajustes com rapidez, sem que precise percorrer todo o fluxo desde do início. É extremamente eficaz para erros inesperados ou de grande impacto. Imagine que algum desenvolvedor subiu um bug para produção que impede que os usuários realizem login, agora imagine você como usuário ter que aturar esse erro por 1 ou 2 dias? O ideal é que seja resolvido de imediato, não é mesmo? Então é nesses tipos de situações que utilizamos o Hotfix, nesse caso, para trazer uma solução rápida. Geralmente esses erros gerados, passam despercebidos na hora dos testes, onde não foi possível detectar o problema e corrigi-lo antes de subir para produção.

As ramificações de hotfix são baseadas na ramificação master ao invés da ramificação develop, já que é onde precisamos corrigir o problema com rapidez. Após a correção, as alterações devem ser mergeadas tanto na branch master como na develop ou na branch de release (caso esteja aberta).

Vejamos a seguir o mesmo fluxo anterior, mas com a adição de um hotfix:

Perceba que a branch do hotfix simplesmente ignorou o fluxo e atualizou as branchs de master e develop com a correção do bug. E assim, não afeta diretamente as branchs de Features, além de corrigir o problema.

Ambiente Homologado/QA

É importante entender que seguir arduamente o gitflow é opcional! Cada empresa/projeto pode ter um gitflow específico para suprir suas necessidades. Vamos mostrar aqui um modelo onde os testes das features não são realizados apenas na branch de release, mas são testados individualmente toda vez que a feature é mergeada para a branch de QA e develop.

Observe o fluxo a seguir:

Perceba que após uma feature ser finalizada em sua branch individual, ela é mergeada para as branchs de QA e develop e lá deve ser testada pelo QA. Após a alteração ser aprovada, ela é mergeada diretamente na master, e após isso, todas as branchs de features locais devem ser atualizadas com as alterações da master. O mais interessante é que as outras features podem ser testadas individualmente enquanto é realizada o merge de outras.

Fluxo de desenvolvimento

É interessante entender o fluxo de desenvolvimento quando estamos estudando gitflow, para saber que ações tomar em cada tipo de branch. Também é importante frisar que esse fluxo pode variar de empresa pra empresa e de gitflow para gitflow, apenas irei trazer exemplos mais comuns e recomendados.

Lembra do nosso fluxograma de um gitflow completinho, com release e hotfix? Observe como poderia ser o fluxo de desenvolvimento dele:

Fluxograma do Gitflow

Fluxo de desenvolvimento

Podemos tratar individualmente cada ponto:

Local:
Aqui é onde você vai abrir a branch para feature solicitada, baseado na develop.
1. Deve codificar a solução da sua tarefa.
2. Dependendo do projeto, você precisa criar testes unitários, e rodar os testes do projeto para garantir que sua solução não quebrou nenhuma outra funcionalidade.
3. Caso necessário, é preciso de validações externas, como validar um layout, ou uma regra de negocio que não foi muito bem entendida.
Pull Request:
Nessa etapa é onde você abre sua PR para validação dos demais desenvolvedores.
1. Caso haja sugestões de alterações, você deve avaliar se faz ou não sentido e aplicar em sua solução. Também pode haver questionamentos, ou requisições de mudança no caso de encontrarem algum erro severo.
2. Grande parte dos projetos requerem aprovação do time, ou de pelo menos um ou dois desenvolvedores para que possa seguir o fluxo.
3. Depois de aprovado, basta subir suas alterações para a branch de desenvolvimento.
Develop:
1. Deve-se verificar se ocorreu tudo certo com o merge, envolvendo pipelines, testes unitários, builds, etc…
2. É interessante também conferir se todas as alterações foram realizadas com sucesso, pode ter gerado algum erro envolvendo variáveis de ambiente, build, etc…
3. Agora é só abrir a branch de Release e mesclar as alterações!
Release:
1. Nessa etapa também é interessante verificar se ocorreu tudo certo com o merge.
2. É aqui onde ocorrem os testes nos ambientes homologados/qa.
3. Caso haja a necessidade de alguma alteração, pode-se fazer o ajuste em uma branch de feature, mesclar para develop e novamente mesclar a develop na release. Ou seguir algum outro fluxo estabelecido nos padrões do projeto. Após finalizar, basta finalmente fazer o merge na master!
Produção:
1. E novamente… deve-se verificar as pipelines, para que possa garantir a qualidade do merge.
2. Agora com tudo certinho, pode-se verificar as alterações no ambiente de produção! (Só pra ter certeza, né? :he-he:)

Essa foi uma demonstração de como funcionaria um fluxo de desenvolvimento em cima do gitflow. Obviamente podem haver etapas diferentes em cada parte do desenvolvimento, variando de projeto para projeto, empresa para empresa.

Vejamos esse outro exemplo, usando o gitflow que criamos com o ambiente homologado/QA.

Veja só como ficaria:

Fluxograma do gitflow com QA

Fluxo de desenvolvimento

As etapas são bastante similares, com algumas mudanças simples:

Deve sempre criar branchs de features baseados na master
Ao concluir as PR’s, deve mesclar as alterações para as branchs de DEV e QA, ao invés de apenas para DEV.
A branch de DEV agora servirá mais como um ambiente de testes para desenvolvedores, onde também deve-se tomar cuidados especiais, como pipelines, builds, etc…

Na Branch de QA é onde acontece a magia. As etapas 1 e 2 são exatamente as mesma do fluxo anterior, o que muda é a maneira como trabalhamos na etapa 3(Aplicar possíveis alterações). Veja como ficaria nesse novo fluxo:

Nesse fluxo, seria preciso retrabalhar em cima da branch, onde seria resolvido a alteração solicitada pelo(a) QA, também seria necessário ter a PR revisada novamente, e por fim, mesclado novamente para as branchs de QA e DEV, onde seriam realizados os testes da nova versão da PR. Caso deva ser feita alguma nova alteração, é preciso refazer o fluxo.

Por fim, após ter validado as alterações, já podemos mesclar a PR diretamente na master e verificar as alterações no ambiente de produção. O fluxo completo ficaria assim:

Conclusão

Chegamos ao final do artigo, e espero que tenha conseguido entender como que funciona o gitflow e suas principais características. É importante ressaltar que cada gitflow e fluxo de trabalho podem ter alterações de acordo com o projeto. Existe também uma maneira interessante de usar o gitflow, que é instalando a CLI do gitflow, e executando no seu projeto.

O ideal é que você coloque em prática tudo que foi aprendido aqui, criar um projeto open-source e trabalhar nele junto com seus amigos, colegas, comunidades, etc… É interessante criar um arquivo readme onde você irá montar o seu gitflow e exigir que os desenvolvedores trabalhem seguindo ele, também é interessante montar um fluxo de desenvolvimento para que ninguém se sinta perdido enquanto trabalha usando o seu gitflow.

Bons estudos! E se precisar de mim para esclarecer alguma dúvida, pode me chamar nas minhas redes sociais, na maioria das vezes é só pesquisar por @gabrielduete que você me achará!

Referências

FLUXO DE TRABALHO DE GITFLOW. Atlassian solutions, [s.d.]. Disponível em: <https://www.atlassian.com/br/git/tutorials/comparing-workflows/gitflow-workflow>. Acesso em: 26 de fev. de 2023.

PEDROSO, Murillo Godoi. Git Flow: entenda o que é, como e quando utilizar. Alura, 2023. Disponível em: <https://www.alura.com.br/artigos/git-flow-o-que-e-como-quando-utilizar#:~:text=Vamos nessa%3F-,O que é Git Flow%3F,organização do versionamento de códigos>. Acesso em: 27 de fev. de 2023.

MIKAEL, Hadler. Utilizando o fluxo Git Flow. Medium, 2023. Disponível em: <https://medium.com/trainingcenter/utilizando-o-fluxo-git-flow-e63d5e0d5e04>. Acesso em: 27 de fev. de 2023.

BEECROWD - Guia de como enviar soluções com javascript

Gabriel Duete — Tue, 26 Apr 2022 01:16:15 +0000

🤠Infos

Guia de como resolver problemas do [Beecrowd](https://www.beecrowd.com.br/judge/p) com JavaScript.
Esse mesmo artigo também está presente nesse repositório no github, junto com algumas soluções que já enviei.

💻Tecnologias utilizadas

JavaScript

🤔Ta com duvida em como enviar respostas com JS??

Muitxs programadorxs sentem dificuldades em solucionar os problemas do beecrowd com JavaScript por não entender como funciona a entrada de dados. Relaxa! Eu vou te explicar: Primeiramente, crie um arquivo chamado 'stdin' em sua pasta. Iremos usar esse arquivo para ler os valores do nosso problema!

Agora, vamos resolver o problema 1001 do Beecrowd. Para isso, temos que iniciar declarando o nosso input:



var input = require('fs').readFileSync('stdin', 'utf8')

Para recebermos os valores da entrada, precisamos fazer uma requisição do módulo conhecido como 'fs'. Este módulo fornece operações de I/O (Input/Output ou E/S, Entrada/Saída).

Não iremos entrar muito em detalhes de como o 'fs' funciona, pois iremos usar apenas a função readFileSync do 'fs', essa função permite a leitura de forma síncrona do arquivo que iremos passar como parâmetro da função, junto com seu tipo de arquivo 'utf8'.

Ok, nosso input está pronto! Vamos testar? Entre no arquivo stdin e digite 10 e 9 um em cada linha, em seguida digite console.log(input) no código.

Perceba que foi impresso 10 e 9, conforme digitados no arquivo stdin! Pois o nosso input está lendo os valores digitados naquele arquivo.

Vamos agora para o próximo passo!



var valoresRecebidos = input.split('\n')

Digite isso no seu código. Perceba que declaramos uma variável chamada valoresRecebidos, essa variável irá receber os valores do input e armazena-los. Mas, por que usar o método .split? A resposta é simples, o nosso input esta retornando uma string, então o método split irá criar uma lista ordenada de substrings de acordo com o nosso divisor, que no caso foi o "\n", pois precisamos quebrar linha na hora de receber os valores conforme o beecrowd pede.

Vamos imprimir a variável valoresRecebidos para acompanhar o processo:

Perceba que foi retornada uma lista com os valores de acordo como nos separamos eles! No caso usando uma quebra de linhas igual o problema pede.

Agora ficou fácil! Só precisamos armazenar os valores 10 e 9 em suas respectivas variáveis, no caso A e B.



var A = parseInt(valor.shift())
var B = parseInt(valor.shift())

Ok... vamos entender o que foi feito! O método shift em JavaScript remove o primeiro elemento de um array e retorna esse elemento. Ou seja, estamos pegando o primeiro elemento do array valoresRecebidos e jogando na variável A, em seguida pegamos o segundo elemento e jogamos na variável B. Mas não acabou por aí, perceba que temos que receber valores inteiros da entrada/inputs, ou seja, temos que converter o elemento que estamos recebendo do array para valores inteiros, para isso basta usarmos a função parseInt(), essa função retorna um valor inteiro do elemento que estamos passando!

Pronto! Agora é só a gente criar a variável X e fazer a soma entre A e B!



var X = A + B

Por fim, nosso código ficará assim:



var input = require('fs').readFileSync('stdin', 'utf8')

var valoresRecebidos = input.split('\n')

var A = parseInt(valoresRecebidos.shift())
var B = parseInt(valoresRecebidos.shift())

var X = A + B

console.log('X = ' + X)

Vamos testa-lo para ver se ta funcionando conforme o beecrowd deseja!

Aeee! Bingo! Você conseguiu resolver o problema 1001 do beecrowd! Não pera... Ainda falta um maldito detalhe 😜. Sabe a nosso input que ta lendo o arquivo 'stdin'? Esse arquivo tem o mesmo nome do arquivo que compila e verifica as entradas no própio beecrowd! Ou seja, com esse comando vamos estar acessando as pastas do beecrowd e receber os valores da entrada. Só que o diretório do arquivo stdin do beecrowd é diferente do nosso! Se enviarmos assim, nossa solução irá dar Runtime error. Para resolver esse problema, devemos apenas adicionar o "/dev/stdin" no nosso parâmetro da função 😀.

Veja:



var input = require('fs').readFileSync('/dev/stdin', 'utf8')

Agora sim! Hehehe, veja o resultado final:



var input = require('fs').readFileSync('/dev/stdin', 'utf8')

var valoresRecebidos = input.split('\n')

var A = parseInt(valoresRecebidos.shift())
var B = parseInt(valoresRecebidos.shift())

var X = A + B

console.log('X = ' + X)

Parabéns!! Você conseguiu resolver o problema 1001 do beecrowd com JavaScript, a linguagem mais bonita da internet (brincadeira... ou não...).

Se esse conteúdo foi útil para você, por favor clique na star do respositório, pois ficarei muito feliz em saber que de alguma maneira fiz algo útil para alguém da nossa comunidade. Me adiciona lá no beecrowd pra gente ver nossas conquistas! Basta clicar aqui: GabrielDuete-beecrowd.

Muito obrigado por ter lido até aqui e ter aprendido, você é incrível mesmo 💜. Nunca desista dos estudos e continue focado mesmo com tantas dificuldades e coisas pra estudar, eu sei que você consegue!

Você pode verificar minhas soluções com Javascript nesse repositório.

"COM TRABALHO DURO UM FRACASSADO CONSEGUE ATÉ MESMO SUPERAR UM GÊNIO." - Rock Lee

Acessando/Espelhando tela do celular no PC

Gabriel Duete — Wed, 16 Mar 2022 03:38:42 +0000

Sobre

Para prevenir que você perca dados importantes ou perca meios de comunicações como o WPP do seu celular, recomendo que utilize o app scrcpy que permite você espelhar a tela do seu celular no pc via USB. O scrcpy permite acessar seu celular caso venha ocorrer algum problema, no meu caso estou precisando esperar uns vinte minutos pra tela acender após clicar no botão de power.

Utilização

Passos para instalação:

Acesse o repositório do scrcpy
Baixe o app de acordo com seu sistema operacional(Windows no meu caso):
Extraia o arquivo zipado.
Agora ative o modo desenvolvedor e modo depuração no seu celular.
- Cada celular tem uma maneira, mas vou tentar te ajudar.
- Vá nas configurações -> Sistema -> Sobre -> Informações do Software -> Clique 7 vezes na aba Número da versão
- Após isso deve aparecer uma mensagem "Agora você é um desenvolvedor!" ou algo do tipo
- Volte um pouco e vá em opções de desenvolvedor e habilite a depuração USB
Vincule o USB no seu celular e no seu PC
Agora volte para a pasta do arquivo que você extraiu e abra o .exe do scrcpy

Finalização

Pronto, você consegue utilizar seu celular pelo PC. Se preferir pode tentar vincular a conexão do PC e celular via Wi-Fi, posso trazer essa feature para esse artigo mais tarde. Bom uso!

Dale! Concluí minhas quatro contribuções no Hacktoberfest 2K21 :)

Gabriel Duete — Mon, 25 Oct 2021 20:11:31 +0000

Porque o modelo de ciclo de vida em espiral é considerado um modelo para processos de software evolucionário?

Gabriel Duete — Sat, 23 Oct 2021 22:31:34 +0000

Os outros modelos de ciclo de vida tendem a não ser flexíveis a mudanças e seguir um trajeto do inicio ao fim do projeto, seguindo uma sequencia de passos para obter, apenas e somente, um objetivo que foi definido no planejamento.

O modelo de ciclo de vida em espiral é considerado um modelo evolucionário porque ele é flexível à mudanças, e é facilmente manuseável de acordo com os pedidos do cliente.

O modelo espiral permite que o projeto possa ser modificado conforme interesse do cliente, seja incrementando ou decrementando funcionalidades ou alterando a interface.

Como a engenharia de software contribui para o desenvolvimento profissional de software?

Gabriel Duete — Mon, 11 Oct 2021 23:24:30 +0000

A engenharia de software está presente em todas as etapas da criação de um software. Ela está presente em projetos de longa escala, não é necessário ser usada no desenvolvimento de projetos por hobbies. A engenharia de software traz técnicas que que proporcionam bons atributos para o software desenvolvido, desde funcionalidades, desempenho, manutenções, documentação e etc. Então, a engenharia de software deve auxiliar a ter uma boa qualidade não apenas no software em si, mas também no projeto como um todo.