Aurelia ve Açısal 2 — Bir Kod Karşılaştırması

Eski güzel JavaScript Angular 1'in torunları olan Angular ve Aurelia, yaklaşık olarak aynı zamanda ve benzer bir felsefeyle geliştirilmiş ve piyasaya sürülen, ancak birkaç temel yönden farklılık gösteren zorlu rakiplerdir. Bu makalede, özellikler ve kodlardaki bu farklılıkların yan yana karşılaştırmalarını yapacağız.

Uzun lafın kısası Aurelia, Durandal ve Caliburn'ün yaratıcısı olarak bilinen Rob Eisenberg tarafından yaratıldı. Google'da Angular 2 ekibinde çalıştı ancak 2014'te modern bir çerçevenin nasıl görünmesi gerektiği konusundaki görüşleri onlarınkinden farklı olduğunda ayrıldı.

Benzerlikler daha teknik düzeyde de devam eder: Şablonlar ve bunlarla ilişkili bileşenler (veya özel öğeler) hem Angular hem de Aurelia uygulamalarının özüdür ve her ikisi de bir kök bileşene (yani uygulama) sahip olmanızı gerektirir. Ayrıca, hem Angular hem de Aurelia, bileşen konfigürasyonu için yoğun bir şekilde dekoratörler kullanır. Her bileşenin, bağlanabileceğimiz sabit bir yaşam döngüsü vardır.

Peki Aurelia ve Angular 2 arasındaki fark nedir?

Rob Eisenberg'e göre temel fark koddadır: Aurelia göze batmaz. Bir Aurelia uygulaması geliştirirken (yapılandırmadan sonra), ES6 veya TypeScript'te yazarsınız ve şablonlar, özellikle Angular ile karşılaştırıldığında kesinlikle aklı başında HTML gibi görünür. Aurelia, yapılandırma üzerinde bir kuraldır ve zamanın %95'inde varsayılan kuralları (şablon adlandırma, öğe adlandırma, vb.) kullanmanız iyi olur, Angular ise temelde her şey için yapılandırma sağlamanızı gerektirir.

Aurelia, yalnızca HTML etiketleri söz konusu olduğunda büyük/küçük harfe duyarlı olmadığı için daha standartlarla uyumlu olarak kabul edilirken, Angular 2'dir. Bu, Angular 2'nin tarayıcının HTML ayrıştırıcısına güvenemeyeceği anlamına gelir, bu yüzden kendilerininkini yarattılar.

SPA çerçeveleri arasında seçim yaparken göz önünde bulundurulması gereken bir diğer faktör, çevrelerindeki topluluk - ekosistemdir. Hem Angular hem de Aurelia tüm temel özelliklere (yönlendirici, şablon motoru, doğrulama, vb.) takım.

Ayrıca, her iki çerçeve de açık kaynak olsa da, Angular esas olarak Google tarafından geliştirilmiştir ve ticarileştirilmesi amaçlanmamıştır, çekirdek ekibi istihdam eden Durandal, Inc., danışmanlık ve eğitim yoluyla Ember.js'nin para kazanma modelini takip etmektedir.

Aurelia ve Açısal: Bir Kod Karşılaştırması

Her çerçevenin arkasındaki felsefelerin altını çizen en dikkate değer özelliklerden bazılarına bakalım.

Angular ve Aurelia için tohum projelerini klonladıktan sonra, sırasıyla bir ES6 Aurelia uygulamasına (Jspm/System.js, Webpack ve RequireJS'yi ES6 veya TypeScript ile birlikte kullanabilirsiniz) ve bir TypeScript Angular uygulamasına (WebPack) sahibiz.

hadi yuvarlanalım.

Bağlanma verileri

Yan yana çalışma örneklerini karşılaştırmadan önce, Aurelia ve Angular 2 arasındaki bazı sözdizimsel farklılıklara, yani denetleyiciden görünüme bağlama değerlerinin temel işlevselliğine bir göz atmalıyız. Angular 1, her şey için "kirli kontrol" kullandı; bu, değişikliklerin kapsamını tarayan bir yöntem. Bu, anlaşılır bir şekilde, bir dizi performans sorununa neden oldu. Ne Angular 2 ne de Aurelia bu yolu izlemedi. Bunun yerine olay bağlamayı kullanırlar.

Açısal 2'de Veri Bağlama

Angular'da, verileri köşeli parantezlerle bağlarsınız ve olayları bağlamak için parantezleri aşağıdaki gibi kullanırsınız:

 <element [property]="value"></a> <element (someEvent)="eventHandler($event)"></a>

Uygulama verilerindeki değişikliklerin görünüme yansımasını ve bunun tersini istediğiniz zaman için iki yönlü ciltleme, hem köşeli hem de parantezli parantezlerin birleşimidir. Bu nedenle, iki yönlü bağlı girdi için bu gayet iyi çalışır:

 <input type="text" [(ngModel)]="text"> {{text}}

Başka bir deyişle, parantezler bir olayı temsil ederken, köşeli parantezler girişe itilen bir değeri temsil eder.

Angular ekibi, bağlayıcı yönergeleri ayırarak harika bir iş çıkardı: DOM'a, DOM'den ve çift yönlü. Ayrıca bağlama sınıfları ve stilleriyle ilgili birçok sözdizimi şekeri var. Örneğin, tek yönlü bağlama örneği olarak aşağıdaki parçacığı düşünün:

 <div [class.red-container]="isRed"></div> <div [style.width.px]="elementWidth"></div>

Peki ya iki yönlü verileri bir bileşene bağlamak istiyorsak? Aşağıdaki temel giriş kurulumunu göz önünde bulundurun:

 <!-- parent component --> <input type="text" [(ngModel)]="text"> {{ text }} <my-component [(text)]="text"></my-component> import {Component, Input} from '@angular/core'; @Component(/* ... */) export class MyComponent { @Input() text : string; } <!-- child component --> <input [(ngModel)]="text"> Text in child: {{ text }}

ngModel kullanmak için modülünüzün FormsModule öğesini @angular/forms öğesinden içe aktarması gerektiğini unutmayın. Şimdi ilginç bir şeyimiz var. Üst girdideki değeri güncellemek her yerde değerleri değiştirir, ancak alt öğenin girdisini değiştirmek yalnızca o çocuğu etkiler. Ebeveyn değerini güncellemesini istiyorsak, ebeveyni bilgilendiren bir olaya ihtiyacımız var. Bu olay için adlandırma kuralı, property name + 'Change' şeklindedir, şöyle:

 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); } }

İki yönlü bağlama, ngModelChange olayına bağlandıktan hemen sonra düzgün şekilde çalışmaya başlar:

 <!-- child component --> <input [(ngModel)]="text" (ngModelChange)="triggerUpdate($event)">

Çerçeveye, değişseler bile bağlı değerleri yok saymasını etkili bir şekilde söylediğinizde, bir kerelik bağlamaya ne dersiniz?

Angular 1'de, bir kez bağlamak için {{::value}} kullandık. Angular 2'de tek seferlik bağlama karmaşıklaşıyor: belgeler, Bileşen yapılandırmasında changeDetection: ChangeDetectionStrategy.OnPush özniteliğini kullanabileceğinizi söylüyor, ancak bu, tüm bağlamalarınızı bir kerelik yapacak.

Veri Bağlama: Aurelia Yolu

Angular 2'nin aksine, Aurelia'daki veri ve olayları bağlama gerçekten basittir. Angular'ın property="${value}" gibi enterpolasyonu kullanabilir veya aşağıdaki bağlama türlerinden birini kullanabilirsiniz:

 property.one-time="value" property.one-way="value" property.two-way="value"

İsimler açıklayıcıdır. Ayrıca, bağlamanın tek yönlü mü yoksa iki yönlü mü olması gerektiğini kendi kendine algılayan sözdizimi şekeri olan property.bind="value" vardır. Düşünmek:

 <!-- parent--> <template bindable="text"> <input type="text" value.bind="text"/> <child text.two-way="text"></child> </template> <!-- child custom element --> <template bindable="text"> <input type="text" value.bind="text"/> </template>

Yukarıdaki snippet'te hem @bindable hem de @Input yapılandırılabilir, böylece bağlanan özelliğin adı gibi şeyleri kolayca değiştirebilirsiniz.

Peki ya olaylar? Aurelia'daki olaylara bağlanmak için .trigger ve .delegate . Örneğin, bir alt bileşenin bir olayı başlatmasını sağlamak için aşağıdakileri yapabilirsiniz:

 // child.js this.element.dispatchEvent(new CustomEvent('change', { detail: someDetails }));

Ardından, ebeveynde bunu dinlemek için:

 <child change.trigger="myChangeHandler($event)"></child> <!-- or --> <child change.delegate="myChangeHandler($event)"></child>

Bu ikisi arasındaki fark, .trigger o belirli öğe üzerinde bir olay işleyicisi oluşturması, .delegate ise document bir dinleyici eklemesidir. Bu, kaynakları korur, ancak köpürmeyen olaylar için kesinlikle işe yaramaz.

Aurelia ve Angular'ın Temel Bir Örneği

Artık bağlamayı ele aldığımıza göre, ölçeklenebilir bir vektör grafiği (SVG) oluşturan temel bir bileşen oluşturalım. Harika olacak, bu yüzden ona awesome-svg diyeceğiz. Bu alıştırma Aurelia ve Angular 2 için hem temel işlevselliği hem de felsefeyi gösterecektir. Bu makalenin Aurelia kod örnekleri GitHub'da mevcuttur.

Aurelia'da SVG Dikdörtgenleri Örneği

Önce JavaScript dosyasını oluşturalım:

 // awesome-svg.js import {bindable} from 'aurelia-framework'; export class AwesomeSvgCustomElement { @bindable title; @bindable colors = []; }

Şimdi HTML için.

Aurelia'da şablonu @template , @inlineView ve hatta @noView ek açıklamalarıyla belirtebilirsiniz (veya satır içi olanı kullanın), ancak kutunun dışında .js ile aynı ada sahip .html dosyasını arar. dosya. Aynısı özel öğenin adı için de geçerlidir; onu @customElement('awesome-svg') ile ayarlayabilirsiniz, ancak ayarlamazsanız, Aurelia başlığı kısa çizgiye dönüştürür ve bir eşleşme arar.

Aksini belirtmediğimiz için, öğeye awesome-svg adı verilecek ve Aurelia aynı dizindeki js dosyasıyla aynı ada sahip (yani awesome-svg.html ) şablonu arayacaktır:

 <!-- awesome-svg.html --> <template> <h1>${title}</h1> <svg> <rect repeat.for="color of colors" fill.bind="color" x.bind="$index * 100" y="0" width="50" height="50"></rect> </svg> </template>

<template> etiketine dikkat ettiniz mi? Tüm şablonların bir <template> etiketine sarılması gerekir. Ayrıca, ` for … of and the string interpolation ES6'da yaptığınız gibi kullanmanız da dikkate değerdir.

Şimdi bileşeni kullanmak için, onu <require from="path/to/awesome-svg"></require> ile bir şablona aktarmalıyız veya uygulama genelinde kullanılıyorsa, kaynağı çerçevenin yapılandırma işlevinde küreselleştirmeliyiz. aurelia.use.globalResources('path/to/awesome-svg'); awesome-svg bileşenini bir kez ve herkes için içe aktaracak.

[Bunlardan hiçbirini yapmazsanız, <awesome-svg></awesome-svg> , hatasız olarak diğer HTML etiketleri gibi ele alınacaktır.]

Bileşeni aşağıdakilerle görüntüleyebilirsiniz:

 <awesome-svg colors.bind="['#ff0000', '#00ff00', '#0000ff']"></awesome-svg>

Bu, 3 dikdörtgenden oluşan bir set oluşturur:

Açısal 2'de SVG Dikdörtgenleri Örneği

Şimdi aynı örneği GitHub'da da bulunan Angular 2'de yapalım. Angular 2, hem şablonu hem de öğe adını belirtmemizi gerektirir:

 // awesome-svg.component.ts import {Component, Input} from '@angular/core'; @Component({ selector: 'awesome-svg', templateUrl: './awesome-svg.component.html' }) export class AwesomeSvgComponent { @Input() title : string; @Input() colors : string[] = [] }

Görünüm, işlerin biraz karmaşıklaştığı yerdir. Her şeyden önce, Angular bilinmeyen HTML etiketlerini bir tarayıcının yaptığı gibi sessizce ele alır: my-own-tag etiketim satırları boyunca bir şeyin bilinmeyen bir öğe olduğunu söyleyerek bir hata verir. Bağladığınız tüm özellikler için de aynısını yapar, bu nedenle kodun bir yerinde bir yazım hatası yaparsanız, uygulama çökeceği için büyük dikkat çeker. Kulağa hoş geliyor, değil mi? Evet, çünkü uygulamayı bozarsanız hemen fark edersiniz ve hayır, çünkü bu sadece kötü bir biçimdir.

Bağlama sözdizimi açısından gayet iyi olan bu pasajı düşünün:

 <svg> <rect [fill]="color"></rect> </svg>

Düzgün okunsa bile, "':svg:rect' özelliğinin bilinen bir özelliği olmadığı için 'doldur'a bağlanamıyor" gibi bir hata alırsınız. Bunu düzeltmek için bunun yerine [attr.fill]="color" sözdizimini kullanmanız gerekir. Ayrıca, Angular'ın bunun HTML olarak değerlendirilmemesi gerektiğini bilmesini sağlamak için <svg/>: <svg:rect> içindeki alt öğelerde ad alanı belirtmenin gerekli olduğunu unutmayın. Snippet'imizi genişletelim:

 <!-- awesome-svg.component.html--> <h1>{{ title }}</h1> <svg> <rect *ngFor="let color of colors; let i = index" [attr.fill]="color" [attr.x]="i * 100" y="0" width="50" height="50" ></rect> </svg>

Oraya gidiyoruz. Ardından, modül yapılandırmasında içe aktarın:

 @NgModule({ declarations: [ AwesomeSvgComponent ] //... })

Artık bileşen bu modülde şu şekilde kullanılabilir:

 <awesome-svg [colors]="['#ff0000', '#00ff00', '#0000ff']" title="Rectangles"></awesome-svg> 

Özel Öğeler

Şimdi, dikdörtgen kodumuzun kendi mantığına sahip özel bir bileşen olmasını istediğimizi varsayalım.

Özel Öğeler: Açısal 2 Yol

Angular 2, bileşenleri tanımlanmış seçicisiyle eşleşenlere göre oluşturduğundan, özel bir bileşen tanımlamak son derece kolaydır, örneğin:

 @Component({ selector: 'g[custom-rect]', ... })

Yukarıdaki pasaj, özel öğeyi, son derece kullanışlı olan herhangi bir <g custom-rect></div> etiketine dönüştürür.

Özel Öğeler: Aurelia Yolu

Aurelia, yalnızca şablona özel özel öğeler oluşturmamıza olanak tanır:

 <template bindable="colors, title"> <h1>${title}</h1> <svg> <rect repeat.for="color of colors" fill.bind="color" x.bind="$index * 100" y="0" width="50" height="50"></rect> </svg> </template>

Özel öğe, dosya adına göre adlandırılacaktır. Diğer bileşenleri adlandırmaktan tek farkı, yapılandırmada veya <require> etiketi aracılığıyla içe aktarırken, sonuna .html koymanız gerektiğidir. Örneğin: <require from="awesome-svg.html"></require> .

Aurelia'nın özel nitelikleri de vardır, ancak bunlar Angular 2'dekiyle aynı amaca hizmet etmezler. Örneğin, Aurelia'da özel rect öğesinde @containerless kullanabilirsiniz. @containerless , denetleyici olmadan özel şablonlarla ve temel olarak öğeleri DOM'ye dönüştüren <compose> ile de kullanılabilir.

@containerless ek açıklamasını içeren aşağıdaki kodu göz önünde bulundurun:

 <svg> <custom-rect containerless></custom-rect> </svg>

Çıktı, özel öğe etiketini ( custom-rect ) içermez, bunun yerine şunu elde ederiz:

 <svg> <rect ...></rect> </svg>

Hizmetler

Hizmetler açısından, aşağıdaki örneklerde göreceğiniz gibi, Aurelia ve Angular çok benzer. NumberOperator bağlı olan NumberGenerator ihtiyacımız olduğunu varsayalım.

Aurelia'daki Hizmetler

Aurelia'da iki hizmetimizi nasıl tanımlayacağınız aşağıda açıklanmıştır:

 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++; } }

Şimdi, bir bileşen için aynı şekilde enjekte ediyoruz:

 import {inject} from 'aurelia-framework'; import {NumberOperator} from './_services/number-operator'; @inject(NumberOperator) export class SomeCustomElement { constructor(numberOperator){ this.numberOperator = numberOperator; //this.numberOperator.getNumber(); } }

Gördüğünüz gibi, bağımlılık enjeksiyonu ile herhangi bir sınıf tamamen genişletilebilir bir hizmet olabilir, böylece kendi çözümleyicilerinizi bile yazabilirsiniz.

Aurelia'daki Fabrikalar

İhtiyacınız olan şey bir fabrika veya yeni bir örnekse ( Factory ve NewInstance , kutudan çıktığı gibi sağlanan birkaç popüler çözümleyicidir), aşağıdakileri yapabilirsiniz:

 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; } }

açısal hizmetler

İşte Angular 2'deki aynı hizmet grubu:

 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++; } }

@Injectable ek açıklaması gereklidir ve bir hizmeti gerçekten enjekte etmek için, hizmeti bileşen yapılandırmasındaki veya tüm modül yapılandırmasındaki sağlayıcılar listesinde aşağıdaki gibi belirtmeniz gerekir:

 @Component({ //... providers: [NumberOperator, NumberGenerator] })

Veya önerilmez, bunu bootstrap(AppComponent, [NumberGenerator, NumberOperator]) çağrısında da belirtebilirsiniz.

Nasıl enjekte ettiğinize bakılmaksızın hem NumberOperator hem de NumberGenerator belirtmeniz gerektiğini unutmayın.

Ortaya çıkan bileşen şöyle görünecektir:

 @Component({ //... providers: [NumberOperator, NumberGenerator], }) export class SomeComponent { constructor(@Inject(NumberOperator) public service){ //service.getNumber(); } }

Angular 2'deki Fabrikalar

Angular 2'de, ad çakışmalarını önlemek için hizmetleri takmak için de kullanılan provide açıklama ile fabrikalar oluşturabilirsiniz. Bir fabrika oluşturmak aşağıdaki gibi görünebilir:

 let stuffFactory = (someService: SomeService) => { return new Stuff(someService); } @Component({ //... providers: [provide(Stuff, {useFactory: stuffFactory, deps: [SomeService]})] })

transklüzyon

Angular 1, dönüştürme kullanarak bir şablondan diğerine içerik, bir "yuva" ekleme yeteneğine sahipti. Bakalım soyundan gelenler neler sunacak.

Angular 2 ile İçerik Projeksiyonu

Angular 2'de transclusion "içerik projeksiyonu" olarak adlandırılır ve ng-transclude ile aynı şekilde çalışır; yani, Angular 1 terimleriyle konuşursak, dönüştürülen içerik ana kapsamı kullanır. Konfigürasyon seçiciye dayalı olarak dönüştürülen içerik etiketiyle eşleşir. Düşünmek:

 @Component({ selector: 'child', template: `Transcluded: <ng-content></ng-content>` }) export class MyComponent {}

Daha sonra bileşeni <child-component>Hello from Translusion Component</child-component> ile birlikte kullanabilirsiniz ve alt bileşende işlenen tam dönüştürülmüş Yes HTML'sini elde ederiz.

Çoklu yuva dönüştürme için, Angular 2, @Component yapılandırmasında kullandığınız şekilde kullanabileceğiniz seçicilere sahiptir:

 <!-- child.component.html --> <h4>Slot 1:</h4> <ng-content select=".class-selector"></ng-content> <h4>Slot 2:</h4> <ng-content select="[attr-selector]"></ng-content>

 <!-- parent.component.html --> <child> <span class="class-selector">Hello from Translusion Component</span> <p class="class-selector">Hello from Translusion Component again</p> <span attr-selector>Hello from Translusion Component one more time</span> </child> 

select özel etiketlerinizde kullanabilirsiniz, ancak etiketin Angular 2 tarafından bilinmesi gerektiğini unutmayın.

Aurelia ile Slotlar

Aurelia'nın mümkün olduğunda web standartlarına uyduğunu söylediğimi hatırlıyor musun? Aurelia'da, dönüştürmeye yuvalar denir ve bu yalnızca Web Bileşenleri Gölge DOM için bir çoklu dolgudur. Gölge DOM henüz yuvalar için oluşturulmadı, ancak W3C özelliklerini takip ediyor.

 <!-- child --> <template> Slot: <slot></slot> </template> <!-- parent --> <template> <child>${textValue}</child> </template>

Aurelia, standartlara uygun olacak şekilde tasarlandı ve Angular 2 değildi. Sonuç olarak, Aurelia'nın yuvalarıyla, yedek içerik kullanmak gibi daha harika şeyler yapabiliriz (Angular 2'de yedek içeriği kullanmaya çalışmak <ng-content> element cannot have content ile başarısız olur). Düşünmek:

 <!-- child --> <template> Slot A: <slot name="slot-a"></slot> <br /> Slot B: <slot name="slot-b"></slot> Slot C: <slot name="slot-c">Fallback Content</slot> </template> <!-- parent --> <template> <child> <div slot="slot-a">A value</div> <div slot="slot-b">B value</div> </child> </template>

Angular 2 ile aynı şekilde, Aurelia slotun tüm oluşumlarını bir isim eşleşmesine göre oluşturacaktır.

Ayrıca Aurelia ve Angular'ın her ikisinde de şablon parçalarını derleyebilir ve bileşenleri dinamik olarak oluşturabilirsiniz (Aurelia'da view-model ile <compose> veya Angular 2'de ComponentResolver kullanarak).

Gölge DOM

Hem Aurelia hem de Angular, Shadow DOM'u destekler.

Aurelia'da, sadece @useShadowDOM dekoratörünü kullanın ve gitmeye hazırsınız:

 import {useShadowDOM} from 'aurelia-framework'; @useShadowDOM() export class YetAnotherCustomElement {}

Angular'da, ViewEncapsulation.Native ile aynı şey yapılabilir:

 import { Component, ViewEncapsulation } from '@angular/core'; @Component({ //... encapsulation: ViewEncapsulation.Native, }) export class YetAnotherComponent {}

Tarayıcınızın Shadow DOM'u destekleyip desteklemediğini kontrol etmeyi unutmayın.

Sunucu Tarafı Oluşturma

2017 ve sunucu tarafı oluşturma çok moda. Angular 2'yi Angular Universal ile arka uçta zaten oluşturabilirsiniz ve Aurelia, ekibinin Yeni Yıl kararlarında belirtildiği gibi 2017'de buna sahip olacak. Aslında, Aurelia'nın deposunda çalıştırılabilir bir demo var.

Buna ek olarak, Aurelia, bir yılı aşkın süredir, standart olmayan HTML sözdizimi nedeniyle Angular 2'nin sahip olmadığı bir şey olan aşamalı geliştirme yeteneklerine sahiptir.

Boyut, Performans ve Sırada Ne Var?

Bize resmin tamamını göstermese de, varsayılan konfigürasyonlar ve optimize edilmiş uygulama ile DBMonster kıyaslama testleri iyi bir karşılaştırma resmi çiziyor: Aurelia ve Angular, saniyede yaklaşık 100 yeniden oluşturmanın benzer sonuçlarını gösteriyor (MacBook Pro'da test edildiği gibi), Angular 1, bu sonucun yaklaşık yarısı kadar bir şey gösterdi. Hem Aurelia hem de Angular, Angular 1'den yaklaşık beş kat daha iyi performans gösteriyor ve her ikisi de React'ten %40 önde. Ne Aurelia ne de Angular 2, Sanal DOM uygulamasına sahip değildir.

Boyut konusunda, Angular, Aurelia'dan kabaca iki kat daha şişman, ancak Google'daki adamlar bunun üzerinde çalışıyor: Angular'ın yol haritası, geliştirici deneyimini geliştirirken daha küçük ve daha hafif hale getirme planlarıyla Angular 4'ü piyasaya sürmeyi içeriyor. Angular 3 yok ve gerçekten, Angular hakkında konuşurken sürüm numarası bırakılmalıdır, çünkü büyük sürümler her 6 ayda bir planlanmaktadır. Angular'ın alfadan mevcut sürümüne kadar izlediği yola bakarsanız, özniteliklerin derlemeden derlemeye yeniden adlandırılması gibi şeylerle her zaman tutarlı olmadığını görürsünüz. Angular ekibi, değişiklikleri bozmanın kolay olacağını vaat ediyor. göç etmek.

2017 itibariyle, Aurelia ekibi Aurelia UX'i piyasaya sürmeyi, daha fazla entegrasyon ve araç sağlamayı ve (çok uzun süredir yol haritasında olan) sunucu tarafı oluşturmayı uygulamayı planlıyor.

Angular 2 vs. Aurelia: Bir Zevk Meselesi

Hem Angular hem de Aurelia iyidir ve birini diğerine tercih etmek kişisel zevk ve öncelikler meselesidir. Daha ince bir çözüme ihtiyacınız varsa, Aurelia en iyi seçeneğinizdir, ancak topluluk desteğine ihtiyacınız varsa, kazananınız Angular'dır. Bu, “Bu çerçeve şunları yapmama izin veriyor mu?” sorusu değil. çünkü cevap basitçe "evet". Web standartlarına tamamen farklı bir yaklaşımla birlikte farklı felsefeleri ve stilleri takip ederken kabaca aynı işlevselliği sağlarlar.