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!