DEV Community: CollabCode

Métodos HTTP da visão de FrontEnd

Marco Bruno 🤡 — Thu, 07 Apr 2022 12:47:01 +0000

Nesse post vou apresentar os métodos HTTP do ponto de vista de pessoas que trabalham com FrontEnd utilizando o Fetch API do JavaScript para consumir uma API.

➡️ Introdução

Imagine que você precisa criar uma apliacação com 4 funcionalidades, de criar, ler, atualizar e deletar os dados de um usuário. Essas 4 funcionalidades também são conhecidas como CRUD (Create, Read, Update e Delete).

Esse é um exemplo de como é a estrutura do nosso usuário na aplicação:

const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

Felizmente você tem uma API (Application Programming Interface) e poderá enviar os dados do usuário para a rota (recurso) a seguir: /user.

Outra coisa feliz é que você tem 5 métodos HTTP que estão disponíveis nessa rota /user, sendo eles:

1️⃣ Get (Consumir/Pegar)
2️⃣ Post (Publicar/enviar)
3️⃣ Put (Colocar/guardar)
4️⃣ Patch (Correção/remendo)
5️⃣ Delete (Deletar/remover)

Pra que servem esses métodos? 🤨

1️⃣ Get (Consumir/Pegar)

No momento que você consumir a API na rota /user utilizando o método Get ela retornará para você a lista de usuários cadastrados na plataforma, portanto esse método é utilizando para leitura dos dados.

A seguir um exemplo de como consumir a API utilizando o Fetch API com JavaScript:

fetch(`https://marcobruno.dev/user`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você precisar apenas dos dados de um usuário, é necessário passar um UUID (Universally unique identifier) na rota /user/{uuid}, mas o método utilizado continua sendo o Get.

A seguir um exemplo de como você pode usar o Fetch API do JavaScript para consumir uma API passando o UUID na rota:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos ver que o Get é utilizado para leitura dos dados em diferentes situações!

2️⃣ Post (Publicar/enviar)

O método Post utilizamos quando precisamos salvar um novo usuário na aplicação, portanto é necessário passar todos os dados do usuário no body (corpo) da requisição para a rota /user.

Esse é um exemplo de código de como salvar um dado em uma API utilizando a Fetch API com o método Post:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'POST',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Toda vez que precisar salvar algo utilizando uma API o correto é utilizar o método Post.

3️⃣ Put (Colocar/guardar)

Se precisamos atualizar os dados de um usuário utilizamos o método Put e precisamos enviar todos os dados dele no body da requisição e o *️⃣ UUID (Universally unique identifier) é algo que não pode faltar.

A seguir um exemplo de como usar o método Put passando o UUID no body da requisição com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Mesmo que você esteja atualizando apenas 1 campo de 3 campos que o usuário possui, ainda sim é necessário enviar todos os campos no body da requisição, gostando ou não esse é um padrão adotado quando estamos usando o método Put.

Agora um exemplo de como fica o código quando você está passando o UUID na rota da requisição utilizando o método Put com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos concluir que utilizamos o método Put para atualizar dados de um recurso que no nosso exemplo foi o do usuário de aplicação.

4️⃣ Patch (Correção/remendo)

Esse método também utilizamos para atualizar o usuário, portanto segue as mesmas regras do método Put, a diferença é que não precisamos passar todos os campos no body da requisição.

Usando o Patch podemos informar apenas o campo que estamos atualizando e o UUID para informar qual usuário tem que ser atualizado, como podemos ver no exemplo a seguir:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
}

fetch(`https://marcobruno.dev/user/`,{
  method: 'PATCH',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você estava triste com o método Put agora ficou feliz com o método Patch. A pergunta de você se deve fazer é: Porque existe o Put se o Patch parece mais simples de usar?

Detalhe essa perguntar não vou responder, deixe nos comentários a sua resposta!

5️⃣ Delete (Deletar/remover)

Quando precisamos remover um usuário da aplicação utilizamos o metódo Delete e precisamos informar o UUID na rota: /user/{uuid}

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'DELETE',
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

*️⃣ UUID (Universally unique identifier - Identificador universalmente único)

O padrão é ser uma string alfanumérica de 36 caracteres que pode ser usada para identificar informações.

‼️IMPORTANTE‼️

Existem mais outros 4 métodos HTTP que utilizamos menos no nosso dia a dia, mas que vale você estudar também 😍

➡️ Head
➡️ Connect
➡️ Options
➡️ Trace

Links para saber mais!

Aprendizado Kotlin - Alguns recursos da linguagem

Antonio Lazaro — Thu, 09 Jul 2020 19:42:19 +0000

Originalmente publicado no blog do autor.

Introdução

Durante o curso de Kevin Jones "Getting Started with Kotlin" da Plural Sight tive oportunidade de conhecer alguns conceitos de Kotlin que achei bastante interessante e resolver compartilhar.

No próprio site da linguagem, existem vários tutoriais e recomendações de livros, alem do próprio Getting Started do site que fala de diversas características e recursos da linguagem e ferramentas associadas. Achei também o guia de referência da linguagem muito rico e completo.

Para quem se interessa pela estrutura da linguagem, existe disponível também a gramática da linguagem.

Recursos da linguagens observadores e experimentados

Nessa seção, pretendo falar de alguns recursos que pude experimentar durante o curso, e pratiquei em um projeto piloto que está disponível em um repositório no meu github onde pretendo colocar os demos do que ando testando com Kotlin. Esse repositório é o kotlin-lab.

Declaração de variáveis e propriedades: val x var - Suporte a imutabilidade de objetos nativamente

Em kotlin para declarar uma variável é possível a seguinte estrutura

[propertyType] =

A estrutura acima é explicada da seguinte forma:

val = Variável é imutável. Uma vez atribuído um valor, a referência não pode mais mudar. Se houver essa tentativa de atribuição, o compilador acusa erro.
var = Variável mutável. Comum como qualquer variável.
propertyName = nome da variável ou propriedade.
propertyType = atributo opcional. Caso não seja declarado, será colocado por inferência pela atribuição da primeira referência. Uma vez atribuido, esse tipo não pode receber outro tipo. A linguagem Kotlin não é dinamicamente tipada como JavaScript.
propertyValue = Valor atribuído da variável.

val teste: String;
teste = "Teste";
teste = "Teste 2"; //erro de compilação por fazer uma reatribuição
teste = 10; //erro de compilação por atribuir outro tipo
val inteiro; //erro de compilação. Não é possível fazer inferência sem atribuição e sem definir o tipo

Uso de constantes

Para declaração de constantes existe a palavra reserva const. Exemplo:

const val x = 2

Tipos primitivos

Os tipos primitivos de Kotlin são objetos.

Tipos primitivos inteiros e suas faixas de valores:

Tipos primitivos booleanos e de ponto fluante e suas faixas de valores.:

Strings

Strings são literais definidos entre "". Em Kotlin ela é uma sequencia imutável de códigos UTF-16.

String templates

Em Kotlin, é possível trabalhar com String Templates, como no JavScript, onde variáveis podem ser acessadas através do caracter \$, evitando assim a necessidade de concatenação de Strings. Caso seja necessário usar o caracter \$, deve ser feito o uso do escape: \\$

Exemplo:

val name = "Anne"
val yearOfBirth = 1985
val yearNow = 2018
val message = "$name is ${yearNow - yearOfBirth} years old"

Condicionais (if/else)

A condição fica entre parenteses () e o corpo da condição deve ser envolvido por chaves {}. A condição deve ter retorno booleano.

val age = 42
if (age < 10) {
println("You're too young to watch this movie")
} else if (age < 13) {
println("You can watch this movie with a parent")
} else {
println("You can watch this movie")
}

Como em outras linguagens de programação, o uso da condicional sem as chaves envolve o risco de alguma condição não ser devidamente executada, por isso, é extremamente recomendado se trabalhar com essa sinalização explicitamente.

if (age < 10)
println("You're too young to watch this movie")
println("You should go home") // Erro de lógica, esse trecho de código sempre será executado, independente da condicional.

O if/else é também uma expressão, o que pode funcionar como um operador ternário em Java. Quando se usa essa condição, é obrigatório definir um regra para o bloco else.

val result = if (condition) trueBody else falseBody

Comparações

Estrutura de comparação são feitas sempre com == ou !=. Quando invocados esses símbolos, eles automaticamente invocam o equals da classe em questão.

Comparações são chamadas de equalidade estrutural e o compilador traduz a == b, conforme exemplo abaixo:

a?.equals(b) ?: (b === null)

Para comparação de referência, deve ser utilizado os operadores === ou !==.

When

Esse operador seria equivalente ao Switch do Java, só que é um switch/case muito mais robusto.

Alguns exemplos de uso:

when (x) {
1 -> print("x == 1")
2 -> print("x == 2")
else -> { // Note the block
print("x is neither 1 nor 2")
}
}

Combinando diversos valores para mesma condição:

when (x) {
0, 1 -> print("x == 0 or x == 1")
else -> print("otherwise")
}

Pode ser usada expressões como condição:

when (x) {
parseInt(s) -> print("s encodes x")
else -> print("s does not encode x")
}

E tem suporte a negação através do caracter ! e a range (intervalos), bem como coleções.

when (x) {
in 1..10 -> print("x is in the range")
in validNumbers -> print("x is valid")
!in 10..20 -> print("x is outside the range")
else -> print("none of the above")
}

Estruturas de repetição

for

For faz iteração através de qualquer coisa que provenha um iterator. Similar ao que temos de foreach do Java.

for (item in collection) print(item) // exemplo 1
//ou
for (item: Int in ints) { // exemplo 2
// ...
}
for (i in array.indices) { //iterando um array ou uma lista indexada
println(array[i])
}
for (i in 1..3) { //interando um range de números
println(i)
}
for (i in 6 downTo 0 step 2) { //iterando uma contagem regressiva, definindo o salto
println(i)
}
for (x in 0 until 10 step 2) println(x) // Prints 0, 2, 4, 6, 8

// Iterate over the entries as objects that contain the key and the value as properties
for (entry in map) {
println("${entry.key}: ${entry.value}")
}
// Iterate over the entries as separate key and value objects
for ((key, value) in map) {
println("$key: $value")
}

// Iterate over the keys
for (key in map.keys) {
println(key)
}

// Iterate over the values
for (value in map.values) {
println(value)
}

while/do-while

Não tem muita mudança em relação a outras linguagens.

while (x > 0) {
x--
}

do {
val y = retrieveData()
} while (y != null) // y is visible here!

Collections

A classe Array é equivalente ao array[] do Java. Esse tipo de lista tem um tamanho fixo. As principais estruturas de dados do Java existem em Kotlin. Além do Array, temos o List, Set (dados não se repetem baseado na regra do equals) e Map (chave/valor). O map equivale ao dicionário (dict) do Python.

Exemplo de como criar collections em Kotlin:

val strings = listOf("Anne", "Karen", "Peter") // List<String>
val map = mapOf("a" to 1, "b" to 2, "c" to 3) // Map<String, Int>
val set = setOf("a", "b", "c") // Set<String>

A sintaxe acima cria listas imutáveis. Não pode ser modificado nem o tamanho, nem seus elementos. Para criação de listas mutáveis, existem outros métodos:

val strings = mutableListOf("Anne", "Karen", "Peter")
val map = mutableMapOf("a" to 1, "b" to 2, "c" to 3)
val set = mutableSetOf("a", "b", "c")

Para criar coleções vazias, é necessário definir o tipo ou colocar a tipificação no método de criação. Como na sintaxe abaixo:

val noInts: List<Int> = listOf()
val noStrings = listOf<String>()
val emptyMap = mapOf<String, Int>()

Hierarquia de interfaces em Kotlin segue conforme figura abaixo:

De maneira resumida:

Collection é usada quando podemos trabalhar tanto com List quanto com Set. = MutableCollection é Collection com operações de escrita add/remove.
List é usado preservando a ordem e podendo ser acessado por índice. Os índices iniciam em zero e o último elemento é list.size-1. A lista suporta elementos null, inclusive que podem se repetir. Duas listas são consideradas iguais se elas tem o mesmo tamanho e os elementos são iguais e estão na mesma posição. Implementação default é ArrayList.
MutableList: É uma lista com operação de escritas add/remove (existem outros métodos)
List x Array: Eles são muito similares entretanto, um array tem seu tamanho definido na sua inicialização e nunca mudará. Uma lista ela não tem um tamanho pré-definido, e pode mudar de tamanho a partir de operações de escrita.
Set: Armazena elementos únicos (exclusivos). A ordem normalmente não é um critério relevante. Pode armazenar, um e apenas um valor null. Duas coleções desse tipo são iguais se tem o mesmo tamanho e possuem os mesmos elementos. Implementação default é LinkedHashSet que preserva ordem de inseração, porém existe HashSet que a ordem não é relevante e consequentemente é mais performática que a estrutura default;
MutableSet: Set com operações de escrita.
Map: Estrutura com chave/valor. Lembra um cache ou uma tabela de banco de dados. As chaves são unicas e os valores podem ser repetidos se as chaves forem diferentes. Dois maps são iguais se possuem se suas chaves/valores são iguais. A implementação default é LinkedHashMap que preserva a ordem de inserção. Como alternativa tem o HashMap que não guardar a ordem de inseração e se baseaia no código hash, como no HashSet.
MutableMap: É um map com operação de escrita.

Um recurso bastante interessante em Kotlin é que você pode utilizar operadores + e - para coleções.

val numbers = listOf("one", "two", "three", "four")
val plusList = numbers + "five"
val minusList = numbers - listOf("three", "four")
println(plusList)
println(minusList)

Conclusão

Nesse estudo, comparei com Java as estruturas básicas de programação com Kotlin. Nos próximos, pretendo trazer outros recursos que a linguagem oferece.

Conheça a série sobre Kotlin

Outras Fontes:

Sobre atributos, variáveis (mutáveis ou não), constantes

-- https://kotlinlang.org/docs/reference/properties.html

-- https://kotlinlang.org/docs/tutorials/kotlin-for-py/declaring-variables.html
Sobre strings:

-- https://kotlinlang.org/docs/tutorials/kotlin-for-py/strings.html
Condicional:

-- https://kotlinlang.org/docs/tutorials/kotlin-for-py/conditionals.html
When:

-- https://kotlinlang.org/docs/reference/control-flow.html#when-expression
for:

-- https://kotlinlang.org/docs/reference/control-flow.html#for-loops
Collections:

-- https://kotlinlang.org/docs/reference/collections-overview.html

-- https://kotlinlang.org/docs/tutorials/kotlin-for-py/collections.html
whil/do-while:

-- https://kotlinlang.org/docs/reference/control-flow.html#while-loops
Collections:

-- https://kotlinlang.org/docs/tutorials/kotlin-for-py/collections.html

Aprendizado Kotlin - Configurando ambiente de desenvolvimento Kotlin

Antonio Lazaro — Thu, 09 Jul 2020 19:27:54 +0000

Originalmente publicado no blog do autor.

Introdução

A Plural Sight está com uma promoção para o mês de abril onde os cursos da plataforma estão todos abertos devido a situação da COVID-19. Diante disso, me cadastrei na plataforma e fiz o curso "Getting Started With Kotlin" by Kevin Jones (conta dele no twitter:).

Meu primeiro contato com Kotlin foi durante a seleção da Jaya onde fiz um projeto usando Kotlin e Gradle com Javalin, Koin e Exposed.

O curso ele tem duração de 2h, e cobre uma introdução, fala um pouco sobre programação orientada a objetos, funcional, interoperabilidade Java x Kotlin e vice-versa, e fala sobre a ferramenta de testes Spek.

Configurando ambiente desenvolvimento Kotlin em ambientes Unix based

Para quem não tem a JVM instalada, particulamente, acho a o SDKMan a melhor forma de configurar itens do ambiente Java para ambientes Unix based. Usuários de Windows, não sei se tem uma forma de configurar o SDKMan no Windows.

Segue passo a passo de como testar e configurar ambiente Kotlin em ambiente Unix based:

1- Instalar o SDK Man

2- Usando Sdk Man, instalar o Kotlin

3- Você pode ver que a variável de ambiente KOTLIN_HOME foi setada através do comando

echo \$KOTLIN_HOME

4- Testar a instalação do Kotlin através do comando kotlinc. Deve aparecer conforme abaixo.

Hello World

A forma mais fácil de testar Kotlin sem necessidade de instalar nenhum software é através do site da própria linguagem Try Kotlin que est[a sendo considerado obsoleto e eles recomendam agora o Kotlin Playground.

Arquivos de código-fonte Kotlin eles tem a extensão .kt. O hello World Kotlin pode ser feito da seguinte forma (pode ser executado diretamente no terminal ou salvo como arquivo):

fun main(args: Array<String>){
println("Hello, World")
}

Assim como no Java existe a função public static void main, em Kotlin essa função é o main, descrito acima. É como a JVM interpreta que o Kotlin executará um programa.

Para compilar via linha de comando será necessário digitar o comando abaixo no diretório onde o arquivo foi salvo.

kotlinc nome-arquivo-fonte.kt

Para converter esse código Kotlin em um jar executável da JVM é necessário rodar o comando abaixo:

kotlinc nome-arquivo-fonte.kt -include-runtime -d nome-binario-executavel.jar

IDEs

Dificilmente, alguém utilizará para projetos reais a estrutura acima, de executar manualmente, compilar, etc. Normalmente trabalhamos com IDEs em projetos reais. Não testei no Netbeans porque, particulamente não conheço e não uso, porém para as 3 IDEs que tenho na minha máquina (Eclipse,IntelliJ e VSCode) vi que o Kotlin tem plugin e suporte.

IntelliJ: Instalar plugin Kotlin
Eclipse: Instalar no Market Place o plugin para Kotlin
VsCode: Instalar o plugin para Kotlin (baixei o que tinha mais download em minha busca, que foi do editor: mathiasfrohlich)

Conclusão

Até o momento, estou utilizando IntelliJ como IDE para programar em Kotlin e tenho gostado do resultado. Achei conceitualmente muito parecido com Java, porém mais simples. A interoperabilidade com Java é muito bem feita para os testes incialmente feitos.

Aprendizado Kotlin - Um pouco sobre Kotlin, minhas percepções do primeiro contato

Antonio Lazaro — Thu, 09 Jul 2020 19:26:28 +0000

Originalmente publicado no blog do autor.

Introdução

Em abril iniciei um novo ciclo profissional e agora faço parte do time da Jaya Tech trabalhando para o C6 Bank. Enquanto os acessos são criados/liberados, tive a oportunidade de ir me familiarizando mais com a linguagem utilizada no projeto que ficarei alocado. A principo a Stack trabalha com Kotlin e por esse motivo tenho que aprender a linguagem e conhecer suas características.

Kotlin

Kotlin atualmente está na versão 1.3.70. A equipe trabalha na release 1.4 que está em milestone 1.

Você pode testar recursos do Kotlin no site da própria linguagem e ela tem uma documentação rica e muito clara com diversos tutoriais.

Uma boa fonte de informação sobre a linguagem, suas evoluções e usos é o blog da linguagem, bem como a conta do Twitter. Para conhecer os detalhes da linguagem, ela é open-source e pode ser conhecida internamente através da conta do GitHub da JetBrains, empresa responsável pela criação e manutenção do Kotlin. No github da linguagem Kotlin, podem ser conhecidos diversos projetos complementares a linguagem com ferramentas e bibliotecas.

História Kotlin

Acredito eu, que a motivação da JetBrains para criar uma nova linguagem de programação em relação ao Java devia ser uma inquietação em relação a lentidão da evolução da linguagem, bem como seu processo de release. Java nos últimos anos, ganhou status de "Old school" e isso obrigou o JCP a acelerar o processo de desenvolvimento do mesmo. Hoje temos releases semestrais do Java, seguindo a mesma cultura LTS (Long Term Support) que já existem em outros projetos Open Source. O ciclo de evolução ficou mais rápido com mudanças menores. Mas a JetBrains hoje tem um modelo de lançamento de release da linguagem mais livre do processo vinculado ao Java.

Em 2011, a JetBrains lançou a linguagem que recebeu o nome em homenagem a uma ilha russa de mesmo nome situada próxima a costa de São Pertesburgo onde a equipe do Kotlin reside. Essa ilha fica no lado ocidental da Russia, próxima a Finlândia e a Estônia.

A linguagem teve fortes influências de Scala e se pensou muito em interopibilidade com o Java, tanto que é possível misturar código Java com Kotlin e vice-versa.

Em 2017, no Google IO, a Google anunciou que essa se tornaria a linguagem oficial para o Android.

A partir de novembro de 2017, na versão 1.2, foi possível lançar uma release onde se programava código Kotlin para JVM e Javascript.

Na release 1.3, Kotlin trouxe o conceito de coroutines para programação assincrona.

Kotlin foi pensada para ser menos verbosa que o Java e mais produtiva. Fazendo o dev escrever menos código, consequentemente tendo mais tempo para pensar no negócio do que digitando.

Ambiente de desenvolvimento

Por ser feito pela JetBrains, nos meus testes, minha perceção de melhor uso e produtividade no Kotlin é no InteliJ IDE. Porém Kotlin tem plugins para Eclipse e Visual Studio Code e funcionaram bem. Nesse primeiro contato o IntelliJ tem me agradado mais. Mesmo na versão Community Edition.

É possível também utilizar linha de comando para executar código Kotlin.

Características

Fortemente tipada: Como Java, porém de maneira mais simples devido a inferência de tipo.
Inferência de tipo: Tipo não precisa ser declarado, ele é inferido na associação com o objeto.
Concisa: Linguagem pensada para o dev escrever objetivamente seu código.
Null Safe: Kotlin é pensada para evitar NullPointerException. Para declarar null a uma variável é necessário definir que a aquela variável suporta null explicitamente.
Propósito geral: Mobile cross-platform, server side, native (windows/linux/mac), web development, - Android, data Science
Interopelabilidade: Roda em qualquer ambiente JVM, no Browser e no Android. Suporta código Java, então bibliotecas e frameworks Java podem ser usado em ambiente/projetos Kotlin
Tool-friendly: Suportada nas principais IDEs, inclusive na linha de comando.
Funcional/Orientad a objetos: Suporta os dois paradigmas
Extension functions: É possível se extender funcionalidades de uma classe sem usar herança
Suporte a imutabilidade: Objetos podem ser considerados imutáveis (não podem sofrer nova atribuição) e esse recurso é muito importante quando falamos de programação funcional.
Linguagem concisa para criação de DSLs (Domain Specification Language)
Suporta funções como cidadãos de primeira classe e função de ordem superior explicação melhor sobre os temas

Conclusão

Meu primeiro contato foi muito positivo com a linguagem e encontrei em Kotlin, recursos que sempre questionei porque o Java não tinha isso nativamente. Porém, entendo muito o dilema do Java de manter retrocompatibilidade, pensando no Enterprise que sempre foi o foco da linguagem.

Construir uma linguagem sem essas amarras e dependências, permitiu a JetBrains a criar uma Java Clean e com práticas e decisões mais modernas. Eu não conheço C#, porém dizem que Kotlin tem muitas coisas boas que existem no C# nativamente. Acredito que toda ferramenta/linguagem que nasce depois, tem sempre a oportunidade de ser construída de maneira melhor e mais alinhada ao seu presente, que para linguagens mais antigas, teriam que tomar decisões de futuro para acertar o que temos hoje. Algumas coisas dão certo, outras não. Assim se caminha a humanidade, nada se cria, tudo se transforma, aprimora, evolui.

A ciência é algo muito bonito. Vamos valorizar.

Outras Fontes:

Publicando pacotes privados do NPM no Nexus repository

Mateus Malaquias — Tue, 23 Jun 2020 17:58:43 +0000

Atualmente trabalho com JavaScript e Node.js em uma grande operadora daqui do Brasil e muitas de nossas soluções não podem estar públicas na internet por questões de segurança.

No projeto que trabalho temos o costume de compartilhar módulos JavaScript entre microserviços para aumentar nossa produtividade.

Isso no levou a desenvolver muitas libs internas, até então estávamos utilizando um gitlab interno como repositório de pacote para essas libs, mas o processo de governança e publicação não ficou muito bom.

Por isso migramos para o Nexus Repository Manager (também conhecido como Nexus), que é um gerenciador de repositório de código aberto fornecido pelo Sonatype.

A nossa intenção é continuar usando o NPM e tudo aquilo que a comunidade JavaScript pode nos oferecer de open-source. Combinando com nossas libs privadas do Nexus, além de conseguir utilizar de maneira decente um processo de controle de pacotes.

Neste artigo vamos ver um resumo de porque escolhemos o Nexus como repositório privado, como configura-ló para funcionar com o NPM e como conseguir consumir os pacotes guardados no Nexus.

Por que não estamos usando os produtos do NPM?

Bem, aqui a gente entra um pouco no processo de contratação de serviço da empresa, geralmente não se contrata ou compra serviços que vão atender a somente um time, como temos muitos projetos e muitos times trabalhando a empresa tenta contratar o serviço para o máximo de times possíveis.

No momento que estou escrevendo esse artigo o NPM a nível enterprise que possuí toda a estrutura de serviços que uma grande corporação precisa está custando ao mês 10 mil dólares.

Com 10 mil dólares nosso time de DevOps é capaz de subir toda infraestrutura necessária, configurar backups regulares, camadas de segurança e ainda vai sobrar bastante dinheiro porque o Nexus pode atender diversas plataformas de programação.

Se você só utiliza JavaScript em seus projetos e pode pagar pelos produtos oferecidos pelo NPM ou não possuiu um time que possa manter uma infraestrutura decente para você, recomendo optar pelo NPM.

O mínimo que você precisa saber para prosseguir

O Nexus vai expor para você um repositório “publico” chamado group que internamente é combinação do nosso repositório privado, ou seja, hosted e um proxy para o registro público do NPM.

O proxy é extremamente importante se seu projeto precisa utilizar libs open source que estão hospedadas no NPM ou em qualquer outro repositório que não seja o teu Nexus.

Por padrão sempre que a gente consumir um pacote publico o Nexus vai criar um cache para que a gente não precise acessar o NPM a todo momento por exemplo.

No final de nossa configuração teremos a seguinte somatória group = hosted + proxy e nosso fluxo de uso será sempre baixar os pacotes do group e fazer uploads para o hosted.

No fim, vamos arregaçar um pouco as mangas e entender.

Criando um repositório Host

Repositórios hospedados são os repositórios particulares que criamos para armazenar nossos pacotes particulares. O que torna esses repositórios privados é a incapacidade de ler o conteúdo desses repositórios sem um authToken. Veremos isso em um exemplo no final do artigo.

Para criar um repositório do tipo hosted vá em Settings => Repository => Repositories => Create Repository.

Depois de clicar em Create Repository o Nexus vai nos exibir uma quantidade enorme de plataformas que gerenciam dependências. Se for sua primeira vez usando Nexus, aproveite a oportunidade para da uma explorada no que a plataforma pode te oferecer.

Dessa lista vamos focar no npm, o primeiro repositório que vamos será npm(hosted).

Na tela de criação o Nexus vai nos solicitar um nome único e em storage vamos guardar os nossos artefatos.

E é isso, basta clicar no botão Create Repository para finalizar.

Criando um proxy e grupo do NPM

Volte novamente para Repository => Repositories => Create Repository, para criamos um novo repositório do tipo npm(proxy).

Na tela de configuração nos vamos especificar que queremos nos comunicar com o NPM no campo Proxy Location adicionando a URL https://registry.npmjs.org.

Com os repositórios npm(hosted) e npm(proxy) criados, podemos finalmente criar o npm(group).

O fluxo de configurações é igual aos anteriores, coloque um nome e informe o mesmo store utilizado em npm(hosted) e npm(proxy).

Além disso precisamos selecionar os usuários ou grupos que podem acessar o repositório npm(group).

Enviando pacotes para o Nexus

Agora que estamos prontos com os repositórios criados, podemos configurar nossos projetos.

Para publicar um artefato no Nexus, precisamos alterar o arquivo package.json adicionando um objeto chamado publishConfig que vai guardar a URL do nosso repositório privado.



{
  "name": "@ms-ott/tools",
  "version": "2.0.4",
  "description": "Common and helpers tools to create microservices APIs",
  "main": "src/index.js",
  "publishConfig": {
    "registry": "https://meu.dominio.com/repository/npm-private/"
  },
  "scripts": {
    "lint": "eslint \"{src,apps,libs,test}/**/*.js\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage"
  },
  "devDependencies": {
    "eslint": "^5.16.0",
   "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-prettier": "^3.0.1",
    "jest": "^24.7.1",
    "prettier": "^1.16.4"
  },
  "dependencies": {
    "aws-sdk": "^2.263.1",
    "dotenv": "^5.0.1",
    "dynamoose": "^1.7.3",
    "joi": "^13.4.0",
    "jsonwebtoken": "^8.5.1",
    "node-cache": "^4.2.0",
    "restify-cors-middleware": "^1.1.1",
    "restify-errors": "^8.0.1",
    "uuid": "^3.3.3",
    "request": "^2.83.0",
    "request-ip": "^2.1.3",
    "winston": "^3.2.1"
  }
}

Com o package.json configurado, agora precisamos fazer um login no npm cli apontando o registry para o nosso domínio:

npm login —registry=https://meu.dominio.com/repository/npm-private/

Digite seu usuário e senha do nexus e pronto. 🧞

Agora basta executar o comando: npm publish .

Se tudo deu certo você vai conseguir verificar sua lib hospedado acessando o repositório privado.

Baixando seus pacotes do Nexus

Agora que publicamos nossa lib no Nexus, vamos consumi-la em outros projetos.

Precisamos adicionar um arquivo .npmrc no projeto, para evitar que toda pessoa desenvolvedora do time precise fazer um npm login apontando o registry para o Nexus.

O arquivo .npmrc vai guardar tanto a URL do Nexus como um authToken com permissão de acesso.

Como boa prática, recomendo que você possua configurado em seu Nexus um usuário com permissão de somente leitura que possa ser usado para um fluxo de CI/CD e que você possa deixar o arquivo .npmrc versionado.

Para gerar o authToken você pode usar o comando abaixo:

echo -n 'registryuser:registrypassword' | openssl base64

Com o authToken em mãos, basta criar o arquivo como no modelo abaixo:



registry=https://meu.dominio/repository/npm-group

always-auth=true

_auth=bWF0ZXVzLm1hbGFxdWlhczoxMjM0NTY=

Bônus: Usando Jenkins com Nexus

Se você assim como eu, possui um Jenkins privado e deseja que o teu fluxo de publicação seja automatizado. O código abaixo possui o mínimo necessário para publicar nossas libs usando o Jenkins.



pipeline {

    agent any

    tools{nodejs "node”}

environment {
    REGISTRY_URL = "http://localhost:8081/repository/malaquias-npm-private/“
    REGISTRY_USER_EMAIL = "malaquiasdev@gmail.com”
    NPM_TOKEN = "bnBtdXNlcjpWbnRlaG1fMDU=“
}

stages {
    stage('Git Checkout') {
        steps {
            git 'https://gitlab.com/malaquiasdev/nexus-study.git'
        }
    }

    stage('Publish to Nexus') {
        steps {
            sh ‘ls'
            sh 'echo -e "registry=${REGISTRY_URL}\nemail=${REGISTRY_USER_EMAIL}\nalways-auth=true\n_auth=${NPM_TOKEN}" &gt;&gt; .npmrc’
            sh 'npm publish'
        }
    }
}

Conclusão

Nesse artigo pincelei um fluxo básico de como publicar e consumir libs privadas usando o Nexus Repository.

Finalizando...

Se você gostou desse post, por favor não deixe de dar um like e compartilhar 😄

Se quiser saber o que ando fazendo por ai ou tirar alguma dúvida fique a vontade para me procurar nas redes sociais como @ malaquiasdev .

Para ler mais post meus acesse MalaquiasDEV | A Vida, o código e tudo mais .

O Guia dos Serverless das Galáxias #3 - Entendendo o ciclo de vida de uma função lambda

Mateus Malaquias — Tue, 05 May 2020 13:16:03 +0000

Quando a gente cria ou atualiza uma função, na maioria dos casos, esse processo é muito rápido e as nossas funções estão prontas para executar quase que imediatamente.

No entanto, existem situações em que esses processos podem levar mais tempo.

Neste post, vamos entender os estados de uma função, as condições de cada estado e como ocorre a transição entre eles.

Estados de uma função

Pendente

É o primeiro estado pelo qual todas as funções passam quando são criadas. A função se mantém nesse estado durante um processo de deploy ou durante a configuração de todos os recursos externos necessários.

Tenha sempre em mente que só é possível executar uma função quando o seu estado é Ativo, portanto, qualquer invocação nesse momento irá falhar.

Ativo

Alcançado após a conclusão de qualquer deploy com sucesso, configuração ou alocação de recursos durante a criação ou atualização de uma função.

É importante ter em mente que as funções só podem ser invocadas nesse estado. Por isso que durante uma atualização, o estado permanece como ativo.

Durante um processo de atualização todas as invocações irão ser executadas utilizando os códigos e as configurações anteriores até que o processo seja concluído com sucesso.

Falha

É o estado que representa algo que deu errado na configuração ou no provisionamento de recursos externos.

Inativo

Inativo, onde acontece o famoso "cold start" é o estado de uma função quando ela fica sem ser executada por um determinado período de tempo ou quando a função precisa escalar rapidamente para atender muitas chamadas concorrentes.

Esse estado existe para baratear os custos de infraestrutura do serviços, quando a função entra nesse estado todos os recursos externos que foram configurados para ela são removidos.

Estados de uma função durante uma atualização

Em progresso

Significa que uma atualização está acontecendo. Enquanto uma função está nesse sub estado, todas as invocação são realizadas nos códigos e configurações já existentes.

Bem sucedido

A atualização foi concluída.

Falhou

A atualização da função falhou, todas as alterações são abortadas. Tanto o código como a configuração anterior permanecem no estado ativo e disponíveis.

Outro ponto importante durante o processo é que as funções só podem ser atualizadas se estiverem no estado Ativo ou Inativo. Os comandos de atualização emitidos nas funções que não estão nesses estados falharão.

Ciclos de Vida dos Estados de uma função

Como não conseguimos mover manualmente uma função entre os seus estados, a transição entre os estados acaba dependendo das ações que executamos diretamente sobre as funções.

Para todas as funções, o ciclo de vida do estado primário se parece com o seguinte:

Ao criar uma função, ela começa no estado Pendente;
Após a configuração de todos os recursos necessários com sucesso, o estado passa a ser Ativo;
- Se a configuração de recurso ou função falhar por qualquer motivo, ela passará para o estado de Falha;
Se uma função não for executado durante um período de tempo, ela entrará no estado Inativo;
Na primeira chamada após ficar Inativo, uma função entra novamente no estado Pendente;
- Êxito define o estado como Ativo novamente;
- Falha define o estado de volta para Inativo;
Uma atualização com sucesso, também define o estado de volta para Ativo;

Ciclo de vida de uma função durante o processo de atualização

Para atualizar funções, o ciclo de vida é o seguinte:

Na atualização, o estado de atualização é definido como Em Progresso;
- Êxito define o estado como Bem Sucedido;
- Uma falha define como Falha mesmo;
Uma função inativa voltará ao estado ativo com uma atualização bem sucedida.

Conclusão

Na AWS (provedor de cloud que tenho mais contato) todas as funções mostrarão apenas um estado Ativo no painel web. Você não verá uma transição de estado para Pendente por exemplo. Mas dá para consultar o estado atual da função usando os SDKs da AWS e a CLI da AWS mais recentes (versão 1.16.291 ou superior).

Finalizando…

Se você gostou desse post não esquece de dar um like e compartilhar 😄

Se quiser saber o que ando fazendo por ai ou tirar alguma dúvida fique a vontade para me procurar nas redes sociais como @ malaquiasdev.

Para ler mais post meus acesse MalaquiasDEV | A Vida, o código e tudo mais.

Arrow function do JavaScript, feliz e simples?

Marco Bruno 🤡 — Thu, 20 Feb 2020 17:18:04 +0000

Quando vi a primeira vez a arrow function não fiquei muito feliz, principamente porque eu achava ela muito mais complicada de ler, quero te mostrar que o Marco do passado estava errado e que você pode ser muito feliz com a arrow function.

Ah! Estou considerando que você já sabe o que é uma function expression. Se não sabe, recomendo você dar uma lida sobre ela na MDN (Mozilla Developer Network): Function Expression na MDN

Como funciona a Arrow function?

A arrow function tem uma forma mais simples de escrita do que a function expression, por exemplo, se pegarmos a função a seguir que está com function expression.

function sum(number1, number2) {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4

E transformar ela em uma arrow function, fica assim:

const sum = (number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4

O que conseguimos aprender observando os dois códigos, anteriores? Que a arrow function é por padrão uma função anônima, mas conseguimos definir um nome para ela, usando a const sum que recebeu a nossa arrow function. Isso é realmente importante, você não consegue definir um nome para uma arrow function como fazemos na function expression, onde informamos o nome da função usando sum antes dos parênteses.

Não tente isso, não funciona!!! Arrow functions são anônimas

sum(number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2));

/* Erro que você receberá:
SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)
*/

Outras variações da Arrow Function

A sintaxe que acabamos de ver da arrow function (a que funciona 😉), não é a única forma de usar ela, vamos ver outras variações a seguir.

Sem return mas retorna

Mesmo sem usar return dentro de uma arrow function conseguimos retorna a soma, para isso nós precisaremos retirar as duas chaves e return da nossa arrow function, deixando o código assim:

const sum = (number1, number2) => number1 + number2;

console.log(sum(2, 2)); // saída: 4

É mais simples! Mas será que é mais legível? Para mim não foi no começo, mas agora que já me acostumei com a arrow function está realmente simples e feliz.

Sem parâmetros

Quando você não tem parâmetro na arrow function os parênteses permanecem:

() => "CollabCode";

Se você quer dar um nome para uma arrow function é só criar a const como fizemos anteriormente:

const comunidade = () => "CollabCode";

Só um parâmetro

Quando você tem apenas um parâmetro os parênteses se tornam opcionais:

const double = number => number * 2;

Se você gosta muito dos parênteses não tem problema pode usar eles também:

const double = (number) => number * 2;

Dois ou mais parâmetros

Quando temos dois ou mais parâmetros em uma arrow function o uso dos parênteses se tornam obrigatório:

const sum = (number1, number2) => number1 + number2;

console.log(sum(20, 20)); // saída: 40

Arrow function com chaves

Toda vez que você usa as chaves em uma arrow function ela perde o poder de retornar algo sem a necessidade de escrever return:

const sum = (number1, number2) => { number1 + number2 };

console.log(sum(20, 20)); // saída: undefined

Então, caso você tenha que usar as chaves na arrow function e também retornar algo, é necessário usar return, como no código a seguir:

const sum = (number1, number2) => { 
  return number1 + number2;
};

console.log(sum(20, 20)); // saída: 40

Retornando um JSON sem return

Quando você quer retornar um JSON (JavaScript Object Notation) mas sem usar return é necessário você envolver o JSON por parênteses:

const getPessoa = () => ({name: 'Gabe', eye: 'blue'});

console.log(getPessoa()); // saída: Object { name: "Gabe", eye: "blue" }

IIFE com arrow function

Quando queremos fechar o escopo de um arquivo, em alguns casos usamos uma função anônima que ela mesmo se executa apenas uma vez, chamamos isso de IIFE (Immediately-invoked function expression). Com a function expression podemos criar a IIFE de duas maneiras:

(function (){
// Seu código que não vazará o arquivo!!!
}());

A segunda forma de gerar a IIFE é bem similar a primeira o que muda são os parênteses () no final.

(function (){
// Seu código que não vazará o arquivo!!!
})();

Você também pode fazer isso usando arrow function, mas só tem uma forma de fazer isso:

(() => {
// Seu código que não vazará o arquivo!!!
})();

A forma a seguir não funciona

(() => {
// Seu código que não vazará o arquivo!!!
}());

/* Erro que você recebe:
SyntaxError: missing ) in parenthetical
*/

O this é muito mas muito mais simples

O this da arrow function é muito mais previsível do que o da function expression, acredito que essa é a coisa mais feliz dela.

A seguir tem uma function expression chamada Person (Pessoa) e dentro dela temos this.age (age é idade) que começa com 0, a cada 1 segundo ela ficará mais velha. Usamos o método setInterval que nós permite executar uma função a cada 1000 milesegundos (você pode mudar os milesegundos), o primeiro parâmentro da setInterval é a função que será executada e o segundo parâmetro é o tempo do intervalo.

function Person() {
  this.age = 0;

  setInterval(function () {
    this.age = this.age + 1; 
    console.log(this) // O this perde o escopo e referência Window
  }, 1000);
}

const person = new Person();

Executando o código acima você receberá uma saída similar no seu console:

Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
...

Se você vem de outras linguagens você achará estranho esse comportamento do this no JavaScript, antes de existir a arrow function nós resolvimos esse tipo de problema criando uma variável chamada that e atribuímos a ela o this:

function Person() {
  const that = this;
  that.age = 0;

  setInterval(function () {
    that.age = that.age + 1; 
    console.log(that) // O this perde o escopo e referência Window
  }, 1000)
}

const person = new Person();

Executando o código com o that você terá a seguinte saída no terminal:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...

Aqui vem o momento feliz da sua vida, com a arrow function o comportamento do this fica mais previsível e o código muito mais simples, ela tem um this léxico, isso significa que o this não é alterado de forma dinâmica respeitando o escopo de onde ele foi criado:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age = this.age + 1;
    console.log(this)
  }, 1000)
}

const person = new Person();

Execute o código e você terá a seguinte saída:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...

Se você sentiu falta de algum assunto no post ou discorda de algo que escrevi, não deixe de falar nos comentários, eu gosto muito de feedback, principalmente os negativos que nos fazem evoluir.

Ah! Caso você queira tirar dúvidas de JavaScript cola aí na comunidade CollabCode no Discord: Link do Discord da CollabCode

Referências de estudo:

Como funciona o var, let e const do JavaScript?

Marco Bruno 🤡 — Thu, 20 Feb 2020 12:31:25 +0000

A primeira forma que eu aprendi a declarar uma variável foi utilizando a var, mas faz algum tempo que temos outras duas formas para declararmos as nossas variáveis com JavaScript que são utilizando as palavras const e let. Bora entender no código como funcionam essas três formas de escrever uma variável com JavaScript!

O problema que temos com a variável var é que ela tem um pequeno problema de escopo. Vamos entender isso melhor com um exemplo prático:

var idade = 30;
console.log('Minha idade é:', idade);

Se você executar esse código tanto em cima da plataforma NodeJS ou abrindo no seu browser(navegador) favorito. Você terá a seguinte saída:

Minha idade é: 30

Agora onde está o problema de escopo que eu comentei? Para entendermos isso, colocaremos estas duas linhas que escrevemos, dentro de uma função chamada imprimeIdade e depois executaremos ela:

function imprimeIdade() {
  var idade = 30;
  console.log('Minha idade é:', idade);
}

imprimeIdade();

Mesmo com esse código não temos problema de escopo. Se você executar o código acima no seu browser ou no NodeJS você terá a seguinte saída:

Minha idade é: 30

Agora o que deverá acontecer se colocarmos o console.log fora da nossa função imprimeIdade:

function imprimeIdade() {
  var idade = 30;
}

imprimeIdade();

console.log('Minha idade é:', idade);

Se você está esperando receber um erro na execução desse código, você está certo. Executando o código você receberá um erro similar a este:

/Users/marcobruno/Desktop/index.js:7
console.log('Minha idade é:', idade);
                              ^
ReferenceError: idade is not defined

Mas pera lá, eu disse que o var tem um problema de escopo. Sim ele tem, mas esse problema de escopo não acontece dentro de uma função. Dentro dela o escopo funciona como o esperado que é a variável só existir dentro das chaves da função. Agora quando criamos uma variável utilizando o var dentro de um if, for ou while essa variável irá vazar o escopo:

function imprimeIdade() {
  for (var idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

Pelo que aprendemos em lógica de programação nós deveriamos receber um erro na linha que utilizamos o console.log porque a variável idade foi criada dentro do escopo do for, mas ao invés disso não temos nenhum erro e nosso console.log executa sem problema nenhum após a execução do nosso loop for:

Idade dentro do for: 30
Idade dentro do for: 31
Idade dentro do for: 32
Idade dentro do for: 33
Idade dentro do for: 34
Idade dentro do for: 35
Idade dentro do for: 36
Idade dentro do for: 37
Idade dentro do for: 38
Idade dentro do for: 39
Idade dentro do for: 40
Idade fora do for: 41

Se você precisar que a variável idade se comporte como o esperado, você pode trocar o var por let:

function imprimeIdade() {
  for (let idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

Agora com esse código nós recebemos uma mensagem de erro, como é o esperado dado o que estudamos em lógica de programação:

/Users/marcobruno/Desktop/index.js:6
  console.log('Idade fora do for:', idade);
                                    ^
  ReferenceError: idade is not defined

Por a let ter um comportamento mais previsível, nós evitamos ao máximo o uso da var. Portanto podemos concluir que a let é uma variável que podemos atribuir um novo valor para ela e a mesma não tem o problema de escopo como apresentado em variáveis que são criadas com a var.

E a const como ela funciona? Ela também não tem o problema de escopo mas você também não pode atribuir um novo valor para uma variável criada com const. Bora ver na prática o que acontece quando tentamos alterar o valor de uma variável que foi criada com const:

function imprimeIdade() {
  for (const idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

No momento que você tentar executar o código acima receberá o seguinte erro:

Idade dentro do for: 30
/Users/marcobruno/Desktop/index.js:2
  for (const idade = 30; idade <= 40; idade++) {
                                           ^
TypeError: Assignment to constant variable.

O erro que estamos recebendo diz que não podemos atribuir um novo valor para uma variável que foi criada com a const o que torna o comportamento dela muito mais previsível, já que o valor atribuído à ela não pode mudar. Por estes motivos procuramos sempre utilizar a const para criarmos as nossas variáveis e uma vez que recebemos o erro acima verificamos se realmente temos a necessidade de atribuir um novo valor à varíavel. Se isso for verdade, trocamos o const para let.

Vamos ver mais um exemplo com a const. No código a seguir vamos criar um variável chamada pessoa que receberá como valor um JSON com duas propriedades: nome e idade. Depois vamos tentar mudar o valor que setamos inicialmente:

const pessoa = {
  nome: 'Henri',
  idade: 20
};

pessoa = {
  nome: 'Luna',
  idade: 19
};

Executando esse código iremos receber o seguinte erro:

/Users/marcobruno/Desktop/medium/index.js:6
pessoa = {
       ^
TypeError: Assignment to constant variable.

Como vimos anteriormente não podemos atribuir um novo valor para uma const. Por outro lado conseguimos alterar o valor das propriedades do objeto da seguinte forma:

const pessoa = {
  nome: 'Henri',
  idade: 20
};

pessoa.nome = 'Luna';
pessoa.idade = 19;

console.log('Nome:', pessoa.nome);
console.log('Idade:', pessoa.idade);

Portanto não podemos passar uma nova atribuição para uma const, mas podemos alterar as propriedades do objeto que definimos na const pessoa.

Espero que tenha ficado claro como funciona as três formas de variáveis do JavaScript. Se quer estudar ainda mais sobre JavaScript, recomendo você entrar na comunidade CollabCode no Discord: http://bit.ly/discord-collabcode

Tmux para iniciantes

Mateus Malaquias — Sun, 26 Jan 2020 13:55:54 +0000

Conheci o tmux na época em que tentei dar uma nova função para o meu IPad, a de ser uma máquina capaz de me permitir codar (é possível fazer isso com um Surface Pro). Para tentar derrubar as limitações impostas na época pelo IOS tentei usar editor de texto, acessar um Raspberry Pie, até que cheguei a brilhante ideia (ironia) de criar um servidor EC2 na AWS e acessar ele via SSH.

Bem, a ideia do IPad ficou para trás e enterrei bem fundo, porém todo esse período de experimentos me levou a conhecer melhor três ferramentas: terminal, vim e tmux. Adorei o novo costume que desenvolvi e levei para usar também no ambiente de trabalho.

Você pode até achar feio, verboso, complexo, improdutivo, mas para o meu raciocínio foi algo como “WTF, o que está acontecendo? De onde veio todo esse foco no código e na atividade?

E foi assim que descobrir um novo caminho para minha mente brilhar!

Esse texto vai lhe levar em um tour de poucos minutos no uso do tmux e suas possibilidades. Se você tem um tempinho livre, peço então humildemente que me dê a honra de lhe ensinar o pouco que sei sobre o tmux, continue lendo!

O que é tmux e quais os seus benefícios?

Os criadores do tmux o descrevem como um multiplicador de terminal, ou seja, dentro de uma janela do terminal, você pode abrir várias janelas com visualizações baseadas em painéis. Onde cada painel tem um terminal executando de maneira independente, isso permite que você tenha vários comandos e aplicativos executando, sem a necessidade de abrir várias janelas.

Além disso, o tmux mantém essas janelas e painéis em uma sessão. Você pode sair de uma sessão a qualquer momento, chamamos isso de desanexação. Uma característica que considero incrível é que a sessão fica ativa até você matar o servidor do tmux (quando você reinicia o computador, por exemplo ou executa um comando que mata o servidor). Isso é incrivelmente útil porque depois em qualquer momento você pode escolher exatamente aquela sessão e o tmux irá te deixar no mesmo ponto de quando você a deixou, simplesmente anexando a essa sessão.

Se você já trabalhou com servidores remotos usando ssh, deve conseguir perceber como isso útil! Por exemplo, quando você perder a sua conexão ssh, a sessão do tmux será simplesmente desconectada, mas continuará sendo executada no servidor em segundo plano, incluindo todos os seus processos ativos. Para continuar sua sessão, basta se conectar no servidor novamente e depois naquela mesma sessão que está em execução.

Todavia não fique pensando que o tmux só é útil apenas quando precisamos trabalhar com uma máquina remota. Pessoalmente, me vejo desconectando das sessões quando estou mudando de contexto de trabalho, basicamente como desenvolvedor backend que trabalha muito com microserviços, mantenho sempre uma sessão para cada microserviço, assim quando preciso migrar entre projetos já estou no ponto ideal.

Massa, entendi. Mas por que devo então usar o tmux no lugar do iTerm2 ou Terminator?

Na minha opinião quando se precisa apenas do gerenciamento básico de janelas, o iTerm do Mac ou Terminator do linux são soluções excelentes já que também possuem suporte a janelas e painéis. Mas ainda acredito que você está perdendo:

sessões: desconectar e anexar sessões me ajuda na alternância de contexto de atividade no trabalho;
independência de plataforma: posso usar o tmux no meu Macbook, no meu Dell com Linux, em máquinas na nuvem como o AWS EC2, máquinas simples como Raspberry Pie, BeagleBones e etc;
personalizável: existem várias maneiras de personalizar a aparência e o comportamento de um ambiente tmux;
credibilidade nas ruas: você pode se sentir um hacker enquanto trabalha :P.

Começando a usar

Este guia prático abordará apenas os recursos básicos que devem ser mais que suficientes para começar e ser produtivo(a) com o tmux. Para começar basta abrir seu terminal e seguir as instruções.

Instalação

A instalação do tmux é simples e direta para a maioria das plataformas. Um simples sudo apt-get install tmux (Ubuntu e derivados), sudo yum install tmux(CentOS e derivados) ou brew install tmux (Mac) deve ser suficiente.

Sua primeira sessão

Para criar uma sessão, basta digitar:



tmux

Esse comando vai abrir uma nova sessão, criará uma nova janela e iniciará um shell nessa janela.

Quando estiver no Tmux, você verá uma linha de status na parte inferior da tela que mostra informações sobre a sessão atual.

A barra de status é uma parte importante do tmux. Além das janelas abertas, também mostra algumas informações do sistema, como data e hora. Totalmente personalizável, já vi algumas coisas realmente chiques por aí (próximos eventos da agenda, status da bateria, para citar alguns).

Criando uma sessão nomeada

Por padrão, as sessões do tmux são nomeadas numericamente. Mas, como falei anteriormente, gosto de trabalhar com sessões que possuem contexto de atividade e utilizar números nesse caso pode deixar as coisas confusas, por isso gosto criar sempre uma sessão nomeada.

Para criar uma nova sessão nomeada, execute o comando tmux com os seguintes argumentos:



tmux new -s session_name

Criando uma nova sessão sem sair da antiga

Por padrão o tmux sempre espera que você esteja desanexado de uma sessão para se criar outra, por isso precisamos adicionar mais um parâmetro no comando assim:



tmux new -s session_name -d

Reconectando a sua antiga sessão

Para se conectar a uma sessão antiga acredito que você precisa encontrar o seu nome ou número. O tmux possui um comando muito útil que nos permite obter uma lista das sessões em execução no momento, digite:



tmux ls

Fique atento ao nome ou número na primeira coluna apresentada em seu terminal. No meu exemplo você pode ver que existem duas sessões em execução. A primeiro é chamado artigo e a segunda blog. E que atualmente estou utilizando a sessão blog.

Para me anexar a sessão artigo basta executar o comando:



tmux a -t session_name

O problema é que por padrão esse comando só funciona se você estiver fora de qualquer sessão tmux, mas com o poder da personalização conseguimos burlar essa limitação (final do artigo).

Dividindo a tela em painéis

Agora que criamos nossa primeira sessão, podemos ter uma ideia dos painéis. Quando você cria uma nova sessão, o tmux inicia por padrão com uma janela e um único painel dentro, mas queremos dividir nossa tela.

Todos os comandos no tmux são acionados por uma chave de prefixo seguida por uma chave de comando (bastante semelhante ao emacs). Por padrão, a chave de prefixo do tmux é C-b (Ctrl+b).

Essa notação pode parecer um pouco estranha se você não estiver acostumado, mas C- significa "pressione e segure a tecla Ctrl", portanto C-b significa pressionar as teclas Ctrl e b ao mesmo tempo.

Para dividir a tela com dois painéis horizontais use o comando:



C-b + %

Lembrando o que acabei de lhe contar sobre a sequência de prefixo e tecla de comando do tmux, com o comando acima vamos dividir seu painel único em dois painéis, um esquerdo e outro direito, pressionando Ctrl e b ao mesmo tempo, solte os dois e digite a tecla %.

Voilà! Você acabou de invocar um atalho do tmux e dividir seu painel em dois.

Também existe uma divisão de painéis superior e inferior. Para dividir use o atalho C-b ".

Navegando entre os painéis

No momento, estamos presos no painel recém-criado. Mas vamos supor que queremos voltar para o painel da direita (o maior). Fácil: para alternar de um painel para o outro usamos o atalho C-b , onde é a tecla de seta apontando para o painel para o qual você deseja alternar.

No nosso caso, queremos mudar para o painel à direita, então pressionamos Ctrl e b seguido da tecla de seta direita.

Agora você pode seguir em frente e dividir cada um dos seus novos painéis ainda mais. Sinta-se à vontade para experimentar e dividir seus painéis como um maníaco(a) para ter uma ideia do poder que isso nós dar.

Desanexando de uma sessão

Você pode se desconectar da sessão do Tmux e retornar ao seu shell normal digitando:



C-b d

Fechando um painel

Fechar um painel é tão simples quanto fechar uma sessão regular do terminal. Digite exit ou pressione Ctrl + d e ele desapareceu.

Customizando seu tmux com gpakosz/.tmux

Gregory Pakosz criou uma das customizações mais utilizadas hoje em dia pelas pessoas que procuram um modelo já pronto. Durante todo esse tempo que estou utilizando o tmux já experimentei fazer ao meu gosto e outros modelos já prontos.

Mas o do Gregory Pakosz foi o que me adaptei melhor, ele é muito simples de usar e de aprender os atalhos, além de ter diversos ícones que podemos usar para montar o nosso status bar.

Instalação

Para instalar, execute o seguinte no seu terminal (lembre-se de backup do seu ~ / .tmux.conf):



$ cd

$ git clone https://github.com/gpakosz/.tmux.git

$ ln -s -f .tmux/.tmux.conf

$ cp .tmux/.tmux.conf.local .

Atalhos

Dicionário:

significa que você tem que pressionar Ctrl + a ou Ctrl + b
c significa que você tem que pressionar Ctrl + a ou Ctrl + b seguido de c
C-c means you have to hit Ctrl + a ou Ctrl + b seguido de Ctrl + c

Comandos básicos:

r recarrega as configurações
C-l limpa a tela e o histórico do tmux
C-c cria uma nova sessão
C-f permite alternar entre sessões usando o nome ou número
\$ permite renomear o nome da sessão
C-h + C-l permite navegar pelos painéis
Tab leva você para o último painel ativo
- divide o painel atual verticalmente
_ divide o painel atual horizontalmente
h, j, k e l navega pelos painéis como se tivesse usando o Vim
H, J, K e L redimensiona os painéis
⇧, ⇨, ⇩ e ⇦ navega pelos painéis
+ maximiza o painel atual em uma nova janela
m ativa ou desativa o uso do mouse
Enter entra no modo de cópia
b lista o que se tem copiado de pasta
p cola o último conteúdo copiado
P permite escolher o que será colado em uma lista

Aprenda mais acessando o projeto no github gpakosz/.tmux: 🇫🇷 Oh My Tmux! Pretty & versatile tmux configuration made with ❤️ (imho the best tmux configuration that just works).

Conclusão

E é isso! Parabéns, você acabou de concluir suas primeiras impressões com tmux e sujou um pouco as mãos! Sim, existem muitas outras coisas que o tmux pode fazer. Mas o que você acabou de aprender deve ser tudo para começar a usar o tmux no futuro.

Se você gostou desse texto por favor não deixe de curtir e compartilhar, isso 😄

Se quiser saber o que ando fazendo por aí ou tirar alguma dúvida fique a vontade para me procurar nas redes sociais como @malaquiasdev.

Para ler mais textos meus acesse MalaquiasDEV | A Vida, o código e tudo mais.

Pare de chutar e aprenda como funciona o display: block

Marco Bruno 🤡 — Mon, 20 Jan 2020 09:24:32 +0000

Neste post nós vamos entender como funciona o display: block. Para facilitar a explicação, vamos utilizar o código final do post sobre display: inline como base. Se você quiser ir fazendo o código junto com o post, você pode copiar o HTML e os CSSs abaixo, ou acessar os códigos pelo GitHub ou CodePen.

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
    <ul class="example">
        <li class="example-item example-item_first">Primeiro</li>
        <li class="example-item example-item_second">Segundo</li>
        <li class="example-item example-item_third">Terceiro</li>
    </ul>
</body>
</html>

CSS (reset.css)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
ul, ol, li {
    list-style: none;
}

CSS (displayInlineBlock.css)

example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: inline;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Abrindo no navegador o HTML que acabamos de fazer, ele vai ter o seguinte layout:

Na tentativa de deixar o post um pouco mais dinâmico, vou colocar um desafio para implementarmos utilizando a propriedade display com o valor block.
Vamos tentar chegar no seguinte layout até o final do post:

A primeira coisa que faremos é definir a largura (width) e altura (height) para todas as tags <li>. Vamos abrir o nosso CSS (displayInlineBlock.css) e definir a largura (width) com 33.333% e a altura (height) de 150px:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: inline;
    width: 33.333%; // Adicionamos essa linha
    height: 150px;  // E essa aqui, também adicionamos
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Salve seu CSS, em seguida atualize seu navegador, o resultado vai ser:

Estranho, não mudou nada, parece que nem a largura (width) nem a altura (height) funcionaram. Por que isso aconteceu? Se sua resposta é não sei ou o CSS não funciona direito, vale a pena você dar uma olhada no post anterior a esse. Nele aprendemos como funciona a display: inline. Lá vimos que todo elemento HTML com display: inline, não aceita as propriedades width e height.

Para que o elemento HTML aceite as propriedades width e height, precisamos definir o valor do display como block. Vamos ver se isso que acabei de falar é verdade. Por favor, abra o nosso CSS (displayInlineBlock.css) e altere para block a propriedade display que está no seletor .example-item:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block; // Trocamos inline por block
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Vai lá no seu navegador e atualize a página, você verá que eu não estou mentindo para você. Espero que você esteja com o resultado igual a imagem que está logo abaixo, isso não acontece, não tem problema, me manda uma mensagem que eu te ajudo, ou entre no Discord da CollabCode no link a seguir: Discord da CollabCode

Boa. Agora conseguimos definir a largura (width) e altura (height) para os nossos elementos. Ou seja, todos os elementos definidos com display: block, aceitam as propriedades width e height.

Lembra que definimos uma largura de 33.333% para as três <li>?
Teoricamente as <li> deveriam ficar uma do lado da outra. Isso não acontece porque todo elemento definido como block ocupa a linha inteira, ou seja, não deixa outro elemento ocupar a mesma linha que ele. Por esse motivo os elementos HTML (<li>) ficaram um abaixo do outro.

Falta pouco para implementarmos o código do nosso desafio. Agora só precisamos mover a nossa segunda <li> para direita e centralizar a terceira <li>. A forma mais simples de implementar isso é utilizando a propriedade margin (respiro externo) do CSS.

Só para começarmos a aprender como funciona a margin, vamos colocar 40px de margem do lado esquerdo da nossa segunda <li>. Para fazer isso precisamos adicionar a propriedade margin-left: 40px, no seletor .example-item_second que está no arquivo CSS (displayInlineBlock.css).

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: 40px; // Adicionamos 40px do lado esquerdo
}
.example-item_third {
    background-color: #3B97D3;
}

Atualizando a nossa página no browser o resultado vai ficar assim:

Estamos caminhando para deixar o segundo elemento deslocado para o lado direito da página, conforme foi proposto no nosso desafio. Para conseguirmos implementar essa parte do desafio, qual é o valor que devemos colocar na propriedade margin-left? Dica: lembre-se que a <li> tem 33.333% de largura.

É isso. Só fazermos a conta, 100% - 33.333%, teremos como resultado 66.667%. Para deixarmos o layout mais próximo do desafio, basta que a segunda <li> tenha no margin-left o valor de 66.667%. Bora fazer isso no nosso CSS (displayInlineBlock.css).

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: 66.667%; // Alteramos o 40px para 66.667%
}
.example-item_third {
    background-color: #3B97D3;
}

Se precisarmos mudar a largura (width) de todas as <li> para 20%, o que vai acontecer com o nosso layout? O segundo elemento vai ficar no lado direito, bem encostadinho?

Infelizmente toda vez que mudarmos a largura (width) da <li> vamos ter que refazer a conta e mudarmos o valor da propriedade margin-left. Esta forma que acabamos de implementar funciona mas a manutenção não é muito feliz.

Felizmente temos um valor da propriedade margin-left que faz o cálculo para gente de forma automática, é só definirmos o margin-left como auto. Vai lá abra seu CSS (displayInlineBlock.css) e troque o 66.667% por auto:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: auto; // Só trocamos 66.667% por auto
}
.example-item_third {
    background-color: #3B97D3;
}

Assim que você atualizar o navegador vai ver que o layout não mudou nada do código anterior:

Mas, volte no seu código (displayInlineBlock.css) e altere a largura (width) dos seu <li> para 20%.

Se você ir até o navegador e atualizar a página vai ver o seguinte resultado:

Bacana né. Utilizando o margin-left: auto; não precisamos mais ficar fazendo a conta para definir o valor de margin-left. Desta forma a manutenção do código fica muito mais feliz.

Para finalizar o nosso desafio, só está faltando centralizar a terceira <li>. Agora nossas <li> estão com 20% de largura (width). Ou seja, quanto nós precisamos definir de margem à esquerda e à direita para ela ficar centralizada?

Basta colocar 40% de margem à esquerda e à direita. Mas, se a largura das <li> forem alteradas novamente? Vamos ter que ficar mudando a propriedade margin-left e margin-right. Triste! Novamente temos o problema para mantermos o nosso código.

Ainda bem que temos uma solução para esse problema. :-)
Da mesma forma que nós definimos margin-left: auto; para deixar que o navegador calculasse a quantidade de margem necessária para colocar no lado esquerdo do segundo elemento, com o objetivo de deixar ele posicionado no lado direito, podemos pedir para o navegador calcular de forma automática a quantidade de margem do lado esquerdo e direito para que a terceira <li> fique centralizada.

Precisamos portanto adicionar o margin-left: auto; e margin-right: auto; no seletor da terceira <li> (.example-item_third). Abra o nosso CSS (displayInlineBlock.css) e implemente o margin-left e margin-right. Ah! Vamos aproveitar e voltar a largura de 33.333% nas <li> para o layout ficar igual ao do nosso desafio.

.example {
    color: #FFF;
    text-align: center;
}
.example-item {
    display: block;
    width: 33.333%; // Voltamos o valor de 33.333%
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: auto;
}
.example-item_third {
    background-color: #3B97D3;
    margin-right: auto; // Adicionamos essa linha
    margin-left: auto; // Adicionamos essa linha também
}

Beleza. Agora vai até o navegador e atualize a sua página:

Espero que você tenha gostado do post. É dessa forma que explicava nas turmas de FrontEnd da Caelum. Se ficou qualquer dúvida, não concorda com alguma coisa, tem alguma dica para melhorar os próximos posts. Por favor, fale! Eu realmente ouço e sempre estou tentando melhorar. Até o próximo post que vai ser sobre, display: inline-block!!!

Se quiser trocar conhecimento fique a vontade para entrar e um dos canais da comunidade CollabCode:

Como configurar ESLint e Prettier no Node?

Marco Bruno 🤡 — Tue, 29 Oct 2019 16:29:04 +0000

Post in english available at SourceLevel: https://sourcelevel.io/blog/how-to-setup-eslint-and-prettier-on-node

Se você não sabe o que é o ESLint e Prettier eu recomendo você dar uma olhada no primeiro post onde expliquei o que são eles. O objetivo desse post é mais prático.

Como vamos precisar de um projeto base para mostrar como configurar o ESLint e Prettier na sua aplicação Node, logo após os pré-requisitos montarei um hello world (olá mundo) de API com Restify que é o framework usado pela Netflix e outras empresas a mesma altura.

Se você já tem um projeto criado, por favor só dê uma olhada nos pré-requisitos que estão logo a seguir e depois pode pular para a seção: Como configurar o ESLint em uma aplicação Node?

Pré-requisitos

Ter um terminal instalado com o bash, zsh ou fish. Se estiver no windows e não tiver com o bash instalado, por favor use o powershell porque ele terá mais compatibilidade com os comandos que vou mostrar a seguir. Caso tiver qualquer erro fique à vontade para pedir ajuda nos comentários.

Node (10.16.3 ou superior) e npm (6.12.0 ou superior) instalados e por último o Visual Studio Code (VSCode) instalado.

Criando projeto base?

Por favor, abra o terminal e crie uma pasta com o nome de api-happy. A seguir eu uso o comando mkdir para criar a pasta e à frente do comando coloco o nome da pasta:



mkdir api-happy

Agora precisamos entrar na pasta que acabamos de criar usando o comando cd e, logo à frente, o nome da pasta que queremos entrar:



cd api-happy

Show! Agora que estamos dentro da pasta já podemos iniciar o nosso projeto com node usando o npm (Node Package Manager). No terminal usaremos o comando npm init -y, esse comando criará um arquivo chamado package.json com algumas informações básicas de projeto como:

name (nome);
version (versão);
description (descrição);
main (arquivo que inicia o projeto);
scripts (scripts de test e outros);
keywords (palavras chaves para acharem seu projeto);
author (autor);
license (licença).

Agora que já sabemos o que o comando faz, execute ele no terminal, por favor (lembre-se que você tem que estar na pasta do projeto):



npm init -y

Só para certificarmos que deu tudo certo, abra o seu projeto no VSCode e verifique se o arquivo package.json foi criado com sucesso.

O próximo passo, ainda dentro da pasta do projeto, é instalarmos uma dependência (restify) no nosso projeto. Para isso precisamos usar o npm usando o comando install:



npm install restify

Caso você goste de escrever menos, você pode usar o npm i restify no lugar do npm install restify. Se você está acostumado a escrever o --save à frente do nome do pacote (restify no nosso caso) para garantir que o pacote vire uma dependência do nosso projeto e o mesmo vá para o package.json, isso não é mais necessário. Falando no package.json, por favor abra ele no seu VSCode e verifique se foi adicionado a chave a seguir:



...
"dependencies": {
    "restify": "^8.4.0"
  }
...

Ainda no seu VSCode com o seu projeto aberto e crie um arquivo chamado index.js e cole dentro dele o código a seguir:



const restify = require("restify");
const PORT = 5000
const app = restify.createServer()

app.get('/', (req, res) => 
  res.send({ hello: "World" }));

app.listen(PORT)

Nesse código que acabamos de ver, de forma bem resumida, estamos criando um servidor com o restify na porta 5000 que saberá responder apenas a rota / com um simples json de {hello: "World"}. A parte mais interessante do código é que não estou seguindo qualquer padrão e de certa forma estamos mesmo a ridicularizar o código, mas estou fazendo isso para te mostrar o poder que teremos após configurarmos o ESLint e Prettier.

Por último só precisamos pedir para o node subir o nosso servidor com o comando a seguir no terminal:



node index.js

Para esse comando funcionar é necessário executá-lo na pasta do projeto.

Como configurar o ESLint em uma aplicação Node?

Agora chegou a hora de deixar o código amador e subirmos de nível, pensando em qualidade de código e automatização de processos.

Volte ao terminal e derrube o seu servidor apertando as teclas ctrl e c juntas. Agora sim, temos o terminal livre para iniciar a configuração do ESLint. Para configurar o ESLint é necessário criar um arquivo de configuração chamado .eslintrc.json (esse arquivo pode ter outras extensões como: js e yaml). Criar esse arquivo manualmente é um tanto chato, felizmente não precisamos fazê-lo, podemos criá-lo de forma assistida usando o comando a seguir:



npx eslint --init

O que o npx?

npx instala o pacote para você de forma global e temporária, depois que você o utiliza ele é removido. Dessa forma não ficamos mantendo pacotes globais desatualizados e também mantendo eles ocupando um espaço desnecessário. O npx surgiu na versão 5.2 do npm.

Após a execução do comando, o terminal fará perguntas sobre a configuração do ESLint. Vamos às perguntas. Vou tomar a liberdade de fazer uma tradução das perguntas e respostas que recomendo. Não vou explicar todas as possíveis respostas para cada pergunta, mas caso você tenha qualquer dúvida não deixe de perguntar nos comentários:

Pergunta 1:

How would you like to use ESLint? (Use arrow keys)

Como gostaria de usar o ESLint? (Use as teclas direcionais)

Resposta 1

To check syntax, find problems, and enforce code style

Checar sintaxe, buscar problemas e forçar os padrão de código

Pergunta 2:

What type of modules does your project use?

Que tipo de módulos seu projeto usa?

Respostas 2:

JavaScript modules (import/export)

CommonJS (require/exports) Selecione essa opção

None of these Nenhum desses

A resposta que vamos deixar selecionada aqui é o CommnsJS (require/exports), mas é muito comum nos projetos backend com JavaScript a galera usar o sucrase, se esse for o seu caso você deve selecionar a opção JavaScript modules (import/export)

Pergunta 3:

Which framework does your project use?

Qual framework seu projeto usa?

Resposta 3:

None of these

Nenhum desses

Pergunta 4:

Does your project use TypeScript?

Seu projeto usa TypeScript?

Resposta 4:
Escreva N e em seguida aperte a tecla ENTER

Pergunta 5:

Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)

Onde seu projeto é executado? (Aperte <space> para selecionar, <a> para selecionar tudo, <i> para inverter a seleção)

Resposta 5:

Deixe apenas a opção Node selecionada.

Pergunta 6:

How would you like to define a style for your project?

Como você gostaria de definir um padrão de código para o seu projeto?

Resposta 6:

Use a popular style guide

Usar um padrão de código popular

Pergunta 7:

Which style guide do you want to follow?
_Qual padrão de código você quer seguir?_

Resposta 7:

Airbnb (https://github.com/airbnb/javascript)

Pergunta 8:

What format do you want your config file to be in?

Qual formato você deseja o seu arquivo de configuração?

Resposta 8:

JSON

Pergunta 9:

Would you like to install them now with npm?

Você gostaria de instalá-los agora com npm?

Resposta 9:

Y

Pronto! Agora temos o nosso arquivo de configuração do ESLint criado. Os pacotes para que ele funcione de forma feliz foram instalados como dependência para o ambiente de desenvolvimento em nosso projeto. Para certificar que tudo está certo, volte em seu VSCode e verifique se foi criado um arquivo .eslintrc.json na raiz do seu projeto, depois abra o arquivo package.json, ambos devem estar similar ao conteúdo a seguir:

.eslintrc.json



{
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
    }
}

package.json



{
  "name": "api-happy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "restify": "^8.4.0"
  },
  "devDependencies": { 
    "eslint": "^6.5.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.18.2"
  }
}

Agora abra o arquivo index.js. Infelizmente mesmo após toda a configuração que fizemos não temos nenhum tipo de alerta do nosso editor avisando que o nosso código não está seguindo o style guide do AirBnB. Isso acontece porque não instalamos o plugin do ESLint para que ele leia as configurações que acabamos de criar e nos informe os erros do nosso código. Clique no link a seguir e faça a instalação do plugin do ESLint em seu VSCode:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Vixi! Agora se você abrir o seu arquivo index.js vai se deparar com algo não muito agradável, um código cheio de sublinhados vermelhos, como na imagem a seguir:

Se parar o mouse sobre a const que está na linha 1, aparecerá uma breve descrição do erro que o ESLint achou em seu código, conforme a imagem a seguir:

Esse erro é simples de arrumar, só precisamos adicionar uma linha em branco após o require do restify. Lembrar de fazer isso vai ser chato, muito chato, mas não se preocupe! É aqui que entra a magia do Prettier. Agora vamos partir para a configuração do Prettier que terá a responsabilidade de ler todas as configurações que colocarmos para o ESLint e realizar as alterações necessárias uma vez que salvamos os arquivos que estamos editando.

Por favor, não faça essas correções manualmente, isso só fará você sofrer e em algum momento desligará o ESLint por raiva a ele. Eu já fiz isso...kkk

Como configurar o Prettier com o ESLint?

Primeiro precisamos instalar o plugin do Prettier no nosso VSCode, faça isso usando o link a seguir: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Agora que já temos o Prettier instalado no VSCode podemos instalar o plugin do ESLint para o Prettier se comunicar com o mesmo. Abra seu terminal e, estando dentro da pasta do projeto, execute o comando a seguir. Este comando instalará todos os pacotes necessários para nossa configuração:



npm i prettier eslint-config-prettier eslint-plugin-prettier

Não vou entrar no detalhe de cada pacote que instalamos, mas caso tenha dúvidas não deixe de perguntar.
Após a instalação dos pacotes, abra o arquivo .eslintrc.json no VSCode e adicione no array que esta atribuído a chave extends a string "prettier", conforme código a seguir:



...
"extends": [
  "airbnb-base",
  "prettier"
],
...

A seguir da chave extends crie a chave plugins (caso ela não exista), atribua um array para chave com a string, "prettier", conforme o código a seguir:



...
"extends": [
  "airbnb-base",
  "prettier"
],
"plugins": [
  "prettier"
]
...

A última coisa que precisamos configurar no arquivo .eslintrc.json para o prettier e o ESLint funcionar de forma feliz é adicionar rules conforme o código a seguir:



...
  "rules": {
    "prettier/prettier": "error"
  }
...

Esse é o resultado final do .eslintrc.json:



{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

Abra seu arquivo index.js, faça uma pequena alteração nele e depois disso salve o arquivo. Era para o prettier ter formatado seguindo os padrões e regras (style guide do AirBnB) que definimos no nosso ESLint. Isso não acontece porque precisamos avisar o VSCode que ele deve formatar os nossos arquivos toda vez que salvarmos eles. Para garantir que essa configuração funcionará no VSCode de outro desenvolvedor que venha programar no seu projeto, você tem que criar um arquivo chamado settings.json que ficará dentro de uma pasta chamada .vscode e ela tem que ficar na pasta raiz do seu projeto, por favor crie esse arquivo e essa pasta e dentro do arquivo adicione o código a seguir:



{
  "editor.formatOnSave": true,
}

Se voltar ao arquivo index.js e salvá-lo novamente verá que seu arquivo será formatado automaticamente seguindo os padrões configurados. Mas pera lá, você pode reparar que o seu ESLint está reclamando das aspas duplas, e foi o prettier que colou elas como padrão. É se você chegou a conclusão que o AirBnB gosta mais de aspas simples, é isso mesmo. Então por que o prettier não seguiu essa regra? Isso acontece porque o prettier segue todas as regras que o ESLint definiu, mas ele não sobreescreve as próprias regras, se você for até a página do plugin prettier verá que ele prefere usar por padrão as aspas duplas:

Para mudarmos isso e pedir para ele seguir a regra de aspas simples, precisamos criar um arquivo na raiz do projeto com o nome de prettier.config.js e dentro dele terá um código que tem como objetivo sobreescrever o comportamento padrão do prettier.singleQuote que hoje é false para true:



module.exports = {
  singleQuote: true
}

Agora se você voltar ao seu arquivo index.js e salvá-lo, verá que ele será formatado para ficar com aspas simples.

Só mais um detalhe. Se abrir o arquivo prettier.config.js verá que ele tem alguns problemas de compatibilidade com o style guide do AirBnB que pedirmos para o ESLint utilizar. Mais uma vez temos um padrão do prettier que vai contra os padrões do style guide que escolhemos. Recomendo você sobreescrever algumas regras do prettier para nem você nem outros devs terem problemas no futuro. Por favor, volte ao arquivo prettier.config.js e deixe ele com as seguintes configurações:



module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
};

Pronto! Isso é o necessário para o prettier funcionar bem com o ESLint uma vez que você está usando o style guide do AirBnB. O importante aqui é você entender que uma vez que você escolher outro style guide é necessário verificar se o prettier não estã entrando em conflito com o seu style guide e caso estiver você precisará mudar as configurações padrões do seu prettier.

Fico muito feliz em poder trocar conhecimento com você, obrigado por ter lido o post. Se tiver qualquer dúvida não deixe de perguntar. Abraço bons estudos!

Como melhorar a qualidade de código com ESLint e Prettier?

Marco Bruno 🤡 — Tue, 29 Oct 2019 16:17:06 +0000

Se você é a pessoa que gosta que o seu código esteja todo indentado da mesma forma, gosta de usar as mesmas aspas no seu código entre outros padrões mais complexos com objetivo de ter uma qualidade de código mais feliz, este post é para você. Ele também é para você que não gosta de seguir esses padrões chatos, provavelmente porque lhe dá muito trabalho e você considera isso uma perda de tempo.

Nesse post mostrarei como automatizar todo esse processo de padrões e qualidade de código enquanto você está programando no seu VSCode.

Então vamos para leitura entender qual é a magia por trás do ESLint e Prettier. Se você já sabe o que eles são, recomendo você pular para parte prática e ir direto para a seção: Como configurar ESLint e Prettier?

O que é ESLint?

É um lint ou linter para JavaScript e TypeScript, sim ele também é usado no mundo TypeScript! A um tempo atrás tinhamos o TSLint mas hoje ele se tornou um plugin do ESlint e a comunidade e mercado de trabalho passaram a utilizar o ESLint para ambas as linguagens.

O que é lint ou linter?

O termo lint ou linter não é algo só do mundo JavaScript, esse termo surgiu faz bastante tempo no mundo Unix para a linguagem C. A responsabilidade dos lints ou linters não mudaram, eles fazem para nós uma análise no nosso código antes mesmo do nosso software ser executado, portanto enquanto você escreve o seu código o linter acusará possíveis erros de programação, bugs, construções suspeitas, além de solicitar alterações para você seguir os padrões de indentações, aspas e qualquer outras regras que você tenha informado previamente para ele.

O que é Prettier?

Prettier além de ter um logo maravilhoso é um plugin que não pode faltar no seu VSCode. Ele formata seu código de forma automática no momento que você salva seu arquivo, você pode configurar de forma bem simples os padrões que ele deve seguir nessa formatação automática que ele realiza, e na parte prática desse post eu vou mostrar como você pode falar para o prettier seguir as regras de formatação que definiremos no ESLint e dessa forma não vamos duplicar essas regras em dois lugares diferentes.

Como configurar ESLint e Prettier?

O JavaScript está cada vez mais poderoso, hoje podemos usá-lo no FrontEnd com frameworks modernos como: React, Vue e Angular (TypeScript). Além do movimento de compiladores de JavaScript para FrontEnd que vem crescendo com a adoção do Svelte.

Também podemos usar o JavaScript no Backend com o NodeJS e frameworks como: Express e Restify. Temos também os frameworks que já adotaram TypeScript como linguagem padrão como o NestJS. Você pode usar JavaScript até no mundo Mobile com React Native!

Como o JavaScript está em muitos lugares, mostrarei como você pode configurar o seu ESLint e Prettier em alguns deles. Agora só escolher o mundo que quer trabalhar e clicar em um dos links a seguir para absorver todo conhecimento que você precisa:

Como configurar ESLint e Prettier no Node?
Como configurar ESLint e Prettier no React? Escrevendo
Como configurar ESLint e Prettier no Svelte? Escrevendo