Aurelia 대 Angular 2 — 코드 비교

오래된 JavaScript Angular 1의 후손인 Angular와 Aurelia는 거의 같은 시기에 비슷한 철학을 가지고 개발 및 출시되었지만 몇 가지 주요 방식이 다른 치열한 경쟁자입니다. 이 기사에서는 기능과 코드의 차이점을 나란히 비교합니다.

간단히 말해서 Aurelia는 Durandal과 Caliburn의 제작자로 알려진 Rob Eisenberg가 만들었습니다. 그는 Google의 Angular 2 팀에서 일했지만 2014년에 현대 프레임워크가 어떻게 보여야 하는지에 대한 자신의 견해가 다른 팀과 다를 때 회사를 떠났습니다.

유사점은 보다 기술적인 수준에서도 지속됩니다. 템플릿 및 이와 관련된 구성 요소(또는 사용자 정의 요소)는 Angular 및 Aurelia 앱 모두의 핵심이며 둘 다 루트 구성 요소(예: 앱)가 있어야 합니다. 또한 Angular와 Aurelia는 모두 구성 요소 구성에 데코레이터를 많이 사용합니다. 각 구성 요소에는 연결할 수 있는 고정된 수명 주기가 있습니다.

그렇다면 Aurelia와 Angular 2의 차이점은 무엇입니까?

Rob Eisenberg에 따르면 주요 차이점은 코드에 있습니다. Aurelia는 눈에 거슬리지 않습니다. Aurelia 앱을 개발할 때(구성 후) ES6 또는 TypeScript로 작성하고 템플릿은 특히 Angular와 비교할 때 절대적으로 정상적인 HTML처럼 보입니다. Aurelia는 구성보다 관례이며 95%의 경우 기본 관례(예: 템플릿 이름 지정, 요소 이름 지정 등)를 사용하면 문제가 없지만 Angular는 기본적으로 모든 것에 대한 구성을 제공해야 합니다.

Aurelia는 HTML 태그와 관련하여 대소문자를 구분하지 않는 반면 Angular 2는 대소문자를 구분하지 않기 때문에 더 많은 표준을 준수하는 것으로 간주됩니다. 즉, Angular 2는 브라우저의 HTML 파서에 의존할 수 없으므로 자체적으로 생성했습니다.

SPA 프레임워크 중에서 선택할 때 고려해야 할 또 다른 요소는 커뮤니티, 즉 이를 둘러싼 생태계입니다. Angular와 Aurelia는 모두 모든 기본 사항(라우터, 템플릿 엔진, 유효성 검사 등)을 갖추고 있으며 기본 모달을 얻거나 타사 라이브러리를 사용하기가 쉽지만 Angular가 더 큰 커뮤니티와 더 큰 개발을 가지고 있다는 것은 놀라운 일이 아닙니다. 팀.

또한 두 프레임워크가 모두 오픈 소스이지만 Angular는 주로 Google에서 개발하고 상용화할 의도가 없는 반면 핵심 팀을 고용한 Durandal, Inc.는 컨설팅 및 교육을 통한 Ember.js의 수익 창출 모델을 따르고 있습니다.

Aurelia 대 Angular: 코드 비교

각 프레임워크 이면의 철학을 강조하는 가장 주목할만한 기능을 살펴보겠습니다.

Angular 및 Aurelia용 시드 프로젝트를 복제한 후 ES6 Aurelia 앱(Jspm/System.js, Webpack 및 RequireJS를 ES6 또는 TypeScript와 함께 사용할 수 있음) 및 TypeScript Angular 앱(WebPack)을 각각 갖게 됩니다.

하자 롤.

데이터 바인딩

작업 예제를 나란히 비교하기 전에 Aurelia와 Angular 2 간의 몇 가지 구문적 차이점, 즉 컨트롤러에서 뷰로 값을 바인딩하는 주요 기능을 살펴봐야 합니다. Angular 1은 변경 범위를 스캔하는 방법인 모든 것에 "더티 검사"를 사용했습니다. 이것은 당연히 많은 성능 문제를 야기했습니다. Angular 2도 Aurelia도 그 경로를 따르지 않았습니다. 대신 이벤트 바인딩을 사용합니다.

Angular 2의 데이터 바인딩

Angular에서는 데이터를 대괄호로 묶고 괄호를 사용하여 다음과 같이 이벤트를 묶습니다.

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

양방향 바인딩(응용 프로그램 데이터의 변경 사항을 뷰에 반영하거나 그 반대로 적용하려는 경우)은 대괄호와 괄호의 조합입니다. 따라서 양방향 바운드 입력의 경우 다음과 같이 잘 작동합니다.

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

즉, 괄호는 이벤트를 나타내고 대괄호는 입력에 푸시되는 값을 나타냅니다.

Angular 팀은 바인딩 방향을 DOM으로, DOM에서, 양방향으로 분리하는 작업을 훌륭하게 수행했습니다. 또한 바인딩 클래스 및 스타일과 관련된 많은 구문 설탕이 있습니다. 예를 들어 다음 스니펫을 단방향 바인딩의 예로 고려하십시오.

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

그러나 양방향 데이터를 구성 요소에 바인딩하려면 어떻게 해야 할까요? 다음 기본 입력 설정을 고려하십시오.

 <!-- 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 을 사용하려면 모듈이 @angular/forms 에서 FormsModule을 가져와야 합니다. 이제 흥미로운 것이 있습니다. 상위 입력의 값을 업데이트하면 모든 곳에서 값이 변경되지만 하위 입력을 수정하면 해당 하위에만 영향을 줍니다. 부모 값을 업데이트하려면 부모에게 알리는 이벤트가 필요합니다. 이 이벤트의 명명 규칙은 다음과 같이 property name + 'Change' 입니다.

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

양방향 바인딩은 ngModelChange 이벤트에 바인딩한 직후 제대로 작동하기 시작합니다.

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

바인딩된 값이 변경되더라도 무시하도록 프레임워크에 효과적으로 지시할 때 일회성 바인딩은 어떻습니까?

Angular 1에서는 {{::value}}를 사용하여 한 번 바인딩했습니다. Angular 2에서는 일회성 바인딩이 복잡해집니다. 설명서에는 구성 요소 구성에서 changeDetection: ChangeDetectionStrategy.OnPush 속성을 사용할 수 있다고 나와 있지만 그렇게 하면 모든 바인딩이 일회성으로 만들어집니다.

데이터 바인딩: Aurelia 방식

Angular 2와 달리 Aurelia에서 데이터와 이벤트를 바인딩하는 것은 정말 간단합니다. Angular의 property="${value}" 처럼 보간을 사용하거나 다음 바인딩 유형 중 하나를 사용할 수 있습니다.

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

이름은 자명합니다. 게다가 property.bind="value" 가 있습니다. 이것은 바인딩이 단방향이어야 하는지 양방향이어야 하는지를 스스로 감지하는 문법적인 설탕입니다. 고려하다:

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

위의 스니펫에서 @bindable 과 @Input 은 모두 구성 가능하므로 바인딩되는 속성의 이름 등을 쉽게 변경할 수 있습니다.

이벤트는 어떻습니까? Aurelia의 이벤트에 바인딩하려면 .trigger 및 .delegate 를 사용합니다. 예를 들어, 자식 구성 요소가 이벤트를 발생시키도록 하려면 다음을 수행할 수 있습니다.

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

그런 다음 부모에서 이를 수신하려면 다음을 수행합니다.

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

이 둘의 차이점은 .trigger 가 해당 특정 요소에 대한 이벤트 핸들러를 생성하는 반면 .delegate 는 document 에 리스너를 추가한다는 것입니다. 이렇게 하면 리소스가 절약되지만 비버블링 이벤트에는 분명히 작동하지 않습니다.

Aurelia 대 Angular의 기본 예

이제 바인딩을 다루었으므로 확장 가능한 벡터 그래픽(SVG)을 렌더링하는 기본 구성 요소를 만들어 보겠습니다. 그것은 굉장할 것입니다. 그러므로 우리는 이것을 awesome-svg 라고 부를 것입니다. 이 연습에서는 Aurelia 및 Angular 2의 기본 기능과 철학을 모두 설명합니다. 이 기사의 Aurelia 코드 예제는 GitHub에서 사용할 수 있습니다.

Aurelia의 SVG 직사각형 예

먼저 JavaScript 파일을 작성해 보겠습니다.

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

이제 HTML입니다.

Aurelia에서는 @template , @inlineView 또는 @template 주석을 사용하여 템플릿을 지정할 수 있습니다(또는 인라인 템플릿 사용). 하지만 @noView 으로 .js 와 동일한 이름을 가진 .html 파일을 검색합니다. 파일. 사용자 정의 요소의 이름도 마찬가지입니다. @customElement('awesome-svg') 설정할 수 있지만 그렇게 하지 않으면 Aurelia는 제목을 대소문자 구분으로 변환하고 일치하는 항목을 찾습니다.

달리 지정하지 않았기 때문에 요소는 Awesome awesome-svg 라고 하고 Aurelia는 동일한 디렉토리에서 js 파일(예: awesome-svg.html )과 동일한 이름을 가진 템플릿을 검색합니다.

 <!-- 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> 태그가 보이시나요? 모든 템플릿은 <template> 태그로 래핑되어야 합니다. 또한 ES6에서 하는 것처럼 ` for ... of and the string interpolation ${title}`을 사용한다는 점에 주목할 가치가 있습니다.

이제 구성 요소를 사용하려면 <require from="path/to/awesome-svg"></require> 있는 템플릿으로 가져오거나 앱 전체에서 사용되는 경우 프레임워크의 구성 기능에서 리소스를 전역화해야 합니다. aurelia.use.globalResources('path/to/awesome-svg'); , 이는 awesome-svg 구성 요소를 한 번에 가져옵니다.

[이 중 어느 것도 수행하지 않으면 <awesome-svg></awesome-svg> 가 오류 없이 다른 HTML 태그처럼 처리됩니다.]

다음을 사용하여 구성요소를 표시할 수 있습니다.

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

이렇게 하면 3개의 직사각형 세트가 렌더링됩니다.

Angular 2의 SVG 사각형 예

이제 GitHub에서도 사용할 수 있는 Angular 2에서 동일한 예제를 수행해 보겠습니다. Angular 2에서는 템플릿과 요소 이름을 모두 지정해야 합니다.

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

보기는 상황이 약간 복잡해지는 곳입니다. 우선, Angular는 브라우저와 동일한 방식으로 알려지지 않은 HTML 태그를 자동으로 처리합니다. my-own-tag 라인을 따라 무언가가 알려지지 않은 요소라는 오류를 발생시킵니다. 바인딩하는 모든 속성에 대해 동일한 작업을 수행하므로 코드 어딘가에 오타가 있는 경우 앱이 충돌하므로 큰 관심을 끌 것입니다. 좋은 것 같죠? 예, 앱을 중단하면 즉시 알아차릴 수 있기 때문입니다.

바인딩 구문 측면에서 완벽하게 괜찮은 다음 스니펫을 고려하세요.

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

잘 읽히더라도 "':svg:rect'의 알려진 속성이 아니기 때문에 'fill'에 바인딩할 수 없습니다."와 같은 오류가 발생합니다. 이 문제를 해결하려면 대신 [attr.fill]="color" 구문을 사용해야 합니다. 또한 <svg/>: <svg:rect> 내부의 자식 요소에 네임스페이스를 지정해야 Angular가 이것이 HTML로 취급되어서는 안 된다는 것을 알립니다. 스니펫을 확장해 보겠습니다.

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

우리는 거기에 갈. 그런 다음 모듈 구성에서 가져옵니다.

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

이제 다음과 같이 이 모듈에서 구성 요소를 사용할 수 있습니다.

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

사용자 정의 요소

이제 직사각형 코드가 자체 논리를 가진 사용자 지정 구성 요소가 되기를 원한다고 가정합니다.

사용자 정의 요소: Angular 2 Way

Angular 2는 정의된 선택기와 일치하는 항목으로 구성 요소를 렌더링하므로 다음과 같이 사용자 지정 구성 요소를 정의하는 것이 매우 쉽습니다.

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

위의 스니펫은 사용자 정의 요소를 모든 <g custom-rect></div> 태그로 렌더링하므로 매우 편리합니다.

사용자 정의 요소: Aurelia Way

Aurelia를 사용하면 템플릿 전용 사용자 정의 요소를 만들 수 있습니다.

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

사용자 정의 요소의 이름은 파일 이름과 관련하여 지정됩니다. 다른 구성 요소의 이름 지정과의 유일한 차이점은 가져올 때 구성에서 또는 <require> 태그를 통해 마지막에 .html 을 넣어야 한다는 것입니다. 예: <require from="awesome-svg.html"></require> .

Aurelia에도 사용자 정의 속성이 있지만 Angular 2에서와 같은 용도로 사용되지는 않습니다. 예를 들어 Aurelia에서는 사용자 정의 rect 요소에 @containerless 주석을 사용할 수 있습니다. @containerless 는 기본적으로 DOM에 항목을 렌더링하는 컨트롤러 및 <compose> 없이 사용자 정의 템플릿과 함께 사용할 수도 있습니다.

@containerless 주석이 포함된 다음 코드를 고려하세요.

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

출력에는 사용자 정의 요소 태그( custom-rect )가 포함되지 않지만 대신 다음을 얻습니다.

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

서비스

서비스와 관련하여 Aurelia와 Angular는 다음 예에서 볼 수 있듯이 매우 유사합니다. NumberGenerator 에 의존하는 NumberOperator 가 필요하다고 가정합니다.

아우렐리아의 서비스

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

이제 구성 요소에 대해 동일한 방식으로 주입합니다.

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

보시다시피 종속성 주입을 사용하면 모든 클래스가 완전히 확장 가능한 서비스가 될 수 있으므로 자체 해석기를 작성할 수도 있습니다.

아우렐리아의 공장

필요한 것이 팩토리 또는 새 인스턴스인 경우( Factory 및 NewInstance 는 기본적으로 제공되는 몇 가지 인기 있는 리졸버임) 다음을 수행할 수 있습니다.

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

앵귤러 서비스

다음은 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++; } }

@Injectable 주석이 필요하며 실제로 서비스를 주입하려면 다음과 같이 구성 요소 구성 또는 전체 모듈 구성의 공급자 목록에 서비스를 지정해야 합니다.

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

또는 권장하지 않지만 bootstrap(AppComponent, [NumberGenerator, NumberOperator]) 호출에서 지정할 수도 있습니다.

주입 방법에 관계없이 NumberOperator 와 NumberGenerator 를 모두 지정해야 합니다.

결과 구성 요소는 다음과 같습니다.

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

Angular 2의 공장

Angular 2에서는 이름 충돌을 방지하기 위해 서비스 별칭을 지정하는 데 사용되는 provide 주석으로 팩토리를 만들 수 있습니다. 팩토리 생성은 다음과 같을 수 있습니다.

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

트랜스클루전

Angular 1은 트랜스클루전을 사용하여 한 템플릿에서 다른 템플릿으로 "슬롯"이라는 콘텐츠를 포함할 수 있었습니다. 그 자손이 무엇을 제공하는지 봅시다.

Angular 2를 사용한 콘텐츠 프로젝션

Angular 2에서 트랜스클루전은 "컨텐츠 프로젝션"이라고 하며 ng-transclude 와 동일한 방식으로 작동합니다. 즉, Angular 1 용어로 말하면 포함된 콘텐츠는 상위 범위를 사용합니다. 구성 선택기를 기반으로 포함된 콘텐츠 태그와 일치합니다. 고려하다:

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

그런 다음 <child-component>Hello from Translusion Component</child-component> 와 함께 구성 요소를 사용할 수 있으며, 자식 구성 요소에서 렌더링된 정확한 트랜스클루드 Yes HTML을 얻을 수 있습니다.

다중 슬롯 변환의 경우 Angular 2에는 @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> 

사용자 정의 태그에서 select 을 사용할 수 있지만 태그는 Angular 2에 알려져 있어야 합니다.

Aurelia가 있는 슬롯

Aurelia는 가능할 때마다 웹 표준을 따릅니다. Aurelia에서 트랜스클루전은 슬롯이라고 하며 웹 구성 요소 Shadow DOM에 대한 폴리필일 뿐입니다. Shadow DOM은 아직 슬롯에 대해 생성되지 않았지만 W3C 사양을 따릅니다.

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

Aurelia는 표준을 준수하도록 설계되었지만 Angular 2는 그렇지 않았습니다. 결과적으로 Aurelia의 슬롯으로 대체 콘텐츠 사용(Angular 2에서 대체 콘텐츠를 사용하려고 하면 <ng-content> element cannot have content )과 같은 멋진 일을 할 수 있습니다. 고려하다:

 <!-- 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와 같은 방식으로 Aurelia는 이름 일치를 기반으로 슬롯의 모든 항목을 렌더링합니다.

Aurelia와 Angular 모두에서 템플릿 부분을 컴파일하고 구성 요소를 동적으로 렌더링할 수 있다는 점도 주목할 가치가 있습니다(Aurelia의 view-model 과 함께 <compose> 또는 Angular 2의 ComponentResolver 사용).

섀도 돔

Aurelia와 Angular는 모두 Shadow DOM을 지원합니다.

Aurelia에서는 @useShadowDOM 데코레이터를 사용하기만 하면 됩니다.

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

Angular에서는 ViewEncapsulation.Native 로 동일한 작업을 수행할 수 있습니다.

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

브라우저가 Shadow DOM을 지원하는지 확인하는 것을 잊지 마십시오.

서버 측 렌더링

지금은 2017년이고 서버 측 렌더링은 매우 트렌디합니다. Angular Universal을 사용하여 백엔드에서 Angular 2를 이미 렌더링할 수 있으며 Aurelia는 팀의 새해 결심에 명시된 대로 2017년에 이를 제공할 것입니다. 사실, Aurelia의 repo에 실행 가능한 데모가 있습니다.

그 외에도 Aurelia는 비표준 HTML 구문으로 인해 Angular 2가 제공하지 않는 기능을 1년 넘게 점진적으로 개선해 왔습니다.

크기, 성능 및 다음 제품

전체 그림을 보여주지는 않지만 기본 구성과 최적화된 구현으로 DBMonster 벤치마크는 좋은 비교 그림을 그립니다. Aurelia와 Angular는 초당 약 100번의 재렌더링이라는 유사한 결과를 보여줍니다(MacBook Pro에서 테스트). Angular 1은 그 결과의 절반 정도를 보여주었습니다. Aurelia와 Angular는 모두 Angular 1보다 약 5배 성능이 뛰어나며 둘 다 React보다 40% 앞서 있습니다. Aurelia도 Angular 2도 Virtual DOM 구현이 없습니다.

크기 문제에서 Angular는 Aurelia보다 약 2배 더 뚱뚱하지만 Google 직원이 작업하고 있습니다. Angular의 로드맵에는 개발자 경험을 개선하면서 더 작고 더 가볍게 만들 계획과 함께 Angular 4를 출시하는 것이 포함됩니다. Angular 3는 없으며, 주요 릴리스는 6개월마다 계획되어 있으므로 Angular에 대해 이야기할 때 버전 번호를 삭제해야 합니다. Angular가 알파에서 현재 버전으로 이동한 경로를 보면 빌드에서 빌드로 이름이 바뀌는 속성과 같은 것들이 항상 일관적이지 않다는 것을 알 수 있습니다. Angular 팀은 변경 사항을 쉽게 변경할 수 있다고 약속합니다. 마이그레이션합니다.

2017년 현재 Aurelia 팀은 Aurelia UX를 출시하고 더 많은 통합 및 도구를 제공하며 서버 측 렌더링(오랫동안 로드맵에 있었음)을 구현할 계획입니다.

Angular 2 대 Aurelia: 취향의 문제

Angular와 Aurelia는 둘 다 좋으며 서로를 선택하는 것은 개인의 취향과 우선 순위의 문제입니다. 더 슬림한 솔루션이 필요한 경우 Aurelia가 최선의 선택이지만 커뮤니티 지원이 필요한 경우 Angular가 승자입니다. "이 프레임워크가 ...을 허용합니까?"의 문제가 아닙니다. 대답은 단순히 "예"이기 때문입니다. 웹 표준에 대한 완전히 다른 접근 방식과 함께 다른 철학과 스타일을 따르는 동안 거의 동일한 기능을 제공합니다.