2014년 5월 21일 수요일

[튜토리얼/한글화] Object.observe()를 통한 데이터바인딩 혁신(Data-binding revolutions with Object.observe())

HTML5Rocks에 +Addy Osmani의 'Object.observe()를 통한 데이터바인딩 혁신(Data-binding revolutions with Object.observe())' 한글 튜토리얼이 업데이트되었습니다. 아직 사이트에 라이브되지는 않았습니다만 곧 라이브가 될 것으로 예상되고 원문과 비교하면서 읽으셔도 이해에 큰 무리는 없을 것으로 판단되어 미리 업데이트합니다. :)

이 튜토리얼은 Chrome 35 버전부터 포함되는 Object.observe()에 대한 기초적인 설명부터 이를 데이터 바인딩으로 확장하는 구현 사례, 성능에 대한 분석을 담고 있습니다.

"데이터 바인딩은 흔히들 얘기하는 데이터(혹은 모델) 레이어와 표현 레이어를 분리하는 편리하고 강력한 개념이자 방법이며 이미 꽤 오랜동안 그리고  대다수의 프레임워크에서 데이터 바인딩을 지원하고 있습니다.
특히 데이터 바인딩에서 양방향 혹은 데이터의 변경을 자동으로 추적하여 뷰를 업데이트하는 방법은 데이터(정확히는 객체나 객체 내의 속성, 프로토타입 등)에 대한 관리 외에 UI까지 신경써야 하는 개발 과정을 크게 단순화시켰습니다만 이를 지원하기 위해 지속적으로 UI와 연결(Binding)된 데이터에 대한 추적을 지원해야 하며 경우에 따라서는 바인딩을 유지하기 위한 별도의 프로그래밍 방법이 필요한 경우도 있었습니다. ECMAScript7에서 추가된 .observe() 메소드는 이러한 데이터를 추적하기 위한 방법을 순수 스크립트 객체까지 확대하였습니다.
데이터의 변경을 추적하거나 기존 프레임워크에서 데이터 바인딩을 유지하기 위한 실행 비용이 부담스러웠다면 이 튜토리얼에서 observe()에 대한 이해를 통해 힌트를 얻어보시기 바랍니다."



TL;DR;


ECMAScript 7에 정의되고 Chrome 36 베타부터 탑재된 Object.observe() 메소드는 데이터 바인딩(data-binding)과 가장 밀접하게 관계된 새로운 자바스크립트 추가 기능입니다. 이는 MVC 라이브러리들에서 사용하는 감시 모델(Observing Model)에 대한 구현 방식을 획기적으로 전환할 기능이기도 합니다.

자바스크립트에서 객체에 대한 데이터 감시(Observation)의 대상은 보통 다음과 같습니다.

  1. 순수한 자바스크립트 객체들에 대한 변경
  2. 속성(Property)들이 추가, 변경되거나 삭제되었을 때
  3. 배열들이 가진 요소(Element)가 합쳐지거나 나누어졌을 때
  4. 객체의 프로토타입에 대한 변경

Object.observe()- 이하 O.o() -는 별도 라이브러리 없이 자바스크립트 객체들의 변경을 비동기적으로 감시하기 위한 방법입니다. 이는 객체들에 대한 일련의 변경 사항들을 변경이 일어난 시간 순서에 따라 전달받을 수 있는 감시자(감시 객체, Observer)를 통해 프레임워크나 라이브러리에 구현되어 있는 객체 감시 방법들에 대한 성능 개선 효과와 동일한 API를 유지하면서도 빠르고 단순한 구현을 제공하며 별도의 프레임워크 없이 양방향 데이터 바인딩을 구현할 수 있습니다.


> 데이터 바인딩의 중요성과 최근까지의 방법들


데이터 바인딩의 가장 큰 장점은 모델-뷰-컨트롤의 분할입니다. 데이터 바인딩은 복잡한 사용자 인터페이스가 데이터 모델들 내에 있는 여러 개의 속성들과 뷰들 내의 여러 엘리먼트들 간의 관계를 연결하여야 하는 곳에 있을 때 특히 유용합니다. 이는 데이터를 DOM으로부터(그리고 DOM으로) 어플리케이션의 내부 혹은 외부와의 동적인 연결을 제어하는 반복적인 코드 작성 시간을 크게 절약합니다.

최근까지 프레임워크 등에서 널리 쓰인 Dirty-checking의 경우 객체의 변경을 추적하기 위한 방법을 제공합니다만 대체적으로 동작 비용이 감시되는 객체들의 전체 숫자에 비례하여 성능과 관련된 문제가 존재하고 서버로부터 받은 데이터를 이들 객체로 변경하는 작업들이 개발자에게 요구됩니다.

O.o()는 브라우저 내의 데이터를 자체적으로 감시하기 위한 방법을 구축함으로써 요즘 널리 사용되고 있는 느린 구현 방식에 의존하지 않고 자바스크립트 프레임워크에 모델 데이터의 변경을 감시할 수 있는 방법을 제공합니다.


> Object.observe()


Object.observe()는 순수(Raw) 데이터 객체들(정규 자바스크립트 객체들)의 지원을 통해 데이터를 감시할 수 있으며 항상 모든 것에 대해 Dirty-check를 할 필요가 없는 방법으로 잠재적으로 많은 장점을 가지고 있습니다.

O.o()의 특징을 요약하면 다음과 같습니다.

  • Specifying changes of interest
    • 관심있는 변경 사항들만 사용자가 지정하여 추적하거나 알림(Notification) 개념을 통해 작업
  • Notifications
    • 단위의 마지막(대체적으로는 현재 실행 중인 이벤트 핸들러의 종료 시)에 변경 사항을 받아 효과적인 처리가 가능합니다.
  • Synthetic change record & Accessor properties
    • 기본적으로 접근자의 경우는 내부적으로 함수일 뿐이므로 감시의 대상이 되지는
    • 특정한 접근자 혹은 연산 속성(Computed Property)의 경우에도 필요하다면Notifier.notify() 등을 이용하여 사용자가 객체 내에서 추적이 필요한 경우를 선택적으로 혹은 직접 지정할 수 있습니다.
  • Single callback observers
    • 복수의 객체들에 대해 동시에 동일한 콜백으로 변경을 추적할 수 있습니다. 이는 특히 다양한 객체에 대한 변경이 동일한 기능으로 연결될 때 효과적입니다.
  • Large-scale changes
    • 개별적인 변경 사항을 추적하는 대신에 여러개의 변경 사항을 묶어서 보다 큰 단위 관점에서의 변경을 추적할 수 있습니다. 
  • Array Observation
    • 일반적인 객체 이외에도 배열의 변경 등에 대한 변경을 추적할 수도 있습니다.



> 성능


Dirty-checking은 여러분이 감시하고 있는 모든 객체의 숫자에 성능이 비례하며 (변경의 검출을 위해) 데이터 사본의 유지를 필요로 하지만 O.o()의 경우 변경의 횟수에 성능이 비례하므로 여러모로 성능 상 더 효율적입니다.

Dirty-checking
Object.observe()



> 프레임워크와 Object.observe()


이미 말씀드린 바와 같이 O.o()는 네이티브로 구현된 기능을 통해 프레임워크와 라이브러리에 그들의 데이터 바인딩 성능을 개선할 수 있는 방법을 제공합니다. 만약 O.o()가 지원 가능한 환경이라면 자바스크립트를 이용한 복잡한 프로세스 대신 높은 성능 개선을 기대할 수 있을 것입니다. Angular나 Ember 등의 주요 프레임워크들 역시 이를 지원하거나 지원하기 위한 로드맵을 진행 중입니다.


보다 자세한 내용은 튜토리얼을 참조하시기 바랍니다.


번역 링크

2014년 5월 9일 금요일

[소식] Chrome/Chromium 36 관련 업데이트 미리보기

오랜만에 포스팅을 하는군요. 최근 Google I/O 때문인지 HTML5Rocks의 신규 튜토리얼 등록도 미뤄지고 있고 해서 딱히 업데이트할 내용이 없다는 것이 핑계라면 핑계입니다만, 마침 크롬/크로미움 36 버전의 업데이트 관련한 소식 중에 신나는 것들이 있어서 공유하고자 합니다. :)

"아직 36버전의 공식 업데이트까지 기간이 남았기 때문에 최종 버전이라고 생각하시면 곤란합니다. ㅎㅎ 대신 중요한 추가 항목들이 생기면 이 포스트에 업데이트하도록 하겠습니다."



Chrome/Chromium 36 버전 중요 업데이트 미리보기


개인적으로 36 버전 업데이트에서 눈에 띄는 몇가지는 관심을 가지고 있는 신규 규격들의 적용입니다. 아래에 언급하고 있지 않은 기능 중에서 WebComponents와 같은 규격들에 대한 업데이트도 지속적으로 업데이트되고 있습니다. 올해는 재밌군요. :)


> CSS transform의 Prefix 제거


기존에 CSS transform을 적용하기 위해서는 -webkit-transform: ...처럼 prefix가 포함된 형태로 기술해야 했지만 36버전부터는 transform: ... 과 같이 prefix가 없는 상태로 기술이 가능해집니다. :)



> WebAnimations 자바스크립트 API 추가


Web Animations는 기존의 선언적인 방식에서 벗어나서 자바스크립트를 기반으로 능동적으로 CSS3 Animation 및 Transition, SVG 애니메이션을 처리할 수 있는 새로운 HTML5 규격입니다.

작년 말 Blink 엔진에서 WebAnimations 규격을 지원하기 위한 네이티브 엔진 교체가 이루어졌었습니다만 이때까지는 WebAnimation에서 정의하고 있는 자바스크립트 API가 빠진 상태로 기존 CSS3 애니메이션이 제대로 동작하는지만 확인할 수 있어 별로 차이를 느끼지 못하셨을 겁니다. (아마 엔진이 변경되었다는 사실조차 모르시는 분들이 많으실 것 같네요.)

이제 36버전부터 웹 애니메이션의 API 중 element.animate()가 사용 가능해집니다. 물론 Chrome for Android에서도 마찬가지입니다.



> CSS Will-change


will-change CSS 속성이 추가되었습니다. will-change 속성은 엘리먼트 내의 컨텐츠나 리스팅된 속성이 변경될 수 있음을 브라우저에 알려주는 일종의 힌트와도 같습니다.

단순히 속성 자체로 페이지 상의 변화가 일어나는 것은 아니지만 다양한 방식의 하드웨어 가속을 통해 렌더링이 이루어지는 환경에서는 브라우저의 렌더링이 보다 효율적으로 동작할 수 있도록 해줄 수 있습니다.

이 규격은 초안(Draft) 상태입니다만 크롬 36버전부터 구현되어 있는 상태입니다.



> ServiceWorker 초기 구현


ServiceWorker는 웹 페이지와는 독립적인 생명주기(life-cycle)를 가진 이벤트 기반 시스템으로 SharedWorker의 일종이지만 근본적으로는 어플리케이션과 별개의 스레드를 운용하며 필요하다면 개발자의 캐싱(Caching) 관리가 가능하게 하거나 네트워크를 통한 사용자 요청에 대하여 응답을 제어할 수 있게 되는 등 오프라인 지원을 위한 다양한 (특히 리소스의 제어에 유용한) 기능을 제공합니다.

현재 ServiceWorker 규격 정의가 W3C에서 현재 진행 중이며 데스크톱 크롬 36과 안드로이드용 크롬 36부터 ServiceWorker의 초기 구현이 포함됩니다. 구현 상태와 규격은 아래 사이트에서 참조하시기 바랍니다.