node.js, html5, mvvm 이용해서 태스크보드...
TRANSCRIPT
Node.js, HTML5, MVVM 프레임워크를 이용해서 실시간 협업 태스크보드 만들기
채수원
[회사 로고]
Building Collaborative Task Board with Node.js, HTML5 and MVVM framework
Who I am
Page 2
채수원 – NHN 기술전략팀 – 오픈소스 nFORGE 개발팀 아키텍트 – OctoberSkyJs(node.js community) 리더 – 여름으로 가는 문(blog.doortts.com)
Today's topic is…
Page 3
협업 태스크 보드를 손쉽게 만드는 방법
- HTML 5 Drag and Drop - MVVM Framework - Socket.io - shoveling experience
Page 4
협업 태스크 보드 만들기
v Usage – 할일 관리 – 주간보고 대체 – 팀 업무 게시판
v Development goal – easy to use – collaborative functions – intuitive and pretty UI – using appropriate technology
Page 6
required tech stack
v we need… – Drag & Drop – View Data Model – Real Time data exchange between multi-users
Page 9
Web application Drag n Drop
v HTML 5 Drag & Drop vs jQuery UI – spec vs library – native vs non-native – Backward compatibility
Page 11
HTML5 Drag & Drop
v Draggable – draggable="true"
v Drag events – dragstart – dragenter – dragover – dragleave – drag – drop – dragend
v Data Transfer – e.dataTransfer.setData – e.dataTransfer.getData
v Caution – e.preventDefault() – e.stopPropagation()
Page 15
HTML5 Drag & Drop
v Pros – 사용하기 쉽다 – 좀 더 부드럽다(?)
v Cons – 응용라이브러리 부족
• html5 sortable
– 브라우저마다 구현도가 다름 • 예상외로 고퀄 IE
Page 20
MVVM
v some problems – view is more and more complicated! – one page application increased! – need solutions!
v MVVM의 등장! – Model – View – View-Model
Page 21
MVVM
v so.. What is MVVM? – origin: presentation model design pattern – John Gossman – HTML5, WPF(Windows Presentation Foundation), Silverlig
ht와 같은 이벤트 기반기반의 UI개발 플랫폼을 타깃으로 하는 아키텍처 패턴
– 2006년 .NET Framework 3.0 과 함께 본격 등장 – View를 위한 Data Binding이 핵심
Page 23
Javascript MV* Framework Evaluation
v Javascript MV* Framework – 더 복잡한 View를 더 단순한 형태로 개발하기 위해
v Framework Evaluation – Backbone.js – Ember.js (SproutCore) – AngularJs
Page 24
AngularJs
v AngularJs – MVW framework – developed by Google
v Why this? – easy to use – two way binding – declarative expression – well documented – test oriented
• unit testing • e2e testing
Page 26
TaskBoard
v Wait! Let’s think about it! Consistency choice! – ‘View -> Model’ vs ‘Model -> View’
Page 28
AngularJs
v Pros – 사용하기 쉽다 – 문서화가 잘 되어 있다 – 테스트가 설계 초기부터 잘 고려되어 있다 – dependency injection 방식의 모듈화 지원 – 구글이 민다
v Cons – easy to learn but hard to master – 아직은 사례가 부족
• backbone.js ? – 구글이 민다
Page 32
WebSocket
v Real-time communication in web app – polling – comet – WebSocket! (HTML5)
• BiDirectional or Server-Initiated HTTP (HyBi) working group
v profits – full-duplex communications channels over a single TCP c
onnection – TCP port 80 – can be use both sides: server-side, client side
Page 33
socket.io
v benefit – WebSocket implementation – (extremely) easy to use – browser compatibility – node.js (??)
Page 37
socket.io
v Pros – 사용하기 쉽다. – 자바스크립트
v Cons – node.js를 사용해야 한다.
• 구현체들이 등장하고 있음 (vert.x 등)
– 자바스크립트
Page 39
Resources
v HTML5 Drag & Drop Accessible drag and drop using WAI-ARIA
• http://dev.opera.com/articles/view/accessible-drag-and-drop/ W3C - HTML5 Editor's Draft 8 November 2012, 7.7 Drag and drop
• http://dev.w3.org/html5/spec/single-page.html#dnd DevOpera HTML5 Drag and Drop
• http://dev.opera.com/articles/view/drag-and-drop/ HTML5 - Another Postcard from the Trenches
• http://www.stanford.edu/group/accessibility/cgi-bin/presentations/postcard2/
v AngularJs official site
• angularjs.org angular-ui
• http://angular-ui.github.com/