ultimamente, as conversas sobre estruturas de JavaScript foram dominadas por nomes populares como React (tecnicamente uma biblioteca), Next.js, Sieve, Angular e More.

Essas são todas ótimas ferramentas, mas você já ouviu falar de Aurelia 2?
Quando me deparei com Aurelia, minha reação foi: "O que é isso?" Mas depois de 2 anos trabalhando com ele, agora acredito que é uma das melhores estruturas por aí, se não a melhor.

Por que eu acho assim?

Deixe -me explicar. Fiz a transição para Aurelia a partir do React.js e, inicialmente, presumi que era apenas mais uma estrutura JavaScript. No entanto, à medida que me aprofui, comecei a perceber seu verdadeiro potencial e poder.

Este artigo servirá como uma introdução ao Aurelia 2, onde mostrarei alguns de seus conceitos poderosos e por que se destaca.

1. Agregador de eventos

Primeiro é o agregador de eventos, um conceito com o qual você pode estar familiarizado se já trabalhou no ecossistema C#, mas eis como funciona em Aurelia:

O agregador de eventos funciona de maneira semelhante aos padrões de mensagens baseados em eventos comumente usados ​​em C#. É um pub/sub -sistema que permite publicar e assinar eventos personalizados em seus aplicativos Aurelia.

Isso facilita a comunicação dissociada entre diferentes partes do seu aplicativo. Assim como em C#, onde agregadores ou mediadores de eventos são usados ​​para otimizar o manuseio de eventos, o agregador de eventos da Aurelia é aproveitado pela própria estrutura para publicar eventos em vários estágios do ciclo de vida do aplicativo e durante ações específicas.

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

!

2. Injeção de dependência

A injeção de dependência (DI) é um padrão de design que facilita a criação de objetos com as dependências necessárias, sem que os próprios objetos sejam responsáveis ​​por criar essas dependências. Isso promove o acoplamento frouxo entre as classes e suas dependências, aprimorando a modularidade e a testabilidade.

Aurelia oferece um sistema DI poderoso e flexível que simplifica o processo de fiação de diferentes partes do seu aplicativo. Com o DI da Aurelia, o gerenciamento e a injeção de dependências se torna perfeita, resultando em um código mais limpo e sustentável.

Além disso, essa abordagem facilita o desenvolvimento orientado a testes (TDD), pois permite zombaria direta e teste de componentes individuais sem a necessidade de configuração complexa ou dependências fortemente acopladas.

3. Composição dinâmica

O elemento de Aurelia permite a composição dinâmica de visualizações e modelos de exibição. Ele age como um elemento personalizado, mas sem exigir um nome de tag específico, permitindo componentes de interface do usuário flexíveis e reutilizáveis.

Dentro do modelo de vista usado, você tem acesso a todos os eventos padrão do ciclo de vida da Aurelia, juntamente com um método de ativação adicional que pode ser usado para inicializar ou passar parâmetros para o modelo de exibição.

usando o elemento

na prática:

APLICAÇÃO PRINCIPAL

como funciona:

• composição dinâmica

  : o atributo component.bind liga dinamicamente o dinâmicoComponent como o modelo de exibição.

• Passando parâmetros

  : o atributo Model.bind passa os parâmetros para o método de ativação no modelo de vista composto dinamicamente.

Separação de preocupações

Uma das razões pelas quais eu amo Aurelia 2 é sua separação limpa de preocupações através do padrão MVVM (Model-ViewModel).

View

: A estrutura da interface do usuário é totalmente dissociada da lógica. Ele simplesmente liga ao ViewModel para exibir dados e capturar interações do usuário.

ViewModel

: é aqui que toda a lógica acontece. Ele controla os dados, lida com as regras de negócios e atualiza a visualização, sem se preocupar com a exibição.

Model

: aurelia mantém os dados do aplicativo principal separados da visualização e da viewmodel, mantendo clareza e foco. Esta separação torna o aplicativo altamente modular, mais fácil de manter e muito mais simples de testar, permitindo um código mais flexível e escalável.

Conclusão

Neste post, concentrei -me em apenas três conceitos poderosos da Aurelia 2 - agregador de eventos, injeção de dependência e composição dinâmica - mas essas são apenas uma pequena parte do que a estrutura tem a oferecer.

aurelia 2 é embalado com recursos que ajudam a criar aplicativos limpos, escaláveis ​​e sustentáveis.

Para obter a imagem completa e mergulhar mais fundo em suas capacidades, incentivo você a explorar a documentação do Aurelia 2 para um entendimento mais abrangente.

ps: este é o meu primeiro post, e espero que você tenha gostado!