Neste artigo, iremos apresentar uma breve introdução do que é cada um desses termos e de como utilizá-los corretamente. Mas, para entendê-los, primeiramente devemos compreender o significado de dependências.

O que são dependências?

Quando estamos programando, podemos criar classes para as mais diversas finalidades e funcionalidades. Então, se você instancia um objeto dentro de outra classe, isso automaticamente a torna uma dependência dessa classe. É nítido que não fazemos esse tipo de coisa apenas uma vez durante o projeto. Isso é feito em diversos momentos. Por isso, gera código com forte acoplamento ou baixa coesão segundo os princípios do SOLID.

Codar dessa maneira é um processo quase que natural utilizado pela maioria dos desenvolvedores que ainda estão aprendendo ou desconhecem alguns princípios e consequências que um código fortemente acoplado pode gerar no futuro.

Veja que, no exemplo abaixo, queremos conectar o CreateUserController, para que ele possa criar um User a partir de um repositório CreateUserRepository ao realizar alguma solitação HTTP do tipo POST a determinada rota.

Perceba que, utilizando essa abordagem, uma classe começa a depender de uma outra para que a primeira funcione. E isso deve ser evitado desacoplando o uso de um objeto da sua criação, deixando as classes independentes.

Qual o problema gerado por essa abordagem?

Sempre que criamos uma instância de CreateUserController, uma outra instância (com a implementação direta da criação do usuário no banco) de CreateUserRepository deve estar disponível para que haja compilação do nosso código.

Dito isso, podemos pensar que o sentido das dependências segue de tal forma:

• CreateUserController depende diretamente de CreateUserRepository

Injeção de dependência

Podemos dizer que injeção de dependência é basicamente passar via construtor as dependências (já instanciadas fora da classe) que seu componente irá utilizar. Chamamos esse tipo de injeção de Constructor Injection.

Perceba abaixo que melhoramos o nosso código injetando uma instância de CreateUserRepository no construtor de CreateUserController, ao invés de instanciarmos esse repositório diretamente de dentro do nosso controller.

Mas isso ainda não é o suficiente!

O CreateUserController ainda depende de CreateUserRepository.

Antes de mostrar a solução derradeira para essa situação e ainda falando um pouco sobre a desvantagem que é utilizar esse tipo de abordagem, não poderíamos, por exemplo, ‘mockar’ valores a partir de testes unitários utilizando a classe CreateUserRepository (que faz uma implementação e operações diretamente com um banco de dados SQL) para um banco de dados simulado em memória com o intuito de criar ou utilizar testes unitários. Isso porque nossos testes deixariam de ser unitários, uma vez que estamos dependendo de uma implementação que utiliza a persistência nos dados.

Ou seja, já que amarramos nosso CreateUserController, ele então depende exclusivamente da implementação contida em CreateUserRepository.

Dito isso, o que buscamos de fato? Precisamos inverter as direções! Ao invés de dependermos de implementações, devemos depender de contratos ou interfaces.

Inversão de dependência

O Dependency Inversion Principle é um princípio do SOLID que afirma: dependa de abstrações e não de implementações.

Segundo Uncle Bob, esse princípio pode ser definido assim:

1. Módulos de alto nível não devem depender de módulos de baixo nível. Ambos devem depender da
   abstração.
2. Abstrações não devem depender de detalhes. Detalhes devem depender de abstrações.

Então, a inversão de dependência é uma prática que nos permite desacoplar componentes. Agora, veja como se comporta a direção e o fluxo de dependências:

Neste ponto, nosso CreateUserController aponta para uma interface que abstraímos a criação de um usuário, ao invés da classe concreta CreateUserRepository. Isto é, inserindo uma interface ICreateUserRepository entre os dois componentes: CreateUserController eCreateUserRepository. Dessa forma, iremos ver a seguir como isso se reflete no código:

Assim, no CreateUserController, iremos consultar a interface ICreateUserRepository ao invés da classe CreateUserRepository.

Dessa forma, acabamos de inverter as dependências.

Qual a real vantagem da Injeção e Inversão de dependências?

Anteriormente, falamos que não seria possível criar nossos testes unitários ‘mockados’ passando um CreateUserRepository em um CreateUserController. Isso porque os testes ficariam lentos e precisaríamos de uma conexão com o banco de dados para executar esse test.

Entretanto, utilizando inversão de dependências podemos escrever uma classe qualquer MockCreateUserRepository, que implementa a interface ICreateUserRepository, e cria em memória um atributo que seja um array de Users para simularmos um banco de dados. Com isso, será possível executarmos testes mais rápidos e de forma íntegra, de acordo com nosso negócio.

Conclusão

Passando uma instância dessa classe MockCreateUserRepository para o nosso CreateUserController, você pode escrever um teste unitário utilizando jest sem preocupações com operações reais em um banco de dados.

Lido até aqui, agora você pode ter uma ideia primária de como colocar em prática os princípios da inversão e injeção de dependências em suas classes, utilizando de interfaces como principal aliado. Se tiver em dúvida, lembre-se sempre: dependa de abstrações, e não de implementações.

Veja também:

Introdução ao React JS

Autor: Clidenor Issac de Almeida Cabral.

O post O que é Injeção e Inversão de dependências? apareceu primeiro em Luby Software.

Um code smell costuma ser uma evidência de que há um problema no código-fonte de uma aplicação. Porém, ele não é necessariamente um bug no sistema, e sim um indicativo de que as boas práticas de design não foram aplicadas neste sistema. Isso pode impactar negativamente todo o desenvolvimento e dificultar qualquer alteração futura que precise ser feita.

O termo foi cunhado em 1990, mas ganhou popularidade em 1999, no livro de Martin Fowler: “Refatoração: aperfeiçoando o design de códigos existentes”, no qual o autor utiliza o code smell como uma forma padronizada de detectar e aplicar refatorações no código.

Apesar de nada superar uma intuição bem treinada para saber quando realizar uma refatoração necessária, ter conhecimento do code smell auxiliará a ter um rumo quando eles ocorrerem. Tendo isto em vista, trouxemos alguns dos principais code smells com os quais vocês podem se deparar e alguns exemplos de como resolvê-los.

Mysterious Name (Nome Misterioso)

Enquanto programadores, eu diria que dar nome a algo é uma das tarefas que mais realizamos na nossa profissão, mas dar bons nomes, apesar de em alguns casos ser difícil, se mostra crucial para um código bem escrito.

Alguns programadores ainda consideram que aplicar refatoração em nomes seja uma perda de tempo. Entretanto, ter uma classe, função ou variável com nomes claros quanto ao seu objetivo e função pode evitar horas de dor de cabeça para entender o intuito de algo no código.

Duplicate Code (Código Duplicado)

Um dos code smells mais comuns e mais fácil de ser reconhecido é o código duplicado. Em sua essência, ele é um trecho de código que faz a mesma coisa, ou praticamente a mesma coisa, existindo em dois lugares diferentes do seu sistema. Veja o exemplo:

O problema em ter código duplicado acontece quando é preciso alterar algo em seu funcionamento. Assim, é preciso encontrar e realizar a alteração na cópia duplicada do código, se quiser que ambos tenham o mesmo comportamento.

Entretanto, é simples resolver a duplicidade de código: mantenha em apenas um lugar no código, fazendo uso de funções ou loops.

Comments (Comentários)

Comentários por si só não são um code smells. Muito pelo contrário, comentários são recomendados, eles te auxiliam a descrever o que está acontecendo ou explicar por que você fez algo, auxiliando no bom entendimento (tanto para você quanto para alguém que vai passar por ele depois).

O problema acontece quando comentários são utilizados para disfarçar código ruim, sendo utilizados de maneira supérflua em casos em que uma refatoração poderia render um melhor resultado.

No exemplo, podemos notar que o código por si só não é capaz de explicar o que está sendo feito. Por isso, são utilizados comentários. Assim, uma simples refatoração nos nomes das variáveis podem ajudar o código a nos contar melhor a história.

God Object (Classe Grande)

Outro code smell muito comum são as classes grandes. Isto é, classes que possuem muitos métodos ou propriedades que, apesar de parecer fazer sentido estarem juntos, acabam por criar classes com muitas responsabilidades e que podem ser perigosas para o seu sistema.

Essas classes surgem pois é muito mais simples atribuir um novo método a uma já existente do que criar uma nova. Diante disso, fica a dica: faça um esforço e separe bem as responsabilidades de cada classe.

Todavia, devemos analisar e refatorar essa classe, seja extraindo as funções que não lhe pertencem e criando a partir delas uma nova classe, ou identificando métodos pouco utilizados e extraindo para uma subclasse que só será necessária nesses raros casos.

Long Parameter List (Lista Longa de Parâmetros)

Apesar de não haver um padrão escrito, considera-se que 3 ou 4 parâmetros para uma função já estejam de bom tamanho. Ter muitos parâmetros dificulta para quem está lendo o código entender o que aquela função ou método faz. Além de ser difícil lembrar a ordem em que cada parâmetro deve ser disposto.

Algumas refatorações simples podem ser aplicadas em casos como estes. Dessa forma, é preciso apenas analisar o que está acontecendo.

Caso alguns dos argumentos sejam resultados de uma chamada de métodos de outras classes, remova-os como parâmetros e faça a chamada dos métodos dentro da função. Se muitos dos parâmetros são propriedades de um objeto, considere passar o objeto inteiro como parâmetro. Porém, caso sejam diversas propriedades de diversas fontes, é possível criar um novo objeto que servirá como parâmetro desta função.

Após refatorar uma lista longa de parâmetros, você terá um código mais limpo e de fácil leitura. Além disso, durante o caminho é possível que você identifique algumas duplicações de código que são comuns em casos como este.

Ferramentas

Agora que você já conhece alguns dos principais code smells, vamos conferir algumas ferramentas que irão te auxiliar a perceber aqueles odores que passaram despercebidos pelo seu olfato:

PMD

PMD é um programa open-source que atua como um analisador de código-fonte, identificando e relatando problemas encontrados. Apesar de já ter um conjunto de regras pré-definidos, ele apresenta também suporte a regras personalizadas.

O objetivo do PMD não é relatar problemas durante a compilação do código, mas sim ineficiências ou maus hábitos de programação. Por exemplo, variáveis não utilizadas, objetos criados desnecessariamente, dentre outros que, apesar de não impedirem o sistema de funcionar, podem reduzir o desempenho e dificultar a manutenção (caso se acumulem).

SonarQube

SonarQube é um programa open-source desenvolvido pela SonarSource que realiza uma inspeção contínua na qualidade do código e gera relatórios com análise de bugs, cobertura de código e code smells em 29 linguagens de programação. Este programa oferece relatórios para duplicação de código, padronização de código, cobertura de código por testes, comentários, bugs e recomendações de segurança.

Conclusão

Tendo o conhecimento do que é um code smell, como identificá-los e tratá-los, que tal dar uma busca naquele seu código que você não mexe há um tempo. Ou até mesmo no que você está escrevendo agora e já começar a pôr em ação essas novas boas práticas? Tenho certeza que vai te poupar muito tempo lá na frente!

Veja também:

Boas práticas de commits assinados e proteção de branches

Autor: Higor Koakovski.

O post “Code Smell”: identificando problemas no código apareceu primeiro em Luby Software.

Neste artigo, vamos falar sobre o conceito Abstração, utilizando um exemplo prático para ressaltar sua importância.

Abstração na Programação Orientada a Objetos

Embora alguns materiais de estudo deixem um pouco de lado a Abstração na Programação Orientada a Objetos para focar nos demais pilares, é importante frisar que a Abstração é o pontapé inicial dentro de qualquer linguagem Orientada a Objetos. 

O conceito de abstração consiste em esconder os detalhes de algo, no caso, os detalhes desnecessários. Dessa forma, todos os outros pilares serão desenvolvidos a partir da Abstração.

Como abstrair um modelo/entidade que faça sentido como um objeto?

Para facilitar o processo de abstração na Programação Orientada a Objetos, definimos 3 princípios para uma abstração concisa, são eles:

• O que o objeto precisa ser?
• O que ele faz?
• E o que ele deve ter?

No exemplo a seguir, utilizaremos a linguagem C# para abstrair um personagem de RPG para um objeto.

Primeiro princípio: o que o objeto precisa ser?

public class Personagem
{
}

Neste caso, queremos que o personagem seja uma entidade que possa causar e sofrer dano.

Segundo princípio: o que o objeto faz?

public class Personagem
{
public void Atacar(Personagem adversario)
{
}
}

O personagem atacará outro personagem diminuindo a quantidade de vida do adversário com base em seu poder de ataque, e o personagem atacado receberá o dano consequente.

Terceiro princípio: o que o objeto deve ter?

public class Personagem
{
public string Nome { get; set; }
public int PoderDeAtaque { get; set; }
public int QuantidadeDeVida { get; set; }

public void Atacar(Personagem adversario)
{
adversario.QuantidadeDeVida -= PoderDeAtaque;
}
}

O personagem deve ter um nome pelo qual será identificado. Além disso, para atacar, queremos que o personagem possua um medidor de poder e, para receber dano, o personagem terá uma quantidade limitada de vida.

Abstração: criação de objeto de forma sucinta e coesa

Nota-se que, com estes 3 princípios, podemos criar um objeto de forma sucinta e coesa, sem utilizar de atributos os métodos desnecessários para o contexto. É importante que, na hora de utilizar este objeto em um projeto real, o seu código POO deva sempre buscar o baixo acoplamento. Ou seja, a independência entre um objeto e outro.

Neste artigo, fizemos este exemplo básico criando uma classe chamada Batalha, em que movemos o método Atacar para ela. Dessa forma, haverá apenas um objeto responsável por realizar os ataques dos personagens, já que a ideia é que o personagem seja apenas um modelo e que o combate seja gerido por uma classe a parte.

public class Batalha<T> where T : Personagem
{
public void Atacar(T quemAtaca, T quemRecebeDano)
{
quemRecebeDano.QuantidadeDeVida -= quemAtaca.PoderDeAtaque;
}
}

Conclusão

A Abstração na Programação Orientada a Objetos acontece bem antes do código e é muito importante que seja bem definida. Assim, facilitará a arquitetura do projeto como um todo. Para uma ideia ser bem executada, antes ela precisa ser bem estruturada.

Além disso, lembre-se de estudar também sobre os outros pilares da orientação a objetos. Então, aqui vão algumas sugestões de conteúdos sobre este mesmo tema: https://www.macoratti.net/oo_conc2.htm.

Veja também:

Como identificar problemas no código

Conceitos de programação que você precisa conhecer

Autor: Marcelo Wesley.

O post A importância da Abstração na Programação Orientada a Objetos apareceu primeiro em Luby Software.

O ReactJS foi criado com o propósito de criar interfaces. Assim, cada elemento em tela pode ser agrupado e utilizado como um componente. O framework é também uma biblioteca fácil de iniciar e eficiente para a criação de SPAs (Single Page Applications), interfaces de usuários. Além disso, o ReactJS é utilizado pelas grandes empresas do mercado atual: Netflix, Facebook, Amazon Videos, Airbnb, dentre várias outras.

[adrotate banner=”4″]

Essa biblioteca tem um enorme poder nas mãos. Sua agilidade em aplicações complexas é notável, pois quando se trabalha com páginas web, os scripts que são executados em segundo plano acabam se tornando um gargalo na renderização e execução da página por inteiro.

Entretanto, como o ReactJs trata os elementos em tela como componentes, isso permite fazer atualizações em tela apenas daquele elemento que sofreu alteração, ao invés de se preocupar em recarregar toda a página. Isso é um dos recursos mais fascinantes dessa ferramenta. Então vamos conferir tudo sobre a introdução ao ReactJS?

A forma de código utilizada em React é o JSX, que é uma forma combinada de código Javascript e XML (eXtensible Markup Language). Dessa forma, não é considerada nem Javascript, nem XML, mas as semelhanças são notáveis:

Introdução ao ReactJS: por onde iniciar?

Na introdução ao ReactJS, o primeiro ponto de atenção é entender que o framework está apoiado nas ferramentas como: HTML (HyperText Markup Language), CSS (Cascading Style Sheet) e, certamente, Javascript. Esses são os blocos primordiais aos quais este framework se apoia. Isso porque esse “JSX”, que falamos anteriormente, se assemelha bastante à combinação dessas três ferramentas.

Portanto, a forma mais natural de se iniciar os estudos em uma ferramenta nova, como na introdução ao ReactJS, é justamente pelo começo: iniciando com HTML. Com essa ferramenta, vamos aprender sobre os elementos da página web, o que muitos consideram como o “esqueleto” do site.

Para ter um bom conhecimento da ferramenta não é preciso aprender necessariamente tudo o que ela fornece, mas é essencial ter um domínio sobre os tópicos abaixo:

HTML

Tags

O HTML apresenta uma quantidade vasta de tags, que são as estruturas que englobam o conteúdo que se deseja mostrar em tela.

No exemplo em questão, temos a uma tag “<h1>”, que representa uma tag de título de um texto ou da página de forma geral. Temos também as tags <p> e <span> , que são tags de textos, onde a primeira é utilizada para representar os parágrafos da página, e a segunda serve para dar ênfase à algum pequeno trecho do texto.

E, por último, tempos a tag “<div>”, que funciona como um contêiner para o conteúdo da nossa página, ela pode englobar o conteúdo textual, como apresentado acima, como também pode englobar conteúdos de imagens, ou até mesmo apenas para organizar o layout da página.

Esses são somente alguns exemplos, mas o HTML possui um leque gigantesco de tags: <footer>, <main>, <nav>, <header>, <address>, <code>, <ul>, <li>, dentre centenas de outras. Com isso, construímos o “esqueleto” da nossa aplicação web.

HTML Semântico

Com assuntos em alta como acessibilidade, usar as tags de forma correta, durante a construção da sua página web, é de extrema importância. Isso porque muitas pessoas que possuem deficiência visual fazem uso de leitores digitais que faz a leitura detalhada da página com base no arquivo HTML que está renderizando a página.

Dessa forma, ao utilizar a estrutura mais adequada na sua página, a pessoa com necessidades especiais pode entender com mais clareza o que está lendo, se aquele trecho da página é o cabeçalho, se é um parágrafo, se é o rodapé, etc. Por isso, temos as tags de valor semântico, como no caso da <header>, que vai delimitar o cabeçalho, <main>, que vai conter o conteúdo principal da página, <footer>, que vai apresentar o rodapé.

Usando como exemplo a imagem abaixo, conseguimos ter uma noção de como são distribuídas as tags com base no layout da página.

Existem diversas tags com poder semântico e esse é um assunto que merece uma atenção dedicada, pois vai gerar grande influência no nosso tópico seguinte. Para mais detalhes sobre HTML semântico, é altamente recomendado dar uma olhada nas documentações: w3schools.com e a developer.mozilla.org.

SEO

O SEO (Search Engine Optimization) é o mecanismo de busca do Google que faz o ranqueamento dos sites para definir quais domínios irão aparecer em primeiro lugar nas pesquisas feitas pelos usuários. O Google dá notas para os sites com base nas boas práticas pré-determinadas pelo Google.

E o HTML semântico é uma das formas de obter uma boa nota, além de adicionar as “meta tags” que veremos no próximo tópico. Por isso, é essencial ter noção de como melhorar o page rank da sua aplicação, para que seu domínio sempre apareça na primeira página de busca.

Meta Tags

As Meta Tags são pequenos trechos de código que indicam algumas informações sobre a página. Elas indicam quais os tipos de caracteres usados na página, o título da aplicação, descrições curtas sobre o conteúdo da página, instruções sobre como renderizar as dimensões dos elementos com base em diferentes dispositivos (móveis ou desktop).

Bem como podemos adicionar palavras-chaves que podem ajudar o Google a achar seu site com base nos termos utilizados pelos usuários no campo de pesquisa. Aqui temos alguns exemplos de meta tags:

Dentro da mesma área em que colocamos as nossas meta tags, também adicionamos as importações dos nossos arquivos de estilo “main.css”, assim como os nossos scripts “main.js”. Entretanto, é uma boa prática adicionar os scripts no fim do nosso código, mas ainda dentro da tag <body>:

Isso é devido ao fato do conteúdo em Javascript demorar um pouco mais para carregar, ao contrário dos elementos HTML e os estilos do CSS. Isso é outro fator que conta como boas práticas!

Estrutura de uma página

A estrutura de uma página HTML é bastante simples. Ela possui um esqueleto comum à toda aplicação web e é dividida nas tags, que englobam todo o conteúdo.

Dentro dela temos das tags <head> e <body>. A tag “head” recebe justamente os conteúdos das nossas meta tags, e a tag “body” vai receber todo o conteúdo que será mostrado na página. O elemento <!DOCTYPE> é um recurso que veio com a versão mais recente do HTML, ele indica que o código a seguir segue os padrões da última versão da linguagem, o HTML 5.

Entretanto, isso não é uma tag HTML, isso é apenas uma instrução para o navegador que indica o tipo de arquivo que ele está lidando. Por isso, ele é adicionado logo no começo. Já a tag <title> indica o título da página, aquele nome pequeno que aparece acima da aba, no navegador:

Formulários

Os formulários são parte essencial nas aplicações web, seja para criação de login, cadastro de usuários, campos de pesquisa ou em formulários de compras em sites de e-commerce. Independentemente do tipo de conteúdo do site, é possível que tenha, ao menos, um campo de formulário para inserir dados. É essencial dar uma atenção especial a esse tópico.

CSS

O CSS é responsável pela estilização da página. É ele quem dar cor, estilo e organização. Ele distribui os elementos em tela seguindo um determinado layout. Com, ele temos várias ferramentas essenciais no desenvolvimento web:

Seletores (classes, id)

Os Seletores servem para que possamos identificar qual elemento HTML especificamente nós queremos editar e aplicar às nossas propriedades de estilos. Para isso, adicionamos classes ou id, por exemplo, <header class=”container”> e <main id=”content”>. Segue abaixo imagem que mostra como selecionar cada um desses elementos, respectivamente:

Pseudo classes

As pseudo classes são palavras-chave que são adicionadas aos seletores e especifica um determinado estado do elemento selecionado. Seja quando passamos o mouse em cima do componente ou quando marcamos uma “checkbox”, podemos controlar esses estados.

Por exemplo, ao passar o mouse sob um botão, a cor de fundo seja alterada. Existem inúmeras pseudo classes e, com certeza, vai acrescer nas habilidades de estilização.

Flexbox e Grid

Essas duas ferramentas são amplamente utilizadas para desenhar o layout das páginas e organizar os elementos da melhor forma possível. Enquanto o flexbox torna o conteúdo de dentro do elemento contêiner mais flexível, o grid faz uso de “grades”, dividindo as dimensões do contêiner em quadrantes, onde cada elemento de dentro do grid possui tamanhos proporcionais.

Essas duas ferramentas são as principais para a estilização de qualquer página web atualmente. Dominá-las é de extrema importância!

Responsividade

A responsividade se faz muito presente no mundo em que vivemos, pois todo mundo carrega um “computador” no bolso diariamente. As pessoas estão mais acostumadas a utilizar o celular para consumir os conteúdos da internet e acessar as redes sociais. Contudo, com uma tela consideravelmente menor que a de um computador, é importante que os desenvolvedores pensem na criação de uma versão mobile de suas aplicações web.

Dessa forma, um usuário poderá acessar sua página tanto pelo dispositivo móvel (seja um celular ou tablet) quanto pelo desktop, e ainda assim não ter a sua experiência prejudicada. É aí onde entra o nosso próximo item.

Media Querie

O media querie é a expressão nativa do CSS que utilizamos para criar as nossas páginas responsivas com base no tamanho da tela do dispositivo. Dessa forma, podemos desenhar um layout completamente diferente dependendo da resolução do aparelho.

Segue abaixo um exemplo da aplicação de propriedades para quando a página for acessada por um dispositivo com resolução abaixo de “600px” (pixels) de largura.

Javascript

Com o Javascript, temos toda a parte lógica da nossa aplicação. Ele será responsável por observar os eventos em tela, as requisições a outros serviços da internet, além de ser o principal responsável pelas interações com o usuário. Seja em um evento de “click”, recarregamento de página, e demais funções que são executadas sem segundo plano.

É o Javascript que torna a página mais dinâmica, quase viva. E, para dominá-lo, é importante focar bem a atenção nos seguintes temas:

Tipos de dados

Os tipos de dados, como o próprio nome sugere, são toda variedade de dados que o Javascript consegue lidar, são eles: Number, String (caracteres), Object, Boolean (true or false), Null, Undefined e Arrays (reconhecido como um tipo de objeto, para o Javascript).

Operadores

Assim como qualquer outra linguagem de programação, o Javascript também possui os seus operadores aritméticos: / (divisão), * (multiplicação), + (adição), – (subtração). Bem como operadores de comparação, que servem para verificar se uma determinada condição é verdadeira ou falsa: == (igual), != (diferente), > (maior que), etc.

Para mais informações a respeito dos operadores, vale a pena dar uma olhada nesta documentação (clique aqui para acessar).

Arrays e seus métodos

Arrays é um objeto Javascript que se assemelha à uma lista. Nos Arrays, podemos armazenar uma série de dados e informações. Os métodos de arrays servem para manipular essa lista de itens da forma que desejarmos. Podemos fazer uma filtragem, onde retiramos da lista alguns itens de um determinado tipo, podemos mapear a lista e transformar os elementos de dentro dela, retornando um segundo array completamente diferente do anterior.

Dominar a manipulação de arrays e compreender com profundidade os seus métodos é um dos passos mais importantes para a introdução ao ReactJS. Confira o exemplo de um array e a aplicação do método de “map”:

DOM

O DOM (Document Object Model) é a representação dos elementos que compõem todo o conteúdo de uma página web. Ele é responsável por exibir na tela o conteúdo HTML, CSS e pode ser alterado e manipulado com Javascript.

Ter uma boa noção dos objetos que compõem a janela do seu navegador é de suma importância para o seu desenvolvimento na introdução ao ReactJS, já que essa é uma ferramenta majoritariamente direcionada à web.

Objetos

Os Objetos em Javascript são como uma coleção de propriedades que possuem um nome e um valor, e cada propriedade é separada por vírgula. De forma grosseira, podemos fazer uma comparação com os Arrays. Porém, os Objetos possuem um nome (chave) para cada elemento (valor) que está dentro dele.

Os valores atribuídos à uma propriedade dentro de um objeto pode ser de qualquer tipo: Boolean, String, uma função, Number, etc. Veja um exemplo de um objeto:

Funções

Funções são componentes fundamentais em Javascript. Uma função é um conjunto de instruções ou tarefas, que serão executadas assim que a função for chamada. Primeiro criamos a função, logo em seguida escolhemos quando queremos que ela seja executada, pode ser após um evento de “click”, pode ser ao recarregar página.

Enfim, cabe ao programador/ programadora decidir como e onde melhor aplicá-las. E, assim como Arrays e Objetos, as funções são protagonistas principais quando se trata de ReactJs. Esses três itens devem ser estudados com muita atenção, pois serão utilizados até exaustão.

API

As APIs (Application Programming Interfaces) são como “transportadores” que levam e trazem informações (dados). Elas funcionam como intermediários entre o front-end e o back-end. Assim, o front-end faz um pedido (requisição) ao back-end, por meio da API, que é responsável pela comunicação. Então, o back-end faz uma consulta ao banco de dados, faz uma varredura e busca a informação requisitada.

Após isso, retorna a resposta (response) para a API, que logo em seguida devolve a informação ao front-end para que seja mostrado em tela. Tudo isso ocorre em questão de milésimos de segundos. Atualmente, grande parte da aplicações web funcionam por meio de APIs, onde podemos ter um conteúdo dinâmico e atualizar as informações em página de forma automática.

ECMAScript 6

O ECMAScript é o nome oficial da linguagem que conhecemos como Javascript. E a sexta versão da linguagem é importante por conta da padronização que o Javascript sofreu no ano de 2015. Depois disso, vieram diversas atualizações, novos métodos para trabalhar com Arrays, Objetos, além de mais funcionalidades. Portanto, para se manter atualizado na linguagem, é importante iniciar os estudos em ECMAscript da versão 6 em diante.

Introdução ao ReactJs de fato

Finalmente chegamos à introdução ao ReactJS e por onde iniciar os estudos. Uma vez que você já possui um conhecimento sólido em HTML, CSS e Javascript, prosseguir com React não será uma barreira, pelo contrário, será extremamente intuitivo. A seguir, podemos conhecer um pouco mais sobre os alicerces que apoiam o desenvolvimento web em ReactJs.

Entendendo JSX

A sintaxe do JSX, por mais que tenha suas peculiaridades, é natural de se entender e utilizá-la. Isso porque, dentro do código JSX, nós utilizamos tags HTML como se estivéssemos trabalhando com HTML puro. Não muda em nada a forma de escrever, uma <div> continua tendo as mesmas propriedades, um <p> funciona da mesma forma.

A diferença é que não estamos escrevendo isso dentro de um arquivo .html, mas sim como retorno de uma função em Javascript. Entretanto, isso é uma vantagem, pois podemos passar dados (props) entre funções, que dentro do JSX as tratamos como componentes.

Props

As props são propriedades que podemos passar entre componentes. Como no React as nossas funções retornam JSX, podemos importar e exportar componentes e passar propriedades para eles por meio de props. Dessa forma, nós importamos um determinado componente para a nossa página e escrevemos nele uma propriedade como se estivéssemos um atributo em uma tag HTML.

useState

O useState é uma funcionalidade (Hook) especifica do React que nos permite guardar o estado de um componente, variável e componente de função. Ele armazena um determinado valor inicial que foi atribuído a ele. Porém, quando queremos alterar o valor que está contido nesse hook, atribuímos por meio de uma função, ao invés de utilizarmos a forma padrão de atribuição de variáveis.

Hooks

Assim como o useState, existem vários outros Hooks que tornam o React um framework especial. Aprender a trabalhar com esses Hooks é o que diferencia um bom programador React de um iniciante. Os mais utilizados são: useState, useEffect, useContext, useRef, useReducer, useCallback e useMemo. Existem vários outros, mas, dominando esses será mais do que suficiente para trabalhar com a maioria dos projetos.

Para entender melhor como cada um deles funciona e onde utilizá-los, é altamente recomendado ler a documentação (clique aqui para acessar).

Estilização (CSS, SASS, Styled Components)

A estilização no React é vasta, especialmente devido ao fato de todo código JSX ser renderizado dentro de um “index.html”. Isso nos permite utilizar ferramentas baseadas em CSS, como o SASS ou o próprio arquivo “.css” mesmo. Além disso, ele faz o uso de bibliotecas de estilos que aplicam as propriedades de estilização através do Javascript, como o Styled Components.

Bibliotecas

Como citado no tópico anterior, podemos fazer uso de bibliotecas externas em nosso projeto para melhorar a nossa produtividade e implementar funcionalidades que normalmente seriam trabalhosas ou muito complexas para se fazer manualmente. Ainda mais se a programadora/programador for iniciante.

Felizmente, o ReactJS é rico em bibliotecas para as demais finalidades: estilização; criação e validação de formulários; aplicação de modais e pop-ups; adicionar ícones no projeto; realizar requisições HTTP; etc. Essa última é tema do nosso próximo tópico.

Data fetching

As requisições de dados (Data fetching) são justamente as requisições que fazemos ao utilizar uma API. Podemos fazer uma requisição de dados para um arquivo XML dentro do nosso projeto, além de poder buscar dados dentro de um arquivo “.json”. As aplicações do Data fetching foram crescendo à medida que o uso e criação de novas APIs estão aumentando.

Fazemos requisições o tempo todo, seja durante o login em um site, no cadastro de um cliente em uma rede social ou quando fazemos uma pesquisa no campo de busca da Netflix, também estamos fazendo uma requisição de dados. O Javascript possui um método nativo de requisições HTTP que é o “fetch()”, mas o React possui uma biblioteca muito mais performática e famosa, o Axios.

Gerenciamento de Estados

O gerenciamento de um estado global de uma aplicação React surge quando precisamos passar uma mesma informação por vários componentes, passando por meio de Props, de elemento pai para filho. Mas quando temos um fluxo enorme de propriedades e tentamos passar isso por meio de Props, as informações ficam muito dependentes de um componente passar para outro.

Esse tipo de problema poderia ser facilmente evitado se qualquer componente pudesse consultar essas informações direto do arquivo que está exportando, ou de um arquivo que centraliza todas as informações que são utilizadas em mais de uma página.

Felizmente, existem soluções para isso: ferramentas que conseguem manter o controle do estado das informações em um nível acima de todos os componentes. Dessa forma, qualquer componente pode ter acesso a essas informações sem que seja necessário a passagem dos dados de pai para filho.

Pensando nisso, o React conta com ferramentas excelente para essa função, como é o caso do Context API, que já vem nativo no framework, o Redux e Zustand. Apesar de existirem mais algumas, essas são as principais, sendo o Context e Redux, as mais populares.

Da introdução ao ReactJS para o mercado de trabalho

Uma vez estudando toda a introdução ao ReactJS com dedicação, diariamente, colocando em prática todos os temas, aplicando em projetos, você já poderá começar a se inscrever para as vagas e entrar para o mercado de trabalho. Não é uma jornada fácil, e não existe atalhos, mas você pode seguir por um caminho com menores chances de falha. Então mão na massa e vamos codar!

Clique aqui e inscreva-se nas vagas da Luby!

Veja também:

Aprenda o que é data fetching!

Autor: Everson Vinicius Soares do Nascimento.

[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]

O post Introdução ao ReactJs: o que saber antes de iniciar os estudos? apareceu primeiro em Luby Software.

Pelo fato de não poder ser alterado, automaticamente pensamos em utilizar constantes (const). Porém, não é bem assim! Uma variável declarada com constante não significa que o valor é imutável, mas apenas que a variável não pode ser alterada. Para entendermos mais, vamos nos aprofundar sobre os tipos de variáveis que existem no JavaScript e como se comportam em relação a imutabilidade.

[adrotate banner=”4″]

Tipos em JavaScript

Em Javascript, temos os tipos primitivos como:

• Boolean;
• Number;
• BigInt;
• String;
• Null;
• Undefined;
• Symbol.

Tipos primitivos

Os tipos primitivos são dados que não são representados através de um objeto. Além disso, todos os primitivos são imutáveis. Mas, se não são representados por um objeto, como conseguimos acessar algumas propriedades como: “.length” e “.toString”?

Isso é possível porque os tipos primitivos, com exceção do null e undefined, possuem um objeto wrappers que permite acessar algumas propriedades.

Quando chamamos os métodos como “.length” e .”tostring” nos tipos primitivos como number e string, por baixo dos panos, o JavaScript cria um objeto temporário por volta da variável, instância, método específico e em seguida a instância é excluída. Com isso, conseguimos utilizar métodos em variáveis do tipo primitivo.

No JavaScript podemos comparar variáveis através do operador de igualdade (‘==’) ou com o operador de identidade ‘===’ . A diferença é que o operador de igualdade irá converter as variáveis para o mesmo tipo antes de comparar os valores. Já o operador de identidade irá verificar se as variáveis são do mesmo tipo
e valor sem realizar conversões.

Comparação

Quando tentamos comparar tipos primitivos, o JavaScript compara o tipo e o valor, como no exemplo a seguir:

Sabendo que cada variável ocupa uma posição única de memória, ao compararmos os valores das variáveis a e b, como no exemplo/imagem a seguir, percebemos que o JavaScript considera como verdadeiro (true) o resultado da comparação entre as duas variáveis.

Além dos tipos primitivos, temos os tipos Objeto e Array. Se utilizarmos os operadores de igualdade e identidade para objetos e arrays, obteremos falso (false) na saída em todas as comparações. Isso porque o JavaScript irá comparar a referência na memória que cada objeto ou array ocupa, e não o tipo e o valor.

Para ilustrar a relação de igualdade entre os tipos Objeto e Array, considere as variáveis x (do tipo objeto), y (do tipo objeto) e z (uma cópia de x), como mostra a imagem logo abaixo.

Apesar das variáveis x e y serem do mesmo tipo, ao utilizarmos o operador de identidade, temos “false” como resultado. Pois fazem referência a diferentes posições de memória:

• x aponta para o endereço 0x01;
• e y para o endereço 0x02.

Entretanto, ao compararmos z e x, teremos um resultado verdadeiro (true), porque z e x apontam para a mesma referência na memória.

Aplicando imutabilidade e evitando bugs

Durante o processo de desenvolvimento, é comum a necessidade de manipular variáveis do tipo objeto e array. Algo como copiar alguns desses tipos de variáveis aparenta ser uma tarefa simples. Porém, quando não é aplicado o conceito de imutabilidade (no qual uma variável não pode ser alterada diretamente), isso pode causar alguns bugs em nossa aplicação.

Podemos iniciar uso da imutabilidade utilizando const para declarar nossa variáveis. Então, vamos ver isso na prática!

Imaginemos que possuímos uma variável “pessoa”, que é um objeto e possui as seguintes propriedades:

Agora, queremos copiar esse objeto para uma segunda variável chamada pessoa2 e alterar a profissão para UI/UX e executar um console log para analisarmos nossa saídas.

Como podemos observar na imagem, o objeto realmente foi copiado. Porém, ao alterar a propriedade “profissao” da pessoa2, a profissão da pessoa também foi alterada.

Isso aconteceu porque, ao criar o objeto pessoa, alocamos um espaço na memória e, como objetos e array trabalham com referência de memória, ao copiar o objeto, estamos na verdade copiando o seu endereço de memória e não o seu conteúdo.

Como podemos resolver isso?

Para copiar objetos e arrays, podemos utilizar o spread operator, representado por três pontinhos (…). Essa funcionalidade foi adicionada ao JavaScript no EcmaScript 2015. Assim, o spread tira uma cópia rasa (Shallow copy) do objeto ou array, criando um novo objeto ou array e gerando uma nova referência na memória.

Vamos ver como fica:

Para copiarmos o objeto e alterar alguma de suas propriedades, podemos fazer isso de diversas maneiras. Duas delas são:

Agora, quando queremos copiar objetos ou array alinhados como objetos dentro de objetos, precisamos fazer uma cópia profunda (deep copy) desse objeto.

Imaginemos que possuímos um objeto pessoa que tem um array de idiomas e queremos copiar esse objeto. Assim, faríamos da seguinte forma:

Dessa forma, conseguimos copiar o objeto de forma correta e garantir que, ao alterar o segundo objeto, iremos manter a imutabilidade do primeiro objeto que foi copiado e evitaremos bugs em nossa aplicação.

Sempre que for preciso alterar um objeto ou array, precisamos criar um novo com os valores atualizados e substituir o anterior.

Veja também:

O que é Injeção e Inversão de dependências?

Autor: Anderson Pablo.

[adrotate banner=”5″]

O post Como aplicar Imutabilidade evitando bugs? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

O Next.js faz isso através de diversas estratégias, sendo as mais conhecidas e aplicadas: Server-side rendering (SSR) e Static Site Generation (SSG). Além disso, diversas outras técnicas podem ser utilizadas para facilitar a indexação e o posicionamento da página. Neste artigo, iremos abordar algumas dessas estratégia.

O que é SEO?

Antes de falarmos sobre boas práticas, precisamos entender: o que é SEO?

Podemos entender SEO (em português, otimização para motores de busca) como um conjunto de técnicas que tem por finalidade melhorar a posição do seu produto (pode ser entendido como postagem, site, vídeo, entre outros) em algum mecanismo de busca (como Google ou Youtube). Pensando nisso, vamos descobrir a seguir quais são essas técnicas utilizadas pelo framework Next.

Server Side Rendering (SSR)

Em português, renderização do lado do servidor, o SSR surge como uma ótima estratégia para realizar a otimização de sites. A partir da pré-renderização dos componentes HTML da página, o buscador consegue visualizar e entender do que aquele site fala sem precisar do arquivo Javascript.

Dessa forma, essa funcionalidade corrige um dos maiores problemas do React, que precisava ter seu Javascript executado para visualizar o arquivo HTML completo.

Como aplicar o SSR em projetos

Para entendermos melhor como essa funcionalidade é utilizada, vamos exemplificar com um simples caso de uso (uma página cars que recebe e consome dados fictícios).

Instalação com NPX no terminal

$ npx create-next-app myapp

Dentro do aplicativo next

Agora, vamos criar uma página chamada cars dentro da pasta pages.

A página vai receber como props o nome da marca de vários carros e vai renderizá-los na tela.

Inserindo o SSR

Para isso, criaremos uma função chamada getServerSideProps. Ela será responsável por obter os dados necessários (da API, do JSON) e mandar para o componente renderizar.

Dessa forma, o HTML será pré-renderizado do lado do servidor e o SEO irá melhorar bastante!

Static Site Generation (SSG)

Em português, geração de site estático, o SSG surge como uma ótima estratégia para realizar a otimização de sites pequenos, ou de páginas específicas que não possuem mudanças constantes.

Enquanto o SSR é realizado no momento da requisição, o SSG acontece em tempo de compilação. Ou seja, isso afeta o tempo de carregamento da página, tornando o método útil apenas para situações específicas (como mencionado anteriormente).

Como aplicar o SSG em projetos

Seguindo a mesma linha de raciocínio empregada anteriormente na página cars, podemos substituir o getServerSideProps, pelo getStaticProps.

Da mesma maneira que o SSR, agora essa página será pré-renderizada e os motores de busca irão indexar ela mais facilmente, além de conquistar um melhor ranqueamento.

Outros métodos para melhorar o SEO

Além do que foi apresentado anteriormente, o Next disponibiliza outras técnicas para melhorar ainda mais a otimização da página, como veremos a seguir.

Título e descrição da página

Cada página possui um título e uma descrição. Isto é, pode ser desde uma postagem de blog que vai explicar algo até um produto em um e-commerce. Sem esses metadados, não temos como saber do que se trata aquela página. Se até mesmo nós temos dificuldade de entender aquele conteúdo, imagina o mecanismo de busca!?

Sendo assim, podemos combater essa falha utilizando um cabeçalho e passando para ele o título e a descrição da página. Vamos tomar o exemplo da página que criamos anteriormente:

Podemos passar essa propriedade em todas as páginas necessárias de nossa aplicação e irá melhorar a posição dela no motor de busca.

Criando o _document

Com o _document, podemos inserir definições padrões do nosso arquivo HTML, como a linguagem padrão (inglês, português, etc). Para isso, vamos criar ele dentro da pages.

Agora, vamos configurá-lo para definir a linguagem padrão como inglês.

Otimizando imagens

Por fim, vamos falar um pouco sobre a otimização de imagens! Ao invés de utilizar a tag img disponibilizada pelo HTML padrão, o Next.js disponibiliza uma tag customizada para exibir imagens em nossa página.

Lembre-se: ao utilizar imagens, sempre dê preferência por arquivos .svg. Isso porque são mais fáceis de serem manipulados. E não se esqueça de passar o tamanho da imagem no CSS!

Conclusão

Aplicando essas estratégias, além de seu código ficar mais organizado, estará melhorando o SEO e, consequentemente, o posicionamento das suas páginas no motor de busca.

Leia também:

TypeScript: quando utilizar Alias ou Interface?

Autor: Carlos César Feitosa.

[adrotate banner=”5″]

O post Boas práticas de SEO utilizando Next.js apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Existem várias formas de definir os tipos dos dados usados pela aplicação, bem como formas de definir tipos personalizados, como o Alias e a Interface, famosos por causarem essa confusão. Portanto, vamos entender como cada um funciona e quais suas diferenças?

Alias: maneira de definir tipos personalizados

Como já mencionado, com o TypeScript, é possível definir o tipo do dado, como:

• Primitivo (boolean, number, null, string ou undefined);
• Complexos (array ou objeto);
• Função ou any (o dado assume qualquer tipo, por inferência).

Porém, não seria interessante poder definir tipos personalizados para dados específicos da aplicação?

É aí que entra o Alias: uma sintaxe do TypeScript para definir um tipo personalizado, com a estrutura que se deseja, para melhor adequar a tipagem à necessidade da aplicação.

Sua sintaxe é simples, bastando utilizar a keyword “type”, seguida do nome personalizado e atribuir a ele os tipos de dados da linguagem. Por exemplo:

No entanto, não estamos obtendo o mesmo resultado que teríamos ao tipar diretamente o dado, sem criar um Alias? Sim, mas é aí que entra a utilidade do Alias: poder criar Unions ou Intersections.

Unions

Union significa união, e essa é a sintaxe que possibilita unir vários Alias em um só. Dessa forma, ele pode assumir vários tipos diferentes, ou ambos, com o uso do pipe “|”. Por exemplo, a variável myStringOrNumber poderá ser tanto uma string quanto um number:

Caso definam objetos, a Union permite que o dado implemente as propriedades de um dos tipos ou de ambos:

Assim, o objeto pode assumir as seguintes formas:

Intersection

Por sua vez, a Intersection permite combinar Alias diferentes em um só, com as características de ambos, com o uso do “&”. Por exemplo, usando os Alias do último exemplo, podemos combiná-los em um só:

Com isso, IntersectionAlias se torna uma combinação de ambos os tipos referenciados.

Interface

A Interface é uma sintaxe do TypeScript que define as especificações de uma entidade. Ou seja, define o contrato, a estrutura de uma Classe, Objeto ou Função.

Uma Interface é definida usando a keyword “interface”, seguida do nome e das especificações. Por exemplo:

No caso da Função, declaram-se os parâmetros e o tipo do retorno:

Declaration Merging

Diferentemente do Alias, uma Interface pode ser declarada mais de uma vez, o que fará com que todas as declarações sejam mescladas numa só:

A Interface ICar passa a ser composta pelas entidades das duas declarações. Isso porque o TypeScript mescla todas as declarações de uma mesma Interface.

Extends

Tanto o Alias quanto a Interface podem ampliar outros, de forma que devem implementar os membros do Alias ou Interface ampliado e os próprios.

No caso do Alias, a extensão é feita usando o “&” para criar uma Intersection:

Além disso, podemos estender uma Interface, com a mesma sintaxe:

Por sua vez, a Interface utiliza a keyword “extends” para estender um Alias ou Interface:

Implements

O TypeScript permite que Classes implementem Aliases ou Interfaces, com o uso da keyword “implements”:

TypeScript Alias x Interface: qual a diferença, afinal?

Ante todo o exposto neste artigo, percebemos que as duas ferramentas são similares, e até intercambiáveis.

Porém, fica claro que cada uma possui características que as tornam mais específicas para determinadas situações.

No caso da Interface, ela é mais limitada, pois apenas define a estrutura de uma Classe, Objeto ou Função. Entretanto, isso a torna melhor nesse caso de uso, qual seja, definir as entidades desses tipos complexos.

O Alias, por sua vez, possui uma abrangência maior, pois permite a definição de tipos personalizados a partir dos primitivos e complexos. Assim, possibilita atender às diferentes situações que uma aplicação pode ter para seus dados.

Dessa forma, conclui-se que a Interface deve ser utilizada quando se quer tipar uma Classe, Objeto ou Função, pois seu uso é destinado especificamente para isso. Já o Alias serve para todas as demais situações em que se quer definir tipos para um dado da aplicação, que não seriam abrangidos pelos fornecidos pelo TypeScript.

Leia também:

Abstração orientada ao objeto

Biblioteca de conceitos de desenvolvimento

Autor: Gustavo França Albano de Paula.

[adrotate banner=”5″]

O post TypeScript: quando utilizar Alias ou Interface? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Atualmente, no ReactJS, os componentes baseados em funções são mais utilizados. Portanto, vamos começar esse tutorial de Clean Code com elas.

Funções

De acordo com Robert C. Martin, a primeira regra das funções é que elas devem ser pequenas. E a segunda regra é que elas devem ser menores ainda.

Isso se aplica tanto às funções normais quanto aos componentes funcionais do React. Assim, quanto menor, melhor.

Cada função deve fazer apenas uma coisa, esse é o princípio da responsabilidade única, SRP (Single Responsability Principle). Entretanto, esse é um conceito que deixamos passar com muita frequência.

Então, vamos a um exemplo, observe a seguinte função:

const submitForm = (e: any) => {
e.preventDefault();
if (emailValidator(email)) {
if (passwordValidator(password)) {
createUser({ email, password, name })
.then((response) => {
if (response === 200) AlertSuccess('Usuário criado com sucesso');
setEmail('');
setPassword('');
setName('');
setRegistration(false);
})
.catch((error) => {
AlertError(error.reponse.data.message);
});
} else {
AlertError(
'Digite uma senha válida. É necessário pelo menos oito dígitos sendo pelo menos um número e uma letra.'
);
}
} else {
AlertError('Digite um email válido');
}
};

Observe que a função “submitForm” é responsável por validar o formulário, enviar o formulário e resetar os
valores dos inputs. Dessa forma, usando o princípio da responsabilidade única, conseguimos extrair 3 funções dela e tornamos o código bem mais legível:

const submitForm = (event: any) => {
event.preventDefault();
const data = { email, password, name };
if (formIsValid(data)) createUserHandler(data);
};
const formIsValid = (form: registrationFormData) => {
if (!emailValidator(form.email)) {
AlertError("Digite um email válido");
return false;
} else if (!passwordValidator(form.password)) {
AlertError(
"Digite uma senha válida. É necessário pelo menos oito dígitos sendo pelo menos um número e uma letra."
);
return false;
} else if (!name.trim().length) {
AlertError("Digite um Nome válido");
return false;
} else {
return true;
}
};
const createUserHandler = (data: registrationFormData) => {
createUser(data)
.then((status) => {
if (status === 200) {
AlertSuccess("Usuário criado com sucesso")
resetInputs();
}
})
.catch((error) => AlertError(error.reponse.data.message));
};
const resetInputs = () => {
setEmail("");
setPassword("");
setName("");
setRegistration(false);
};

Isso também se aplica aos componentes funcionais. Assim, se existe algum componente que se repete em mais de um lugar, crie um componente apenas para ele. Reutilização de código é essencial. Afinal, essa é uma das vantagens de se utilizar React.

Agora, observe outra coisa no último exemplo de código: a função ‘submitForm’ chama a função ‘formIsValid’, que -por sua vez- chama a função ‘createUserHandler’, que chama a função ‘resetInputs’ e elas estão escritas nessa mesma ordem. Entretanto, aguarde! Pode uma função chamar outra que não existe antes dela?

Atualmente, no Javascript, isso não é um problema. Além disso, lembre-se que pessoas lerão o seu código e o comportamento normal ao lermos algo é de cima para baixo. Portanto, essa prática evita que precisemos ficar voltando e procurando a função que foi chamada, possibilitando uma leitura contínua do código.

Nomes

A forma como nomeamos as coisas no nosso código podem fazer a diferença na hora de definir se temos um bom código. Dessa forma, o nome de algo em seu código deve dizer o que ele faz ou o motivo de estar lá.

Observe o código a seguir:

const submitForm = (event: any) => {
event.preventDefault();
const formData = { email, password, name };
if (formIsValid(formData)) createUserHandler(formData);
};

Lendo essa função, você consegue fazer um parágrafo com base nela: quando o formulário for submetido a função, vai prevenir o comportamento padrão do navegador de atualizar a página. Em seguida, vai reunir os dados do formulário em uma variável. Assim, se o formulário for válido, ele vai tentar criar um usuário.

Dicas de Clean Code para nomenclatura

É esse tipo de lógica que se espera com as nomeações.

Evite abreviações e letras soltas como “x”. Na hora de lermos o código, já é o bastante termos que nos preocupar em decifrar a lógica por trás dele. Assim, não precisamos parar para pensar no que aquele nome de variável ou função significa.

Além disso, outra coisa para ter bastante cuidado são nomes que passam uma informação errada. Observe o seguinte exemplo:

import { PageTitle } from './styles';
const LoginPage = () => {
return (
<>
<section>
<PageTitle>
<h2>The</h2>
<h2>Greatest</h2>
<h2>App</h2>
<p>for</p>
<h1>Lottery</h1>
</PageTitle>
...

Quando vemos o componente de “PageTitle”, é esperado que ele já retorne o estilo necessário para o título da página e não que seja apenas um invólucro para ele. Nesse caso, seria muito mais apropriado um nome como “PageTitleContainer”. O que nos leva a outro ponto: não tenha medo de nomes grandes.

É melhor gastar tempo uma vez escrevendo um nome grande do que perder tempo várias outras vezes decifrando o que aquela abreviação significa. Dessa forma, o tamanho de um nome deve ser proporcional ao escopo que ele pertence.

É fácil decifrar o que “name” significa dentro de um componente de formulário. Entretanto, é muito difícil saber o que aquele nome representa dentro de uma página de carrinho. Isto é, ele é o nome do produto? O nome do cliente?

Outro ponto em relação a nomes: não misture inglês com português.

É sempre bom manter um padrão e é mais aconselhável que se utilize nomes em inglês. Assim, as palavras chaves das linguagens já são em inglês e nomear as partes do seu código em inglês ajuda tanto a manter a organização quanto a escalabilidade do código.

Isso porque, as vezes, seu projeto pode chegar a Devs de fora do Brasil e eles não vão saber o que a variável “corDoCarro” significa. Portanto, o Google tradutor é muito bom hoje em dia, use e abuse dele.

A sopa de Divs

Quem utiliza o React JS, sabe que cada componente funcional deve retornar apenas um elemento JSX. A questão é que, na maioria das vezes, não temos apenas um único elemento para retornar. Ou seja, isso nos obriga a utilizar uma tag invólucro, que geralmente é uma div.

Mas qual o problema disso? Isso vira um problema quando temos uma página com muitos componentes filhos que, por sua vez, tem mais componentes filhos e por aí vai.

O resultado disso é uma verdadeira sopa de divs. Então, a solução para isso são os Fragments do React, que são um invólucro para o código JSX sem adicionar um novo elemento HTML à página.

import { Fragment } from "react";
const Element = () => {
return (
<Fragment>
<h1>Title</h1>
<p>Description</p>
</Fragment>
);
};
export default Element;

Ou simplesmente:

const Element = () => {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
};
export default Element;

Atualização de estados

Quando precisamos atualizar um estado do React com base no estado anterior, não é uma boa prática pegar esse valor da variável de estado.

const updateCount = () => setCount(count + 1);

Ao invés disso, é recomendado passar uma função que recebe o estado anterior e atualizá-lo com esse valor. Assim, isso evita que o React se perca nos fluxos de Renderização.

const updateCount = () => setCount((prevState) => prevState + 1);

Organizando importações

Em uma página onde você possui diversos componentes e precisa importar todos eles, você vai acabar com algo desse tipo:

import React from 'react';
import Header from 'components/Header';
import Card from 'components/Card';
import Button from 'components/Button';
import NumberSelector from 'components/NumberSelector';
import GameSelector from 'components/GameSelector';
...

Em contrapartida, você pode criar uma página ‘index.ts’ dentro da pasta ‘components’ e de lá exportar todos os componentes.

import Header from 'components/Header';
import Card from 'components/Card';
import Button from 'components/Button';
import NumberSelector from 'components/NumberSelector';
import GameSelector from 'components/GameSelector';

export {Header, Card, Button, NumberSelector, GameSelector};

Assim, no componente de página, você vai ter algo como isso:

import { Header, Card, Button, NumberSelector, GameSelector } from 'components';

Veja quantas linhas de código você economizou!

Comentários

O melhor comentário é aquele que não existe. Por isso, comentários só devem ser utilizados em último caso. Isso porque, geralmente, eles estão lá para explicar um código que não se explica por si só.

Como melhorar o seu Clean Code?

No livro “Clean Code” é citada a “Regra do Escoteiro”. Em suma, essa regra fala para você deixar o código sempre melhor do que achou.

Por isso, achou uma variável com um nome esquisito? Refatore. Achou uma função grande demais? Refatore. Assim, pouco a pouco o código vai ficando melhor.

No final das contas, ter um Clean Code não é algo que se aprende do dia para a noite, requer prática. Dessa forma, lembre-se: um código perfeito não existe, sempre vai ter algo a ser melhorado.

Autora: Jaiane Souza Oliveira.

[adrotate banner=”5″]

Veja Também:
O que é Apache Kafka

Biblioteca Luby sobre Back End

O post Clean Code e boas práticas de programação aplicadas ao React JS apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Renderizando páginas no lado do servidor

Abaixo, iremos comentar sobre algumas funções que o NextJS disponibiliza para renderizarmos as nossas páginas.

getStaticProps

É uma função que é executada durante o processo de build da aplicação para gerar as páginas estáticas.

Esta função também possui uma propriedade chamada revalidate, que podemos definir para renderizar o conteúdo em produção, caso haja alguma alteração dos dados.

Quando utilizar?

• Para carregar os dados da página durante o build da aplicação a fim de melhorar o SEO;
• Para manter os dados em cache;
• Quando queremos que os arquivos html e json gerados pela execução da função sejam armazenados em um CDN para melhorar o desempenho.

Desvantagem

Porém, a sua desvantagem é que o conteúdo pode se tornar obsoleto.

getStaticPaths

Para utilizarmos getStaticProps a fim renderizar páginas com URLs dinâmicas, devemos usá-la em conjunto com a função getStaticPaths.

getStaticPaths é responsável por gerar as rotas dinâmicas da aplicação e só utilizamos ela com getStaticProps. Assim, não podemos utilizá-la com getServerSideProps, pois o getServerSideProps já gera as rotas automaticamente.

Normalmente, fazemos um fetch dentro de getStaticPaths e criamos as rotas com base nas propriedades dos dados retornados. Por exemplo, uma rota que contenha a propriedade id ou o nome do produto.

getServerSideProps

Essa função é executada no momento em que a página é solicitada pelo usuário.

Quando utilizar?

• Quando queremos carregar os dados durante cada requisição da página.

Desvantagem

O tempo para o First Byte (TTFB) será maior do que o getStaticProps. Isso porque o servidor deve calcular o resultado para cada requisição. Até poderíamos armazenar o resultado em um cache por um CDN, porém, seria uma configuração extra.

Agora, se os dados atualizam com muita frequência e se não existe a necessidade de pré-renderizar a página para o SEO, podemos optar por realizar o data fetching no lado do cliente. Um bom exemplo disso seria um dashboard onde as informações são específicas para cada usuário e, por isso, não precisam ser pré-renderizadas e os dados atualizam a todo momento.

Criação do Data Fetching

Não existe muito segredo para criar data fetching para uma API externa, basta chamarmos ela normalmente com a seguinte sintaxe (tanto para a renderização no lado do cliente quanto para o lado do servidor).

Lado do Cliente

Quando queremos realizar o data fetching para a API interna do NextJS no lado do cliente, devemos adicioná-lo dentro de um useEffect e a url da requisição passa a ser /api/arquivo:

O carregamento dos dados normalmente é realizado através do useEffect (ciclo de vida). Isso porque, com ele, temos o controle sob algum erro ou chamada indesejada que possa aparecer na aplicação. Dessa forma, nos garante que os dados só carreguem durante a inicialização da página.

swr

Existe uma outra forma de se realizar o data fetching no lado do cliente no NextJs e é através de um react hook chamado swr.

O swr utiliza uma estratégia que, no primeiro momento, exibe os dados (obsoletos) em cache para o usuário enquanto ele está revalidando os dados para obter as informações atualizadas.

Este hook é muito recomendado pelo NextJS para realizar o carregamento dos dados. Além disso, possui muitos outros recursos, como rastreamento de foco, representação em intervalos, entre outros.

Lado do Servidor

Agora, para realizar um data fetching para API interna do NextJS no lado do servidor, ao invés de fazer uma requisição para API/arquivo, iremos utilizar urlDoSite/api/arquivo.

Nos exemplos acima, temos um problema de desempenho. Isso porque estamos fazendo uma requisição desnecessária. Dessa forma, não faz sentido realizar um fetch para a API interna, pois as funções de renderização do NextJs são executadas no servidor, assim como a api interna. Portanto, estaríamos fazendo uma requisição do servidor para o mesmo servidor, para acessar o método get da API e obter os dados.

Para resolver este problema, poderíamos simplesmente mover todo o código relacionado ao get da API para a função getStaticProps. Porém, é mais elegante e reutilizável criar uma função com esse código e exportá-la da API ou de uma pasta lib na raiz do projeto.

Nestes exemplos, já não temos mais a requisição extra. Não precisa ser necessariamente uma API externa, como mostrado no exemplo, poderia ser uma lógica que acessa o banco de dados ou algum arquivo do sistema que gostaríamos de acessar com o file system.

Conclusão

O data fetching é muito importante para o SEO, temos que ter conhecimento das melhores práticas para realizá-lo tanto no lado do cliente como no lado do servidor.

Dessa forma, devemos analisar melhor a nossa aplicação e verificar qual é o melhor tipo de renderização para cada página.

Veja também:

O que é Solid!

Autor: Victor Gabriel de Carvalho Paulino.

[adrotate banner=”5″]

O post O que é Data Fetching e como utilizar? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Como funcionam os commits assinados?

Existem duas chaves: uma pública e outra privada. Todas as vezes que um commit for criado, serão checadas ambas as chaves e, se tudo tiver certo, o commit é realizado.

Para gerar as chaves, vamos utilizar o GPG. Assim, vamos demonstrar como utilizá-lo no Windows. Entretanto, o método é muito semelhante para o Linux.

GNU Privacy Guard (GnuPG ou GPG) é um software livre, que utiliza de criptografia híbrida, sendo ela composta de criptografia de chave simétrica e criptografia de chave pública. Dessa forma, garante velocidade e facilidade na troca segura de chaves. O GPG pode ser utilizado para transportar e-mails e arquivos de forma segura, mas neste artigo vamos focar seu uso para geração de chaves para commits assinados.

Para acessar o link de download do GPG para Windows, clique aqui.

Passo a passo para criação do commit

O primeiro passo é instalar o GPG na sua máquina. Uma dica: não é necessário realizar uma doação para utilizar o sistema, você pode selecionar a opção de doar $0.

Após a instalação, vamos abrir o terminal e rodar o comando gpg –list-secret-key –keyid-form LONG para mostrar as chaves já criadas. Agora, iremos criar nossa primeira chave, usando o comando gpg –full-generate-key.

Nesse campo, iremos selecionar o tipo da chave que será gerada (no exemplo, foi escolhida a primeira opção).

Depois iremos escolher a quantidade de bits que a chave gerada irá possuir.

Agora iremos escolher a duração da chave. Isto é, ela pode ter duração de dias, semanas, meses, anos ou não ter duração (dependendo da necessidade do usuário).

Após a escolha da duração da chave, será impresso no console a data de expiração da chave e o sistema irá solicitar uma confirmação.

Neste momento, iremos inserir um nome para identificar a chave. A dica é: utilize o mesmo nome do seu github.

Insira o e-mail que será utilizado, use o mesmo e-mail do github (é possível adicionar outros e-mails posteriormente).

Podemos também inserir um comentário, mas não é necessário.

Confirmação

Neste momento pode ser alterado os campos de nome, comentário, e-mail, salvar ou sair.

Depois da confirmação, é solicitada a criação de uma senha para acessar a chave.

Após a criação da senha, a chave é impressa na tela.

Rodando novamente o comando gpg –list-secret-key –keyid-form LONG temos a nova chave gerada.

Com a chave gerada, iremos usar o comando gpg –armor –export ID. O id é a parte em vermelho na imagem acima. Esse comando retorna o endereço da chave pública (como demonstrado na imagem abaixo).

O próximo passo é acessar seu github e ir nas configurações, selecionar SSH and GPG keys e adicionar uma nova chave GPG, colar todo o bloco gerado pelo comando anterior e adicionar a chave.

Com a chave no github, é possível comparar ela com a assinatura dos futuros commits. Se elas forem similares, seu commit será considerado verificado.

Verificação

Utilizaremos o comando git config –global user.sigingkey ID para escolher a chave padrão nas assinaturas e o comando git config gpg.program “C:\Program Files (x86)\GnuPG\bin\gpg.exe” para assinar os commits de um único repositório ou utilizar o comando git config –global gpg.program “C:\Program Files (x86)\GnuPG\bin\gpg.exe” para todos repositórios.

Lembrando que o caminho pode variar dependendo da instalação. O caminho utilizado acima é o padrão.

Por fim, utilize o comando git config –global commit.gpgsign true. A partir desse momento, seu commit pedirá a senha criada anteriormente. Utilizando o comando git log –show-signature, será exibido que o commit foi realizado assinado com sucesso.

Caso ocorra algum erro, verifique se está tudo de acordo no .gitconfig do seu usuário, ele deveria conter as seguintes linhas:

Após subir as modificações para o github, podemos ver que o commit estará verificado.

Proteção de branches e boas práticas

Durante o desenvolvimento de um projeto, erros podem acontecer. Isso pode causar uma enorme dor de cabeça e muito retrabalho.

Entretanto, não podemos impedir todos os erros de acontecerem, mas podemos reduzir sua quantidade. Um exemplo disso é trocar a branche padrão do projeto para a branche de desenvolvimento, para garantir que nada vai direto para a master.

Podemos ainda adicionar novas regras para as branches. Por exemplo, exigir que todos os commits criados sejam assinados ou exigir uma pull request antes de subir qualquer alteração no projeto, entre outras regras que podemos utilizar para tornar o desenvolvimento do projeto seguro e tranquilo.

Veja também:

Diferença entre compilação e interpretação

Autor: Luiz Sergio Alves Rodrigues

[adrotate banner=”5″]

O post Boas práticas de commits assinados e proteção de branches apareceu primeiro em Luby Software.