[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 12월 27일 화요일

[EP] HTML5 Developer Conference 후기 #2..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

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 컨퍼런스가 있다는 걸 알게되었는데 좀 미리 알았다면 이것까지 듣고 올 수 있게 일정을 잡았을텐데 좀 아쉽긴 하다.

[EP] HTML5 Developer Conference 후기 #1..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

HTML5 Developer Conference가 샌 프란시스코까지 출장을 간 이유였다.(d3.js 유저그룹이 아니라..) 사실 출장 그것도 해외로 출장가는 건 처음이다. 작년에 Nodeconf에 참석했을 때는 내 돈이랑 휴가를 쓰고 갔던거였는데 출장으로 가게 되니 참으로도 좋았다. 마음도 훨씬 여유롭고... 사실 출장으로 가게 된 것이기 때문에 컨퍼런스 자체는 내가 고른 컨퍼런스가 아니고 HTML5 Developer Conference도 이번에 처음 알게된 컨퍼런스다. 히스토리를 보면 2011년에 처음 열려서 작년부터는 1년에 두번씩 열리고 있다.(이전의 발표자들이 좀 더 네임밸류가 높았던 느낌은 있지만...)

HTML5 Developer Conference


컨퍼런스는 샌프란시스코 시내에 위치한 모스콘 센터(Moscone center)였다. 모스콘센터는 Google I/O나 WWDC도 종종 열리는 큰 곳이다. 가보니 센터가 엄청 커서 한블럭가까이 차지하는 건물이 3개나 되었고 HTML5 컨퍼런스는 그 중 하나에서 열렸다. 마침 컨퍼런스가 열리는 날이(22일) 애플이 발표하기로 되어 있었는데 바로 옆에 애플 로고가 있고 사람들이 모여있는 걸 보니 저 안에서 발표를 하고 있었던 듯 하다.


바로 건너편의 모스콘센터에서는 GMIC이 같은 일정으로 열리고 있었다. 컨퍼런스 장에 들어가서 명찰을 받으려 했지만 내 명찰은 찾을 수 없었고 어떤 아가씨가 명찰에 휘갈겨 써주었다. ㅠㅠ 실제 컨퍼런스는 지하에서 열렸는데 가운데는 로비처럼 큰 공간이 있고 한쪽에는 세션을 할 수 있는 장소들이 몰려있고 반대쪽을 오픈된 공간으로 여러 부스들이 몰려 있었다. 인텔, 트위터, YELP등이 와서 자신들의 제품들을 홍보하거나 구인을 하고 있었다. 부스는 뭐 크게 볼 것은 없고 일반적인 부스였지만 이런 저런 기념품은 참 많이 주었다.


컨퍼런스 규모든 상당히 컸는데 키노트 제외하고 하루에 총 6개의 세션이 존재하고 한 세션에는 최대 12개까지의 트랙이 동시에 진행이 되었다.(행사 일정이 세로보다 가로가 훨씬 긴 경우는 처음 봤;;;) 시간에 따라서는 12개가 다 안채워지는 경우도 많았지만 어쨌든 12개 중에서 하나를 골라서 들어가려다 보니 참 고민이 많이 되었다. 영어라서 사실 막 다 알아들은건 아니라서(영어로 들으면서 화면보면서 적는건 너무 어렵다.) 대충 간략히만 정리하려고 한다.


간단히 요약하면 전에 가본 해외 컨퍼런스는 커뮤니티주도 컨퍼런스였기 때문에 이런 일반적인 해외 컨퍼런스는 처음 참석해봤는데 커뮤니티 컨퍼런스의 질이 좋은 건 해외나 국내나 비슷한 것 같다.(Google I/O나 WWDC같은 초대형 컨퍼런스는 가본적없으므로 예외) 너무 방심하고 제목만 보고 세션을 골랐더니 기술공유가 아니라 제품홍보를 위한 세션이 너무 많았다. 그래서 첫날의 경험을 교훈삼아 이틀째는 주로 오픈소스 위주로만 들으니까 좀 나았다. 아무래도 요즘은 기술이 인터넷을 통해서 전세계적으로 잘 공유하기 때문인지 해외라고 퀄리티가 무척 높게 느껴지진 않았다.(그렇다 하더라도 해외 컨퍼런스는 참석해 보기를 권한다. 세션이야 공유되면 온라인으로도 볼 수 있지만 현지에서는 다른 느낄 수 있는 것들이 많이 있다.) 발표 퀄리티 자체만 보면 국내에서도 얼마든지 이정도 퀄리티로는 컨퍼런스를 열 수 있을 것으로 보였다.(물론 12트랙이나 운영하는 규모는 힘들지만...) 해외 컨퍼런스이므로 프로젝트의 커미터들의 경험이나 설명 혹은 실제적인 규모있는 프로젝트를 하면서 고민한 내용이나 경험을 공유해 주길 기대했는데 좀 뻔한 기술가이드정도 수준의 발표들이 많아서 아쉬웠다.(내가 세션을 잘못 골랐을 수도...)

1일차

The Future of Angular - Miško Hevery, Google

얼마 전에 읽은 AngularJS 기초편이라는 책에서 저자인 브래드 그린이 서문에서 구글 피드팩이라는 프로젝트를 수행하다가 6개월간 17,000라인의 프론트엔드 코드를 프로젝트 팀원이 자신이 만든 프레임워크로 2주만에 새로 작성할 수 있다고 해서 시켰는데 실제로는 3주가 걸렸지만 완성된 코드는 1,500라인으로 줄어들어서 깜짝 놀랐다는 이야기가 나오는데 이것이 Angular.js의 시작이었고 그 주인공이 이 세션의 발표자인 미스코 헤브리이다. 최근에 Angular.js에 관심이 많기 때문에 이번 컨퍼런스에서도 관심 주제중 하나였고 막 가고 싶었던 컨퍼런스는 아니지만 흥미가 생긴 이유중에 하나가 이 세션이었다.(현재 미스코는 Angular.dart쪽에 집중하고 있는 듯 하다.)


미스코의 발표를 직접 들으니까 네임밸류덕에 좋았고 Angular를 본지 얼마 안되었기 때문에 사용법 익히기에 허덕여서 프로젝트 개발상태같은 건 아직 추적하지 못하고 있는데 그런 부분에 대한 전체적인 얘기를 들을 수 있었다.
  • Angular.js는 최신 브라우저만 지원한다.(구현 브라우저는 1.x 브랜치에서 지원할 것이다.)
  • 최신 HTML5 표준들을 더 적극적으로 사용할 예정이고 Polymer프로젝트의 Polyfill라이브러리에 대해서 많이 언급을 했다.
  • 차후 계획에 대해서도 얘기했는데(결정났다기 보다는 시도중인듯) 비동기 의존성 주입(Asynchronous DI)와 Zone기능이다. AMD가 비동기로 코드를 로딩하는 것을 관리한다면 비동기 의존성 주입은 어떤 순서로 클래스를 인스턴스화할 것인지를 다루는 것이고 Zone 기능은 영역을 나누어서 Angular.js를 사용하는 곳에서 기존의 다른 라이브러리를 사용할 수 있도록 하는 것이다. ES6와 어노테이션을 얘기하면서 마치 자바처럼 보이는(자바스크립트가 아니라) 예시코드도 보여주었는데 ES6에 어노테이션이 있는 것은 아니므로 의도는 자료를 좀 찾아봐야 이해할 수 있을듯 하다.(dart인가? ㅡㅡ;;)

Memory management for smooth infinite-scrolling - Sumit Amar, Microsoft

요즘은 무한 스크롤을 많이 사용하고 최근에 개인 프로젝트를 하면서 스크롤링에 대해서 고민을 좀 많이 했던지라 선택해서 들어간 세션이었다. 무한 스크롤을 구현하면서 고민했던 내용을 공유해 주었는데 그냥 뭐 고만고만했다. 첫 접근은 스택을 사용해서 사용자가 스크롤을 하면 화면에서 사라진 DOM을 제거하고 메타데이터를 로컬스토리지를 이용해서 스택으로 쌓고 나중에 사용자가 다시 스크롤을 올리면 스택에서 가져와서 DOM을 생성한다. 하지만 이 방법은 너무 빨리 스크롤하거나 드래그를 사용하는 경우 빠지는 아이템들이 생길 수 있다. 두번째 접근은 범위에 대한 해시테이블을 사용하는 것이다. 각 아이텝의 위치를 어떤 범위로 나누고 이를 키밸류로 해시테이블에 저장하고 스크롤 할때 범위단위로 가져와서 보여주는데 이 방법은 스크롤을 적게 할때는 비효율적이다. 최종적으로는 두 방법을 섞어서 사용했다고...

Scale and performance: data visualization in modern web browsers - Gregor Aisch, Driven-By-Data.net

제목대로 비쥬얼라이제이션에 대한 발표였다. 자바의 Processing으로 만들어진 Fortune 500이라는 포츈기업들에 대한 비쥬얼라이제이션을 d3.js로 다시 구현한 경험을 얘기해 주었다. 성능상으로는 d3.js + SVG 조합보다 d3.js + Canvas 조합이 좀 더 낫고 특히 파이어폭스는 DOM이 많은 경우에는 크롬에 비해서 엄청나게 느린 성능을 보여주었다. CSS3 transition이 성능이 좋아서 requestAnimationFrame()보다 낫다. 마지막으로 성능을 위해서는 저수준으로 내려가서 사용하는 라이브러리의 소스코드를 봐야하고 여러 브라우저에서 다양한 시도를 해보고 성능을 측정하라는 말은 (평이하지만)좋았다.(발표자료가 좌우뿐만 아니라 위아래로도 움직이지 잘 움직여서 봐야한다.)

Develop High Performance Sites and Modern Apps with JavaScript and HTML5 - Doris Chen, Microsoft

MS에서 나온 사람이었는데 제일 별로였던 발표였다.(이래서 내가 에반젤리스트라는 직책은 안좋아한다능;;) 자바스크립트 성능 향상에 대한 얘기를 좀 들을려고 들어갔는데 자기 소개만 한 5분하더니 이 발표에서 설명할 내용은 윈도우즈 8 어플리케이션을 만드는데도 쓸 수 있다면서 윈도우즈 8 홍보도 한 5분한듯 하다. 그리고 바로 이어진 내용은 CSS는 헤더에 넣고 자바스크립트는 맨 아래 넣으라였던가?(틀린말은 아니지만 2013년에 이런 컨퍼런스에서 할 얘기는 아닌듯...) GC를 줄이는 얘기랑 메모리 초기화 비용에 대한 괜찮은 얘기도 좀 있었지만 약을 너무 팔아서 짜증나서 잘 들리지도 않았다. 성능 얘기하면서도 IE 11의 개발자도구에서 얼마나 프로파일링을 제대로 할 수 있는지를 열심히 홍보했는데 IE11은 아직 안쓰고 있지만 원래 그런거는 다른 브라우저에서는 대부분 되던거고 성능등에서 가장 문제를 많이 일으키는 7,8,9,10은 어떻하라고?라는 생각이 들며 대부분 MS에서 표준, 성능 얘기하면 짜증나는 이유와 동일하게 발표를 들으면서 짜증났다. 기술공유를 하고 싶은건지 홍보를 하고 싶은건지 알 수 없는 세션이었다.

Levelling Up in AngularJS - Alicia Liu, Lift

내가 요즘 쓰고 있는 Lift서비스의 개발자였는데 이 서비스는 앱으로만 사용해서 여기서 Angular.js에 대해서 발표할 줄은 전혀 몰랐다. 나는 마구 써보면서 기본없이 AngularJS를 배웠기 때문에 정리하면서 듣기 괜찮았지만 Levelling Up이라기 보다는 Basic 정도에 가까웠다. 서비스, 프로미스 디렉티브에 대한 사용법이나 중요한 부분에 대해서 설명한 세션이었다. 디렉티브를 이용해서 만든 마리오 데모의 소스는 디렉티브 공부하면서 참고하기에 괜찮아 보인다. 디렉티브로 저렇게 간단히 데모를 만들 수 있다는 점이 AngularJS의 장점이겠지...

Optimizing HTML5 for Distribution on Mobile Devices - Russell Beattie, Amazon

이 날 최악의 세션선택이었다.(이번에도 역시 에반젤리스트) 고르고 골랐는데 이 시간대에는 마땅히 끌리는게 없었다. 제목은 저렇게 되어 있지만 한 20분 정도는 Amazon 앱스토어가 얼마나 좋은가에 대해서 설명했다. 킨들파이어를 안써서 정확히는 모르겠지만 아마존 웹스토어에서는 웹기술로 앱을 만들 수 있는 것 같다.(아마존이 그런건지 안드로이드의 하이브리드인지는 잘..) 어쨌든 웹앱으로 만든 앱들을 보여주고 자신들의 스토어가 얼마나 좋은지 홍보를 한 20분 한 뒤 다른 사람이 나와서 앱 등록하는 과정이나 이런거 좀 설명하면서 킨들파이어에서 앱이 어떤 식으로 동작하는지를 보여주었다. 뒷부분은 거의 집중력을 잃어 듣지도 않았지만 최적화얘기를 하기는 했는지도 모르겠고 그냥 아마존 앱스토어 광고였다.