최근에 JavaScript 프레임 워크에 대한 대화는 React (기술적으로 도서관), Next.js, Svelte, Angular 등

와 같은 인기있는 이름에 의해 지배되었습니다.
이것들은 모두 훌륭한 도구이지만 Aurelia 2에 대해 들었습니까?

내가 Aurelia를 처음 접했을 때, 나의 반응은 "그게 뭐야?" 그러나 2 년 동안 함께 일한 후, 나는 그것이 최고가 아니라면 최고의 프레임 워크 중 하나라고 생각합니다.

왜 그렇게 생각합니까?

설명하겠습니다. 나는 React.js에서 Aurelia로 전환했고 처음에는 그것이 또 다른 JavaScript 프레임 워크라고 가정했습니다. 그러나 더 깊이 파고 들었을 때, 나는 그 진정한 잠재력과 힘을 깨닫기 시작했습니다.

이 기사는 Aurelia 2에 대한 소개 역할을 할 것입니다. 여기서 강력한 개념을 보여줄 것입니다.

1. 이벤트 애그리 게이터

우선 이벤트 애그리 게이터, C# 생태계에서 일한 경우 익숙 할 수있는 개념이지만 여기에 Aurelia에서 작동하는 방법은 다음과 같습니다.

이벤트 애그리 게이터는 C#에서 일반적으로 사용되는 이벤트 기반 메시징 패턴과 유사하게 기능합니다. Aurelia 응용 프로그램 내에서 맞춤형 이벤트를 게시하고 구독 할 수있는 펍/하위 시스템입니다.

이것은 앱의 다른 부분들 사이의 분리 된 통신을 용이하게합니다. 이벤트 애그리 게이터 또는 중재자가 이벤트 처리를 간소화하는 데 사용되는 C#과 마찬가지로 Aurelia의 이벤트 애그리 게이터는 프레임 워크 자체에 의해 활용되어 응용 프로그램 수명주기의 다양한 단계에서 이벤트를 게시하고 특정 조치를 취합니다.

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. 의존성 주입

종속성 주입 (DI)은 객체 자체가 해당 종속성을 생성 할 책임이 없으면 필요한 종속성으로 물체를 생성하는 것을 용이하게하는 설계 패턴입니다. 이것은 클래스와 그 종속성 사이의 느슨한 커플 링을 촉진하여 모듈성과 테스트 가능성을 향상시킵니다.

Aurelia는 응용 프로그램의 다른 부분을 배선하는 프로세스를 단순화하는 강력하고 유연한 DI 시스템을 제공합니다. Aurelia의 DI를 사용하면 종속성을 관리하고 주입하는 것이 원활하게되어 클리너가 더 관리 가능한 코드가 생깁니다.

또한이 접근 방식은 복잡한 설정 또는 엄격하게 결합 된 종속성없이 개별 구성 요소의 간단한 조롱 및 테스트를 허용하므로 테스트 중심 개발 (TDD)을 더 쉽게 만들 수 있습니다.

3. 동적 구성

Aurelia의 요소는 뷰와 뷰 모델의 역동적 인 구성을 가능하게합니다. 사용자 지정 요소처럼 작동하지만 특정 태그 이름이 필요하지 않으면 유연하고 재사용 가능한 UI 구성 요소를 허용합니다.
사용중인 뷰 모델 내부에는 Aurelia의 모든 표준 수명주기 이벤트에 액세스 할 수 있으며 매개 변수를보기 모델로 초기화하거나 전달하는 데 사용할 수있는 추가 활성화 메소드가 있습니다.

실제로 요소를 사용하여 :

작동 방식 :

• Dynamic Composition : component.bind 속성은 동적 컴퓨터를보기 모델로 동적으로 바인딩합니다.

• 우려의 분리

내가 Aurelia 2를 좋아하는 이유 중 하나는 MVVM (Model-View-ViewModel) 패턴을 통한 우려의 깨끗한 분리 때문입니다.

보기 : UI 구조는 논리에서 완전히 분리됩니다. 그것은 단순히 뷰 모델에 바인딩하여 데이터를 표시하고 사용자 상호 작용을 캡처합니다.

ViewModel

: 모든 논리가 발생하는 곳입니다. 데이터를 제어하고 비즈니스 규칙을 처리하며 뷰가 표시되는 방식에 대해 걱정하지 않고 뷰를 업데이트합니다.

모델

: Aurelia는 핵심 애플리케이션 데이터를 View 및 ViewModel과 분리하여 선명도와 초점을 유지합니다. 이 분리는 애플리케이션을 모듈화하고 유지 관리하기 쉽고 테스트하기가 훨씬 간단하여보다 유연하고 확장 가능한 코드가 가능합니다.

결론

이 게시물에서 저는 Aurelia 2의 세 가지 강력한 개념에 중점을 두었습니다. 이는 응집기, 종속성 주입 및 동적 구성입니다. 그러나 이것은 프레임 워크가 제공하는 것의 작은 부분 일뿐입니다.

Aurelia 2에는 깨끗하고 확장 가능하며 유지 관리 가능한 응용 프로그램을 구축하는 데 도움이되는 기능이 있습니다. 전체 그림을 얻고 그 기능에 대해 더 깊이 빠져들려면보다 포괄적 인 이해를 위해 Aurelia 2 문서를 탐색하는 것이 좋습니다.

ps : 이것은 나의 첫 번째 게시물이고, 당신이 그것을 좋아하기를 바랍니다!