Parte 3: Angular Package Format (APF)

Exemplos de Bibliotecas Angular: Inspirando-se nas Melhores Práticas

Para solidificar nosso entendimento sobre o Angular Package Format, vamos explorar dois exemplos concretos de bibliotecas que o utilizam com maestria:

• @angular/core: O núcleo do framework Angular, contendo os componentes, diretivas, pipes e serviços essenciais para a construção de aplicações Angular.
• @angular/material: Uma biblioteca abrangente de componentes de interface do usuário, que segue as melhores práticas de design e acessibilidade.

Ao analisar a estrutura e o conteúdo desses pacotes npm, você pode se inspirar e aprender com as decisões de design e otimização tomadas pela equipe do Angular, aplicando-as em suas próprias bibliotecas.

Glossário: Desvendando os Termos do Universo Angular

Para navegar com segurança pelo universo do Angular Package Format, é essencial compreender os termos e conceitos que o permeiam. Este glossário oferece definições claras e concisas para os principais termos utilizados neste guia e em outros documentos relacionados ao desenvolvimento de bibliotecas Angular.

Pacote (Package)

O menor conjunto de arquivos que são publicados no npm e instalados juntos, por exemplo, @angular/core. Este pacote inclui um manifesto chamado package.json, código-fonte compilado, arquivos de definição TypeScript, source maps, metadados, etc. O pacote é instalado com o comando npm install @angular/core.

Imagine um pacote como uma cápsula espacial que contém todos os recursos e ferramentas necessários para uma missão específica. Ao instalar um pacote npm, você está embarcando essa cápsula em sua nave espacial Angular, adicionando novas funcionalidades e capacidades ao seu projeto.

Símbolo (Symbol)

Um símbolo é como um componente individual da sua nave espacial Angular, como um painel de controle, um motor de propulsão ou um sistema de comunicação. Ele pode ser uma classe, uma função, uma constante ou uma variável contida em um módulo e, opcionalmente, tornada visível para o mundo externo através de uma exportação de módulo.

Módulo (Module)

Um módulo é como um compartimento da sua nave espacial, que agrupa um conjunto de símbolos relacionados. No contexto do Angular Package Format, um módulo se refere especificamente a um arquivo contendo instruções import e export para importar e exportar símbolos, seguindo a definição de módulos na especificação ECMAScript.

ESM (ESM)

ESM é a abreviação de ECMAScript Modules (veja acima). É o formato de módulo padrão do JavaScript moderno, que permite a organização e a reutilização de código de forma eficiente e segura.

FESM (FESM)

FESM é a abreviação de Flattened ES Modules. É um formato de arquivo criado ao “achatar” todos os módulos ES acessíveis a partir de um ponto de entrada em um único módulo ES. Essa técnica otimiza o carregamento de código em navegadores, reduzindo o número de requisições e melhorando o desempenho da sua aplicação Angular.

Imagine o FESM como um processo de compactação que une todos os compartimentos da sua nave espacial em um único módulo compacto e eficiente, pronto para ser lançado ao espaço.

ID de Módulo (Module ID)

O ID de módulo é como o nome de um compartimento específico da sua nave espacial Angular. É o identificador utilizado nas instruções import para referenciar um módulo específico (por exemplo, @angular/core).

Embora o ID de módulo geralmente mapeie diretamente para um caminho no sistema de arquivos, isso nem sempre é verdade devido às diferentes estratégias de resolução de módulos.

Especificador de Módulo (Module Specifier)

Um especificador de módulo é simplesmente outro nome para um identificador de módulo (veja acima). É a string que você usa em uma instrução import para indicar qual módulo você deseja importar.

Estratégia de Resolução de Módulo (Module Resolution Strategy)

A estratégia de resolução de módulo é como um sistema de navegação que traduz os IDs de módulo em caminhos no sistema de arquivos. Diferentes ferramentas e ambientes de execução podem utilizar estratégias de resolução de módulo diferentes, o que pode levar a resultados inesperados se você não estiver ciente dessas diferenças.

• Node.js: Possui uma estratégia de resolução de módulo bem especificada e amplamente utilizada, baseada em caminhos relativos e absolutos, além de pacotes npm.
• TypeScript: Suporta várias estratégias de resolução de módulo, incluindo a estratégia do Node.js e outras personalizadas.
• Closure Compiler: Possui sua própria estratégia de resolução de módulo, que pode ser diferente das outras ferramentas.

Compreender as diferentes estratégias de resolução de módulo é fundamental para garantir que sua biblioteca Angular seja compatível com diferentes ferramentas e ambientes de execução, evitando erros e conflitos durante a importação de módulos.

Formato de Módulo e Bundle: A Estrutura e o Empacotamento da sua Nave Espacial

No universo Angular, a forma como os módulos são organizados e empacotados é crucial para garantir a compatibilidade, a otimização e a eficiência da sua biblioteca. O Angular Package Format define dois conceitos importantes relacionados a essa organização: o formato de módulo e o bundle.

Formato de Módulo: A Linguagem da sua Nave

O formato de módulo especifica a sintaxe utilizada para importar e exportar símbolos em um arquivo. Os formatos de módulo mais comuns são:

• CommonJS (CJS): Tradicionalmente utilizado em aplicações Node.js, o CJS utiliza a função require() para importar módulos e o objeto module.exports para exportar símbolos.
• ECMAScript Modules (ESM): O formato de módulo padrão do JavaScript moderno, que utiliza as palavras-chave import e export para importar e exportar símbolos.

O formato de módulo indica apenas o empacotamento dos módulos individuais, mas não os recursos da linguagem JavaScript utilizados para compor o conteúdo do módulo. Por isso, a equipe Angular costuma usar o especificador de nível de linguagem como um sufixo para o formato de módulo (por exemplo, ESM+ES2022 especifica que o módulo está no formato ESM e contém código ES2022).

Bundle: A Nave Espacial Compactada

Um bundle é um artefato na forma de um único arquivo JavaScript, produzido por uma ferramenta de build (como Webpack ou Rollup), que contém símbolos originados em um ou mais módulos. Os bundles são uma solução específica para navegadores, que reduz a carga na rede que seria causada se os navegadores começassem a baixar centenas ou até dezenas de milhares de arquivos individuais. O Node.js normalmente não usa bundles. Os formatos de bundle comuns são UMD e System.register.

Imagine o bundle como uma versão compactada da sua nave espacial, onde todos os módulos e componentes são agrupados em um único arquivo, facilitando o transporte e o carregamento no navegador do usuário.

Nível de Linguagem e Pontos de Entrada: A Tecnologia e a Arquitetura da sua Nave Espacial Angular

No universo Angular, a linguagem JavaScript e a organização dos módulos são elementos cruciais para o sucesso da sua biblioteca. O Angular Package Format define dois conceitos importantes relacionados a esses aspectos: o nível de linguagem e os pontos de entrada.

Nível de Linguagem: A Tecnologia da sua Nave

O nível de linguagem se refere à versão do ECMAScript (ES) utilizada no código da sua biblioteca. O Angular Package Format adota o ES2022 como padrão, garantindo que sua biblioteca utilize os recursos mais modernos e eficientes da linguagem JavaScript.

Imagine o nível de linguagem como a tecnologia utilizada na construção da sua nave espacial. Quanto mais moderno o nível de linguagem, mais avançados serão os sistemas e componentes da sua nave, permitindo que ela explore novas fronteiras e realize missões mais complexas.

Ponto de Entrada: A Porta de Acesso à sua Nave

Um ponto de entrada é um módulo que foi projetado para ser importado pelo usuário. Ele é referenciado por um ID de módulo único e exporta a API pública associada a esse ID. Exemplos de pontos de entrada são @angular/core e @angular/core/testing. Ambos existem no pacote @angular/core, mas exportam símbolos diferentes. Um pacote pode ter vários pontos de entrada, cada um com sua própria API pública e finalidade específica.

Imagine os pontos de entrada como as diferentes portas de acesso à sua nave espacial. Cada porta leva a um compartimento específico, com suas próprias ferramentas e recursos. Ao importar um ponto de entrada, o usuário está acessando um conjunto específico de funcionalidades da sua biblioteca.

Importação Profunda: Explorando os Compartimentos Ocultos

A importação profunda é o processo de recuperar símbolos de módulos que não são Pontos de Entrada. Esses IDs de módulo são geralmente considerados APIs privadas que podem mudar ao longo do tempo ou durante a criação do bundle para o pacote.

Imagine a importação profunda como um explorador aventureiro que se aventura nos compartimentos mais recônditos da sua nave espacial, em busca de tesouros escondidos. Embora essa exploração possa ser útil em alguns casos, é importante lembrar que esses compartimentos podem ser perigosos e instáveis, e que seus conteúdos podem mudar sem aviso prévio.

Importação de Nível Superior e Tree-Shaking: A Interface e a Eficiência da sua Nave Espacial

No universo Angular, a clareza da API pública e a otimização do código são cruciais para uma experiência de desenvolvimento fluida e uma aplicação performática. O Angular Package Format define dois conceitos importantes relacionados a esses aspectos: a importação de nível superior e o tree-shaking.

Importação de Nível Superior: A Interface da sua Nave

Uma importação de nível superior é aquela que vem diretamente de um ponto de entrada da biblioteca. Os imports de nível superior disponíveis definem a API pública da biblioteca e são expostos em módulos @angular/nome, como @angular/core ou @angular/common.

Imagine as importações de nível superior como os comandos e controles principais da sua nave espacial Angular. Eles são a interface que os usuários utilizam para interagir com sua biblioteca, acessando suas funcionalidades e recursos de forma direta e intuitiva.

Tree-Shaking: A Otimização da sua Nave

O tree-shaking é um processo de otimização que identifica e remove o código não utilizado por uma aplicação, também conhecido como eliminação de código morto. Essa otimização é realizada em nível de aplicação, utilizando ferramentas como Rollup, Closure Compiler ou Terser.

Imagine o tree-shaking como um processo de limpeza da sua nave espacial, removendo os módulos e componentes que não estão sendo utilizados em uma determinada missão. Essa otimização torna a nave mais leve e eficiente, permitindo que ela viaje mais rápido e consuma menos recursos.

Compilador AOT e Definições de Tipo Achatadas: As Ferramentas da Otimização

O compilador AOT (Ahead-of-Time) do Angular e as definições de tipo achatadas geradas pelo API Extractor são ferramentas essenciais para a otimização do seu código e a criação de uma biblioteca Angular eficiente.

O compilador AOT realiza a compilação do seu código TypeScript e templates HTML durante a fase de build, gerando um JavaScript otimizado que é executado diretamente pelo navegador. Isso melhora o desempenho da sua aplicação, reduzindo o tempo de carregamento e o consumo de recursos.

As definições de tipo achatadas, por sua vez, simplificam a documentação da sua biblioteca e facilitam sua utilização por outras ferramentas, como IDEs e editores de código.

Conclusão: Uma Nave Espacial Otimizada e Pronta para o Futuro

Ao compreender os conceitos de importação de nível superior e tree-shaking, você estará preparado para construir bibliotecas Angular que oferecem uma API pública clara e um código otimizado. O Angular Package Format, com sua ênfase na compatibilidade e na performance, garante que sua biblioteca seja acessível, eficiente e pronta para ser utilizada em diversas aplicações.

Com o Angular CLI e o Angular Package Format como seus aliados, você está construindo uma nave espacial Angular moderna, poderosa e preparada para explorar o universo da web com confiança e sucesso.

Esta é a última parte da nossa série sobre o Angular Package Format.
Esperamos que este guia tenha sido útil e inspirador, guiando você na criação e publicação de suas próprias bibliotecas Angular.
Que sua jornada pelo universo do desenvolvimento web seja repleta de descobertas e conquistas!