DEV Community: ananopaisdojavascript

Minha experiência para aprender Angular: onde estou agora?

ananopaisdojavascript — Tue, 26 Mar 2024 10:58:39 +0000

Olá! Que legal que você está aqui! 🤗
Em 2021 escrevi um artigo sobre minha experiência para aprender Angular que está disponível no Blog da Zup e que você pode ler clicando aqui 👈.
Esse singelo texto é uma atualização do meu artigo. Quem está começando no Angular nesse momento provavelmente se deparou com mudanças importantes. A maior delas é que os módulos não existem mais (pelo menos a partir da versão 17)!

Avisos!!! 🚨🚨

Esse artigo será um pouco longo, portanto se você não gosta de textos longos, cai fora!!!
Esse texto não foi gerado por inteligência artificial! Eu garanto! 😉

Como assim sem módulos?!?!

No artigo anterior, expliquei que os componentes (que continuam sendo a base do Angular) precisavam ser colocados em módulos para que pudessem aparecer na tela. Inclusive podíamos criar outros módulos para serem usados no módulo principal. Agora que os módulos "desapareceram", é possível importar um componente diretamente em outro componente.

O que?!?!

É isso mesmo que você leu! Os componentes, a partir de agora (quer dizer, começou na versão 15 em caráter de experimentação) são independentes (standalone)!

Agora complicou tudo!!! 😫

Então vamos com muita calma.
Nas versões anteriores tínhamos a seguinte estrutura de arquivos dentro do componente principal (a pasta app):

Essa estrutura também se modificou:

Vejamos como ficou a estrutura do arquivo app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}

Aqui aparecem todos os elementos do componente que comentei no artigo anterior (selector, templateUrl, styleUrls) e mais dois elementos novos:

standalone: true (Quer dizer que o componente é independente)
imports: [] (É o vetor que vai receber as importações)

No mais continua tudo igual, temos o decorador @Component e a classe que vai conter o comportamento do nosso componente.

Nossa! Que legal!! Mas...

... Eu ainda uso as versões anteriores. Como eu vou usar esse tipo de componente?! 🧐

Se você usa as versões 15 ou 16, tem algumas alternativas:

1) Se você já está trabalhando em um projeto Angular que ainda tem @NgModules, será necessário fazer o seguinte:

Apagar todos os arquivos que tem o nome nome-do-arquivo.module.ts.
Mudar as estruturas dos arquivos .ts para a estrutura nova mostrada anteriormente.
Criar componentes novos com o seguinte comando no terminal:

ng generate component nome-do-componente --standalone

Bem trabalhoso, não? 😣

2) Se você vai criar um projeto Angular do zero, use o seguinte comando no terminal:

ng new nome-do-projeto --standalone

O seu projeto vai nascer standalone, sem necessidade de executar os passos anteriores (se você já usa a versão 17, não precisa fazer nada disso!).

Vamos ao exemplo!!

No artigo anterior, usei um exemplo bem simples (um contador) para mostrar o funcionamento básico do Angular. Vou usar o mesmo contador para mostrar uma funcionalidade que tem dado o que falar: o signal.

Mas não é esse "signal" aqui! (Entendedores e fãs de Twice entenderão!) 😅 🍭

Um signal é uma função que reage à mudança de estado das informações.

Socorro!! Não estou entendendo nada!! 😰

Quer fazer o favor de se acalmar?!?!?!
Antes de mergulhar no exemplo com o signal, devemos (tentar) entender em primeiro lugar o que é gerenciamento de estado e, para tal, vou usar um exemplo do mundo real: o estado da água.

Se você não faltou à aula de ciências (realmente espero que não!), aprendeu que a água pode passar por três estados:

Estado sólido: é a água das geleiras, do pico das montanhas.
Estado líquido: é a água dos rios, lagos, mares e oceanos.
Estado gasoso: é a água que está na atmosfera.

E quais são os processos que fazem a água passar de um estado para outro?

Fusão: passagem do estado sólido para o líquido
Vaporização: passagem do estado líquido para o gasoso
Solidificação: passagem do estado líquido para o sólido
Condensação: passagem do estado gasoso para o líquido
Sublimação: passagem do estado sólido para o gasoso

Texto no qual retirei as informações:

Estados físicos da água e suas mudanças (Escola Kids) 👈

Como esse conceito se aplica dentro da programação?!

O estado é a condição atual de um aplicativo, que pode ser modificada ao longo do tempo.

E como o conceito de estado pode ser usado no Angular?!?!

Com relação ao Angular, o estado refere-se aos dados e informações que são usados e compartilhados entre componentes, serviços e módulos do projeto. Sabemos que os componentes são a base de um projeto no Angular. Esses componentes precisam acessar e modificar os dados (e consequentemente o estado de uma parte do aplicativo). Nesse caso, o gerenciamento de estado fornece um modo organizado de lidar com esses dados, certificando-se de que estejam consistentes e acessíveis por todo o projeto. Os dados que podem ser armazenados, atualizados e lidos ficam em um local centralizado conhecido como contêiner de estado, que detém o estado do aplicativo e fornece métodos para interagir com ele. Essa centralização permite que vários componentes possam acessar e modificar os dados de modo previsível e consistente.

Quais são as vantagens?!

Compartilhamento de dados entre componentes com base nas interações do usuário
Manuseio de estados complexos do aplicativo
Fluxo de dados previsível
Responsabilidades separadas

Voltando ao nosso exemplo do contador...

O componente está criado e a estrutura inicial é essa:

import { Component } from '@angular/core';

@Component({
  selector: 'counter',
  standalone: true,
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
})
export class CounterComponent {

}

Agora vamos importar o contador diretamente no arquivo app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterComponent } from './counter/counter.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, CounterComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}

Nosso componente vai aparecer no HTML dessa forma:

<counter />

Voltando ao arquivo counter.component.ts, vamos importar o signal para usar no nosso componente:

import { Component, signal } from '@angular/core';

Vamos definir uma função signal cujo valor (estado) inicial é 0:

value = signal(0);

Esse valor será mostrado no HTML da seguinte forma (não se esqueça de estamos lidando com uma função e precisa ser chamada como tal):

<h2>{{ value() }}</h2>

Vamos criar dois botões para aumentar e diminuir o valor do contador:

<button>Aumentar</button>
<button>Diminuir</button>

No arquivo counter.component.ts, vamos criar dois métodos para aumentar e diminuir o valor inicial. E é aqui que o signal se destaca! Ao clicar no botão de aumentar ou diminuir o signal avisa que o estado do valor configurado foi alterado pelos eventos de clique no botão.

E como esse estado será alterado? 🧐

O estado será alterado com .set() ou .update()

Qual é a diferença?!

O .set() altera diretamente um valor, enquanto que o .update() usa uma função de callback para atualizar um valor.

// Exemplo com .set()
  increment() {
    this.value.set(this.value() + 1);
  }

  // Exemplo com .update()
  decrement() {
    this.value.update((num) => num - 1);
  }

Agora vamos usar esses métodos nos nossos botões

<button (click)="increment()">Aumentar</button>
<button (click)="decrement()" [disabled]="value() === 0">Diminuir</button>

No botão de diminuir coloquei uma condição para desabilitá-lo quando o valor voltasse ao estado inicial, que é 0

Essa é a aparência final do nosso contador:

De 2021 até agora: onde estou?

Como havia dito no artigo anterior, bati a cabeça por muito tempo até entender os conceitos básicos do Angular. Ao estudar essas novas funcionalidades, tive a sensação de ter voltado à estaca zero, pois eu havia me acostumado com uma estrutura (com os módulos) e agora tenho que trabalhar com uma estrutura completamente diferente (sem os módulos)!

Tudo que foi explicado aqui está muito simplificado, porque:

1) Gostaria de ajudar quem está começando
2) Para que alguém possa passar por menos perrengues

Aprender Angular é um desafio que ainda vale a pena!!

Até a próxima! 🤗

Referências 📚

Linkedin: Techniques to manage state in angular and witch one we should use (Salem Naser) 👈

Resolvendo exercícios do JSchallenger - (Javascript Basics #4)

ananopaisdojavascript — Fri, 15 Apr 2022 11:42:44 +0000

O que deve ser feito aqui?

Escrever uma função que obtenha uma cadeia de caracteres (a) e um número (n) como argumentos
Retornar o caractere n de a

Sabemos que números negativos são utilizados para referirem-se aos últimos caracteres de uma string. Para identificar esse caractere no índice n, vamos fazer a seguinte operação: pegar o número total de caracteres e subtraí-lo por -1, dentro de uma notação de colchetes.

function myFunction(a, n) {
   return a[n - 1]
}

Resultados

myFunction('abcd',1) // 'a'
myFunction('zyxbwpl',5) // 'w'
myFunction('gfedcba',3) // 'e'

A quem interessar possa, o link do desafio está aqui:

Get nth character of string

Gostou? Até a próxima anotação! :)

Resolvendo exercícios do JSchallenger - (Javascript Basics #3)

ananopaisdojavascript — Mon, 11 Apr 2022 20:16:00 +0000

O que deve ser feito?

Escrever uma função que obtenha um valor como argumento
Retornar o tipo do valor

Espera-se que utilizemos typeof nesta função.

Para lembrar

typeof é um operador que retorna uma string com o tipo do valor informado.

function myFunction(a) {
   return typeof a
}

Resultados

myFunction(1) // 'number'
myFunction(false) // 'boolean'
myFunction({}) // 'object'
myFunction(null) // 'object'
myFunction('string') // 'string'
myFunction(['array']) // 'object'

Para quem quiser resolver o desafio, o link está aqui:

Get type of value

Gostou? Até a próxima anotação! :)

Resolvendo exercícios do JSchallenger - (Javascript Basics #2)

ananopaisdojavascript — Fri, 08 Apr 2022 20:51:11 +0000

O que deve ser feito aqui?

Escrever uma função que receba dois valores (a e b)
Essa função deve retornar true se o valor e o tipo forem os mesmos, o que significa que devemos usar os operadores de estrita igualdade.

Só para lembrar:

Operadores de igualdade == consideram apenas os valores.
Operadores de estrita igualdade === consideram valores e tipos.

function myFunction(a, b) {
    return a === b
}

Resultados

myFunction(2, 3) // false
myFunction(3, 3) // true
myFunction(1, '1') // false
myFunction('10', '10') // true

Para quem quiser resolver o desafio, o link está aqui:

Comparison operators, strict equality

Gostou? Até a próxima anotação! :)

Resolvendo os exercícios do JSchallenger (Javascript Basics - #1)

ananopaisdojavascript — Fri, 08 Apr 2022 20:34:23 +0000

Os desafios dessa página aparecem em forma de funções, com parâmetros os quais devem ser retornados.

O que deve ser feito aqui?

Escrever uma função que retorne dois números (a e b) como argumentos
Somar a com b
Retornar o resultado

function myFunction(a, b) {
    return a + b
}

Sempre haverá casos de testes para comprovar a lógica usada para resolver o problema.

myFunction(1,2) // 3
myFunction(1,10) // 11
myFunction(99,1) // 100

Para quem quiser resolver o desafio, o link está aqui:

Sum two numbers

Gostou? Até a próxima anotação!

Resolvendo os exercícios do JSchallenger - Introdução

ananopaisdojavascript — Fri, 08 Apr 2022 20:24:37 +0000

Nessa página vou colocar aqui TODOS os exercícios resolvidos do JSchallenger.

Do que se trata?!?!

É uma página criada por um desenvolvedor alemão para resolver exercícios com o Javascript. Os desafios estão dividos em categorias:

Basics (conceitos básicos)
Arrays (vetores)
Objects (objetos)
Dates (manipular datas)
Sets (mais avançado)

Todos os exercícios resolvidos aparecerão aqui, com uma breve explicação.
Para quem tiver interesse, o link está aqui:

JSchallenger

Gostou? Até a próxima anotação? 😎

Titulo

ananopaisdojavascript — Wed, 09 Mar 2022 17:13:17 +0000

Comentários (Código Limpo: Que Bruxaria é Essa?!?! - Parte Final)

ananopaisdojavascript — Fri, 01 Oct 2021 13:54:53 +0000

Comente apenas códigos com lógica de negócio complexa

Comentários são um pedido de desculpas, não uma necessidade. Um bom código se documenta por si só na maioria das vezes.

Não é recomendável:

function hashIt(data) {
  // The hash
  let hash = 0;

  // Length of string
  const length = data.length;

  // Loop through every character in data
  for (let i = 0; i < length; i++) {
    // Get character code.
    const char = data.charCodeAt(i);
    // Make the hash
    hash = (hash << 5) - hash + char;
    // Convert to 32-bit integer
    hash &= hash;
  }
}

É recomendável:

function hashIt(data) {
  let hash = 0;
  const length = data.length;

  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = (hash << 5) - hash + char;

    // Convert to 32-bit integer
    hash &= hash;
  }
}

Não deixe código comentado na sua base de códigos

Controle de versão existe por um motivo. Deixe o código antigo no seu histórico.

Não é recomendável:

doStuff();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

É recomendável:

doStuff();

Não tenha diários de comentários

Lembre-se, use controle de versão! Não há necessidade de código morto, código comentado e muito menos diário de comentários. Use git log para acessar o histórico!

Não é recomendável:

/**
 * 2016-12-20: Removed monads, didn't understand them (RM)
 * 2016-10-01: Improved using special monads (JP)
 * 2016-02-03: Removed type-checking (LI)
 * 2015-03-14: Added combine with type-checking (JR)
 */
function combine(a, b) {
  return a + b;
}

É recomendável:

function combine(a, b) {
  return a + b;
}

Evite marcadores de posição

Marcadores de posição só deixam sujeira. Deixe as funções e nomes de variáveis com o alinhamento e formatação adequados, dando estrutura visual ao seu código.

Não é recomendável:

////////////////////////////////////////////////////////////////////////////////
// Scope Model Instantiation
////////////////////////////////////////////////////////////////////////////////
$scope.model = {
  menu: "foo",
  nav: "bar"
};

////////////////////////////////////////////////////////////////////////////////
// Action setup
////////////////////////////////////////////////////////////////////////////////
const actions = function() {
  // ...
};

É recomendável:

$scope.model = {
  menu: "foo",
  nav: "bar"
};

const actions = function() {
  // ...
};

E aí? Gostaram? Até a próxima anotação! 😊

Formatação (Código Limpo: Que Bruxaria é Essa?!?! - Parte 10)

ananopaisdojavascript — Fri, 01 Oct 2021 13:54:25 +0000

Formatação é subjetivo. Como várias das regras mencionadas aqui, não há uma regra difícil e rápida que você tenha que seguir. O ponto principal é NÃO DISCUTA a respeito de formatação. Há toneladas de ferramentas para automatizá-la. Use uma! Discutir sobre formatação é um desperdício de tempo e dinheiro para engenheiros. Para o que não está ao alcance da formatação automática (alinhamento, tabulação vs. espaço, aspas duplas vs. aspas simples), veja aqui algumas orientações.

Uso consistente de letras maiúsculas

JavaScript não tem tipos, portanto letras maiúsculas dizem muito a você sobre suas variáveis, funções, etc. Essas regras são subjetivas, por isso sua equipe pode escolher o que quiser. O ponto é que, não importa a sua escolha, apenas seja consistente.

Não é recomendável:

const DAYS_IN_WEEK = 7;
const daysInMonth = 30;

const songs = ["Back In Black", "Stairway to Heaven", "Hey Jude"];
const Artists = ["ACDC", "Led Zeppelin", "The Beatles"];

function eraseDatabase() {}
function restore_database() {}

class animal {}
class Alpaca {}

É recomendável:

const DAYS_IN_WEEK = 7;
const DAYS_IN_MONTH = 30;

const SONGS = ["Back In Black", "Stairway to Heaven", "Hey Jude"];
const ARTISTS = ["ACDC", "Led Zeppelin", "The Beatles"];

function eraseDatabase() {}
function restoreDatabase() {}

class Animal {}
class Alpaca {}

As funções que chamam e as funções chamadas devem estar próximas

Se uma função chama outra, mantenha-as verticalmente próximas no arquivo fonte. O ideal é manter a função que chama logo acima da função chamada. Nos tendemos a ler o código de cima para baixo, como se fosse um jornal. Por conta desse princípio, mantenha seu código lido desse modo.

Não é recomendável:

class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  lookupPeers() {
    return db.lookup(this.employee, "peers");
  }

  lookupManager() {
    return db.lookup(this.employee, "manager");
  }

  getPeerReviews() {
    const peers = this.lookupPeers();
    // ...
  }

  perfReview() {
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }

  getManagerReview() {
    const manager = this.lookupManager();
  }

  getSelfReview() {
    // ...
  }
}

const review = new PerformanceReview(employee);
review.perfReview();

É recomendável:

class PerformanceReview {
  constructor(employee) {
    this.employee = employee;
  }

  perfReview() {
    this.getPeerReviews();
    this.getManagerReview();
    this.getSelfReview();
  }

  getPeerReviews() {
    const peers = this.lookupPeers();
    // ...
  }

  lookupPeers() {
    return db.lookup(this.employee, "peers");
  }

  getManagerReview() {
    const manager = this.lookupManager();
  }

  lookupManager() {
    return db.lookup(this.employee, "manager");
  }

  getSelfReview() {
    // ...
  }
}

const review = new PerformanceReview(employee);
review.perfReview();

E aí? Gostaram? Até a próxima tradução! 🤗

Classes (Código Limpo: Que Bruxaria é Essa?!?! - Parte 5)

ananopaisdojavascript — Fri, 01 Oct 2021 13:53:49 +0000

Prefira as classes do ES2015/ES6 às funções simples

É bem difícil obter herança de classes fácil de ler, construção e definições de métodos para funções clássicas do ES5. Se você precisa da herança (e fique atento porque talvez não precise), priorize as classes do ES2015/ES6. Entretanto, prefira funções pequenas às classes até que você se encontre na necessidade de objetos maiores e mais complexos.

Não é recomendável:

const Animal = function(age) {
  if (!(this instanceof Animal)) {
    throw new Error("Instantiate Animal with `new`");
  }

  this.age = age;
};

Animal.prototype.move = function move() {};

const Mammal = function(age, furColor) {
  if (!(this instanceof Mammal)) {
    throw new Error("Instantiate Mammal with `new`");
  }

  Animal.call(this, age);
  this.furColor = furColor;
};

Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.liveBirth = function liveBirth() {};

const Human = function(age, furColor, languageSpoken) {
  if (!(this instanceof Human)) {
    throw new Error("Instantiate Human with `new`");
  }

  Mammal.call(this, age, furColor);
  this.languageSpoken = languageSpoken;
};

Human.prototype = Object.create(Mammal.prototype);
Human.prototype.constructor = Human;
Human.prototype.speak = function speak() {};

É recomendável:

class Animal {
  constructor(age) {
    this.age = age;
  }

  move() {
    /* ... */
  }
}

class Mammal extends Animal {
  constructor(age, furColor) {
    super(age);
    this.furColor = furColor;
  }

  liveBirth() {
    /* ... */
  }
}

class Human extends Mammal {
  constructor(age, furColor, languageSpoken) {
    super(age, furColor);
    this.languageSpoken = languageSpoken;
  }

  speak() {
    /* ... */
  }
}

Use cadeias de métodos

Esse padrão é bem útil no JavaScript e você o encontra em várias bibliotecas como jQuery e Lodash. Permite que seu código seja expressivo e menos verboso. Por essa razão, eu digo, utilize cadeias de métodos e veja como seu código ficará limpo. Nas suas funções de classes, simplesmente retorne "this" no fim de cada função e você pode encadear métodos de classes mais distantes nela.

Não é recomendável:

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }

  setMake(make) {
    this.make = make;
  }

  setModel(model) {
    this.model = model;
  }

  setColor(color) {
    this.color = color;
  }

  save() {
    console.log(this.make, this.model, this.color);
  }
}

const car = new Car("Ford", "F-150", "red");
car.setColor("pink");
car.save();

É recomendável:

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }

  setMake(make) {
    this.make = make;
    // NOTE: Returning this for chaining
    return this;
  }

  setModel(model) {
    this.model = model;
    // NOTE: Returning this for chaining
    return this;
  }

  setColor(color) {
    this.color = color;
    // NOTE: Returning this for chaining
    return this;
  }

  save() {
    console.log(this.make, this.model, this.color);
    // NOTE: Returning this for chaining
    return this;
  }
}

const car = new Car("Ford", "F-150", "red").setColor("pink").save();

Prefira a composição à herança

De acordo com uma declaração notória em "Design Patterns", escrito pela "Gang of Four", você deve preferir a composição à herança sempre que puder. Há várias boas razões para usar a herança e existem várias boas razões para usar a composição. O ponto principal para essa máxima é que se sua mente, por instinto, pode ir na herança, tente pensar se a composição poderia moldar melhor o seu problema. Em alguns casos pode. Talvez você esteja se perguntando: "quando devo usar a herança?". Depende do seu problema que você tem nas mãos, porém temos uma lista decente de quando o uso da herança faz mais sentido que a composição:

Sua herança representa uma relação "é - um" e não uma relação "tem - um" (Humano -> Animal vs. User -> UserDetails)
Você pode reusar código das classes base (Humanos podem se mover como todos os animais)
Você quer fazer alterações globais em classes derivadas ao mudar uma classe base (Mude o gasto calórico de todos os animais quando se movem)

Não é recomendável:

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // ...
}

// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee
class EmployeeTaxData extends Employee {
  constructor(ssn, salary) {
    super();
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

É recomendável:

class EmployeeTaxData {
  constructor(ssn, salary) {
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  setTaxData(ssn, salary) {
    this.taxData = new EmployeeTaxData(ssn, salary);
  }
  // ...
}

E aí? Gostaram? Até a próxima tradução! 🤗

Tratamento de Erros (Código Limpo: Que Bruxaria é Essa?!?! - Parte 9)

ananopaisdojavascript — Thu, 30 Sep 2021 14:57:10 +0000

Lançar erros é uma coisa boa! O que significa que algo no seu programa que não deu certo foi identificado com sucesso e avisará você ao desativar a função na "stack" atual, interrompendo o processo (no Node) e ainda notifica você com um rastreamento de pilha.

Não ignore os erros capturados

Não fazer nada com um erro capturado não dá a você a habilidade de consertar ou de reagir ao dito cujo. Colocar o erro no console.log não é muito melhor às vezes já pode se perder em um mar de coisas impressas no console. Se você coloca qualquer pedaço de código em um try/catch significa que você pensa que um erro acontece ali e portanto você deve ter um plano, ou criar um plano, para quando ocorrer.

Não é recomendável:

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

É recomendável:

try {
  functionThatMightThrow();
} catch (error) {
  // One option (more noisy than console.log):
  console.error(error);
  // Another option:
  notifyUserOfError(error);
  // Another option:
  reportErrorToService(error);
  // OR do all three!
}

Não ignore promessas rejeitadas

Pela mesma razão você não deve ignorar os erros capturados do try/catch

Não é recomendável:

getdata()
  .then(data => {
    functionThatMightThrow(data);
  })
  .catch(error => {
    console.log(error);
  });

É recomendável:

getdata()
  .then(data => {
    functionThatMightThrow(data);
  })
  .catch(error => {
    // One option (more noisy than console.log):
    console.error(error);
    // Another option:
    notifyUserOfError(error);
    // Another option:
    reportErrorToService(error);
    // OR do all three!
  });

E aí? Gostaram? Até a próxima tradução! 🤗

Concorrência (Código Limpo: Que Bruxaria é Essa?!?! - Parte 8)

ananopaisdojavascript — Wed, 29 Sep 2021 14:16:19 +0000

Use Promessas, nada de "callbacks"

"Callbacks" não são limpos e causam quantidades excessivas de encadeamento. Com o ES2015/ES6, as promessas são um tipo global embutido. Use-as!

Não é recomendável:

import { get } from "request";
import { writeFile } from "fs";

get(
  "https://en.wikipedia.org/wiki/Robert_Cecil_Martin",
  (requestErr, response, body) => {
    if (requestErr) {
      console.error(requestErr);
    } else {
      writeFile("article.html", body, writeErr => {
        if (writeErr) {
          console.error(writeErr);
        } else {
          console.log("File written");
        }
      });
    }
  }
);

É recomendável:

import { get } from "request-promise";
import { writeFile } from "fs-extra";

get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });

"Async/Await" são ainda mais limpos do que as Promessas

Promessas são uma alternativa bem limpa aos "callbacks", mas ES2015/ES6 nos traz o "async" e o "await", que oferecem uma solução ainda mais limpa. Tudo que você precisa está prefixado na palavra-chave "async" e então você escreve sua lógica de modo imperativo sem uma cadeia de funções "then". Use-os se quiser experimentar as vantagens das funcionalidades do ES2015/ES6 hoje!

Não é recomendável:

import { get } from "request-promise";
import { writeFile } from "fs-extra";

get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });

É recomendável:

import { get } from "request-promise";
import { writeFile } from "fs-extra";

async function getCleanCodeArticle() {
  try {
    const body = await get(
      "https://en.wikipedia.org/wiki/Robert_Cecil_Martin"
    );
    await writeFile("article.html", body);
    console.log("File written");
  } catch (err) {
    console.error(err);
  }
}

getCleanCodeArticle()

E aí? Gostaram? Até a próxima tradução! 🤗