Angular e Aurelia, descendentes do bom e velho JavaScript Angular 1, são concorrentes ferozes, desenvolvidos e lançados aproximadamente ao mesmo tempo e com uma filosofia semelhante, mas diferindo em vários aspectos importantes. Neste artigo, faremos comparações lado a lado dessas diferenças em recursos e código.
Para encurtar a história, Aurelia foi criada por Rob Eisenberg, conhecido como o criador de Durandal e Caliburn. Ele trabalhou na equipe do Angular 2 no Google, mas saiu em 2014, quando suas opiniões sobre como uma estrutura moderna deveria ser diferente das deles.
As semelhanças persistem em um nível mais técnico também: os modelos e os componentes (ou elementos personalizados) associados a eles são essenciais para os aplicativos Angular e Aurelia, e ambos exigem que você tenha um componente raiz (ou seja, o aplicativo). Além disso, tanto Angular quanto Aurelia usam decoradores para configuração de componentes. Cada componente tem um ciclo de vida fixo ao qual podemos nos conectar.
Então, qual é a diferença entre Aurelia e Angular 2?
A principal diferença, de acordo com Rob Eisenberg, está no código: Aurelia é discreta. Ao desenvolver um aplicativo Aurelia (após a configuração), você escreve em ES6 ou TypeScript, e os modelos parecem HTML absolutamente lógicos, especialmente quando comparados ao Angular. Aurelia é a convenção sobre a configuração, e 95% do tempo você ficará bem usando as convenções padrão (como nomenclatura de modelo, nomenclatura de elemento, etc.), enquanto o Angular requer que você forneça configuração para basicamente tudo.
Aurelia também é considerado mais compatível com os padrões, apenas porque não faz distinção entre maiúsculas e minúsculas quando se trata de tags HTML, enquanto o Angular 2 é. Isso significa que o Angular 2 não pode contar com o analisador HTML do navegador, então eles criaram o seu próprio.
Outro fator a considerar ao escolher entre estruturas de SPA é a comunidade - o ecossistema - em torno deles. Tanto o Angular quanto o Aurelia têm todos os fundamentos (roteador, mecanismo de template, validação, etc), e é fácil obter um modal nativo ou usar alguma biblioteca de terceiros, mas não é surpresa que o Angular tenha uma comunidade maior e um desenvolvimento maior equipe.
Além disso, embora ambas as estruturas sejam de código aberto, o Angular é desenvolvido principalmente pelo Google e não se destina a ser comercializado enquanto a Durandal, Inc., que emprega a equipe principal, está seguindo Ember.js ’ modelo de monetização via consultoria e treinamento.
que tipo de llc eu tenho
Aurelia vs. Angular: uma comparação de código
Vejamos alguns dos recursos mais notáveis que sublinham as filosofias por trás de cada estrutura.
Depois de clonar projetos de sementes para Angular e Aurelia , temos um aplicativo ES6 Aurelia (você pode usar Jspm / System.js, Webpack e RequireJS em combinação com ES6 ou TypeScript) e um aplicativo TypeScript Angular (WebPack), respectivamente.
Vamos lá.
Ligação de dados
Antes de compararmos os exemplos de trabalho lado a lado, temos que dar uma olhada em algumas diferenças sintáticas entre Aurelia e Angular 2, nomeadamente na funcionalidade chave de valores de ligação do controlador para a visualização. O Angular 1 usava “verificação suja” para tudo, um método que verificava o escopo em busca de mudanças. Isso, compreensivelmente, causou uma série de problemas de desempenho. Nem Angular 2 nem Aurelia seguiram esse caminho. Em vez disso, eles usam associação de evento.
Vinculação de dados em Angular 2
No Angular, você vincula dados com colchetes e usa parênteses para vincular eventos, assim:
A vinculação bidirecional - para quando você deseja que as alterações nos dados do aplicativo reflitam na exibição e vice-versa - é uma combinação de colchetes e parênteses. Portanto, para entrada de ligação bidirecional, isso funcionaria muito bem:
{{text}} Em outras palavras, os parênteses representam um evento, enquanto os colchetes representam um valor que está sendo enviado para a entrada.
A equipe do Angular fez um ótimo trabalho separando as direções de ligação: para o DOM, do DOM e bidirecional. Também há muito açúcar de sintaxe relacionado a classes e estilos de ligação. Considere, por exemplo, o seguinte snippet como um exemplo de vinculação unilateral:
{{ text }} import {Component, Input} from '@angular/core'; @Component(/* ... */) export class MyComponent { @Input() text : string; } Text in child: {{ text }} Mas e se quisermos vincular dados bidirecionais a um componente? Considere a seguinte configuração de entrada básica:
ngModelObserve que, para usar @angular/forms, seu módulo deve importar FormsModule de property name + 'Change'. Agora temos algo interessante. Atualizar o valor na entrada pai altera os valores em todos os lugares, mas modificar a entrada do filho afeta apenas esse filho. Se quisermos atualizar o valor pai, precisamos de um evento informando o pai. A convenção de nomenclatura para este evento é import {Component, Input, Output, EventEmitter} from '@angular/core'; @Component(/* ... */) export class MyComponent { @Input() text : string; @Output() textChange = new EventEmitter(); triggerUpdate() { this.textChange.emit(this.text); } } , assim:
ngModelChangeA vinculação bidirecional começa a funcionar corretamente logo após a vinculação ao changeDetection: ChangeDetectionStrategy.OnPush evento:
wrike vs asana vs basecamp
property='${value}'E quanto à vinculação única, quando você efetivamente diz à estrutura para ignorar os valores vinculados, mesmo se eles mudarem?
Em Angular 1, usamos {{:: value}} para vincular uma vez. No Angular 2, a vinculação única fica complicada: a documentação diz que você pode usar o property.one-time='value' property.one-way='value' property.two-way='value' atributo na configuração do componente, mas isso fará todos suas ligações uma única vez.
Data Binding: The Aurelia Way
Em contraste com Angular 2, vincular dados e eventos no Aurelia é realmente simples. Você pode usar qualquer interpolação, assim como property.bind='value' do Angular, ou usar um dos seguintes tipos de vinculação:
@bindableOs nomes são autoexplicativos. Além disso, há @Input, que é sintaxe-açúcar que auto-detecta se a ligação deve ser unilateral ou bidirecional. Considerar:
.triggerNo snippet acima, ambos .delegate e // child.js this.element.dispatchEvent(new CustomEvent('change', { detail: someDetails })); são configuráveis, então você pode facilmente alterar coisas como o nome da propriedade que está sendo vinculada, etc.
E os eventos? Para vincular a eventos em Aurelia, você usa .trigger e .delegate. Por exemplo, para que um componente filho dispare um evento, você pode fazer o seguinte:
documentEntão, para ouvir isso no pai:
awesome-svgA diferença entre os dois é que // awesome-svg.js import {bindable} from 'aurelia-framework'; export class AwesomeSvgCustomElement { @bindable title; @bindable colors = []; } cria um manipulador de eventos naquele elemento específico enquanto @template adiciona um ouvinte em @inlineView. Isso economiza recursos, mas obviamente não funcionará para eventos não borbulhantes.
Um exemplo básico de Aurelia vs. Angular
Agora que cobrimos a vinculação, vamos criar um componente básico que renderiza um gráfico vetorial escalável (SVG). Vai ser incrível, portanto, vamos chamá-lo de @noView. Este exercício ilustrará a funcionalidade básica e a filosofia para Aurelia e Angular 2. Os exemplos de código Aurelia deste artigo estão disponíveis em GitHub .
Exemplo de retângulos SVG em Aurelia
Vamos primeiro construir o arquivo JavaScript:
.htmlAgora, para o HTML.
No Aurelia, você pode especificar o modelo (ou usar o embutido) com as anotações .js, @customElement('awesome-svg') ou mesmo o awesome-svg, mas fora da caixa, ele procura o js arquivo com o mesmo nome de awesome-svg.html Arquivo. O mesmo é verdade para o nome do elemento personalizado - você pode defini-lo com , mas se não o fizer, Aurelia converterá o título para caixa de traço e procurará uma correspondência.
Como não especificamos de outra forma, o elemento será chamado de .html e Aurelia irá procurar o modelo com o mesmo nome de @containerless arquivo (ou seja, rect) no mesmo diretório:
@containerlessO elemento personalizado será nomeado de acordo com o nome do arquivo. A única diferença de nomear outros componentes é que ao importar, seja no configure ou via thetag, você deve colocar @containerless no fim. Então, por exemplo :.
Aurelia também tem atributos personalizados, mas eles não têm a mesma finalidade que em Angular 2. Por exemplo, em Aurelia, você pode usar o custom-rect anotação no custom NumberOperator elemento. NumberGenerator também pode ser usado com modelos personalizados sem o controlador e, que basicamente renderiza coisas no DOM.
Considere o código a seguir contendo import {inject} from 'aurelia-framework'; import {NumberGenerator} from './number-generator' export class NumberGenerator { getNumber(){ return 42; } } @inject(NumberGenerator) export class NumberOperator { constructor(numberGenerator){ this.numberGenerator = numberGenerator; this.counter = 0; } getNumber(){ return this.numberGenerator.getNumber() + this.counter++; } } anotação:
import {inject} from 'aurelia-framework'; import {NumberOperator} from './_services/number-operator'; @inject(NumberOperator) export class SomeCustomElement { constructor(numberOperator){ this.numberOperator = numberOperator; //this.numberOperator.getNumber(); } } A saída não conteria a tag do elemento personalizado (Factory), mas em vez disso, obtemos:
práticas recomendadas de design de banco de dados oracle
NewInstanceServiços
Em relação aos serviços, Aurelia e Angular são muito semelhantes, como você verá nos exemplos a seguir. Suponha que precisamos de import { Factory, NewInstance } from 'aurelia-framework'; @inject(SomeService) export class Stuff { constructor(someService, config){ this.someService = someService; } } @inject(Factory.of(Stuff), NewInstance.of(AnotherService)) export class SomethingUsingStuff { constructor(stuffFactory, anotherService){ this.stuff = stuffFactory(config); this.anotherServiceNewInstance = anotherService; } } que depende de import { Injectable } from '@angular/core'; import { NumberGenerator } from './number-generator'; @Injectable() export class NumberGenerator { getNumber(){ return 42; } } @Injectable() export class NumberOperator { counter : number = 0; constructor(@Inject(NumberGenerator) private numberGenerator) { } getNumber(){ return this.numberGenerator.getNumber() + this.counter++; } } .
Serviços em Aurelia
Veja como definir nossos dois serviços em Aurelia:
@InjectableAgora, para um componente, injetamos da mesma maneira:
@Component({ //... providers: [NumberOperator, NumberGenerator] }) Como você pode ver, com injeção de dependência, qualquer classe pode ser um serviço totalmente extensível, portanto, você pode até escrever seus próprios resolvedores.
Fábricas em Aurelia
Se você precisa de uma fábrica ou de uma nova instância (bootstrap(AppComponent, [NumberGenerator, NumberOperator]) e NumberOperator são apenas alguns resolvedores populares fornecidos imediatamente), você pode fazer o seguinte:
NumberGeneratorServiços Angulares
Aqui está o mesmo conjunto de serviços no Angular 2:
@Component({ //... providers: [NumberOperator, NumberGenerator], }) export class SomeComponent { constructor(@Inject(NumberOperator) public service){ //service.getNumber(); } } O provide a anotação é necessária e, para realmente injetar um serviço, você precisa especificar o serviço na lista de provedores na configuração do componente ou em toda a configuração do módulo, assim:
let stuffFactory = (someService: SomeService) => { return new Stuff(someService); } @Component({ //... providers: [provide(Stuff, {useFactory: stuffFactory, deps: [SomeService]})] }) Ou, não recomendado, você também pode especificá-lo no ng-transclude ligar.
Observe que você precisa especificar @Component({ selector: 'child', template: `Transcluded: ` }) export class MyComponent {} e Hello from Translusion Component, independentemente de como você o injeta.
O componente resultante será semelhante a este:
YesFábricas em Angular 2
No Angular 2, você pode criar fábricas com @Component anotação, que também é usada para serviços de aliasing para evitar conflitos de nomes. A criação de uma fábrica pode ser semelhante a esta:
Slot 1:
Slot 2:
Transclusão
O Angular 1 tinha a capacidade de incluir conteúdo, um “slot”, de um modelo para outro usando a transclusão. Vamos ver o que seus descendentes têm a oferecer.
Projeção de conteúdo com Angular 2
Em Angular 2, a transclusão é chamada de “projeção de conteúdo” e funciona da mesma forma que Hello from Translusion Component again Hello from Translusion Component fez; ou seja, falando em termos Angular 1, o conteúdo transcluído usa o escopo pai. Ele corresponderá à tag de conteúdo transcluído com base no seletor de configuração. Considerar:
selectVocê pode então usar o componente com Slot: ${textValue} , e obteremos a transclusão exata element cannot have content HTML renderizado no componente filho.
Para transclusão de vários slots, Angular 2 possui seletores que você pode usar da mesma maneira que faria para Slot A: configuração:
Slot B: Slot C: Fallback Content A value B value
quais são os elementos de design
view-model ComponentResolver 
Você pode usar @useShadowDOM em suas tags personalizadas, mas lembre-se de que a tag deve ser conhecida pelo Angular 2.
Slots com Aurelia
Lembra quando eu disse que Aurelia segue os padrões da web sempre que possível? Em Aurelia, a transclusão é chamada de slots e é apenas um polyfill para o Shadow DOM dos componentes da Web. Shadow DOM não foi criado para slots ainda , mas segue Especificações W3C .
combinar os princípios de organização da Gestalt com suas ilustrações.
import {useShadowDOM} from 'aurelia-framework'; @useShadowDOM() export class YetAnotherCustomElement {} Aurelia foi projetada para ser compatível com os padrões, e Angular 2 não. Como resultado, podemos faça coisas mais incríveis com os slots de Aurelia , como usar conteúdo substituto (tentar usar conteúdo substituto no Angular 2 falha com ViewEncapsulation.Native). Considerar:
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ //... encapsulation: ViewEncapsulation.Native, }) export class YetAnotherComponent {} Da mesma forma que o Angular 2, o Aurelia renderizará todas as ocorrências do slot com base em uma correspondência de nome.
Também é importante notar que tanto no Aurelia quanto no Angular, você pode compilar partes do modelo e renderizar componentes dinamicamente (usando com
|_+_|no Aurelia ou
|_+_|no Angular 2).
Shadow DOM
Aurelia e Angular suportam Shadow DOM.
Em Aurelia, basta usar o
decorador e você está pronto para ir:|_+_|
No Angular, o mesmo pode ser feito com
|_+_|:
Lembre-se de verificar se o seu navegador apoia Shadow DOM.
Renderização do lado do servidor
É 2017 e a renderização do lado do servidor está muito na moda. Você já pode renderizar Angular 2 no back-end com Angular Universal , e Aurelia terá isso em 2017, conforme declarado em as resoluções de ano novo de sua equipe . Na verdade, há uma demonstração executável no repo de Aurelia.
Além disso, o Aurelia teve recursos de aprimoramento progressivo por mais de um ano, algo que o Angular 2 não faz por causa de sua sintaxe HTML não padrão.
Tamanho, desempenho e o que vem a seguir
Embora não nos mostre a imagem completa, os benchmarks DBMonster, com configurações padrão e implementação otimizada, apresentam uma boa imagem de comparação: Aurelia e Angular mostram resultados semelhantes de aproximadamente 100 re-renderizações por segundo (conforme testado em um MacBook Pro), enquanto o Angular 1 mostrou algo em torno da metade desse resultado. Tanto o Aurelia quanto o Angular superam o Angular 1 em cerca de cinco vezes, e ambos estão 40% à frente do React. Nem Aurelia nem Angular 2 têm uma implementação Virtual DOM.
Sobre a questão do tamanho, o Angular é quase duas vezes mais gordo que o Aurelia, mas os caras do Google estão trabalhando nisso: o roteiro do Angular inclui o lançamento do Angular 4 com planos para torná-lo menor e mais leve, melhorando a experiência do desenvolvedor. Não há Angular 3 e, realmente, o número da versão deve ser descartado quando se fala em Angular, já que os principais lançamentos são planejados a cada 6 meses. Se você observar o caminho que o Angular percorreu do alfa até sua versão atual, verá que nem sempre foi coerente com coisas como atributos sendo renomeados de construção para construção, etc. A equipe Angular promete que quebrar mudanças será fácil migrar.
A partir de 2017, a equipe do Aurelia planeja lançar o Aurelia UX, fornecer mais integrações e ferramentas e implementar a renderização do lado do servidor (que está no roteiro há muito tempo).
Angular 2 vs. Aurelia: uma questão de gosto
Tanto o Angular quanto o Aurelia são bons, e escolher um em vez do outro é uma questão de gosto e prioridades pessoais. Se você precisa de uma solução mais estreita, Aurelia é a sua melhor opção, mas se você precisa do suporte da comunidade, o Angular é o seu vencedor. Não é uma questão de 'Esta estrutura me permite ...?' porque a resposta é simplesmente “sim”. Eles fornecem praticamente a mesma funcionalidade, ao mesmo tempo que seguem filosofias e estilos diferentes, juntamente com uma abordagem completamente diferente para os padrões da web.
