Aurelia vs. Angular 2 — Perbandingan Kode

Angular dan Aurelia, turunan dari JavaScript Angular 1 lama yang bagus, adalah pesaing sengit, dikembangkan dan dirilis pada waktu yang hampir bersamaan dan dengan filosofi yang serupa, tetapi berbeda dalam beberapa hal utama. Pada artikel ini, kita akan melakukan perbandingan berdampingan dari perbedaan fitur dan kode tersebut.

Singkat cerita, Aurelia diciptakan oleh Rob Eisenberg yang dikenal sebagai pencipta Durandal dan Caliburn. Dia bekerja di tim Angular 2 di Google tetapi keluar pada tahun 2014 ketika pandangannya tentang bagaimana kerangka kerja modern seharusnya terlihat berbeda dari mereka.

Kesamaannya juga bertahan pada tingkat yang lebih teknis: Template dan komponen (atau elemen khusus) yang terkait dengannya adalah inti dari aplikasi Angular dan Aurelia, dan keduanya mengharuskan Anda memiliki komponen root (yaitu aplikasi). Selanjutnya, Angular dan Aurelia banyak menggunakan dekorator untuk konfigurasi komponen. Setiap komponen memiliki siklus hidup tetap yang dapat kita kaitkan.

Jadi Apa Perbedaan antara Aurelia dan Angular 2?

Perbedaan utama, menurut Rob Eisenberg, ada pada kodenya: Aurelia tidak mencolok. Saat mengembangkan aplikasi Aurelia (setelah konfigurasi), Anda menulis dalam ES6 atau TypeScript, dan template terlihat seperti HTML yang benar-benar waras, terutama jika dibandingkan dengan Angular. Aurelia adalah konvensi di atas konfigurasi, dan 95% dari waktu Anda akan baik-baik saja menggunakan konvensi default (seperti penamaan template, penamaan elemen, dll.), sementara Angular mengharuskan Anda untuk menyediakan konfigurasi pada dasarnya untuk semuanya.

Aurelia juga dianggap lebih sesuai standar, jika hanya karena tidak peka huruf besar/kecil dalam hal tag HTML, sedangkan Angular 2 adalah. Ini berarti bahwa Angular 2 tidak dapat mengandalkan parser HTML browser, jadi mereka membuatnya sendiri.

Faktor lain yang perlu dipertimbangkan ketika memilih antara kerangka SPA adalah komunitas-ekosistem- di sekitar mereka. Baik Angular dan Aurelia memiliki semua dasar (router, mesin template, validasi, dll), dan mudah untuk mendapatkan modal asli atau menggunakan beberapa perpustakaan pihak ketiga, tetapi tidak mengherankan bahwa Angular memiliki komunitas yang lebih besar dan pengembangan yang lebih besar tim.

Selain itu, meskipun kedua kerangka kerja adalah open source, Angular terutama dikembangkan oleh Google dan tidak dimaksudkan untuk dikomersialkan sementara Durandal, Inc., yang mempekerjakan tim inti, mengikuti model monetisasi Ember.js melalui konsultasi dan pelatihan.

Aurelia vs. Angular: Perbandingan Kode

Mari kita lihat beberapa fitur paling menonjol yang menggarisbawahi filosofi di balik setiap kerangka kerja.

Setelah mengkloning proyek benih untuk Angular dan Aurelia, kami memiliki aplikasi ES6 Aurelia (Anda dapat menggunakan Jspm/System.js, Webpack dan RequireJS dalam kombinasi dengan ES6 atau TypeScript) dan aplikasi TypeScript Angular (WebPack).

Mari kita berguling.

Pengikatan Data

Sebelum kita membandingkan contoh kerja berdampingan, kita harus melihat beberapa perbedaan sintaksis antara Aurelia dan Angular 2, yaitu pada fungsionalitas kunci dari nilai pengikatan dari pengontrol ke tampilan. Angular 1 menggunakan "pemeriksaan kotor" untuk semuanya, sebuah metode yang memindai ruang lingkup untuk perubahan. Ini, dapat dimengerti, menyebabkan sejumlah masalah kinerja. Baik Angular 2 maupun Aurelia tidak mengikuti jalan itu. Sebagai gantinya, mereka menggunakan pengikatan acara.

Pengikatan Data di Angular 2

Di Angular, Anda mengikat data dengan tanda kurung siku dan menggunakan tanda kurung untuk mengikat peristiwa, seperti:

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

Pengikatan dua arah—saat Anda ingin perubahan dalam data aplikasi tercermin pada tampilan dan sebaliknya—adalah kombinasi dari kurung siku dan kurung. Jadi, untuk input terikat dua arah, ini akan berfungsi dengan baik:

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

Dengan kata lain, tanda kurung mewakili suatu peristiwa sementara tanda kurung siku mewakili nilai yang didorong ke input.

Tim Angular melakukan pekerjaan yang hebat dalam memisahkan arah pengikatan: ke DOM, dari DOM, dan dua arah. Ada juga banyak gula sintaks yang terkait dengan kelas dan gaya yang mengikat. Pertimbangkan, misalnya, cuplikan berikut sebagai contoh pengikatan satu arah:

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

Tetapi bagaimana jika kita ingin mengikat data dua arah menjadi sebuah komponen? Pertimbangkan pengaturan input dasar berikut:

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

Perhatikan bahwa, untuk menggunakan ngModel , modul Anda harus mengimpor FormsModule dari @angular/forms . Sekarang kita memiliki sesuatu yang menarik. Memperbarui nilai dalam input induk mengubah nilai di mana-mana, tetapi memodifikasi input anak hanya memengaruhi anak itu. Jika kita ingin memperbarui nilai induk, kita memerlukan sebuah event yang menginformasikan induknya. Konvensi penamaan untuk acara ini adalah property name + 'Change' , seperti:

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

Pengikatan dua arah mulai berfungsi dengan benar setelah kami mengikat ke acara ngModelChange :

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

Bagaimana dengan pengikatan satu kali, ketika Anda secara efektif memberi tahu kerangka kerja untuk mengabaikan nilai terikat bahkan jika itu berubah?

Di Angular 1, kami menggunakan {{::value}} untuk mengikat satu kali. Di Angular 2, pengikatan satu kali menjadi rumit: dokumentasi mengatakan bahwa Anda dapat menggunakan atribut changeDetection: ChangeDetectionStrategy.OnPush dalam konfigurasi Komponen, tetapi itu akan membuat semua pengikatan Anda menjadi satu kali.

Pengikatan Data: Cara Aurelia

Berbeda dengan Angular 2, mengikat data dan acara di Aurelia sangat sederhana. Anda dapat menggunakan salah satu interpolasi, seperti property="${value}" , atau menggunakan salah satu jenis pengikatan berikut:

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

Nama-nama itu cukup jelas. Selain itu, ada property.bind="value" , ​​yang merupakan sintaksis gula yang mendeteksi sendiri apakah pengikatan harus satu arah atau dua arah. Mempertimbangkan:

 <!-- 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>

Dalam cuplikan di atas, @bindable dan @Input dapat dikonfigurasi, sehingga Anda dapat dengan mudah mengubah hal-hal seperti nama properti yang diikat, dll.

Bagaimana dengan acara? Untuk mengikat ke acara di Aurelia, Anda menggunakan .trigger dan .delegate . Misalnya, agar komponen turunan mengaktifkan suatu peristiwa, Anda dapat melakukan hal berikut:

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

Kemudian, untuk mendengarkan itu di orang tua:

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

Perbedaan antara keduanya adalah .trigger membuat event handler pada elemen tertentu sementara .delegate menambahkan listener pada document . Ini menghemat sumber daya, tetapi jelas tidak akan berfungsi untuk acara yang tidak menggelegak.

Contoh Dasar Aurelia vs. Angular

Sekarang setelah kita membahas penjilidan, mari kita buat komponen dasar yang membuat grafik vektor scalable (SVG). Ini akan luar biasa, oleh karena itu kami akan menyebutnya awesome-svg . Latihan ini akan mengilustrasikan fungsionalitas dan filosofi dasar untuk Aurelia dan Angular 2. Contoh kode Aurelia artikel ini tersedia di GitHub.

Contoh Persegi Panjang SVG di Aurelia

Pertama-tama mari kita buat file JavaScript:

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

Sekarang untuk HTMLnya.

Di Aurelia, Anda dapat menentukan template (atau menggunakan yang sebaris) dengan anotasi @template , @inlineView atau bahkan @noView , tetapi di luar kotak, ia mencari file .html dengan nama yang sama dengan .js mengajukan. Hal yang sama berlaku untuk nama elemen kustom—Anda dapat menyetelnya dengan @customElement('awesome-svg') , tetapi jika tidak, Aurelia akan mengonversi judul menjadi huruf hubung dan mencari kecocokan.

Karena kami tidak menentukan sebaliknya, elemen akan disebut awesome-svg dan Aurelia akan mencari template dengan nama yang sama dengan file js (yaitu awesome-svg.html ) di direktori yang sama:

 <!-- 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>

Perhatikan tag <template> ? Semua template harus dibungkus dengan <template> . Juga perlu diperhatikan adalah bahwa Anda menggunakan ` untuk … dari and the string interpolation ${title}` seperti yang Anda lakukan di ES6.

Sekarang untuk menggunakan komponen, kita harus mengimpornya dalam template dengan <require from="path/to/awesome-svg"></require> atau, jika digunakan di seluruh aplikasi, mengglobalkan sumber daya dalam fungsi konfigurasi kerangka kerja dengan aurelia.use.globalResources('path/to/awesome-svg'); , yang akan mengimpor komponen awesome-svg sekali dan untuk selamanya.

[Catatan, jika Anda tidak melakukan keduanya, <awesome-svg></awesome-svg> akan diperlakukan sama seperti tag HTML lainnya, tanpa kesalahan.]

Anda dapat menampilkan komponen dengan:

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

Ini membuat satu set 3 persegi panjang:

Contoh Persegi Panjang SVG di Angular 2

Sekarang mari kita lakukan contoh yang sama di Angular 2, juga tersedia di GitHub. Angular 2 mengharuskan kita menentukan template dan nama elemen:

 // 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[] = [] }

Pandangan adalah di mana hal-hal menjadi sedikit rumit. Pertama-tama, Angular secara diam-diam memperlakukan tag HTML yang tidak dikenal dengan cara yang sama seperti yang dilakukan browser: ia memicu kesalahan yang mengatakan sesuatu di sepanjang baris my-own-tag adalah elemen yang tidak dikenal. Itu melakukan hal yang sama untuk semua properti yang Anda ikat, jadi jika Anda memiliki kesalahan ketik di suatu tempat dalam kode, itu akan menarik perhatian besar karena aplikasi akan mogok. Kedengarannya bagus, bukan? Ya, karena Anda akan langsung menyadari jika Anda merusak aplikasi, dan tidak, karena ini hanya bentuk yang buruk.

Pertimbangkan cuplikan ini, yang baik-baik saja dalam hal sintaksis pengikatan:

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

Meskipun terbaca baik-baik saja, Anda akan mendapatkan kesalahan seperti "tidak dapat mengikat ke 'mengisi' karena itu bukan properti yang diketahui dari ':svg:rect'." Untuk memperbaikinya, Anda perlu menggunakan sintaks [attr.fill]="color" sebagai gantinya. Perhatikan juga bahwa diperlukan untuk menentukan namespace di elemen anak di dalam <svg/>: <svg:rect> untuk memberi tahu Angular bahwa ini tidak boleh diperlakukan sebagai HTML. Mari kita perluas cuplikan kita:

 <!-- 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>

Di sana kita pergi. Selanjutnya, impor dalam konfigurasi modul:

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

Sekarang komponen dapat digunakan di seluruh modul ini, seperti:

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

Elemen Kustom

Misalkan sekarang kita ingin kode persegi panjang kita menjadi komponen kustom dengan logikanya sendiri.

Elemen Kustom: Angular 2 Way

Karena Angular 2 merender komponen dengan apa yang cocok dengan pemilih yang ditentukan, sangat mudah untuk menentukan komponen khusus, seperti:

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

Cuplikan di atas akan merender elemen khusus ke <g custom-rect></div> apa pun, yang sangat berguna.

Elemen Kustom: Cara Aurelia

Aurelia memungkinkan kita membuat elemen kustom khusus template:

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

Elemen kustom akan diberi nama sesuai dengan nama file. Satu-satunya perbedaan dari penamaan komponen lain adalah ketika mengimpor, baik dalam konfigurasi atau melalui tag <require> , Anda harus meletakkan .html di akhir. Jadi misalnya: <require from="awesome-svg.html"></require> .

Aurelia juga memiliki atribut khusus, tetapi tidak memiliki tujuan yang sama seperti di Angular 2. Misalnya, di Aurelia, Anda dapat menggunakan anotasi @containerless pada elemen rect kustom. @containerless juga dapat digunakan dengan templat khusus tanpa pengontrol dan <compose> , yang pada dasarnya merender barang ke dalam DOM.

Perhatikan kode berikut yang berisi anotasi @containerless :

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

Outputnya tidak akan berisi tag elemen khusus ( custom-rect ), tetapi kita mendapatkan:

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

Jasa

Dalam hal layanan, Aurelia dan Angular sangat mirip, seperti yang akan Anda lihat dalam contoh berikut. Misalkan kita membutuhkan NumberOperator yang bergantung pada NumberGenerator .

Layanan di Aurelia

Berikut cara mendefinisikan dua layanan kami di Aurelia:

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

Sekarang, untuk sebuah komponen, kami menyuntikkan dengan cara yang sama:

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

Seperti yang Anda lihat, dengan injeksi dependensi, kelas apa pun dapat menjadi layanan yang sepenuhnya dapat diperluas, sehingga Anda bahkan dapat menulis resolver Anda sendiri.

Pabrik di Aurelia

Jika yang Anda butuhkan adalah pabrik atau instans baru ( Factory dan NewInstance hanyalah beberapa resolver populer yang tersedia di luar kotak), Anda dapat melakukan hal berikut:

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

Layanan Sudut

Inilah kumpulan layanan yang sama di Angular 2:

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

Anotasi @Injectable diperlukan, dan untuk benar-benar menyuntikkan layanan, Anda perlu menentukan layanan dalam daftar penyedia dalam konfigurasi komponen atau seluruh konfigurasi modul, seperti:

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

Atau, tidak disarankan, Anda juga dapat menentukannya dalam bootstrap(AppComponent, [NumberGenerator, NumberOperator]) .

Perhatikan bahwa Anda perlu menentukan NumberOperator dan NumberGenerator , terlepas dari cara Anda menyuntikkannya.

Komponen yang dihasilkan akan terlihat seperti ini:

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

Pabrik di Angular 2

Di Angular 2, Anda dapat membuat pabrik dengan provide anotasi, yang juga digunakan untuk layanan alias untuk mencegah tabrakan nama. Membuat pabrik mungkin terlihat seperti berikut:

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

Transklusi

Angular 1 memiliki kemampuan untuk memasukkan konten, "slot", dari satu template ke template lain menggunakan transklusi. Mari kita lihat apa yang ditawarkan keturunannya.

Proyeksi Konten dengan Angular 2

Di Angular 2, transklusi disebut "proyeksi konten", dan bekerja dengan cara yang sama seperti yang dilakukan ng-transclude ; yaitu, berbicara dalam istilah Angular 1, konten yang ditransklusikan menggunakan cakupan induk. Ini akan cocok dengan tag konten yang ditransklusikan berdasarkan pemilih konfigurasi. Mempertimbangkan:

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

Anda kemudian dapat menggunakan komponen dengan <child-component>Hello from Translusion Component</child-component> , dan kita akan mendapatkan transcluded Yes HTML yang sama persis yang dirender di child-component.

Untuk transklusi multi-slot, Angular 2 memiliki pemilih yang dapat Anda gunakan dengan cara yang sama seperti yang Anda lakukan untuk konfigurasi @Component :

 <!-- 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> 

Anda dapat menggunakan select pada tag khusus Anda, tetapi ingat bahwa tag tersebut harus diketahui oleh Angular 2.

Slot dengan Aurelia

Ingat ketika saya mengatakan Aurelia mengikuti standar web bila memungkinkan? Di Aurelia, transklusi disebut slot, dan itu hanya polyfill untuk Web Components Shadow DOM. Shadow DOM belum dibuat untuk slot , tetapi mengikuti spesifikasi W3C.

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

Aurelia dirancang untuk memenuhi standar, dan Angular 2 tidak. Akibatnya, kita dapat melakukan hal-hal yang lebih hebat dengan slot Aurelia, seperti menggunakan konten fallback (mencoba menggunakan konten fallback di Angular 2 gagal dengan <ng-content> element cannot have content ). Mempertimbangkan:

 <!-- 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>

Dengan cara yang sama seperti Angular 2, Aurelia akan membuat semua kemunculan slot berdasarkan kecocokan nama.

Perlu juga dicatat bahwa di Aurelia dan Angular, Anda dapat mengompilasi bagian template dan merender komponen secara dinamis (menggunakan <compose> dengan view-model di Aurelia, atau ComponentResolver di Angular 2).

DOM bayangan

Baik Aurelia dan Angular mendukung Shadow DOM.

Di Aurelia, cukup gunakan dekorator @useShadowDOM dan Anda siap untuk pergi:

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

Di Angular, hal yang sama dapat dilakukan dengan ViewEncapsulation.Native :

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

Ingatlah untuk memeriksa apakah browser Anda mendukung Shadow DOM.

Rendering sisi server

Ini tahun 2017, dan rendering sisi server sangat trendi. Anda sudah dapat merender Angular 2 di bagian belakang dengan Angular Universal, dan Aurelia akan memiliki ini pada tahun 2017 sebagaimana dinyatakan dalam resolusi Tahun Baru timnya. Sebenarnya, ada demo runnable di repo Aurelia.

Selain itu, Aurelia telah memiliki kemampuan peningkatan progresif selama lebih dari setahun, sesuatu yang tidak dimiliki Angular 2 karena sintaks HTML non-standarnya.

Ukuran, Performa, dan Apa yang Akan Datang Berikutnya

Meskipun tidak menunjukkan gambaran keseluruhan kepada kita, tolok ukur DBMonster, dengan konfigurasi default dan implementasi yang dioptimalkan, memberikan gambaran perbandingan yang baik: Aurelia dan Angular menunjukkan hasil serupa sekitar 100 perenderan ulang per detik (seperti yang diuji pada MacBook Pro), sementara Angular 1 menunjukkan sesuatu di sekitar setengah dari hasil itu. Baik Aurelia dan Angular mengungguli Angular 1 sekitar lima kali, dan keduanya 40% di depan React. Baik Aurelia maupun Angular 2 tidak memiliki implementasi DOM Virtual.

Pada masalah ukuran, Angular kira-kira dua kali lebih gemuk dari Aurelia, tetapi orang-orang di Google sedang mengerjakannya: Peta jalan Angular termasuk merilis Angular 4 dengan rencana untuk membuatnya lebih kecil dan lebih ringan sambil meningkatkan pengalaman pengembang. Tidak ada Angular 3, dan sungguh, nomor versi harus dihilangkan ketika berbicara tentang Angular, karena rilis besar direncanakan setiap 6 bulan. Jika Anda melihat jalur yang diambil Angular dari alfa ke versi saat ini, Anda akan melihat bahwa itu tidak selalu koheren dengan hal-hal seperti atribut yang diganti namanya dari dari build ke build, dll. Tim Angular berjanji bahwa mengubah perubahan akan mudah untuk bermigrasi.

Mulai tahun 2017, tim Aurelia berencana untuk merilis Aurelia UX, menyediakan lebih banyak integrasi dan alat, dan mengimplementasikan rendering sisi server (yang telah ada di peta jalan untuk waktu yang sangat lama).

Angular 2 vs. Aurelia: Masalah Rasa

Baik Angular dan Aurelia bagus, dan memilih satu dari yang lain adalah masalah selera dan prioritas pribadi. Jika Anda membutuhkan solusi yang lebih ramping, Aurelia adalah pilihan terbaik Anda, tetapi jika Anda membutuhkan dukungan komunitas, Angular adalah pemenangnya. Ini bukan pertanyaan "Apakah kerangka kerja ini memungkinkan saya untuk...?" karena jawabannya hanya “ya”. Mereka menyediakan fungsionalitas yang kira-kira sama sambil mengikuti filosofi dan gaya yang berbeda bersama dengan pendekatan yang sama sekali berbeda terhadap standar web.