Por que precisamos de hooks do ciclo de vida?

Os frameworks modernos de front-end movem a aplicação de um estado para outro. Os dados alimentam essas atualizações. Essas tecnologias interagem com os dados que, por sua vez, fazem a transição do estado. A cada mudança de estado, há muitos momentos específicos em que determinados ativos ficam disponíveis.

Em um momento, o modelo pode estar pronto. Em outro, os dados terão terminado de ser carregados. A programação de cada exemplo requer um meio de detecção. Os hooks de ciclo de vida atendem a essa necessidade. Os frameworks modernos de front-end vêm com uma variedade de hooks de ciclo de vida. O Angular não é uma exceção.

Hooks de ciclo de vida explicados

Os hooks de ciclo de vida são métodos programados para serem executados em determinado momento. Eles diferem em quando e por que são executados. A detecção de alterações aciona esses métodos. Eles são executados de acordo com as condições do ciclo atual. O Angular executa a detecção de alterações constantemente em seus dados. Os hooks de ciclo de vida ajudam a gerenciar seus efeitos.

Um aspecto importante desses hooks é sua ordem de execução. Ela nunca muda. Eles são executados com base em uma série previsível de eventos de carregamento produzidos a partir de um ciclo de detecção. Isso os torna previsíveis.

Alguns ativos só estão disponíveis após a execução de um determinado hook. Obviamente, um hook só é executado sob determinadas condições definidas no ciclo de detecção de alterações atual.

Este artigo apresenta os hooks de ciclo de vida na ordem de sua execução (se todos forem executados). Certas condições merecem a ativação de um hook. Há alguns que são executados apenas uma vez, após a inicialização do componente.

Todos os métodos do ciclo de vida estão disponíveis em @angular/core. Embora não seja obrigatório, o Angular recomenda a implementação de todos os hooks (texto em inglês). Essa prática resulta em mensagens de erro mais relacionadas ao componente.

Ordem de execução dos hooks de ciclo de vida

ngOnChanges

O ngOnChanges é acionado após a modificação dos membros da classe vinculada @Input. Os dados vinculados pelo decorador @Input() são provenientes de uma fonte externa. Quando a fonte externa altera esses dados de maneira detectável, eles passam novamente pela propriedade @Input.

Com essa atualização, o ngOnChanges é acionado imediatamente. Ele também é acionado na inicialização dos dados de entrada. O hook recebe um parâmetro opcional do tipo SimpleChanges. Esse valor contém informações sobre as propriedades de limite de entrada alteradas.

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

@Component({
  selector: 'app-child',
  template: `
  <h3>Child Component</h3>
  <p>TICKS: {{ lifecycleTicks }}</p>
  <p>DATA: {{ data }}</p>
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnChanges() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  <h1>ngOnChanges Example</h1>
  <app-child [data]="arbitraryData"></app-child>
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Resumo: o ParentComponent (componente pai) vincula os dados de entrada ao ChildComponent (componente filho). O componente recebe esses dados por meio de sua propriedade @Input e ngOnChanges é acionado. Após cinco segundos, a chamada de retorno setTimeout é acionada. O ParentComponent altera a fonte de dados da propriedade do limite de entrada do ChildComponent. Os novos dados fluem pela propriedade de entrada. O ngOnChanges é acionado mais uma vez.

ngOnInit

O ngOnInit é acionado uma vez na inicialização das propriedades vinculadas à entrada (@Input) de um componente. O próximo exemplo será semelhante ao anterior. O hook não é acionado quando o ChildComponent recebe os dados de entrada. Em vez disso, ele é acionado logo após os dados serem renderizados no modelo ChildComponent.

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

@Component({
  selector: 'app-child',
  template: `
  <h3>Child Component</h3>
  <p>TICKS: {{ lifecycleTicks }}</p>
  <p>DATA: {{ data }}</p>
  `
})
export class ChildComponent implements OnInit {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnInit() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  <h1>ngOnInit Example</h1>
  <app-child [data]="arbitraryData"></app-child>
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Resumo: o ParentComponent vincula os dados de entrada ao ChildComponent. O ChildComponent recebe esses dados por meio de sua propriedade @Input. Os dados são renderizados para o modelo e o ngOnInit é acionado. Após cinco segundos, a chamada de retorno setTimeout é acionada. O ParentComponent muda a fonte de dados da propriedade vinculada à entrada de ChildComponent e ngOnInit NÃO É ACIONADO.

ngOnInit é um hook de uso único. A inicialização é sua única preocupação.

ngDoCheck

O ngDoCheck é acionado a cada ciclo de detecção de alterações. O Angular executa a detecção de alterações com frequência. O desempenho de qualquer ação fará com que ele entre em ciclo e ngDoCheck é acionado com esses ciclos. Use-o com cautela. Ele pode criar problemas de desempenho quando implementado incorretamente.

ngDoCheck permite que os desenvolvedores verifiquem seus dados manualmente. Eles podem acionar uma nova data de aplicação condicionalmente. Em conjunto com ChangeDetectorRef, os desenvolvedores podem criar suas próprias verificações para detecção de alterações.

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

@Component({
  selector: 'app-example',
  template: `
  <h1>ngDoCheck Example</h1>
  <p>DATA: {{ data[data.length - 1] }}</p>
  `
})
export class ExampleComponent implements DoCheck {
  lifecycleTicks: number = 0;
  oldTheData: string;
  data: string[] = ['initial'];

  constructor(private changeDetector: ChangeDetectorRef) {
    this.changeDetector.detach(); // lets the class perform its own change detection

    setTimeout(() => {
      this.oldTheData = 'final'; // intentional error
      this.data.push('intermediate');
    }, 3000);

    setTimeout(() => {
      this.data.push('final');
      this.changeDetector.markForCheck();
    }, 6000);
  }

  ngDoCheck() {
    console.log(++this.lifecycleTicks);

    if (this.data[this.data.length - 1] !== this.oldTheData) {
      this.changeDetector.detectChanges();
    }
  }
}

Preste atenção no console e contrate-o com o que aparece na tela. Os dados progridem até "intermediário" antes de congelar. Três rodadas de detecção de mudanças ocorrem durante esse período, conforme indicado no console. Mais uma rodada de detecção de alterações ocorre quando 'final' é empurrado para o final de this.data. Em seguida, ocorre uma última rodada de detecção de mudanças. A avaliação da instrução if determina que não são necessárias atualizações na exibição.

Resumo: a classe é exemplificada após duas rodadas de detecção de alterações. O construtor da classe inicia o setTimeout duas vezes. Após três segundos, o primeiro setTimeout aciona a detecção de alterações e o ngDoCheck marca a tela para uma atualização. Três segundos depois, o segundo setTimeout aciona a detecção de alterações. Não são necessárias atualizações de visualização de acordo com a avaliação de ngDoCheck.

Aviso

Antes de continuar, aprenda a diferença entre o DOM de conteúdo e o DOM de visualização (DOM significa Modelo de Objeto do Documento).

O DOM de conteúdo define o innerHTML dos elementos da diretiva. Por outro lado, o DOM de visualização é o modelo de um componente, excluindo qualquer modelo HTML agrupado em uma diretiva. Para entender melhor, consulte este artigo do blog (texto em inglês) do autor Minko Gechev.

ngAfterContentInit

ngAfterContentInit é acionado depois que o DOM do conteúdo do componente é inicializado (carregado pela primeira vez). Esperar por pesquisas (do inglês, queries) de @ContentChild(ren) é o principal caso de uso do hook.

As pesquisas de @ContentChild(ren) produzem referências de elementos para o DOM de conteúdo. Desse modo, eles não ficam disponíveis até que o DOM do conteúdo seja carregado. Por isso, o ngAfterContentInit e seu equivalente ngAfterContentChecked são usados.

import { Component, ContentChild, AfterContentInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p>I am B.</p>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterContentInit {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterContentInit() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', 'yellow')

    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', 'pink');
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', 'red');
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterContentInit Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3 #BHeader>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Os resultados da pesquisa de @ContentChild estão disponíveis em ngAfterContentInit. O Renderer2 atualiza o DOM de conteúdo do BComponent, que contém uma tag h3 e o CComponent. Esse é um exemplo comum de projeção de conteúdo (texto em inglês).

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento <ng-content></ng-content>. O CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. O ngAfterContentInit é acionado. O BComponent termina a renderização. O AComponent termina a renderização. ngAfterContentInit não será acionado novamente.

ngAfterContentChecked

O ngAfterContentChecked é acionado após cada ciclo de detecção de alterações direcionado ao DOM de conteúdo. Isso permite que os desenvolvedores facilitem o modo como o DOM do conteúdo reage à detecção de alterações. O ngAfterContentChecked pode ser acionado com frequência e causar problemas de desempenho se for implementado incorretamente.

O ngAfterContentChecked também é acionado durante os estágios de inicialização de um componente. Ele vem logo após ngAfterContentInit.

import { Component, ContentChild, AfterContentChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p>I am B.</p>
  <button (click)="$event">CLICK</button>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterContentChecked {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterContentChecked() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterContentChecked Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3 #BHeader>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Ele não difere muito do ngAfterContentInit. Um mero <button></button> foi adicionado ao BComponent. Clicar nele causa um loop de detecção de alterações. Isso ativa o gancho, conforme indicado pela aleatoriedade da cor de fundo.

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento <ng-content></ng-content>. O CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. ngAfterContentChecked é acionado. O BComponent termina a renderização. AComponent termina a renderização. O ngAfterContentChecked pode ser acionado novamente por meio da detecção de alterações.

ngAfterViewInit

O ngAfterViewInit é acionado uma vez após a conclusão da inicialização do DOM de visualização. A visualização sempre é carregada logo após o conteúdo. ngAfterViewInit aguarda a resolução das pesquisas @ViewChild(ren). Esses elementos são consultados na mesma visualização do componente.

No exemplo abaixo, o título h3 de BComponent é pesquisado. ngAfterViewInit é executado assim que os resultados da pesquisa estão disponíveis.

import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p #BStatement>I am B.</p>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterViewInit {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', 'yellow');
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterViewInit Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Renderer2 altera a cor de fundo do título de BComponent. Isso indica que o elemento de visualização foi pesquisado com sucesso graças ao ngAfterViewInit.

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento <ng-content></ng-content>. CComponent faz parte do conteúdo projetado. O BComponent termina a renderização. O ngAfterViewInit é acionado. AComponent termina a renderização. ngAfterViewInit não será acionado novamente.

ngAfterViewChecked

O ngAfterViewChecked é acionado após qualquer ciclo de detecção de alterações que tenha como alvo a visualização do componente. O hook ngAfterViewChecked permite que os desenvolvedores facilitem o modo como a detecção de alterações afeta o DOM de visualização.

import { Component, ViewChild, AfterViewChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p #BStatement>I am B.</p>
  <button (click)="$event">CLICK</button>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterViewChecked {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterViewChecked() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterViewChecked Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Resumo: a renderização começa com o AComponent. Para concluir, o AComponent deve renderizar o BComponent. O BComponent projeta o conteúdo agrupado em seu elemento por meio do elemento <ng-content></ng-content>. CComponent faz parte do conteúdo projetado. O conteúdo projetado termina de ser renderizado. O BComponent termina a renderização. ngAfterViewChecked é acionado. O AComponent termina a renderização. O ngAfterViewChecked pode ser acionado novamente por meio da detecção de alterações.

Clicar no elemento <button></button> inicia uma rodada de detecção de alterações. O ngAfterContentChecked dispara e randomiza a cor de fundo dos elementos consultados a cada clique no botão.

ngOnDestroy

ngOnDestroy é acionado quando um componente é removido da visualização e do DOM subsequente. Esse hook oferece uma chance de reparar quaisquer pontas soltas antes da exclusão de um componente.

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

@Directive({
  selector: '[appDestroyListener]'
})
export class DestroyListenerDirective implements OnDestroy {
  ngOnDestroy() {
    console.log("Goodbye World!");
  }
}

@Component({
  selector: 'app-example',
  template: `
  <h1>ngOnDestroy Example</h1>
  <button (click)="toggleDestroy()">TOGGLE DESTROY</button>
  <p appDestroyListener *ngIf="destroy">I can be destroyed!</p>
  `
})
export class ExampleComponent {
  destroy: boolean = true;

  toggleDestroy() {
    this.destroy = !this.destroy;
  }
}

Resumo: o botão é clicado. O membro destroy de ExampleComponent alterna para false. A instrução estrutural *ngIf é avaliada como falsa. ngOnDestroy é acionado. O *ngIf remove o <p></p> que servia como seu host. Esse processo se repete qualquer número de vezes que você clicar no botão para alternar destroy para false.

Conclusão

Lembre-se de que determinadas condições devem ser atendidas para cada hook. Eles sempre serão executados em ordem sequencial, independentemente. Isso torna os hooks previsíveis o suficiente para serem usados, mesmo que alguns não sejam executados.

Com os hooks de ciclo de vida, é fácil prever o momento de execução de uma classe. Eles permitem que os desenvolvedores acompanhem onde a detecção de alterações está ocorrendo e como a aplicação deve reagir. Eles ficam parados em códigos que exigem dependências baseadas em carregamentos disponíveis somente após algum tempo.

O ciclo de vida do componente caracteriza os frameworks modernos de front-end. O Angular organiza seu ciclo de vida fornecendo os hooks mencionados acima.

Recursos (em inglês)

• Equipe do Angular. "Lifecycle Hooks". Google. Acessado em 2 Junho de 2018
• Gechev, Minko. "ViewChildren and ContentChildren in Angular". Acessado em 2 Junho de 2018

Outras fontes (em inglês)

• Documentação do Angular
• Repositório do GitHub do Angular
• Hooks do ciclo de vida em detalhes

Neste tutorial de React para iniciantes, vamos criar uma aplicação de questionário. Trabalharemos com objetos de state complexos, como lidar com diferentes hooks de state e produziremos algo com base neles.

Dê uma olhada:

Tente você mesmo

Se você quiser tentar primeiro, aqui estão os cenários (você também pode obter o código inicial abaixo):

• Quando o usuário clica em um botão, a próxima pergunta deve ser exibida
• Se o usuário acertar a pergunta, a pontuação deverá ser aumentada
• Quando o usuário chegar ao final do questionário, sua pontuação total deverá ser exibida

Tutorial

Faça o download do código inicial no GitHub aqui.

Vamos lá!

Se você abrir o código inicial e acessar App.js, verá que forneci uma lista de perguntas/respostas, armazenadas em um array chamado questions. Esse é o nosso questionário.

Nosso primeiro objetivo é pegar os dados das perguntas no array e exibi-los na tela.

Removeremos o texto inserido diretamente no código e usaremos os dados da primeira pergunta, por enquanto, só para começar. Vamos nos preocupar com a troca de perguntas mais tarde.

Em nosso JSX, remova o texto da pergunta inserido diretamente no código e digite {questions[0]} para obter o primeiro item (ou pergunta) em nosso array de perguntas.

<div className='question-text'>{questions[0]}</div>

Renderização de perguntas e respostas

A primeira pergunta é um tema. Portanto, podemos usar a "notação de ponto" para obter acesso às propriedades. Agora, usaremos apenas {question[0].questionText} para obter acesso ao texto da pergunta para esse objeto:

<div className='question-text'>{questions[0].questionText}</div>

Salve e execute a aplicação. Observe como o texto é atualizado. Lembre-se de que estamos apenas pegando o texto da primeira pergunta do primeiro tema em nosso array de perguntas.

Adotaremos uma abordagem semelhante para as opções de resposta. Remova os botões inseridos diretamente no código e use a função map() para repetir as opções de resposta de uma determinada pergunta.

Lembre-se de que a função map() faz uma repetição sobre o array e nos fornece o item atual em que a repetição se encontra, por meio de uma variável.

Substitua a div com a classe "answer-section" pela seguinte:

<div className='answer-section'>
	{questions[0].answerOptions.map((answerOption, index) => (
		<button>{answerOption.answerText}</button>
	))}
</div>

Salve e execute a aplicação. Observe como quatro botões de resposta aparecem e o texto é renderizado dinamicamente.

Vamos recapitular:

• Estamos obtendo a primeira pergunta do array de perguntas: questions[0]
• A primeira pergunta é um tema que contém um array de answerOptions. Podemos chegar a esse array usando a notação de ponto: questions[0].answerOptions
• Como o answerOptions é um array, podemos mapeá-lo: questions[0].answerOptions.map
• Dentro da função map(), renderizamos um botão para cada answerOption e exibimos o texto

Alterando as perguntas usando o state

Agora, vamos voltar ao nosso JSX. Observe como, se alterarmos questions[0] para questions[1] ou questions[2], a interface do usuário será atualizada. Isso ocorre porque ele está obtendo os dados de diferentes perguntas em nosso array de perguntas, dependendo do índice.

O que queremos fazer é usar um tema de estado para manter a pergunta em que o usuário está no momento e atualizá-la quando um botão de resposta for clicado. Você pode ver isso ao executar o código no exemplo final.

Vá em frente e adicione um objeto de state, que conterá o número da pergunta atual em que o usuário está. Ele será inicializado em 0 para que o questionário pegue a primeira pergunta do array:

const [currentQuestion, setCurrentQuestion] = useState(0);

Agora, queremos substituir o "0" incorporado diretamente no código em nosso JSX por essa variável. Primeiro, para o texto da pergunta:

<div className='question-text'>{questions[currentQuestion].questionText}</div>

Para a seção de perguntas, temos:

<div className='answer-section'>
	{questions[currentQuestion].answerOptions.map((answerOption, index) => (
		<button>{answerOption.answerText}</button>
	))}
</div>

Agora, se você inicializar a currentQuestion com algo diferente de 0, por exemplo, 1 ou 2, a interface do usuário será atualizada para mostrar a pergunta e as respostas dessa pergunta específica. Muito legal!

Vamos adicionar algum código para que, quando clicarmos em uma resposta, possamos incrementar o valor de currentQuestion para passarmos para a próxima pergunta.

Crie uma função chamada handleAnswerButtonClick. Ela será chamada quando o usuário clicar em uma resposta.

Vamos incrementar o valor da pergunta atual em um, salvá-lo em uma nova variável e definir essa nova variável no estado:

const handleAnswerButtonClick = (answerOption) => {
	const nextQuestion = currentQuestion + 1;
	setCurrentQuestion(nextQuestion);
};

Em seguida, adicione um evento onClick ao nosso botão, assim:

<button onClick={() => handleAnswerButtonClick()}>{answerOption.answerText}</button>

Se testarmos isso, você verá que funciona, até chegarmos ao final:

Então, o que está acontecendo? Bem, em nossa função handleAnswerButtonClick, estamos incrementando o número e definindo-o como o state. Está certo.

Lembre-se, porém, de que usamos esse número para acessar um array, a fim de obter as opções de pergunta e resposta. Quando chegarmos a 5, ele causará um erro, pois não há um quinto elemento!

Vamos fazer uma verificação para garantir que não ultrapassemos o limite. Em nossa função handleAnswerButtonClick, vamos adicionar a seguinte condição:

if (nextQuestion < questions.length) {
	setCurrentQuestion(nextQuestion);
} else {
	alert('you reached the end of the quiz');
}

Isso basicamente diz que, se o número da próxima pergunta for menor que o número total de perguntas, o state será atualizado para a próxima pergunta. Caso contrário, chegamos ao final do questionário e, portanto, um alerta é mostrado, por enquanto.

Exibição da tela de pontuação

Em vez de mostrar um alerta, o que queremos fazer é exibir a tela de "pontuação".

Se olharmos para o JSX, você perceberá que eu coloquei a marcação aqui para você. Só precisamos substituir "false" pela lógica.

Então, como podemos fazer isso? Bem, esse é o objeto perfeito para se colocar em um state!

Adicione outro objeto de state que armazenará se queremos mostrar a tela de pontuação ou não:

const [showScore, setShowScore] = useState(false);

E substitua false por showScore em nosso JSX:

<div className='app'>{showScore ? <div className='score-section'>// ... score section markup</div> : <>// ... quiz question/answer markup</>}</div>

Nada mudará, mas, se alterarmos o valor do estado para "true", a div de pontuação será exibida. Isso ocorre porque tudo está envolvido em um condicional ternário, ou seja:

“Se showScore for verdadeiro, renderize a marcação da seção de pontuação; caso contrário, renderize a marcação da pergunta/resposta do teste.”

Agora, queremos atualizar essa variável de state quando o usuário chegar ao final do questionário. Já escrevemos a lógica para isso em nossa função handleAnswerButtonClick.

Tudo o que precisamos fazer é substituir a lógica de alerta que atualiza a variável showScore para que seja verdadeira:

if (nextQuestion < questions.length) {
	setCurrentQuestion(nextQuestion);
} else {
	setShowScore(true);
}

Se clicarmos nas respostas do questionário, ele mostrará a seção de pontuação quando chegarmos ao final. No momento, o texto e a pontuação mostrados são uma string inserida diretamente no código. Devemos, então, torná-la dinâmica.

Salvando a pontuação

Nossa próxima tarefa é manter uma pontuação em algum lugar da nossa aplicação e incrementar esse valor se o usuário selecionar a opção correta.

O local lógico para fazer isso é na função "handleAnswerOptonClick".

Lembre-se de que, quando iteramos sobre as answerOptions, a função map() nos fornece um objeto para cada uma delas, que inclui o questionText e um valor booleano que mostra se a resposta está correta ou não. Esse booleano é o que usaremos para nos ajudar a incrementar nossa pontuação.

Em nosso botão, atualize a função da seguinte maneira:

onClick={()=> handleAnswerButtonClick(answerOption.isCorrect)

Em seguida, atualize a função para que aceite o parâmetro a seguir:

const handleAnswerButtonClick = (isCorrect) => {
	//... other code
};

Agora, podemos adicionar alguma lógica aqui em nossa função. Por enquanto, queremos dizer que "se isCorrect for verdadeiro, queremos mostrar um alerta":

const handleAnswerButtonClick = (isCorrect) => {
	if (isCorrect) {
		alert(“the answer is correct!”)
	}

	//...other code
};

Isso é o mesmo que if(isCorrect === true), apenas uma versão abreviada. Agora, se tentarmos fazer isso, você verá que receberemos um alerta quando clicarmos na resposta correta.

Só para recapitular até agora:

• Quando repetimos os botões, passamos o valor booleano isCorrect desse botão para a função handleAnswerButtonClick.
• Na função, verificamos se esse valor é verdadeiro e, se for, exibimos um alerta.

Em seguida, queremos realmente salvar a pontuação. Como você acha que podemos fazer isso? Se você disse "valor no state", está correto!

Vá em frente e adicione outro valor no state chamado "score" (pontuação). Lembre-se de prefixar a função para alterar o valor com "set" para que seja setScore. Inicialize-a com 0:

const [score, setScore] = useState(0);

Em seguida, em vez de mostrar um alerta, queremos atualizar nossa pontuação em 1 se o usuário tiver acertado a resposta.

Em nossa função handleAnswerButtonClick, remova o alerta e aumente nossa pontuação em um:

const handleAnswerButtonClick = (isCorrect) => {
	if (answerOption.isCorrect) {
		setScore(score + 1);
	}

	//...other code
};

Exibição da pontuação

Para mostrar a pontuação, basta fazer uma pequena alteração em nosso código de renderização. Em nosso JSX, remova a string inserida diretamente no código na seção de pontuação e adicione essa nova variável:

<div className='score-section'>
	You scored {score} out of {questions.length}
</div>

<div className='score-section'>
	You scored {score} out of {questions.length}
</div>

Agora, se revisarmos as respostas, a pontuação é dinâmica e será exibida corretamente no final!

Uma última coisa antes de encerrarmos nossa aplicação de questionário: você notará que a pergunta atual exibida na interface do usuário é sempre "1", pois isso está inserido diretamente no código. Precisamos mudar isso para que seja mais dinâmico.

Substitua o "question-count" pelo seguinte:

<div className='question-count'>
	<span>Question {currentQuestionIndex + 1}</span>/{questions.length}
</div>

Lembre-se de que precisamos do +1, pois os computadores começam a contar a partir de 0 e não do 1.

Deseja mais ideias para projetos?

Por que não tentar criar alguns projetos em React para melhorar ainda mais seu aprendizado? A cada duas semanas, o autor publica um novo projeto para que você experimente um exemplo funcional, um código inicial e dicas. Inscreva-se para receber as publicações diretamente na sua caixa de mensagens!

O que é lazy loading?

O lazy loading (algo como "carregamento lento", em português) é o processo de carregamento de componentes, módulos ou outros ativos de um site, conforme necessário.

Como o Angular cria uma SPA (Aplicação de Página Única), todos os seus componentes são carregados de uma só vez. Isso significa que muitas bibliotecas ou módulos desnecessários também podem ser carregados.

Para uma aplicação pequena, não há problema. Porém, à medida que a aplicação cresce, o tempo de carregamento aumentará se tudo for carregado de uma vez. O lazy loading permite que o Angular carregue componentes e módulos como e quando eles forem necessários.

Em primeiro lugar, para entender como o lazy loading funciona no Angular, precisamos entender os blocos de construção básicos da estrutura: os NgModules.

O que são os NgModules?

Bibliotecas do Angular, como RouterModule, BrowserModule e FormsModule são conhecidas como NgModules. Material Angular, que é uma ferramenta de terceiros, também é um tipo de NgModule.

Os NgModules consistem em arquivos e códigos relacionados a um domínio específico ou que têm um conjunto semelhante de funcionalidades.

Um arquivo NgModule típico declara componentes, instruções, pipes e serviços. Ele também pode importar outros módulos que são necessários no módulo atual.

Uma das vantagens importantes dos NgModules é que eles podem ser carregados lentamente. Vamos dar uma olhada em como podemos configurar o carregamento lento.

Você pode verificar abaixo para ver como é um arquivo NgModule básico.

Como criar NgModules

Neste tutorial, criaremos dois módulos, Módulo A e Módulo B, que serão carregados lentamente. Na tela principal, teremos dois botões para carregar cada módulo de maneira lenta.

Crie o projeto

Crie um projeto do Angular chamado lazy-load-demo executando o comando abaixo:

ng new lazy-load-demo --routing --style css
code lazy-load-demo

Aqui, estamos criando um novo projeto com roteamento. Além disso, mencionamos o formato da folha de estilo para CSS. O segundo comando abre seu projeto no VS Code.

Módulo Root

Por padrão, um módulo raiz ou módulo de aplicação é criado em /src/app. Abaixo está o arquivo NgModule que é criado.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Primeiro, importamos todos os módulos e componentes necessários.

Depois disso, o decorador @NgModule declara que a classe AppModule é um tipo de NgModule. O decorador aceita declarações, importações, provedores e bootstrap. Aqui estão as descrições de cada um deles:

• declarações: os componentes deste módulo.
• importações: os módulos que são exigidos pelo módulo atual.
• provedores: os provedores de serviços, se houver.
• bootstrap: o componente root que o Angular cria e insere na página da Web do host index.html.

Tela principal

A tela principal terá dois botões: Load Module A e Load Module B. Como o nome sugere (Carregar o módulo A e Carregar o módulo B, respectivamente), clicar nesses botões carregará lentamente cada módulo.

Para isso, substitua seu arquivo app.component.html pelo conteúdo abaixo.

<button style="padding: 20px; color: white; background-color: green;" routerLink="a">Load Module A</button>
<button style="padding: 20px; color: white; background-color: blue;" routerLink="b">Load Module B</button>
<router-outlet></router-outlet>

Vamos definir os módulos para as rotas a e b.

Módulos de carregamento lento

Para criar módulos carregados de modo lento, execute os comandos abaixo:

ng generate module modulea --route a --module app.module
ng generate module moduleb --route b --module app.module

Os comandos gerarão duas pastas, chamadas modulea e moduleb. Cada pasta conterá seus próprios arquivos module.ts, routing.ts e component.

Se você verificar seu app-routing.module.ts, verá o código abaixo para as rotas:

const routes: Routes = [
  { path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) },
  { path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) }
];

Isso implica que, quando a rota a ou b é visitada, carrega seus respectivos módulos de maneira lenta.

Ao executar o projeto com ng serve, você verá a tela abaixo:

Ao clicar no botão Load Module A, você será direcionado para a página a. Esta é a aparência da sua tela:

Você deverá ver uma tela semelhante que diz moduleb works! quando clicar em Load Module B.

Como verificar se o lazy loading funcionou

Para verificar se os arquivos foram carregados, abra as ferramentas de desenvolvedor pressionando F12. Depois disso, visite a aba Network, como pode ser visto na captura de tela abaixo. Quando você atualizar a página, ela mostrará alguns arquivos que foram solicitados.

Vá em frente e limpe sua lista de solicitações pressionando o botão Clear (Limpar), conforme mostrado na imagem abaixo.

Ao clicar em Load Module A, você verá uma solicitação para modulea-modulea-module.js, como na captura de tela abaixo. Isso verifica se o Módulo A foi carregado de maneira lenta.

Do mesmo modo, quando você clica em Load Module B, o arquivo moduleb-moduleb-module.js é carregado. Isso verifica se o Módulo B foi carregado de maneira lenta.

Agora, quando você tentar clicar nos botões, ele não carregará esses arquivos js novamente.

Casos de uso para os NgModules

Como vimos, é muito fácil criar módulos de lazy loading. Há muitos casos de uso em que eles são úteis, como:

• Criação de um módulo separado para telas de pré-login e pós-login.
• Em um site e-commerce, as telas voltadas para o fornecedor e as telas voltadas para o cliente podem pertencer a módulos separados. Você também pode criar um módulo separado para pagamento.
• Geralmente, é criado um CommonModule separado, que contém componentes, instruções ou pipelines compartilhados. Instruções como o botão Copy Code e componentes como upvote/downvote geralmente são incluídos em um módulo comum.

Conclusão

Para sites menores, talvez não seja muito importante que todos os módulos sejam carregados de uma só vez. Porém, à medida que o site cresce, é útil ter módulos separados, que são carregados conforme necessário.

Devido ao lazy loading, o tempo de carregamento dos sites pode ser reduzido drasticamente. Isso é especialmente útil quando se está tentando obter uma classificação mais elevada para SEO. Mesmo que não seja o caso, tempos de carregamento mais curtos significam uma melhor experiência do usuário.

Você tem interesse em mais tutoriais? Dê uma olhada nestes recursos (em inglês):

• Learn TDD with Integration Tests in .NET
• How to authenticate & authorise API’s correctly in .NET
• Azure Functions & wkhtmltopdf: Convert HTML to PDF

No React Native, há dois tipos principais de componentes que compõem uma aplicação: componentes funcionais e componentes de classe. Eles são estruturados do mesmo modo que seriam em uma aplicação para a web normal do React.

Componentes de classe

Os componentes de classe são classes do JavaScript ES2015 que estendem uma classe base do React chamada Component.

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

Isso dá para a classe App acesso aos métodos do ciclo de vida do React, como render, bem como às funcionalidades de state/props dos componentes pai.

Componentes funcionais

Os componentes funcionais são mais simples. Eles não gerenciam seu próprio state nem têm acesso aos métodos de ciclo de vida fornecidos pelo React Native. Eles são, literalmente, funções do JavaScript antigas e simples – às vezes, chamados de componentes sem estado (do inglês, stateless).

const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}

Sumário

Os componentes de classe são usados como componentes de contêiner para lidar com o gerenciamento do state e para integrar componentes secundários.

Os componentes funcionais geralmente são usados apenas para fins de exibição – esses componentes chamam funções dos componentes pai para lidar com interações do usuário ou atualizações do state.

Mais informações sobre o estado do componente

Estado do componente

Nos componentes Class, há uma maneira de armazenar e gerenciar o state criado no React Native.

class App extends Component {
  constructor () {
    super();
    this.state = {
      counter: 0
    };
  }
  incrementCount () {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  decrementCount () {
    this.setState({
      counter: this.state.counter - 1
    });
  }
  render () {
    return (
      <View>
        <Text>Count: {this.state.counter}</Text>
        <Button onPress={this.decrementCount.bind(this)}>-</Button>
        <Button onPress={this.incrementCount.bind(this)}>+</Button>
      </View>
    );
  }
}

O state é semelhante às props, mas é privado e totalmente controlado pelo componente. Aqui, o método constructor() chama o construtor da classe pai com super(); – Component é a classe pai do App, pois estamos usando a palavra-chave extends. O método constructor() também inicializa o objeto de state do componente:

this.state = {
  counter: 0
};

O state pode ser exibido dentro do componente:

{this.state.counter}

Ele também pode ser atualizado pela chamada:

this.setState({});

Observação: após a criação inicial no método constructor() do componente, você nunca deve modificar diretamente o state do componente com this.state =. Você deve usar this.setState, como pode ser visto nas funções incrementCount e decrementCount acima.

A contagem é ampliada e reduzida ao chamar as funções passadas para os manipuladores onPress do mesmo modo que seriam se você chamasse um manipulador de clique do JavaScript na web.

Adendo: no primeiro exemplo, <Button> é um componente personalizado; se trata de uma combinação de <TouchableOpacity> e <Text> da API do React Native:

const Button = ({ onPress, children, buttonProps, textProps }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
      <Text style={[textStyle, textProps]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

Mais informações sobre o React Native:

• Guia do React Native (em inglês)

Primeiro, uma breve história:

Com a coleta e utilização de dados seguindo em seu aumento exponencial, a necessidade de visualizar estes dados está se tornando cada vez mais importante. Os desenvolvedores procuram consolidar milhões de registros de bases de dados em belos gráficos e painéis que os humanos possam interpretar de maneira rápida e intuitiva.

A tecnologia de visualização de dados continuou a melhorar na última década e muitas bibliotecas de gráficos avançadas estão agora disponíveis para os consumidores. No início dos anos 2000, a geração de gráficos era dominada por gráficos de imagens bitmap do lado do servidor. Plug-ins como o Flash e o Silverlight ofereciam uma experiência de criação de gráficos mais interativa, mas com um grande impacto na velocidade de transferência, na duração da bateria e nos recursos do sistema.

Com a explosão da utilização de dispositivos móveis e tablets, os plug-ins deixaram de ser suportados nas principais plataformas e os desenvolvedores tiveram de mudar para tecnologias abertas do lado do client que podiam ser executadas em qualquer lugar. Ao mesmo tempo, o advento de telas de resolução muito alta e o zoom mais comum através de gestos tácteis trouxeram para a primeira linha os gráficos vetoriais independentes da resolução.

Chegamos na era atual da visualização de dados, dominada pelo JavaScript e pelo SVG (Gráficos Vetoriais Escaláveis). Os gráficos são agora executados em todos os navegadores, sem plug-ins especiais, suportam interatividade e animações e têm um aspecto nítido mesmo nos dispositivos de resolução mais elevada. Ao analisar mais de 50 bibliotecas de visualização, estes 9 produtos destacaram-se:

D3.js

D3.js é uma biblioteca gráfica do JavaScript muito extensa e poderosa. Permite associar dados arbitrários a um Modelo de Objeto de Documento (DOM) e, em seguida, aplicar transformações baseadas em dados ao documento.

O D3 vai muito além das típicas bibliotecas gráficas, incluindo muitos outros módulos técnicos menores, tais como eixos, cores, hierarquias, contornos, suavização, polígonos e muito mais. Tudo isto contribui para uma curva de aprendizagem acentuada.

Tentar criar um simples gráfico pode ser complicado. Todos os elementos incluindo eixos e outros itens do gráfico precisam ser explicitamente definidos. Muitos modelos mostram como o CSS pode ser utilizado para dar estilo aos elementos do gráfico. Nenhuma característica baseada em gráficos é aplicada automaticamente. Se quiser ir mais longe e utilizar a criatividade para controlar totalmente cada elemento, esta é a melhor opção. Ao trabalhar em horário reduzido para cumprir os requisitos de um projeto de visualização de dados, pode não ser a melhor opção para começar do zero.

O D3.js pode ser um bloco de construção para uma biblioteca de gráficos. Os desenvolvedores vêm utilizando o D3 para facilitar a utilização de soluções de gráficos que o consomem, como o NVD3.

O D3.js é de código aberto e de utilização gratuita.

JSCharting

A biblioteca de gráficos JSCharting suporta muitos tipos de gráficos, incluindo mapas, gráficos de Gantt, mapas em estoque e outros que frequentemente requerem bibliotecas separadas para serem utilizados. Inclui mapas incorporados de todos os países do mundo e uma biblioteca de ícones SVG. Um conjunto de micrográficos autónomos pode ser apresentado em qualquer etiqueta de gráfico ou em qualquer elemento div numa página. Os controles de IU (UiItems) também estão incluídos, permitindo gráficos interativos mais ricos. É fácil controlar os dados ou as variáveis de visualização em tempo real e os gráficos podem ser exportados para os formatos SVG, PNG, PDF e JPG.

A galeria está dividida em amostras de tipos de gráficos e de características. O estilo do gráfico é polido e produz alguns gráficos de aparência limpa. Os visuais gerais proporcionam uma experiência de gráficos limpa e profissional.

Os modelos incluídos utilizam um objeto de configuração para personalizar os gráficos. As definições para criar e controlar os tipos de gráficos são muito simples de utilizar. São necessárias poucas definições de propriedades para especificar tipos de gráficos mais complexos. O JSCharting tem predefinições fortes e dinâmicas, o que significa que tenta escolher automaticamente as melhores definições para os cenários.

A documentação inclui muitos tutoriais e descrições completas das propriedades da API. Muitas propriedades incluem exemplos de utilização e ligações de amostra.

O JSCharting é gratuito para utilização não comercial e pessoal e oferece opções de licença comercial que incluem todos os tipos de gráficos e produtos por uma única taxa.

Highcharts

Highcharts é uma biblioteca popular de gráficos do JavaScript utilizada por muitas das maiores empresas do mundo. Os gráficos são gerados usando SVG e recorrem à VML para compatibilidade com versões anteriores até o IE6/IE8. Os gráficos de teste demonstram um conjunto de recursos bastante rico, mas não impressionam visualmente. A documentação geral inclui tutoriais para muitos tópicos relevantes e a documentação da API é completa.

O gráfico utiliza opções de configuração para criar gráficos e a API é fácil de utilizar.

O Highcharts é gratuito para utilização não comercial e pessoal. O licenciamento comercial é necessário para outras utilizações e os gráficos de stock, de mapas e gráficos de Gantt são licenciados de forma separada.

amCharts

O amCharts lançou recentemente a sua versão 4, que adiciona um forte motor de animação SVG que permite criar cenas semelhantes a filmes.

Os gráficos de teste têm uma aparência muito agradável. A maioria dos testes oferece uma série de paletas e uma IU deslizante para ajustar as variáveis do gráfico em tempo real. A documentação inclui muitos tutoriais e descrições completas das propriedades da API.

A criação de um gráfico é um pouco diferente da abordagem baseada na configuração e, em vez disso, utiliza uma API mais declarativa. Requer um pouco mais de código para configurar os gráficos, mas oferece uma melhor experiência de preenchimento de código.

O amCharts oferece uma licença gratuita com gráficos marcados e licenças pagas para outras utilizações.

Google Charts

Os gráficos do Google são poderosos e fáceis de utilizar.

Os exemplos de gráficos têm um aspecto limpo e são agradáveis à vista. A galeria e a galeria expandida mostram muitos tipos de gráficos, mas pressionar o menu de hambúrguer revela mais tipos (como o calendário) que não são mostrados nestas listas da galeria.

Cada tipo de gráfico tem um tutorial dedicado com exemplos ao vivo. Os tutoriais incluem código para os recursos relacionados e listagens de API. Esta é uma experiência agradável para começar com uma nova biblioteca de gráficos.

Os gráficos são personalizados utilizando o objeto de opções de configuração. Os conjuntos de dados são preenchidos usando uma classe DataTable que pode ser consumida por todos os gráficos. Cada tipo de gráfico tem opções únicas listadas nos tutoriais específicos do tipo. A nomeação de propriedades é padronizada e muitas opções funcionam em todos os tipos.

Os Gráficos do Google são gratuitos, mas há uma ressalva. Trata-se de um serviço da web e não pode ser hospedado localmente. No passado, a Google retirou as APIs. Por isso, se a sua utilização for de missão crítica, poderá querer escolher outra opção.

ZingChart

O ZingChart oferece muitos tipos de gráficos e integra-se com Angular, React e outros frameworks. Ele tem um forte conjunto de recursos com muitas opções de personalização.

Os gráficos de teste mostram uma série de temas de estilo, alguns dos quais parecem ser melhores que outros, mas as opções para os estilizar conforme necessário estão lá. Os gráficos de teste não apresentam todos os tipos de gráficos disponíveis.

A documentação inclui tutoriais para todos os tipos disponíveis, um bom número de funcionalidades e uma listagem completa da API.

O ZingChart usa opções de configuração para personalizar os gráficos. As amostras incluem muitas configurações de propriedade, como estilo de fonte. Elas podem atrapalhar a compreensão de quais configurações são necessárias para um determinado gráfico.

O ZingChart pode ser utilizado gratuitamente com a marca. Está disponível um licenciamento pago para utilização sem marca.

FusionCharts

O FusionCharts existe há muitos anos, tendo começado como um plug-in de gráficos baseado em Flash. É uma biblioteca de visualização de gráficos robusta. Suporta muitos formatos de dados, incluindo XML, JSON e JavaScript, funciona em navegadores modernos e é compatível com versões anteriores ao IE6. Muitas das estruturas do JavaScript e linguagens de programação laterais do servidor também são suportadas.

A galeria de gráficos inclui muitos exemplos e o seu aspecto visual é simples.

A documentação inclui boas descrições da API e exemplos de cada tipo de gráfico. As propriedades de configuração estão agrupadas por tarefas e características do gráfico.

Os gráficos são criados utilizando opções baseadas na configuração e são relativamente fáceis de utilizar. A lista de propriedades pode ser longa quando nos aprofundamos na API. Todas as propriedades de configuração são superficiais, como {chartLeftMargin, showAlternateHGridColor}. Parece uma tentativa de melhorar o preenchimento de código.

O FusionCharts é gratuito para utilização pessoal com a marca no gráfico. Está disponível um licenciamento pago para utilização comercial e sem marca.

KOOLCHART

O KoolChart é uma biblioteca de gráficos de JavaScript baseada na tela do HTML5. Também está disponível um produto de mapeamento e grade.

A sua nova versão v5 inclui um conjunto de funcionalidades mais interativas e um estilo atualizado. Os visuais são limpos e modernos. A utilização de telas oferece um melhor desempenho em detrimento do fato de ser baseado em dados de rasterização.

As amostras utilizam um XML baseado em cadeias de caracteres para aplicar opções de gráficos, o que parece menos prático do que outros modelos. Estas opções assemelham-se ao HTML5, mas são definidas através de uma instrução em JavaScript.

A API está bem documentada com exemplos de gráficos para cada propriedade. Também está disponível um manual em PDF de 173 páginas.

Está disponível um período teste de dois meses para avaliação. O licenciamento é necessário após a expiração do período teste.

Chart.js

O Chart.js é uma biblioteca do JavaScript de código aberto que suporta 8 tipos de gráficos. É uma pequena biblioteca do JS, com apenas 60kb. Os tipos incluem gráficos de linhas, gráficos de barras, gráficos de área, radar, gráficos de tartes, bolhas, gráficos de pontos e mistos. Uma série temporal também é suportada. Utiliza o elemento da tela para renderização e é responsivo ao redimensionamento da janela para manter a granularidade da escala. É compatível com versões anteriores ao IE9. Estão disponíveis polyfills para funcionar também com o IE7.

As amostras visuais possuem um aspecto bastante moderno e incluem animações iniciais quando se desenha pela primeira vez. Faz a animação tranquilamente quando se adicionam séries ou pontos de dados em tempo real. As opções do gráfico podem ser modificadas depois e a chamada de uma função update() redesenha o gráfico.

O código-fonte de amostra não é apresentado na galeria do site, mas está disponível no repositório do GitHub. As opções de configuração são utilizadas para criar e modificar gráficos. A API de opções é limpa e intuitiva.

A documentação é completa e inclui tutoriais com a API de propriedades e trechos de código.

O Chart.js é uma biblioteca de código aberto e de utilização gratuita para uso pessoal e comercial, o que é uma vantagem. O número limitado de tipos pode ser um problema para requisitos de painéis de controle mais avançados.

Conclusão

O ecossistema de bibliotecas gráficas JavaScript evoluiu consideravelmente ao longo da última década. Atualmente, existem muitos produtos de gráficos que atendem a requisitos muito diversos, servindo a uma ampla gama de projetos por meio de centenas de tipos de gráficos. A maioria das bibliotecas fornece uma versão teste gratuita ou uma versão marcada que permite avaliar a eficácia gráfica com os seus próprios dados, carregamento e complexidade do projecto.

É fácil para a maioria das bibliotecas de gráficos lidar com conjuntos de dados curados simples e visualizações estáticas. No entanto, os gráficos nem sempre lidam bem com as coisas quando são visualizados dados dinâmicos do mundo real. Pode ser necessário mais trabalho para ajustar e organizar os elementos para que os gráficos pareçam corretos. Este ajuste manual pode falhar à medida que novos dados dinâmicos são visualizados.

Para selecionar a melhor solução de gráficos JS para as suas necessidades específicas, recomendo que teste os seus próprios dados com algumas das bibliotecas listadas acima para garantir a opção ideal para os seus projetos atuais e futuros.

Engenheiros de softwares estão em alta demanda hoje em dia. Em geral, eles recebem salários confortáveis e podem ter um bom equilíbrio entre vida pessoal e profissional.

O que faz, no entanto, um engenheiro de software? Como você pode se tornar um por conta própria?

Neste artigo, explicarei as tarefas e responsabilidades dos engenheiros de software e abordarei algumas das áreas em que estes se especializam mais frequentemente.

Também listarei algumas das habilidades mais importantes caso você queira se tornar um engenheiro de software por conta própria.

Aqui está o que abordaremos:

1. O que é engenharia de software?
2. O que faz um engenheiro de software?
3. Quais são as especializações em engenharia de software?
4. Por que escolher uma carreira em engenharia de software?
5. Como se tornar um engenheiro de software
6. Escolha o seu ambiente educativo – diploma universitário x bootcamp x aprendizagem autodidata
7. Aprenda a aprender
8. Aprenda uma linguagem de programação
9. Aprenda estruturas de dados e algoritmos
10. Aprenda a arquitetura de bancos de dados e SQL
11. Aprenda como utilizar ferramentas de engenharia de software
12. Desenvolva suas habilidades não técnicas

Vamos começar!

O que é engenharia de software?

Todos os dias, é provável que visite vários sites e utilize aplicações para a web e para dispositivos móveis.

Essas ferramentas modernas possuem centenas ou até milhares de linhas de código por trás delas. Essas linhas de códigos foram escritas por um engenheiro de software.

Engenharia de software é o processo de elaboração, construção, teste, implementação e manutenção de produtos de software voltados aos clientes, sistemas informáticos complexos para computadores e ferramentas úteis. Os engenheiros de software fazem isso usando metodologias de engenharia de software, princípios da ciência da computação e linguagens de programação.

Os engenheiros de software escrevem código para hardware, sistemas operacionais, sistemas embarcados, redes, aplicações empresariais, sites ou videogames.

Eles apresentam soluções estratégicas que atendem às necessidades dos usuários finais e da empresa para a qual trabalham. O código que escrevem resolve um problema específico do mundo real.

O que faz um engenheiro de software?

De um modo geral, aqui estão algumas das tarefas e responsabilidades dos engenheiros de software no dia a dia:

• Coletar e analisar as necessidades e os requisitos dos usuários e entender como utilizam o software.
• Organizar os requisitos dos usuários em categorias individuais para implementar as sugestões e o feedback deles.
• Usar linguagens de programação para elabora e criar sistemas de software e aplicações que atendam aos requisitos dos usuários.
• Criar software eficiente, confiável, seguro, acessível e fácil de utilizar.
• Testar, corrigir bugs, solucionar e manter os sistemas de software existentes.
• Otimizar o código em termos de qualidade, desempenho, velocidade e escalabilidade.
• Resolver problemas que possam surgir e ajudar a empresa a atingir os seus objetivos.
• Criar fluxogramas, documentação e especificações técnicas que descrevam todo o processo do início ao fim para ajudar a partilhar resultados e soluções com outros membros da equipe.
• Consultar com membros de diferentes equipes da organização.
• Apresentar novas funcionalidades e atualizações aos investidores e aos clientes.

Dito isto, as tarefas e responsabilidades dependem da área em que o engenheiro de software se especializa.

Quais são as especializações em engenharia de software?

Engenharia de software é um setor diversificado, ou seja, há muitas áreas em que um engenheiro de software pode se especializar.

Aqui estão algumas das especializações mais comuns em engenharia de software:

Desenvolvimento de front-end para a web

O desenvolvimento de front-end para a web é uma área que envolve elaboração, construção e teste da Experiência do Usuário (UX), Interface do Usuário (UI) e as partes de sites e aplicações para a web que os usuários veem ou com as quais interagem.

Desenvolvedores de front-end utilizam linguagens como HTML, CSS, JavaScript e as suas estruturas e bibliotecas associadas.

Desenvolvimento de back-end para a web

O desenvolvimento de back-end para a web (texto em inglês), também conhecido como desenvolvimento lateral do servidor, é uma área que envolve construção e manutenção das partes dos sites das aplicações para a web que os usuários não veem e com as quais não interagem – principalmente, a funcionalidade dos bastidores dos sites.

Lida com bancos de dados, arquitetura web, servidores, autenticação de usuários, autorização, manuseamento e processamento de pedidos de usuários, interfaces de programação de aplicações (as APIs) e garantia de que a lógica adequada está em vigor para que o front-end tenha o que precisa para funcionar de maneira eficiente.

Desenvolvimento full-stack para a web

O desenvolvimento full-stack para a web (texto em inglês) é uma área que envolve elaboração, construção, teste e implementação do front-end e do back-end dos sites e aplicações para a web do início ao fim.

Desenvolvimento para dispositivos móveis

O desenvolvimento para dispositivos móveis (texto em inglês) é uma área que envolve elaboração e construção de aplicações de software que funcionam em dispositivos móveis, como smartphones e tablets com os sistemas operacionais iOS e Android.

Desenvolvimento de jogos

O desenvolvimento de jogos (texto em inglês) é uma área que envolve elaboração e construção de jogos que funcionam em uma variedade de plataformas, como PCs, consoles, navegadores da web e dispositivos móveis.

Desenvolvimento de aplicações para desktop

O desenvolvimento de aplicações para desktop (texto em inglês) é uma área que envolve construção de aplicações de software que funcionem em computadores desktop locais e que tenham uma interface gráfica de utilizador (GUI), como um processador de texto ou um editor de imagens.

Desenvolvimento de sistemas operacionais

O desenvolvimento de sistemas operacionais (texto em inglês) é uma área que envolve o desenvolvimento do hardware e da plataforma para que outras aplicações de software sejam executadas, como Linux, macOS e Windows.

DevOps

O DevOps (texto em inglês) é uma área que envolve a utilização de processos, metodologias e ferramentas que automatizam, gerem e melhoram a infraestrutura e as operações das aplicações de software ao longo do ciclo de vida do desenvolvimento de software.

Computação em nuvem

A computação em nuvem (texto em inglês) é uma área que envolve a elaboração e o desenvolvimento de serviços baseados em nuvem para a construção de sistemas escaláveis e fiáveis.

Cibersegurança

A cibersegurança (texto em inglês) é uma área que envolve a garantia da segurança de aplicações e sistemas de software e a sua proteção contra acesso ilegal, malware, ameaças, vulnerabilidades e diferentes tipos de crimes cibernéticos.

Por que escolher uma carreira em engenharia de software?

Você pode querer escolher uma carreira em engenharia de software por algumas razões.

Em primeiro lugar, a tecnologia evolui a um ritmo acelerado e está em constante mudança – há muitos novos desenvolvimentos praticamente todos os dias.

Engenheiros de software aprendem constantemente coisas novas para se manterem atualizados com as últimas mudanças. São aprendizes ao longo da vida.

Se você é curioso e adora aprender novas habilidades e maneiras de fazer as coisas e não gosta de ficar estagnado e de fazer tarefas monótonas, pode ser que goste de brincar com as novas tecnologias e ferramentas que surgem.

Outro indicador de que a engenharia de software pode ser a escolha certa para a sua carreira é o fato de gostar de resolver problemas difíceis.

Os engenheiros de software são solucionadores de problemas. Utilizam a lógica e a criatividade para resolver os problemas do seu empregador ou cliente.

Se é racional, analítico e metódico, pode adorar o processo de resolver problemas lógicos complexos e construir coisas úteis.

Poderá também optar por uma carreira na área da engenharia de software, uma vez que os engenheiros de software são muito procurados.

O Departamento de Estatísticas do Trabalho dos EUA (link em inglês) prevê um aumento de 25% no crescimento das perspectivas de emprego até 2031, o que é muito mais rápido do que a média.

Diversas indústrias precisam de engenheiros de software, incluindo agências governamentais, organizações sem fins lucrativos, start-ups, empresas de consultoria, instituições de ensino, empresas financeiras e de saúde, bem como empresas varejistas e de entretenimento, para citar apenas algumas. Atualmente, quase todas as empresas são empresas tecnológicas.

Os engenheiros de software também costumam ter salários confortáveis.

De acordo com o Departamento de Estatísticas do Trabalho dos EUA (link em inglês), o salário médio dos engenheiros de software é de US$ 109.020,00 por ano.

Dito isto, o salário dependerá de sua localização e dos anos de experiência.

Para ter uma ideia melhor, pesquise no Google o salário médio dos engenheiros de software da sua região com o mesmo nível de experiência que o seu.

Outra razão para querer uma carreira em engenharia de software é o fato de permitir o trabalho remoto, a flexibilidade do local de trabalho, horários flexíveis e um bom equilíbrio entre a vida profissional e pessoal.

Para saber mais sobre como encontrar uma função de programador remoto, leia este artigo (texto em inglês).

Como se tornar um engenheiro de software

Nas seções seguintes, explicarei como se tornar um engenheiro de software e listarei algumas das habilidades técnicas interpessoais que precisará aprender. Também fornecerei alguns recursos para que possa começar.

Por favor, tenha em mente que não se trata de uma lista exaustiva das habilidades de que precisará, mas serve como algumas sugestões-chave do que poderá ser útil para a sua jornada de aprendizagem.

Escolha o seu ambiente educativo – diploma universitário x bootcamp x aprendizagem autodidata.

Engenharia de software requer muito estudo e aprendizagem.

Portanto, o primeiro passo para se tornar um engenheiro de software é pensar a respeito de suas opções educacionais e que caminho você quer seguir.

Diploma em ciências da computação

Uma das opções – a mais tradicional para se tornar um engenheiro de software – é obter um diploma universitário de quatro anos e especializar-se em Ciências da Computação (texto em inglês) ou um programa de especialização em matemática e ciências.

Um diploma de Ciências da Computação (texto em inglês) de uma universidade acreditada é altamente respeitado por alguns empregadores e considerado uma credencial impressionante (e para alguns, ainda necessária) no seu currículo.

Dito isto, obter um diploma é um investimento e uma caminho a seguir – os diplomas universitários, porém, não são baratos.

De acordo com a pesquisa de Desenvolvedores do Stack Overflow de 2022 (texto em inglês), contudo, a maioria dos desenvolvedores (87%) tem algum tipo de formação na área, com algum curso superior ou mais.

Apesar de você não necessariamente precisar de um diploma (texto em inglês) para se tornar um engenheiro de software e de os empregadores se preocuparem mais com o fato de você possuir as competências e a experiência necessárias, pode valer a pena investir para abrir mais oportunidades de emprego.

Bootcamp de programação

Outra opção é inscrever-se em um bootcamp de programação (texto em inglês).

Bootcamps são programas de treinamento intensivo e ambientes de aprendizagem que ensinam as habilidades técnicas necessárias para conseguir um emprego em engenharia de software. A duração média de um bootcamp é de cerca de vinte a trinta semanas.

A aprendizagem baseia-se normalmente em projetos e, no final do programa, você terá um portfólio de trabalhos para apresentar a potenciais empregadores.

Dito isto, não deixa de ser um caminho a se tomar, embora caro. Alguns bootcamps cobram quantias que chegam aos cinco dígitos (em dólar) apenas por alguns meses de formação e podem também não ser o ambiente adequado para você e suas circunstâncias de vida.

Ensine a si mesmo a programar

Outra opção é aprender a programar por contra própria (texto em inglês) e criar seu plano de estudo autodidata utilizando recursos gratuitos ou pagos, como livros, tutoriais em vídeos e cursos interativos.

Aprender por conta própria é uma boa opção se você é uma pessoa ocupada, que tem responsabilidades na vida – como cuidar da família – ou não pode deixar o seu emprego integral para mudar de carreira.

Você pode aprender ao seu próprio tempo e ritmo e criar o seu horário individual de acordo com o tempo livre que tem.

Pode começar com o currículo do freeCodeCamp, que é gratuito e baseado em projetos.

Em resumo, embora durante muitos anos a obtenção de um diploma formal tenha sido considerado o modo padrão de trabalhar como engenheiro de software, existem atualmente outras vias para escolher, como a participação em um bootcamp ou a aprendizagem autodidata.

Aprenda a aprender – desenvolva hábitos efetivos de estudo

Não importa o estilo de ensino que escolherá, terá que aprender como aprender de maneira eficaz para tirar o máximo proveito dos seus estudos e solidificar a sua aprendizagem.

Aprender a aprender permitirá que processe e fixe qualquer coisa mais rapidamente (link em inglês) que você pode precisar usar como engenheiro de software. A profissão requer aprendizagem constante no trabalho.

Existem técnicas de aprendizagem que, apesar de parecerem intuitivamente corretas, fazem mais mal do que bem e são ineficazes, uma vez que exigem pouco esforço cognitivo.

Essas técnicas ineficazes são a releitura passiva, a tomada de notas e o destaque/sublinha.

As duas estratégias de aprendizagem mais eficazes e cognitivamente exigentes para reter informação são a recordação ativa e repetição espaçada.

A recordação ativa consiste em fazer perguntas a si próprio e recordar as ideias principais do que acabou de ler/aprender.

O cérebro faz ligações mais fortes quando recupera informação e não quando a recebe – o processo de recuperação reforça a aprendizagem profunda.

A repetição espaçada é uma prática que reduz a curva de esquecimento que temos naturalmente como seres humanos. É natural que nos esqueçamos das coisas que aprendemos.

A repetição espaçada envolve a revisão frequente do que você aprendeu – isso o ajuda a construir seu conhecimento ao longo do tempo.

Uma boa ferramenta para praticar repetição espaçada é usando o Anki (link em inglês), uma aplicação de flashcards com um algoritmo por trás que mostra o conteúdo em intervalos de tempo – sempre quando você estiver prestes a esquecê-lo.

Para saber mais sobre aprendizagem e a criação de hábitos de estudo eficazes, dê uma olhada no curso na Coursera sobre aprender a aprender (em inglês).

Aprenda uma linguagem de programação

Como um engenheiro de software, você precisará de um conhecimento aprofundado de, pelo menos, uma ou, por vezes, duas ou mais linguagens de programação.

Terá de compreender conceitos como variáveis, tipos de dados, declarações condicionais, lógica booleana, laços de repetição, arrays, operadores e entrada/saída, para citar apenas alguns.

Há centenas de linguagens de programação para escolher. Cada uma delas tem os seus casos de utilização específicos.

A linguagem de programação que escolherá vai depender da área de engenharia de software que você queira se especializar.

Algumas das mais populares são as seguintes:

• JavaScript (texto em inglês) – uma linguagem de script que funciona em um navegador da web e é utilizada para criar o front-end e o back-end de aplicações para a web.
• Python – uma linguagem lateral do servidor de uso geral, normalmente utilizada para o desenvolvimento web back-end.
• Java (texto em inglês) – uma linguagem multifuncional normalmente utilizada para desenvolver aplicações para várias plataformas, incluindo aplicações para a internet e para Android.
• C++ (texto em inglês) – uma linguagem popular para o desenvolvimento de sistemas operacionais, aplicações e jogos.

Para saber mais sobre essas linguagens, veja os seguintes recursos (em inglês) para começar:

• Curso completo de JavaScript para iniciantes
• Curso gratuito de programação em Python
• Aprenda Java – cursos gratuitos de Java para iniciantes
• Aprenda programação C++ para iniciantes – curso de 31 horas gratuito

Aprenda estruturas de dados e algoritmos

As estruturas de dados e os algoritmos são tópicos que provavelmente surgirão com frequência durante as suas entrevistas de emprego em engenharia de software.

Uma base sólida em estruturas de dados e algoritmos vai permitir que você se saia melhor na resolução de problemas, em encontrar soluções mais eficientes e práticas para os problemas e escrever código mais escalável e de mais fácil manutenção.

Estruturas de dados são áreas de armazenamento para guardar e organizar elementos de dados, de modo que os computadores possam realizar os cálculos com esses elementos com mais precisão e eficiência.

Um algoritmo é uma série de instruções passo a passo bem definidas e precisas. Essas instruções dizem ao computador como executar uma determinada tarefa que resolverá um problema específico.

Um algoritmo recebe um input (em português, entrada) e produz um dado que resolve o problema em questão.

Para aprender mais sobre estruturas de dados e algoritmos, dê uma olhada neste curso (em inglês).

Aprenda a arquitetura de bancos de dados e SQL

Saber como armazenar, manter, gerir e elaborar a arquitetura de um banco de dados será útil como programador. Terá de saber como executar operações de bancos de dados – nomeadamente, as operações CRUD (que significa Criar, Ler, Atualizar, Deletar) – e escrever consultas básicas em SQL. Afinal de contas, as aplicações de software complexas e de grande escala precisam lidar com grandes quantidades de dados.

Você deve querer aprender sobre os diferentes tipos de bancos de dados, tais como as diferenças entre bancos de dados relacionais e não relacionais (também conhecidos como bancos de dados NoSQL).

Você também pode querer estudar SQL. SQL, que significa linguagem de consulta estruturada (do inglês, Structured Query Language), é uma linguagem de consulta para pesquisar e manipular dados em bancos de dados relacionais.

Para saber mais sobre como lidar com bancos de dados e escrever consultas SQL, consulte a certificação de bancos de dados relacionais do freeCodeCamp.

Aprenda como utilizar ferramentas de engenharia de software

Como um engenheiro de software, utilizará diversas ferramentas no seu trabalho do dia a dia.

Algumas delas que mais utilizará são:

• o Git, que é um sistema de controle de versão e uma ferramenta colaborativa. Com o Git, você pode trabalhar com outros desenvolvedores no mesmo projeto e acompanhar as alterações no código;
• o GitHub, que é um serviço de hospedagem popular que permite compartilhar o seu código com o mundo;
• a linha de comandos, que é uma aplicação que permite interagir com o sistema operacional subjacente e o sistema de arquivos através de comandos baseados em texto;
• um IDE (ou Ambiente de Desenvolvimento Integrado), que é uma aplicação de software que permite escrever código de modo eficiente e produtivo. Especificamente, é onde você escreve, edita, executa, testa e depura o seu código. Os IDEs oferecem funcionalidades como realce de sintaxe, que facilitam a leitura do código e a detecção de erros e atalhos de teclado que poupam tempo.

Desenvolva suas habilidades não técnicas

Embora o desenvolvimento das suas habilidades técnicas seja necessário para se tornar um engenheiro de software profissional, você não pode negligenciar as suas habilidades não técnicas (muitas vezes referidas como interpessoais).

O estereótipo dos engenheiros de software que trabalham isolados, sozinhos em uma sala e sem falar com ninguém está longe da realidade.

Como um engenheiro de software, você, normalmente, colaborará com outras pessoas e sendo parte de uma equipe. Precisará de fortes habilidades interpessoais para ser uma membro valioso da equipe.

É necessário comunicar com eficácia (texto em inglês) suas ideias de um modo claro e fácil de compreender, uma vez que trabalhará frequentemente com outros membros da equipe que não têm o mesmo nível de conhecimentos técnicos que você.

Como construirá aplicações de software para um público diversificado, terá de ter empatia com os seus usurários finais e compreender o tipo de problemas que estes podem enfrentar. Ter empatia (texto em inglês) significa colocar-se no lugar dos outros e ser capaz de ver as perspectivas dos outros. Isto ajuda-o a se tornar um desenvolvedor e solucionador de problemas mais eficaz.

Conclusão

Esperamos que este artigo tenha sido útil para você e que tenha compreendido melhor o que envolve a engenharia de software.

Neste artigo, analisamos as tarefas e responsabilidades dos engenheiros de software e algumas das razões pelas quais esta carreira pode ser uma boa opção para você. Também vimos algumas das habilidades que você precisará desenvolver para se tornar um engenheiro de software.

Obrigado pela leitura!