ESLint, Prettier e GitHooks com Husky em React.js

React.js

Neste post quero compartilhar como configurar o ESLint e Prettier em projetos React.js e validar as regras usando os Githooks com Husky. Este setup vai garantir que, antes de fazer um commit, nosso código seja testado, evitando que código ruim ou mal formatado seja enviado em um pull-request para nosso repositório Git. O foco aqui será o setup do ESLint, Prettier e Husky em uma aplicação React.js, mas os mesmos princípios podem ser aplicados em outros projetos JavaScript, uma API Node.js por exemplo. ESLint Se você está começando agora a trabalhar com desenvolvimento de projetos com React.js, talvez tenha percebido …

Métodos para manipular arrays em JavaScript

JavaScript

Se você está começando a trabalhar com JavaScript, talvez já tenha escutado falar em map, reduce ou filter. Métodos bem populares e importantes de entender, pois vão otimizar seu código. Além deles, também temos outros métodos para manipular arrays em JavaScript, tão importantes quanto eles. Neste artigo quero te mostrar os principais métodos que tenho utilizado nos meus projetos e sua finalidade. A ideia é te ajudar a reforçar estes conceitos para seguir otimizando teu código JavaScript. Nos últimos dias falei sobre Clean Code com JavaScript, se tem algo importante para escrever código limpo, é dominar os recursos da linguagem …

Clean Code com JavaScript

JavaScript

Nas últimas semanas estive escrevendo sobre qualidade de código com JavaScript puro, falei sobre desestruturação e tratamento de erros, neste artigo quero te apresentar o Clean Code aplicado em JavaScript, um conjunto de princípios para desenvolver códigos com mais qualidade. Se você ainda não ouviu falar sobre Clean Code, recomendo acompanhar este artigo até o fim. Preocupar-se com a qualidade de código, como ele é escrito, ao invés de se preocupar apenas se funciona, deveria ser premissa de todo desenvolvedor. Um código bem escrito, legível e organizado, vai garantir um maior tempo de vida para o software, menores riscos de …

Tratamento de erros e exceções em JavaScript

JavaScript

Se tem um requisito de software que deveríamos priorizar, em qualquer projeto, seja ele de backend ou frontend, é como vamos realizar o tratamento de erros e exceções da nossa aplicação. Neste post quero trazer uma introdução prática sobre como você pode realizar o tratamento de erros em JavaScript. Embora seja um tópico relativamente fácil de compreender, quantas vezes você realmente usou Try Catch e sabia o que estava fazendo? Atire a primeira pedra, quem nunca errou. Não importa o quão bom sejamos, às vezes nossos scripts podem falhar. O erro pode ocorrer por algum problema de digitação durante o …

Desestruturação de arrays em JavaScript

JavaScript

Continuando nosso conteúdo sobre atribuição via desestruturação, neste artigo vamos falar sobre desestruturação de arrays em JavaScript. Se você ainda não leu meu artigo anterior, onde falei sobre desestruturação de objetos, recomendo você conferir, nele começo explicando sobre o básico até o momento deste post. Mas vamos ao objetivo deste artigo, vamos conhecer alguns recursos bem úteis quando precisamos manipular arrays em JavaScript. Para testar os scripts que veremos a seguir, recomendo que use o Codepen, JSFiddle ou outro editor online da sua preferência. Desestruturação de Arrays Trabalhar com desestruturação de arrays é muito semelhante a desestruturação de objetos, os …

Desestruturação de objetos em JavaScript

JavaScript

Neste artigo, resolvi resgatar um assunto bem interessante do JavaScript, a desestruturação de objetos. Embora seja um assunto já conhecido do ES6, percebi a pouca utilização deste recurso ao longo de projetos que participei. Hoje quero compartilhar uma abordagem prática sobre como utilizar desestruturação de objetos e simplificar nossos projetos em JavaScript. O foco deste post será mergulharmos no tema Destructuring, para isto, é importante que você já tenha alguma experiência com JavaScript. Se surgir alguma dúvida, você pode deixar nos comentários no fim da página. Caso você use TypeScript ou algum framework moderno como React ou Vue, talvez já …

Simulando AWS local com localstack e Node.js

AWS / Serverless

Nesse artigo quero compartilhar como aprendi a trabalhar com o Localstack com Node.js para testar funções serverless e outros serviços da Amazon Web Service. Se você trabalha com desenvolvimento de aplicações na AWS, aprender a testar os serviços como SQS, S3 ou Lambda primeiro na sua máquina, é uma ótima estratégia para acelerar seu fluxo de desenvolvimento. Recentemente acabei testando pela AWS um projeto que estou em fase de desenvolvendo, embora eu tenha separado meus ambientes (dev, stage e prd), isso me custou quase US$ 100, se considerar que o dólar no momento que escrevo este post passa dos R$ …

Configurando Custom Path Mapping no React Native

Mobile / React Native

A medida que um projeto mobile é desenvolvido, novas estruturas de pastas são criadas para organizar componentes, contextos, serviços e diversas outras partes relevantes do aplicativo. Preocupar-se com a legibilidade do código e manutenção do projeto, é fundamental, neste post vou falar sobre Custom Path Mapping do TypeScript, aliases que podemos criar para pastas do projeto, neste post para React Native. Em grandes projetos, quanto mais funcionalidades temos, mais amplo é o código do nosso aplicativo e maior será a dificuldade de rastrear as referências entres os arquivos em caso de manutenção. Caso você utilize algum padrão como DDD ou …

Configurando Node.js com TypeScript, nodemon e Jest

JavaScript / Node.js

Dando sequência a serie sobre TypeScript, neste artigo vamos configurar o Node.js com TypeScript, adicionar o nodemon para live-reload, o Jest para testes em ambiente de desenvolvimento e o ESLint para garantir o estilo do código. Para nosso código de produção, vamos configurar o Babel. Nos artigos anteriores, falei de alguns types avançados e os meus motivos para usar TypeScript, caso não tenha lido, recomendo conferir. Neste exemplo, vamos usar o Express para criar uma rota retornando um Hello World. Embora este setup seja simples, ele será o ponto de partida para mais implementações desta serie. Criando o projeto Abra …

Dicas avançadas de TypeScript que você precisa conhecer

JavaScript

Se você está começando agora no mundo de desenvolvimento e não conhece TypeScript, talvez estas dicas avançadas de TypeScript não te ajude tanto, para isso recomendo ler meu artigo anterior onde explico o que é TypeScript e os motivos que me levaram a usar nos meus projetos Node.js, React.js e React Native. Caso você já esteja utilizando TypeScript em seus projetos e quer conhecer alguns truques novos e expandir o uso do TypeScript, neste artigo vou compartilhar alguns exemplos práticos de Types avançados que estou usando.