이 글은 HTML5 Developer Conference 후기 #1에서 이어진 글이다.
2일차
Which Way Is Forward - Doug Crockford, PayPal
말로만 듣던 자바스크립트계의 요다님이신 더글라스 크록포드님의 발표였다. 실제로 봤다. 사진하고 똑같이 생겼고 키 엄청 커!!!(같이 사진이라도 찍고 싶었는데 잠시 보이다가 사라지셨;; ㅠㅠ) 제목으로는 내용을 가늠하기 어렵지만 프로그래밍 언어에 대한 얘기였다. 사실 제대로 못 알아듣기도 했고 중간에 온라인으로 할게 좀 생겨서 잘 듣지 못했다. ㅠㅠ 어쨌든 예전으로 돌아가서 goto문얘기부터 프로토타입 상속, 타입 등 언어에 대한 얘기였다.
Introduction To The Next Generation JavaScript Library for SVG - Dmitry Baranovskiy, Adobe
알만한 사람은 아는 SVG 라이브러리 Raphaël을 만든 드미트리에 발표로 이 발표에서 새로운 SVG 라이브러리를 발표한다고 미리 얘기했기 때문에 기대를 하고 있었다.(난 SVG를 쓸 일은 별로 없었지만...) 2008년에 Raphaël을 만들었는데 DOM 처리가 어려워서 Raphaël을 안쓰겠다고 불평하는 사람이 많이 있었다. 그래서 새로 만든 SVG 라이브러리가 Snap.svg이고 Raphaël이 구형 브라우저를 지원하기 위해서 SVG와 VML의 공통 부분만 다루고 있기 때문에 제한적이었다면 Snap.svg는 모던 브라우저만 지원하기에 SVG를 완전히 지원한다. 간단히 Snap.svg를 다루는 예제(Getting Started의 내용이다.)를 보여주었는데 꽤 편해보였다.(써보기전엔 모를 일!)
발표뒤에 d3.js와 어떻게 다르냐는 질문이 있었는데 d3.js는 비쥬얼라이제이션 라이브러리고 Snap.svg는 SVG 라이브러리라고 대답했고 성능문제는 어떻게 생각하냐는 질문에는 다른 기술은 다른 문제를 다루므로 성능때문에 SVG가 적합하지 않다면 Canvas를 사용했다고 했다.
React: Rethinking best practices - Pete Hunt, Instagram
이 발표는 JSconf.eu와 똑같은 발표이므로 발표영상도 공개되어 있다.(영상은 안봤지만 슬라이드가 동일하니 발표도 똑같겠지) 페이스북이 공개한 React라는 자바 스크립트 프레임웍에 대한 발표였는데 이름정도는 알고 있었지만 깊게 보지는 않았는데 이 발표를 듣고 AngularJS와는 또 다르게 꽤 관심이 많아졌다. 조만간 기회가 되면 한번 사용해 볼듯 하다.
React는 템플릿 대신 컴포넌트를 만들라고 하고 있는데 템플릿은 기술은 분리하지만 관심사는 분리하지 못하므로 모델을 바꿀때 뷰가 다 깨지게 된다. 그래서 컴포넌트로 관심사를 분리할 수 있는데 이 컴포넌트는 구성할 수 있고 재사용할 수 있고 테스트할 수 있다. UI가 어려운 이유는 상태가 많기 때문인데 React는 데이터가 변경될 때마다 완전히 새로 렌더링한다. 대신 AngularJS와 다르게 양방향 바인딩(좋지만 디버깅이 어렵다.)이 없고 더티 체킹을 하지 않는다. 명시적인 DOM 작업을 전혀 하지 않고 모든걸 선언적으로 처리한다. 매번 렌더링한다고 하면 느리다고 생각하기 마련인데 React는 Virtual DOM을 사용해서 성능을 해결했다. 데이터가 변경될 때마다 Virtual DOM을 생성해서 기존 거과 다른 점을 찾아서 최소한의 변경사항만 찾아낸다. DOM이 느리기 때문에 이 방법이 아주 빠르고 DOM처리는 최소한으로만 이뤄지며 Virtual DOM이 DOM API에 의존하지 않기 때문에 SVG, Canvas도 지원함에도 DOM 없이도 테스트할 수 있고 심지어 Node.js에서도 돌아간다.
WebSocket Perspectives and Vision for the Future - Frank Greco, Kaazing
이 발표는 영 별로였다. 그냥 예전의 웹은 어땠고 웹소켓이 왜 등장했고 웹소켓 동작방식이나 패킷에 대한 설명을 한참 하다가 데모 시연으로 넘어갔다 데모는 라즈베리파이에 연결한 램프가 있고 노트북과 연결해서 웹소켓으로 램프를 키고 끄고 하는 시연이었는데 뭔가 엄청난 일이 이뤄지는 듯이 설명했지만 라즈베리파이라고 특별히 다를 것도 없고 신기할 것도 없었다.(그냥 웹소켓으로 요청왔다갔다 하는거잖아!)
AngularJS and the Single Page Application (SPA) - Joshua Woodward, Ebay
장소가 좀 작은 곳이기도 했지만 사람이 너무 많이 들어와서 앉을 자리가 없을 정도로 사람이 몰렸다. 뭐 받아적지는 못했는데 Angular.js 소개정도의 발표였다. Angular.js 설명하면 항상 나오는 양방향바인딩부터해서 서비스, 디렉티브등을 설명했는데 그냥 튜토리얼 수준이었다. 외국에서도 아직 Angular.js가 초창기인지 이번 컨퍼런스에서 고급 팁이라던가 성능향상이나 경험등을 듣기 원했는데 대부분 튜토리얼 수준이라 많이 아쉬웠다.(큰 무대에서는 규모에 맞게 퀄리티와 수준을 올리라고!)
PDF.js - Firefox's HTML5 PDF Viewer - Brendan Dahl, Mozilla
파이어폭스에 내장된 PDF 뷰어인 pdf.js에 대한 발표였다. 처음에는 PDF 포맷에 대해서 설명하고 2011년에 Firefox 4를 발표하면서 pdf.js를 만들었다. pdf.js를 만든 이유는 보안이슈가 크고 사용자 경험을 좋게하고 성능을 높이기 위함이었다. 그리고 HTML5 기술을 한계까지 써보려는 의도도 있었다. 2011년 드디어 뷰어가 완성되었는데 텍스트 처리가 상당히 어려운 부분이었다. OS마다 폰트 엔진이 다르고 언어마다 다양한 경우가 있기 때문인데 이부분이 pdf.js의 큰 부분 중 하나이다. 그리고 성능을 위해서 최대한 웹워커를 사용하고 있다.
2013년 파이어폭스 14 나이틀리 버전에 pdf.js가 내장되었고 2013년 2월에 안정버전에 포함되었다. 그 뒤에 수많은 버그를 처리하고 한번에 다 로딩하지 않고 사용자가 스크롤을 할 때 이어서 로딩하고 증분 렌더링(incremental rendering)을 적용했다. 그래서 현재는 파이어폭스 뿐만 아니라 크롬, IE 9+, 사파리, 오페라에서 모두 동작하고 주요 PDF 기능을 거의 지원하고 있다. 거의 내가 이번 컨퍼런스에서 듣고 싶은 내용의 가장 적합한 발표중 하나였다. pdf.js를 만들면서 해결한 문제들과 배운 것들을 생생하게 들을 수 있는 자리였다.
맺음말
컨퍼런스는 2일이었지만 운좋게 출장기간도 길게 잡혔고 주말도 붙혀서 갔다 왔기에 여유로운 시간을 좀 보내고 왔다. 출장 가기전에 발표다 교육이다 해서 사실 지쳐있었는데 여유로운 시간을 보내면서 적당히 회복을 하고 돌아왔다. 작년에 갔던 Nodeconf의 화기애애한 분위기와는 또 달리 사람들하고 어울릴 틈은 별로 없었지만 좋은 시간이었다. 나중에 이 다음날부터 New Relic의 {Future}Stack 컨퍼런스가 있다는 걸 알게되었는데 좀 미리 알았다면 이것까지 듣고 올 수 있게 일정을 잡았을텐데 좀 아쉽긴 하다.
Comments