한빛출판네트워크

제공 : 한빛 네트워크
저자 : Shyam Seshadri
역자 : 이도행
원문 : The Future of AngularJS

AngularJS는 저에게 처음 접하는 계시와 같았습니다. 저는 GWT(구글 웹툴킷)를 사용해 왔고, 경험에 비추어 대규모 애플리케이션의 코드 라인의 90%를 축약하는걸 봐왔습니다. 처음부터 코드를 보지 않고, 변경하는게 얼마나 나쁜 것인지 알기 때문에, 저는 처음부터 코드를 변경했고, 그 이후 저는 어떻게든 AngularJS와 연관된 방법이나, 데이터 바인딩, 템플릿, 라우팅, 유닛 테스트, 그외의 많은 것들을 이용하여, 어떻게 절대적으로 간단하게 만드는지를 지켜봐왔습니다. 그럼에도 제일 많이 사용했던건 당연하지 않은 이름에서부터 오는 개념이였습니다. 저도 겪었지만, 왜 지시어는 복잡해야하는지, 또는 내장된 라우팅이 꽤 제한되어야하는지에 대해선 받아들이기 어려웠습니다. 반면에, AngularJS는 애플리케이션에 코드를 쓸 때 이를 당연하게 만들었고, 만약에 모든 동작에 대해서 숙지하지 않으면, 애플리케이션을 유지보수하게 어렵게 만들었습니다.

AngularJS의 각 버전과 문서에 있는 개선사항들은 AngularJS를 더 좋게 만들기 시작했습니다.

 

• 데이터 바인딩 성능 개선은 지속적으로 릴리즈 되었습니다.
  
• AngularJS 문서는 쉽게 이해하고 쓸수 있도록, 주요 수정사항에 대해서 적혀있었습니다. 
• 라우팅은 부가적인 모듈이 되었습니다. 
• 커뮤니티에서 많은 모듈과 플러그인들을 개선하기 위해 만들었고, 이는 지역화/번역(angular-translate), 더 좋은 라우팅(ui-router) 그리고 여러분이 필요한 어떤 것이든 개선했습니다.

 

AngularJS는 1.0에서 1.3으로 가는 동안 엄청나게 변했습니다. 모든 AngularJS의 단일 파트가 눈에 띄게 개선되고, 실험적 MVC 프레임워크에서 안정적이고 잘 지원되는 프레임워크를 채택하는 방향으로 흘러갔습니다. 저는 여지껏 해왔던 것보다, 작년에 더 많은 AngularJS 워크샵을 진행해 왔습니다.
그러나 AngularJS 코어 팀은 월계관을 쓰고 쉬지 않았습니다. 1.3 버전 이후에, 점점 더 발전하는 모습을 지켜보기만 하는게 아니라, AngularJS 2.0에 대해 논의하기로 결정하였고, 개발자들 뿐만아니라 무수히 많은 다른 프레임워크로부터 오는 영감에 대해서 피드백을 받았습니다. AngularJS 2.0은 초기 AngularJS인, AngularJS 1.0으로 부터 혁신적인 방향을 향해 한발을 내딛을 준비를 하였습니다. 그리고 지난 번과는 달리, 커뮤니티에서도 사용 가능한 모든 설계 문서를 리뷰 및 코멘트하면서, 중요하게 참여되었습니다. 이런 점이 여러분이 AngularJS 2.0을 학수고대하고 있는 이유입니다.


앞을 내다보다

AngularJS 1.3에서 AngularJS는 IE8에 대한 지원을 중지하였습니다. AngularJS 2.0도 이런 트렌드를 따라, 빠르고 모던한 데스크탑 브라우져(IE 10/11, 크롬, 파이어폭스, 오페라 & 사파리)와 안드로이드의 크롬, ISO6+, 윈도우폰 8이상, 파이어폭스 모바일에 집중하고 있습니다. 이는 AngularJS의 코드베이스가 짧고 간결해지게 만듭니다(오래된 브라우저에 필요시 되는 결함 수정이 필요없어지면서). 또한, AngularJS는 호환성과 Polyfills에 대한 걱정 없이, 가장 최신의 가장 멋진 특징들을 지원합니다. 이러한 기대는 AngularJS가 배포될 때까지 대부분의 브라우저들은 표준을 지키고, 기본 특징들을 지원하게 될것이고, 개발자들이 명확하게 앱을 만드는데 집중 할 수 있게 할 것입니다.


ECMAScript6 + 돌아오는 의존성 투여(Redux Dependency Injection)

ECMAScript 6는 자바스크립트에서 몇년간 해왔던 것입니다 : 실제로 네이티브 JS클래스를 지원하는 객체 지향 언어이고, 첫번째 클래스 모듈이면서 AMD(Asynchronous Modular Dependencies)이고, 문법 면에서 더욱 간결하고 선언적인 코드를 인정하면서 꽤 향상된 언어입니다. AngularJS 2.0 코드 전체는 ES6로 쓰여졌습니다. 당신은 이렇게 생각할지도 모르겠습니다. “저기요, 현재 브라우저 중에 ES6의 특성을 모두 지원하는 브라우저는 없어요!” - 개발자에게 이는 무슨 뜻일까요?
걱정마세요. 비록 AngularJS의 소스코드 전체가 ES6로 쓰여졌다해도, Tracur compiler를 이용해 ES5 표준(현재의 Javascript라고 불리는)으로 컴파일 됩니다. AngularJS는 또한 Annotation과 Assertion에 대한 지원을 Traceur compiler에 추가 중이며, 이는 AngularJS의 애플리케이션이 잘못 되어가는 문법 대신에 Annotation을 사용함으로써, 좀 더 선언적으로 쓰일 수 있게 됩니다. 그래서 당신은 아래와 같은 코드를 곧 AngularJS에서 쓸 수 있을 겁니다.

 

 

@Inject(CoffeeMaker, Microwave)

class Pantry {

 

  constructor(coffeeMaker, microwave) {

    this.coffeeMaker = coffeeMaker;

    this.microwave = microwave;

  }

 

  makeCoffee(finishedCb) {

    this.coffeeMaker.turnOn();

    this.coffeeMaker.makeCoffee(finishedCb);

  }

}

 

그리고 AngularJS 2.0은 ES5와 완벽하게 호환되며, ES6 문법들을 다룰 필요 없이 같은 문법을 이용하여 코드를 적을 수 있게 됩니다. 

더욱 빠르게, 버터같이 부드럽게

요즘엔, 모든게 빠르게 빠르게를 요구합니다. 60fps, 400ms보다 작은 로드 타임 등등. 2.0버전은 스피드에 초점을 맞췄습니다. UI 업데이트가 얼마나 빠를 수 있을까? 데이터 바인딩의 스피드를 어떻게 올릴 수 있을까? 하나의 접근은 AngularJS에 지저분하게 쓰여진 체킹코드를 데이터 바인딩과 모델 변경 리스너를 위해 네이티브 지원에 추가된 Object.observe로 바꾸는 겁니다. AngularJS 2.0에선 전체적으로 눈에 띄게 전체 데이터 바인딩과 업데이트 사이클에 대한 속도가 빨라질 것입니다.
그러나 Object.observe는 다른 브라우저는 안되고, 오직 크롬에서만 지원되고 있습니다. 모든 브라우저가 이를 기본적으로 내장하기 까지는 꽤 많은 시간이 필요할 것 같습니다. 고맙게도, AngularJS 개발자들은 발견되는 특성들에 대한 변경을 열심히 작업해왔고, Object.observe에 대한 지원을 하지 않는 브라우저에서 지저분한 오브젝트/배열 체킹을 어떻게 개선해야하는지에 대한 통찰력을 가지고 있습니다. 수천의 바인딩을 1ms 안에 가능하게 하는 게 목표이고, AngularJS 2.0에서 어떻게 다룰지에 대한 계획이 설계 문서에 나와있습니다.


유연한 라우팅

라우팅은 AngularJS 1.0버전의 핵심 기능이며, 1.2버전에 부가 모듈(ngRoute)이 되었습니다. 이 중 부분적 기능들은 오픈소스 커뮤니티에서 훌륭하게 작업이 되어 child / sibling state처럼 다양한 요구사항과 필요 사항들을 지원하고 있습니다. UI-라우터 모듈은 ngRoute의 문법과 비슷하게 제공되어 아름답게 다뤄지고, 한층 개선되었습니다.
2.0 버전에서는 저런 기능 중에 몇가지(nested states, sibling views)를 AngularJS의 코어 라우터에 가져오는 걸 목표로 하고 있습니다. 동시에 AngularJS 라우터에 적용되기 쉽지 않은 다음과 같은 여러 다른 요구들도 있습니다.

• 상태 기반 변화(State-based transitions) : UI-라우터는 이를 지원하지만, AngularJS 코어 라우팅 모듈엔 없습니다. 이를 통해 sub-state와 sibling states와 같이 다른 URL/application states에 상응하는 뷰의 부분들을 선언적이고 간단하게 AngularJS 2.0의 라우팅을 통해 구체화 할 수 있을 것입니다.
  
  
• 인증과 허가(Authentication and Authorization) : 이는 AngularJS에 이미 해결된 문제이나, AngularJS 2.0은 아래와 같은 요구사항을 반영할 예정이고, 인증과 허가를 지원하기 위해 일반적이고 쉽게 이해 가능한 용어로 소개 될 예정입니다. 
• 사용자는 로그인 할 필요가있다.
• 오직 관리자만이 특정 페이지에 접근 할 수 있다.
• 오직 특정 그룹의 멤버만 관리자 구역에 들어올 수 있다.

• 보호 상태(Preserving State) : 현재 버전의 AngularJS에선, 사용자가 UI안에 있는 두 라우터 사이를 뒤나 앞으로 전환을 빠르게하면 컨트롤러와 뷰가 이 라우트들을 파괴하고 재생산하는걸 매번 반복하게 됩니다. 이는 다양한 Use case에 최적화되지 않았습니다. 그러므로, AngularJS에서 이러한 변화 사이에 상태를 보호하는 방법에 대해서 모색함으로써, 유저관점에서 더 빠르고 최적화된 상태 변화가 이뤄질 것입니다.

 

 

데이터 지속성(Data Persistence)

마지막 남은 AngularJS 2.0 퍼즐의 핵심 조각은 지속성에 관한 이야기입니다. AngularJS는 순수한 XHR 요구를 지원하는 것부터 시작했습니다($http와 $resource를 통하여). 소켓은 서드파티 서비스와 통합을 이용해 알려졌습니다. 오프라인 지원은 어플리케이션 하나마다의 지역저장소(LocalStorage) 로 완료 되었습니다. 이는 어플리케이션에서 충분히 보편적인 것이 되어, 코어 AngularJS에서의 통신을 상기 시키고, 지속성에 대한 이야기가 필요해졌습니다. 이러한 범위에서 다음이 계획되었습니다.

• 1단계는 AngularJS2.0는 http통신(ngHttp를 이용하여), 지역저장소(LocalStorage), 세션 저장소, 인덱스된 DB접근(ngStore를 이용해)과 웹소켓 API 모듈의 토대들이 포함되어 질 수 있습니다.
  
• 2단계에선 이중 최상위엔 연결성 상태를 체크하고, 캐시 데이터의 오프라인을 확인할 수 있는 오프라인-우선 어플리케이션이 만들어 질 것입니다. 
• 3단계에선 개발자들이 단계 1과 2에 모듈 중 최상위에 있는 추상 레이어로 여러분의 데이터와 동작에 대한 모델 클래스의 ngData 모듈을 만드는게 최종적인 목표일 것입니다.

계획은 개발자들에게 API나 데이터모델과 그 데이터에 접근하고 사용자에게 추출 및 보여주는 방법을 반영하는 도구와 언어를 주는 것입니다. 오프라인 우선 빌드나 다중 사용자 어플리케이션들이 존재할 수 있도록 하는 기능은 AngularJS의 코어 모듈만으로 가능해질 것입니다. 

정리

이 기사에서는 잘 다루지 않는 AngularJS 2.0 의 예정된 주요 내용에 대해 짚어보고, 반영하려고 하였습니다. AngularJS 2.0의 초기 릴리즈는 아직 몇개월 정도 남아있지만, 근시일내에 모든 개발자들은 흥분을 감출 수 없을 것입니다.