DEV Community: Wil Marques

TypeScript vs Dart - Coleções iteráveis

Wil Marques — Sat, 16 Oct 2021 14:07:05 +0000

O que são coleções iteráveis
Criando uma lista
Adicionando itens
Obtendo itens específicos
Removendo itens
Iterando sequencialmente nos elementos
Verificando a existência de um item específico
Filtrando itens
Conclusão
Referências

O que são coleções iteráveis

Coleções são, em resumo, uma representação de um grupo de objetos. Uma coleção iterável é um tipo de coleção onde pode-se iterar nos elementos. Em outras palavras, são coleções onde podemos navegar nos seus elementos.

Ambas as linguagens (Dart e TypeScript) tem implementações nativas para criação de coleções iteráveis. Em ambas, esse tipo é chamado de Iterable. Cada uma, obviamente, possui uma implementação diferente, mas ambas têm o mesmo objetivo e funções similares.

Os tipos mais comuns de coleções iteráveis são: Lists (ou Arrays), Maps e Sets. Nesse artigo, veremos especificamente Lists em Dart e Arrays em TypeScript, por serem o tipo mais básico de coleções. Os outros iteráveis serão visitados em artigos futuros.

Criando uma lista

Lista é o nome em português comumente usado quando falamos de Arrays ou Lists. E usaremos esse nome ao longo desse artigo.

Vamos começar criando uma lista vazia (ou sem elementos) em cada linguagem.

Em Dart:

final emptyList = [];

Em TypeScript:

const emptyList = [];

Como podemos ver, a sintaxe é praticamente a mesma. Agora vamos criar uma lista já inicializada com alguns números.

Em Dart:

final list = [1, 2, 3, 4, 5];

Em TypeScript:

const list = [1, 2, 3, 4, 5];

Novamente a sintaxe é praticamente a mesma. Porém ambas possuem outras formas para criação de listas, mas essa sintaxe é, além de muito simples, a mais utilizada e cobre a maioria dos cenários.

Adicionando itens

Com as listas de números criadas, vamos adicionar novos elementos.

Em Dart:

final list = [1, 2, 3, 4, 5];
list.add(6);

Em TypeScript:

const list = [1, 2, 3, 4, 5];
list.push(6);

Nesse exemplo já podemos ver uma diferença nas linguagens. Em Dart, usamos o método add de uma lista para inserir novos elementos. Em TypeScript, usamos o método push.

Obtendo itens específicos

É muito comum precisarmos obter itens específicos em uma lista. Como, por exemplo, o quinto item. Novamente, a implementação nas duas linguagens é bastante semelhante. Basta informarmos o índice (ou localização) do item ao referenciarmos a lista.

Em Dart:

final list = [1, 2, 3, 4, 5];
final secondItem = list[2]; // 3

Em TypeScript:

const list = [1, 2, 3, 4, 5];
const secondItem = list[2]; // 3

Com isso podemos obter qualquer item da lista. Sendo, por exemplo, possível obter o primeiro item.

final list = [1, 2, 3, 4, 5];
final firstItem = list[0]; // 1

Em TypeScript:

const numbers = [1, 2, 3, 4, 5];
const firstItem = numbers[0]; // 1

Porém, para obter o último item em TypeScript requer que saibamos o tamanho da lista e subtrair 1 (um). A subtração se deve ao fato de o posicionamento começar com 0. Por exemplo, em uma lista de 5 elementos o último item estaria no índice 4.

Com isso, a lógica em TypeScript seria:

const list = [1, 2, 3, 4, 5];
const listLength = list.length;
const lastItemIndex = listLength - 1;
const lastItem = list[lastItemIndex]; // 5

Já em Dart, possuímos uma vantagem de a própria linguagem fornecer uma solução mais simples. Toda lista possui uma propriedade chamada first e outra chamada last. As duas retornam o primeiro e o último item, respectivamente.

Com essa facilidade, a lógica para obter o último item seria:

final list = [1, 2, 3, 4, 5];
final lastItem = list.last; // 5

Sendo igualmente simples obter o primeiro item:

final list = [1, 2, 3, 4, 5];
final firstItem = list.first; // 5

Removendo itens

A remoção de itens presentes em listas é possível em ambas linguagens. Contudo, Dart possui mais uma vantagem sobre TypeScript. Isso porque TypeScript não provê um método específico para remoção de um item, mas um método para remoção de um ou mais itens.

Em TypeScript temos o método splice. Esse método pode receber (além de outras coisas) dois parâmetros para sua execução. O primeiro sendo o índice do elemento a ser removido e o segundo se refere a quantos elementos serão removidos a partir desse referenciado pelo índice.

Com isso, quando quisermos remover o item na posição 2 da lista devemos não só informar o valor 2 como parâmetro, mas também o valor 1 no segundo parâmetro. Exemplo:

const list = [1, 2, 3, 4, 5];
list.splice(2, 1);

Já em Dart, basta usarmos o método removeAt informando o índice do item a ser removido:

final list = [1, 2, 3, 4, 5];
list.removeAt(2);

Iterando sequencialmente nos elementos

Agora veremos como realizar uma das tarefas mais básicas, e talvez mais usadas, ao lidarmos com listas: Iterar.

Nesse quesito, ambas as linguagens possuem sintaxes muito similares. Ambas possuem diversas funções para realizar essa operação, incluindo o famoso for e métodos mais complexos como o map. Porém, veremos a mais simples de usar em casos corriqueiros.

Começando com Dart, temos o for..in. Onde, no corpo da instrução (entre as chaves - { e }) podemos fazer a operação que desejamos em cada item:

final list = [1, 2, 3, 4, 5];
for (final item in list) {
  print(item);
}

Em TypeScript também temos disponível a instrução for..in:

const list = [1, 2, 3, 4, 5];
for (const item in list) {
  console.log(item);
}

Mas o comportamento dela é bem diferente do imaginado. Ao invés de a variável item vir preenchida com o valor do elemento, vem com o índice deste. Portanto, o correto a ser utilizado nesse caso é a instrução for..of:

const list = [1, 2, 3, 4, 5];
for (const item of list) {
  console.log(item);
}

Verificando a existência de um item específico

Não é incomum termos de iterar em uma lista para verificar se um determinado item está presente. Como no exemplo em TypeScript onde verificamos se existe algum item maior do que 3:

const list = [1, 2, 3, 4, 5];
let hasItemGreaterThanThree = false;
for (const item of list) {
  if (item > 3) {
    hasItemGreaterThanThree = true;
  }
}

Contudo, dependendo da lista, essa operação pode ser bastante trabalhosa e pouco performática. Para isso temos métodos específicos. Em Dart temos o método any, onde podemos passar um predicado como parâmetro a ser utilizado como condição:

final list = [1, 2, 3, 4, 5];
final hasItemGreaterThanThree = list.any((item) => item > 3);

Em TypeScript, temos o método some:

const list = [1, 2, 3, 4, 5];
const hasItemGreaterThanThree = list.some((item) => item > 3);

Esses métodos são altamente recomendados porque não precisam iterar a lista inteira. Ao encontrar o primeiro item que satisfaça a condição, a execução é interrompida e true é retornado.

Filtrando itens

Além de verificar se um item existe na lista, iterar em uma lista também pode ser útil para obtermos itens de acordo com certa condição. No exemplo, em Dart, estamos adicionando a uma nova lista chamada itemsLessThanThree os itens com valor menos a 3:

final list = [1, 2, 3, 4, 5];
final itemsLessThanThree = [];
for (final item in list) {
  if (item < 3) {
    itemsLessThanThree.add(item);
  }
}

Mas, novamente, temos funções mais apropriadas para isso. Em Dart temos o método where:

final list = [1, 2, 3, 4, 5];
final itemsLessThanThree = list.where((item) => item < 3);

E, em TypeScript, temos o método filter:

const list = [1, 2, 3, 4, 5];
const itemsLessThanThree = list.filter((item) => item < 3);

Conclusão

Com isso finalizamos nossa simples comparação entre TypeScript e Dart ao lidarmos com coleções iteráveis. Onde podemos ver algumas vantagens do Dart nesse quesito.

Existem mais funcionalidades que podem ser exploradas para nos ajudar no dia-a-dia. Algumas dessas podem ser conferidas na sessão Referências.

Obrigado. E até o próximo artigo!

Referências

TypeScript vs Dart - Interfaces

Wil Marques — Sat, 31 Jul 2021 20:35:45 +0000

Nesse artigo falaremos brevemente sobre a utilização de interfaces em TypeScript e como Dart provê a mesma funcionalidade.

TypeScript
Dart
Bônus
Conclusão

TypeScript

Assim como eu muitas linguagens, TypeScript possui suporte a interfaces. Uma funcionalidade muito utilizada para criarmos contratos onde há a comunicação entre dois ou mais componentes de software.

Para exemplificar, vamos criar uma função em TypeScript. Essa função irá receber um nome e um sobrenome. E retornará o nome inteiro:

function joinNames(firstName: string, lastName: string): string {
  return `${firstName} ${lastName}`;
}
const fullName = joinNames('Wiley', 'Marques');
console.log(fullName); // 'Wiley Marques'

Abrir no TypeScript Playground

Agora, para exemplificar o uso de uma interface, vamos alterar o recebimento de parâmetros na função. Ao invés de receber firstName e lastName, vamos passar a receber um objeto contendo essas duas propriedades.

Para isso, criaremos a interface Person com essas propriedades. Alteraremos a função para receber um objeto com o tipo sendo a interface. E alteraremos a forma de executar a função passando um objeto condizente com a interface:

interface Person {
  firstName: string;
  lastName: string;
}

function joinNames(person: Person): string {
  return `${person.firstName} ${person.lastName}`;
}

const fullName = joinNames({
  firstName: 'Wiley',
  lastName: 'Marques',
});

console.log(fullName); // 'Wiley Marques'

Abrir no TypeScript Playground

Criamos a interface e fizemos a função joinNames recebê-la como parâmetro. Mas interfaces não são usadas apenas para definir as assinaturas de funções. Também são usadas para definir um contrato a ser seguido por classes em um software. Então vamos modificar o exemplo acima para demonstrar essa utilização.

Criaremos uma classe de nome Wiley para realizar a criação de um objeto. Como o objeto será usado como parâmetro para a função joinNames, ele deverá respeitar o contrato (ou interface) Person. Portanto teremos de implementar a interface Person na classe Wiley e definir propriedades correspondentes às esperadas pela interface. Tendo o seguinte código:

interface Person {
  firstName: string;
  lastName: string;
}

class Wiley implements Person { // Implementando a interface `Person`

  // Definindo as propriedades requeridas na interface
  public firstName: string = 'Wiley';
  public lastName: string = 'Marques';

  // Podemos adicionar qualquer outra propriedade
  public hasChildren: boolean = true;
}

function joinNames(person: Person): string {
  return `${person.firstName} ${person.lastName}`;
}

const wiley = new Wiley(); // Criando um objeto `Wiley`
const fullName = joinNames(wiley); // Passando `wiley` para a função

console.log(fullName);

Abrir no TypeScript Playground

Como podemos ver, apesar de o objeto wiley ser do tipo Wiley, podemos utilizá-lo como parâmetro para a função joinNames. Isso se deve ao fato de a classe Wiley implementar a interface Person e a função joinNames estar preparada para receber qualquer objeto que implemente Person.

Dart

Agora vejamos como Dart funciona nesse quesito.

Dart possui uma extensa documentação sobre todas as funcionalidades disponíveis na linguagem. Essa documentação pode ser vista em: A tour of the Dart language. Lá podemos ver que em Dart não existe uma forma explícita para criação interfaces. A alternativa ofertada pela linguagem é a utilização de Classes Abstratas.

Em Dart, existe um conceito chamado de Interface Implícita. Basicamente, qualquer classe também é implicitamente uma interface! Portanto, qualquer classe (abstrata ou não) pode ser implementada por outra quando necessário.

Indo ao código e seguindo a recomendação da documentação, a classe abstrata Person ficaria assim:

abstract class Person {
  String get firstName;
  String get lastName;
}

Um ponto a se notar aqui é que, além de usarmos uma classe abstrata, foi necessário um getter ao invés de uma simples propriedade.

Agora, continuando o exercício, vamos converter o último exemplo da sessão anterior para Dart. Ficando com o seguinte código:

abstract class Person {
  String get firstName;
  String get lastName;
}

class Wiley implements Person { // Classe `Wiley` implementando classe `Person`
  String firstName = 'Wiley';
  String lastName = 'Marques';
  bool hasChildren = true;
}

String joinNames(Person person) {
  return '${person.firstName} ${person.lastName}';
}

void main() {
  final wiley = new Wiley();
  final fullName = joinNames(wiley);
  print(fullName);
}

Abrir no Dart Pad

Assim temos uma Classe Abstrata sendo utilizada como uma definição de contrato.

Bônus

Vamos acrescentar uma curiosidade interessante. Em TypeScript, as classes também possuem interfaces implícitas! Com isso, também é possível definir uma classe abstrata e a utilizarmos como um contrato, semelhante a como fizemos em Dart.

Em código, a classe abstrata ficaria assim:

abstract class Person {
  abstract get firstName(): string;
  abstract get lastName(): string;
}

E o exemplo inteiro seria:

abstract class Person {
  abstract get firstName(): string;
  abstract get lastName(): string;
}

class Wiley implements Person {
  public firstName: string = 'Wiley';
  public lastName: string = 'Marques';
  public hasChildren: boolean = true;
}

function joinNames(person: Person): string {
  return `${person.firstName} ${person.lastName}`;
}

const wiley = new Wiley();
const fullName = joinNames(wiley);

console.log(fullName);

Abrir no TypeScript Playground

Ou seja, TypeScript dá suporte às duas formas!

Conclusão

Vimos como implementar interfaces em TypeScript e qual a alternativa proposta por Dart. Além de vermos como TypeScript oferece o mesmo suporte a interfaces implícitas presentes em Dart.

Nos próximos artigos, veremos outras comparações. Obrigado. E até logo!

TypeScript vs Dart - Declaração de Variáveis

Wil Marques — Sat, 19 Jun 2021 14:59:43 +0000

TypeScript, por ser apenas uma camada em cima do JavaScript, traz as mesmas três formas de declaração de variáveis:

var
let
const

Dart também possui três formas, mas um pouco diferentes:

var
final
const

Vamos ver essas diferenças.

Todos os exemplos podem ser executados no TypeScript Playground, no caso do TypeScript, e no DartPad, para Dart.

Declaração de variáveis em TypeScript

let e const são formas relativamente novas, introduzidas para resolver alguns problemas inerentes a var. Mas vamos começar com algumas características do var para entendermos o porquê de let e const serem criados.

Confusões do `var` em TypeScript

A primeira característica confusa de var é a possibilidade de declarar a mesma variável várias vezes. Ou, em outras palavras, declarar múltiplas variáveis com o mesmo nome:

var x = 10;
var x = 15; // Variável `x` foi criada novamente

Além disso, podemos atribuir um valor a uma variável antes mesmo de ela ter sido declarada:

x = 15; // Atribuindo valor à variável `x` antes de sua declaração
var x; // Declaração da variável

Curiosidade: Essa característica está ligada a como funciona Hoisting em JavaScript.

Normalmente, o maior ponto de confusão diz respeito ao escopo de uma variável declarada com var. Com escopo queremos dizer em qual parte do código a variável pode ser usada. Em diversas linguagens o escopo é por bloco (exemplo: if) onde a variável foi declarada, mas var em TypeScript tem o escopo por função.

Por exemplo, podemos declarar uma variável dentro de um if e usá-la fora:

if (false) {
  var x = 15; // Declarando variável dentro do `if`
}
x = 10; // Acessando variável

Isso acontece porque, como dito acima, o escopo de var é por função e não por bloco. Para ficar mais claro, usemos como exemplo o mesmo código acima com uma função:

function myFunction(): number {
  if (false) {
    var x = 15; // Declarando variável dentro do `if`
  }
  x = 10; // Variável pode ser acessada em qualquer parte da função `myFunction`
  return x;
}

Como pudemos ver, var em TypeScript tem alguns pontos de confusão que, se não bem entendidos, podem trazer problemas ao código. Não é incomum introduzirmos erros no programa por conta disso. Além disso, desenvolvedores com conhecimento em outras linguagens não esperam esses comportamentos.

Na tentativa de resolver esses problemas, let e const foram introduzidos.

`let` to the rescue

Basicamente, o let funciona como o var mas com os problemas corrigidos. Com isso, geralmente, devemos deixar de usar var e utilizarmos apenas let e const. Vamos recapitular os pontos levantados anteriormente e ver como let se comporta.

Vamos começar declarando a mesma variável duas vezes:

let x = 10;
let x = 15; // Error: Cannot redeclare block-scoped variable 'x'

Ao executar esse código, o compilador do TypeScript informa que a variável já havia sido declarada anteriormente.

Próximo ponto, atribuir um valor a uma variável antes de sua declaração:

x = 15; // Error: Block-scoped variable 'x' used before its declaration
let x;

Novamente o compilador mostra um erro, onde é apontado o uso da variável antes da sua declaração.

Agora um dos maiores pontos de confusão no var. Escopo baseado em função. O que acontece se pegarmos o mesmo código usado anteriormente trocando var por let?

function myFunction(): number {
  if (false) {
    let x = 15;
  }
  x = 10; // Error: Cannot find name 'x'
  return x;
}

Aqui é evidenciada a diferença de escopo entre let e var. No exemplo acima a variável x foi declarada dentro de um bloco de código (if), estando disponível apenas neste bloco. Isso se deve ao fato de let ter o escopo por bloco, não por função.

A vida nem sempre é uma `const`

Assim como let, const se comporta da mesma maneira explicada no tópico anterior. Seu escopo também é por bloco, não é possível redeclaração e nem utilizá-la antes da declaração. A diferença entre os dois está na atribuição. Onde em const só pode ser feita uma única vez.

Por exemplo, com let podemos alterar o valor de uma variável indefinidamente:

let x = 10; // Iniciada com 10
x = 15; // Alterando para 15

Com const, isso não é mais possível. Uma vez criada, seu valor não pode ser alterado:

const x = 10;
x = 15; // Error: Cannot assign to 'x' because it is a constant

É importante ressaltar que apesar de a atribuição só poder ser realizada uma vez, const não torna o valor imutável. Caso o valor da variável for um objeto, suas propriedades ainda podem ser alteradas:

const person = {
  age: 23,
};
person.age = 30; // É possível alterar o valor de uma propriedade normalmente

Uma boa prática em programação é não reutilizar uma mesma variável para diferentes significados. Trazendo uma maior legibilidade ao código. const ajuda a reforçar esse conceito, por não permitir esse reuso. Com isso, podemos sempre codificar com const, usando let apenas onde for realmente necessário.

Declaração de variáveis em Dart

Após entendermos sobre a declaração de variáveis em TypeScript, vamos abordar Dart.

Chamando o `var`

Assim como fizemos na sessão onde abordamos let em TypeScript, vamos realizar os testes demonstrando as inconsistências de var em TypeScript. Porém agora vamos executar com Dart.

Declarando a mesma variável duas vezes:

var x = 10;
var x = 15; // Error: The name 'x' is already defined

Assim como em let para TypeScript, o compilador do Dart não deixa declarar a variável mais de uma vez.

Agora atribuindo um valor a uma variável antes de sua declaração:

x = 15; // Error: Local variable 'x' can't be referenced before it is declared
var x;

Novamente o compilador mostra um erro, onde é apontado o uso da variável antes da sua declaração.

Por último, o teste relacionado ao escopo de uma variável:

int myFunction() {
  if (false) {
    var x = 15;
  }
  x = 10; // Error: Undefined name 'x'
  return x;
}

Com esses testes, podemos ver que var em Dart se comporta como let em TypeScript. Agora vejamos final.

Todo `final` é feliz?

Dart tem duas formas de variáveis constantes: final e const. Começando com a primeira forma, final em Dart é semelhante a const em TypeScript.

Com isso, a variável só pode ter valor atribuído uma vez:

final x = 10;
x = 15; // Error: The final variable 'x' can only be set once

Assim como const em TypeScript, final em Dart não torna o valor da variável imutável. Ainda é possível ser alterado como seja algum tipo complexo:

final person = {
  'age': 23,
};
person['age'] = 30;

Últimas `const`atações

Nos sobrou a última forma para declaração de variáveis em Dart. const é mais uma forma de criar variáveis de atribuição única. Inclusive, const implicitamente também é final. Porém há uma diferença.

const faz o valor ser imutável em tempo de compilação. Com isso, o compilador garante que o valor de uma variável definida com const nunca seja alterado.

Para ficar mais claro, ao escrevermos o mesmo exemplo anterior com const, não recebemos qualquer erro durante a digitação:

const person = {
  'age': 23,
};
person['age'] = 30;

Porém ao executar, o compilador dispara um erro: Unsupported operation: Cannot modify unmodifiable Map. Nos mostrando que tentamos alterar um valor não modificável.

Podemos dizer então que const em Dart garante Imutabilidade!

Para saber mais sobre esses conceitos, veja o Language Tour de Dart.

Conclusão

Para concluir, podemos resumir:

Nunca usar var em TypeScript
var em Dart é igual a let em TypeScript
final em Dart é igual a const em TypeScript
const em Dart garante imutabilidade em tempo de compilação

Até o próximo artigo!

Java JDK e Maven em MacOS sem administrador

Wil Marques — Tue, 07 Apr 2020 14:01:43 +0000

Faremos a instalação da JDK e do Maven em um MacOS, para desenvolvimento de projetos Java.

Por se tratar de uma instalação para usuários sem privilégios de administrador, tanto a JDK quanto o Maven ficarão disponíveis apenas para o usuário corrente.

Boa parte desse tutorial envolve a utilização de um Terminal, já incluso no Sistema Operacional.

JDK

Começaremos com a instalação da JDK.

Entre no link https://adoptopenjdk.net/releases.html, escolha a versão e o sistema operacional.

Realize o download da JDK em formato .tar.gz, pois o .pkg necessitará de privilégios.

Após o término, entre pelo Terminal no diretório onde o pacote foi baixado e o descompacte com o comando:

tar -xvf OpenJDK11U-jdk_x64_mac_hotspot_11.0.6_10.tar.gz

O arquivo acima diz respeito a versão 11 da JDK, o nome pode ser diferente de acordo com a versão escolhida.

Mova o pacote descompactado para o diretório onde as versões da JDK devem ser instaladas:

mv jdk-11.0.6+10 $HOME/Library/Java/JavaVirtualMachines

Lembrando que o arquivo acima diz respeito a versão 11 da JDK, o nome pode ser diferente de acordo com a versão escolhida.

A fim de o Sistema Operacional encontrar a JDK, deve ser configurada uma variável de ambiente chamada JAVA_HOME.

Basta incluir a seguinte linha no arquivo de configuração do seu shell atual (ex: Bash ou ZSH), se atentando ao número da versão escolhida durante o download:

export JAVA_HOME=`/usr/libexec/java_home -v 11`

No caso do bash, o arquivo é $HOME/.bash_profile. Se estiver usando ZSH, o arquivo é $HOME/.zshrc.

Essa edição pode ser realizada diretamente no Terminal usando o Vim ou no seu editor preferido.

Feche o Terminal, abra de novo e execute o comando a seguir para verificar se a instalação foi concluída com sucesso:

java -version

Caso esteja tudo funcionando, o resultado será o seguinte:

openjdk version "11.0.6" 2020-01-14
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.6+10)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.6+10, mixed mode)

Maven

Após o Java estar instalado e configurado, podemos seguir com a instalação do Maven.

Entre no link http://maven.apache.org/download.cgi e realize o download do arquivo onde sua descrição está como Binary tar.gz archive, se tratando de um formato .tar.gz como fizemos com a JDK.

Após o download, entre pelo Terminal no diretório onde o pacote foi baixado e o descompacte com o comando:

tar -xvf apache-maven-3.6.3-bin.tar.gz

No exemplo acima o nome do arquivo diz respeito à versão 3.6.3.

Mover a pasta extraída para o diretório do usuário corrente:

mv apache-maven-3.6.3 $HOME

Novamente, no exemplo acima o nome do arquivo diz respeito à versão 3.6.3.

Assim como a JDK, uma variável de ambiente deve ser declarada acrescentando as seguintes linhas no arquivo de configuração do shell:

export M2_HOME=$HOME/apache-maven-3.6.3
export PATH=$PATH:$M2_HOME/bin

Para verificar se a instalação foi realizada com sucesso, feche o terminal, abra-o novamente e execute:

mvn -version

Caso seja positivo, o resultado será algo como:

Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: $HOME/apache-maven-3.6.3
Java version: 11.0.6, vendor: AdoptOpenJDK, runtime: $HOME/Library/Java/JavaVirtualMachines/jdk-11.0.6+10/Contents/Home
Default locale: pt_BR, platform encoding: UTF-8
OS name: "mac os x", version: "10.14.6", arch: "x86_64", family: "mac"

Conclusão

Com a JDK e o Maven instalados, já podemos utilizar uma IDE ou editor para criar os projetos.

Lembrando, novamente, que por se tratar de uma instalação para usuários sem privilégios de administrador, ficará disponível apenas para o usuário corrente.

Qualquer dúvida, escreva nos comentários!

Angular Elements - Implementação Básica

Wil Marques — Wed, 20 Nov 2019 21:04:38 +0000

Após a explicação do conceito envolvendo Angular Elements (incluindo referências), vou demonstrar como implementar um componente simples.

O que será feito

Utilizaremos a Angular CLI para criar uma aplicação e convertê-la para Angular Elements.

Teremos como base o exemplo disponível no tutorial do Angular, Tour of Heroes.

Porém, para simplificar o processo, nesse primeiro momento criaremos apenas a listagem e adição de heróis, não o dashboard.

Nesse exemplo, uma aplicação Angular comum terá a responsabilidade de inclusão dos heróis, enquanto um Angular Elements exibirá a listagem.

Ilustração do que será construído:

Configuração do ambiente

Antes de tudo, devemos ter um ambiente corretamente configurado para o processo ocorrer conforme o esperado.

Mais detalhes sobre a configuração do ambiente podem ser obtidos na documentação oficial.

Node e NPM

A versão 10 do Node é a atualmente recomendada, tanto pelo Angular quanto pela própria equipe do Node.

Uma ótima opção para realizar a instalação é usar algum gerenciador, por exemplo nvm ou nvs, porém o site oficial tem instruções para instalação em cada sistema operacional.

A vantagem em usar um gerenciador é a facilidade de atualização e possibilidade em se ter diferentes versões do Node em um mesmo equipamento.

O Node 8 não é mais recomendado, principalmente por estar chegando no fim do seu ciclo de vida.

O NPM é instalado em conjunto com o Node, sendo 6 a versão mais atual.

Angular CLI

Para instalar a Angular CLI, basta executar o seguinte comando na linha de comando:

npm install -g @angular/cli@^8

Após a instalação, execute esse comando para verificar o correto funcionamento:

ng version

Resultado do comando:

Criação do projeto

Workspace

A CLI do Angular possibilita a criação de diversos projetos dentro de um mesmo workspace, para simplificar a criação de monorepos.

Para usufruirmos dessa funcionalidade, antes iniciaremos um workspace limpo (sem projetos) utilizando o comando ng new:

ng new ng-elements --createApplication=false

Aplicação inicial

Após o workspace ser criado, entraremos nele e adicionaremos uma aplicação simples com o seguinte:

cd ng-elements
ng generate application heroes-creator --minimal=true --prefix=hc --routing=false --style=css

No comando acima, o parâmetro --minimal=true cria a aplicação sem a inicialização dos testes unitários e testes funcionais.

O parâmetro --prefix=hc define hc como prefixo para todos os componentes criados nessa aplicação, por exemplo <hc-novo-heroi>.

--routing=false cria a aplicação sem roteamento.

Já --style=css cria o projeto sem um pré-processador de CSS.

A execução do comando ng generate criará uma pasta projects, adicionará o projeto de nome heroes-creator e alterará o arquivo angular.json com uma configuração para esse projeto especificamente.

Também modificará o arquivo package.json adicionando as dependências necessárias para a sua execução e as instalará.

Além disso, esse novo projeto passará a ser o padrão para qualquer comando executado neste workspace.

Executando a aplicação

Após a aplicação ser criada, podemos executá-la com o seguinte comando:

ng serve

Tendo o seguinte resultado:

E com isso podemos abrir o endereço http://localhost:4200/ no navegador e ver a aplicação em execução:

Criação de heróis

Componente principal

Agora que já temos uma aplicação (exemplo) funcional, podemos alterá-la para ficar de acordo com o esperado.

Todo o código dessa aplicação fica no diretório src em heroes_creator, localizado na pasta projects, como a seguir:

Dentro da pasta src, encontramos a app onde está contido o componente e o módulo principal da aplicação, app.component.ts e app.module.ts:

Antes de tudo, substituiremos o conteúdo do arquivo app.module.ts para:

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

import { AppComponent } from './app.component';

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

E o conteúdo do arquivo app.component.ts para:

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

@Component({
  selector: 'hc-root',
  template: `
    <h1>My Heroes</h1>
    <hc-creator (newHero)="addHero($event)"></hc-creator>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `,
})
export class AppComponent {

  heroes: Array<string> = [];

  addHero(newHero: string): void {
    this.heroes = [
      ...this.heroes,
      newHero,
    ];
  }

}

Prestando atenção ao código acima, podemos ver uma referência a um componente ainda não criado, hc-creator. O criaremos agora utilizando os comandos da Angular CLI:

ng generate component creator --inlineStyle=true --inlineTemplate=true --skipTests=true --flat=true

Os parâmetros usados acima fazem com que apenas um arquivo seja criado, contendo o template e styles ao invés de arquivos separados para cada um.

Também não serão criados testes unitários, além de o arquivo ser criado na raiz do projeto, ao invés de estar contido em uma pasta própria.

Exemplo do resultado do comando sem os parâmetros:

Exemplo com os parâmetros:

Após esse componente ser criado, mude o conteúdo do seu arquivo creator.component.ts para:

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

@Component({
  selector: 'hc-creator',
  template: `
    <div>
      <label>Hero name:
        <input #heroName />
      </label>
      <button (click)="add(heroName.value); heroName.value=''">
        add
      </button>
    </div>
  `,
  styles: [`
    button {
      background-color: #eee;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      cursor: hand;
      font-family: Arial;
    }

    button:hover {
      background-color: #cfd8dc;
    }
  `]
})
export class CreatorComponent {

  @Output() newHero = new EventEmitter<string>();

  add(heroName: string): void {
    if (heroName) {
      this.newHero.emit(heroName);
    }
  }

}

Com isso, podemos executar o projeto:

ng serve

E visualizar o resultado no navegador:

Lista de heróis

Finalmente podemos iniciar a criação do componente usando Angular Elements.

Este componente receberá a lista de heróis contida no componente principal por parâmetro e a exibirá conforme a ilustração apresentada no início do artigo.

Antes de tudo, vamos criar um novo projeto no atual workspace, porém dessa vez criaremos uma biblioteca onde o componente ficará contido. Além de ser uma biblioteca e não uma aplicação, definemos o prefixo dos seus componentes como hv, a fim de diferenciarmos mais facilmente durante o desenvolvimento:

ng generate library heroes-visualizer --prefix=hv

Após a execução do comando acima, o projeto será criado na pasta projects e o arquivo angular.json será modificado adicionando uma nova configuração específica para ele. Como podemos ver a seguir:

A CLI do Angular ainda não nos dá opção de gerar bibliotecas com uma configuração mínima, semelhante ao que fizemos com a aplicação inicial. Portanto vamos excluir os seguintes arquivos desnecessários:

projects/heroes-visualizer/src/lib/heroes-visualizer.component.spec.ts
projects/heroes-visualizer/src/lib/heroes-visualizer.service.ts
projects/heroes-visualizer/src/lib/heroes-visualizer.service.spec.ts

Como não realizaremos qualquer tipo de teste, poderíamos excluir os arquivos karma.conf.js e src/test.ts, além de remover a configuração para execução de testes.

Porém em nada atrapalharão e não nos preocuparemos para não prolongar o artigo.

Como utilizo Ubuntu, executo o seguinte comando no Bash para excluir os arquivos:

rm -rf projects/heroes-visualizer/src/lib/heroes-visualizer.service.ts projects/heroes-visualizer/src/lib/*.spec.ts

Caso utilize outro Sistema Operacional, o comando pode variar.

Após a exclusão desses arquivos, vamos alterar o conteúdo do arquivo public-api.ts presente na pasta projects/heroes-visualizer/src/ para:

/*
 * Public API Surface of heroes-visualizer
 */

export * from './lib/heroes-visualizer.component';
export * from './lib/heroes-visualizer.module';

Com isso, podemos utilizar na aplicação principal (heroes-creator) o componente previamente criado nesta biblioteca, modificando o arquivo projects/heroes-creator/src/app/app.module.ts para:

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

import { AppComponent } from './app.component';
import { CreatorComponent } from './creator.component';

import { HeroesVisualizerModule } from 'heroes-visualizer';

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

E o arquivo projects/heroes-creator/src/app/app.component.ts para:

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

@Component({
  selector: 'hc-root',
  template: `
    <h1>My Heroes</h1>
    <hc-creator (newHero)="addHero($event)"></hc-creator>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
    <hv-heroes-visualizer></hv-heroes-visualizer>
  `,
})
export class AppComponent {

  heroes: Array<string> = [];

  addHero(newHero: string): void {
    this.heroes = [
      ...this.heroes,
      newHero,
    ];
  }

}

Assim, podemos executar o projeto para verificar o resultado no navegador, mas antes precisamos compilar a biblioteca com o comando:

ng build heroes-visualizer

Dessa forma, ao executar o projeto (ng serve) temos o seguinte resultado no navegador:

Agora vamos modificar alguns arquivos para transferir a exibição dos heróis para o componente hv-heroes-visualizer, além de já implementarmos uma funcionalidade de remoção de determinados heróis.

Primeiramente, altere o conteúdo do arquivo projects/heroes-visualizer/src/lib/heroes-visualizer.component.ts para:

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

@Component({
  selector: 'hv-heroes-visualizer',
  template: `
    <ul class="heroes">
      <li *ngFor="let hero of heroes">
        <span class="badge">{{hero.id}}</span>
        <span class="hero-name">{{ hero }}</span>
        <button class="delete" title="delete hero"
          (click)="delete(hero)">x</button>
      </li>
    </ul>
  `,
  styles: [`
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      position: relative;
      cursor: pointer;
      background-color: #EEE;
      margin: .5em;
      padding: .5em 0 .3em 1em;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }

    .heroes span.hero-name {
      color: #333;
      position: relative;
      display: block;
      width: 250px;
    }
    .heroes span.hero-name:hover {
      color:#607D8B;
    }

    button {
      background-color: #eee;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      cursor: hand;
      font-family: Arial;
    }
    button.delete {
      position: relative;
      left: 174px;
      top: -23px;
      background-color: gray !important;
      color: white;
    }
  `]
})
export class HeroesVisualizerComponent {

  @Input() heroes: Array<string>;

  @Output() deleteHero = new EventEmitter<string>();

  delete(heroName: string): void {
    if (heroName) {
      this.deleteHero.emit(heroName);
    }
  }

}

Do arquivo projects/heroes-visualizer/src/lib/heroes-visualizer.module.ts para:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeroesVisualizerComponent } from './heroes-visualizer.component';

@NgModule({
  declarations: [HeroesVisualizerComponent],
  imports: [
    CommonModule,
    FormsModule,
  ],
  exports: [HeroesVisualizerComponent],
})
export class HeroesVisualizerModule { }

Do arquivo projects/heroes-creator/src/app/app.component.ts para:

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

@Component({
  selector: 'hc-root',
  template: `
    <h1>My Heroes</h1>
    <hc-creator (newHero)="addHero($event)"></hc-creator>
    <hv-heroes-visualizer [heroes]="heroes" (deleteHero)="deleteHero($event)"></hv-heroes-visualizer>
  `,
})
export class AppComponent {

  heroes: Array<string> = [];

  addHero(newHero: string): void {
    this.heroes = [
      ...this.heroes,
      newHero,
    ];
  }

  deleteHero(heroToDelete: string): void {
    this.heroes = this.heroes.filter((hero: string) => {
      return hero !== heroToDelete;
    });
  }

}

E do arquivo projects/heroes-creator/src/app/app.module.ts para:

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

import { AppComponent } from './app.component';
import { CreatorComponent } from './creator.component';

import { HeroesVisualizerModule } from 'heroes-visualizer';

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

Agora podemos compilar novamente a biblioteca (ng build heroes-visualizer) e executar o projeto principal (ng serve), tendo o seguinte resultado:

Convertendo lista de heróis em Angular Elements

Até agora, criamos um projeto principal sendo uma aplicação Angular comum e uma bibliote
ca de componentes onde a listagem dos heróis está contida.

Porém até o momento, não temos qualquer utilização de Angular Elements em qualquer desses p
rojetos. E será isso que faremos agora, convertendo a biblioteca heroes-visual izer em Angular Elements.

Primeiramente, devemos adicionar o suporte a Angular Elements ao projeto principal, já que ele será o responsável por exibir o componente exportado como tal. Para isso, basta executar o comando:

ng add @angular/elements

Esse comando adiciona o polyfill de Custom Elements e o pacote @angular/elements ao workspace.

Vamos alterar o arquivo projects/heroes-visualizer/src/lib/heroes-visualizer.module.ts para o seguinte:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeroesVisualizerComponent } from './heroes-visualizer.component';

@NgModule({
  declarations: [HeroesVisualizerComponent],
  imports: [
    CommonModule,
    FormsModule,
  ],
  entryComponents: [HeroesVisualizerComponent],
})
export class HeroesVisualizerModule { }

A alteração diz respeito a remover o componente dessa biblioteca da listagem de exports para entryComponents, a fim de este não fazer parte da compilação principal da aplicação, já que iremos utilizá-lo como um Angular Elements.

Agora precisamos registrar esse componente como um Custom Element, utilizando as APIs providas pelo pacote @angular/elements, mais especificamente o método createCustomElement.

Esse registro será realizado no componente principal da aplicação, alterando o arquivo projects/heroes-creator/src/app/app.component.ts para o seguinte:

import { Component, Injector, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { HeroesVisualizerComponent } from 'heroes-visualizer';

@Component({
  selector: 'hc-root',
  template: `
    <h1>My Heroes</h1>
    <hc-creator (newHero)="addHero($event)"></hc-creator>
    <hvce-heroes-visualizer [heroes]="heroes" (deleteHero)="deleteHero($event.detail)"></hvce-heroes-visualizer>
  `,
})
export class AppComponent implements OnInit {

  heroes: Array<string> = [];

  constructor(
    private injector: Injector,
  ) { }

  ngOnInit(): void {
    const HeroesVisualizerElementDefinition = createCustomElement(
      HeroesVisualizerComponent,
      { injector: this.injector },
    );
    customElements.define('hvce-heroes-visualizer', HeroesVisualizerElementDefinition);
  }

  addHero(newHero: string): void {
    this.heroes = [
      ...this.heroes,
      newHero,
    ];
  }

  deleteHero(heroToDelete: string): void {
    this.heroes = this.heroes.filter((hero: string) => {
      return hero !== heroToDelete;
    });
  }

}

A mudança no componente acima se deu para usarmos a função createCustomElement do pacote @angular/elements para criar o que chamamos de Element Definition, ou o constructor, a ser utilizado pelo navegador para instanciar o que agora será basicamente um Custom Element.

Chamando essa função, o Angular cria a ponte entre as APIs nativas do navegador e as funcionalidades do próprio framework. Isso é necessário para ser possível utilizarmos funcionalidades como data binding, por exemplo.

Com esse Element Definition convertido e retornado pelo Angular, podemos o método customElements.define nativo do browser para que esse elemento seja devidamente registrado e disponível para ser usado na aplicação.

Esse método recebe 3 parâmetros, nome do elemento, Element Definition (ou construtor) e um objeto de opções. Porém nesse exemplo só foi necessário o uso dos dois primeiros.

Na linha com o conteúdo customElements.define('hvce-heroes-visualizer', HeroesVisualizerElementDefinition); podemos ver esses dois parâmetros serem informados para o método define.

Também podemos ver o nome informado sendo hvce-heroes-visualizer ao invés do que estávamos usando anteriormente, hv-heroes-visualizer. Isso porque nesse momento o nome definido no componente Angular não será usado e podemos escolher qualquer outro para o navegador utilizar na definição de um Custom Element. Poderíamos ter usado o mesmo nome, mas para ilustração usamos um diferente.

Outra diferença de um componente Angular comum é como recebemos os valores dos eventos disponibilizados neles através de Outputs.

No componente comum recebíamos o valor apenas recuperando o objeto $event:

<elemento (evento)="metodo($event)"></elemento>

Já com um Angular Element devemos utilizar a propriedade detail do evento, já que agora estamos lidando diretamente com Custom Events que devem seguir a especificação seguida pelos navegadores. Ficando assim:

<elemento (evento)="metodo($event.detail)"></elemento>

Mesmo após essas mudanças, ao executarmos a aplicação recebemos o seguinte erro:

Isso acontece porque o Angular está tentando encontrar a propriedade desse elemento como se fosse um componente comum, mas ele deve ser tratado como um Custom Element. E para que isso ocorra conforme o esperado, devemos adicionar o schema CUSTOM_ELEMENTS_SCHEMA ao módulo principal da aplicação.

Logo, vamos alterar o conteúdo do arquivo projects/heroes-creator/src/app/app.module.ts para:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CreatorComponent } from './creator.component';

import { HeroesVisualizerModule } from 'heroes-visualizer';

@NgModule({
  declarations: [
    AppComponent,
    CreatorComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HeroesVisualizerModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
})
export class AppModule { }

Com isso corrigido, podemos compilar novamente a biblioteca (ng build heroes-visualizer) e executar a aplicação normalmente (ng serve) para vermos o resultado:

Próximos passos

Essa foi uma implementação padrão de Angular Elements, sem nenhuma customização e indo não muito além do apresentado diretamente na documentação do Angular.

Dessa forma, como pode ter reparado, mesmo que o componente possa ser considerado um Custom Element, ele ainda precisa ser compilado e disponibilizado em conjunto com a aplicação.

Mas endereçaremos esse assunto nos próximos artigos!

No mais, sintam-se livres a comentar e contribur positivamente!

Angular Elements - Intro

Wil Marques — Sun, 03 Nov 2019 17:46:48 +0000

This series is going to cover how to use Angular Elements.

Starting with basic topics, much like the oficial documentation, and going to more advanced ones, like routing and micro front-ends.

Web Components

Micro front-end is a hot topic nowadays, but it still not so mature.

One (and most common) way to accomplish that is using web components, more specifically Custom Elements.

Although ever-green browsers have support for Custom Elements, sometimes we need to develop for older browsers.

There are already polyfills to adddress this problem, but we may face another problems like routing, state management, caching, and so on.

Angular Elements

Like any other development trend, frameworks and libraries are trying to solve all of that for us and making our lifes easier.

Obviously, what we are going to talk about in this series is the work Angular team is doing, Angular Elements.

Angular Elements basically works like a bridge between the browser APIs and the so many features provided by Angular itself.

How it works

When an Angular Element component is placed on a page, the browser creates an instance and adds it to the DOM.

After the element is instantiated, Angular takes control and provides it's content, data binding and change detection through Angular Template Syntax.

The image below illustrates that:

Conclusion

Using Angular Elements, we can create our own Custom Elements, which behaves just like native elements.

Here, in this first article, I shared a quick introduction, also giving some articles and documentations about the topic.

The next articles will be more code detailed, explaining how to implement it.

If you have any question or concern, just drop a comment. Thanks!

Angular Elements - Introdução

Wil Marques — Sun, 06 Oct 2019 22:49:30 +0000

Estou iniciando essa série de artigos com o intuito de demonstrar como utilizar Angular Elements.

Começando pelo básico, não indo muito além do já documentado no site oficial do Angular.

Finalizando com pontos mais avançados, como roteamento e micro front-ends.

Web Components

Micro front-end é um assunto bastante atual, porém ainda imaturo.

Uma das maneiras de se utilizar essa abordagem de desenvolvimento é usando web components, mais especificamente Custom Elements.

Apesar dessa funcionalidade estar disponível em navegadores mais atuais, comumente ainda temos que suportar outros navegadores.

Já estão disponíveis polyfills para cobrir esses cenários, porém a criação dos componentes é apenas um dos problemas enfrentados no desenvolvimento de aplicações.

Além dos componentes em si, temos de nos preocupar com roteamento, state management, caching, etc.

Angular Elements

Como qualquer outro assunto quando se trata de desenvolvimento, muitos frameworks/libraries estão tentando endereçar esses pontos criando abstrações a fim de facilitar todo esse trabalho.

O que será abordado nessa série é o trabalho realizado pelo time do Angular, Angular Elements.

Angular Elements basicamente funciona como uma ponte entre as APIs do browser e as diversas funcionalidades providas pelo Angular.

Ao inserir um elemento construído dessa maneira em uma página, o navegador o instancia e o adiciona ao DOM.

Em seguida, com esse elemento instanciado, o Angular assume o controle e provê o seu conteúdo, data binding e change detection através da sua Template Syntax.

A imagem abaixo (disponibilizada no site oficial) ilustra o explicado acima:

Conclusão

Esse artigo foi criado para dar uma introdução teórica, já direcionando o assunto com outros artigos e documentações a respeito do assunto.

Provavelmente os próximos artigos serão mais direcionados à implementação em si, com exemplos descritivos e funcionais.

Sintam-se livres a comentar, contribuindo positivamente!

DEV Community: Wil Marques

TypeScript vs Dart - Coleções iteráveis

O que são coleções iteráveis

Criando uma lista

Adicionando itens

Obtendo itens específicos

Removendo itens

Iterando sequencialmente nos elementos

Verificando a existência de um item específico

Filtrando itens

Conclusão

Referências

TypeScript vs Dart - Interfaces

TypeScript

Dart

Bônus

Conclusão

TypeScript vs Dart - Declaração de Variáveis

Declaração de variáveis em TypeScript

Confusões do var em TypeScript

let to the rescue

A vida nem sempre é uma const

Declaração de variáveis em Dart

Chamando o var

Todo final é feliz?

Últimas constatações

Conclusão

Java JDK e Maven em MacOS sem administrador

JDK

Maven

Conclusão

Angular Elements - Implementação Básica

O que será feito

Configuração do ambiente

Node e NPM

Angular CLI

Criação do projeto

Workspace

Aplicação inicial

Executando a aplicação

Criação de heróis

Componente principal

Lista de heróis

Convertendo lista de heróis em Angular Elements

Próximos passos

Angular Elements - Intro

Web Components

Angular Elements

How it works

Conclusion

Angular Elements - Introdução

Web Components

Angular Elements

Conclusão

Confusões do `var` em TypeScript

`let` to the rescue

A vida nem sempre é uma `const`

Chamando o `var`

Todo `final` é feliz?

Últimas `const`atações