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    5  

now working…

–  N4 Task Board는 대략 이런 모습

Page    6  

required tech stack

v we need… –  Drag & Drop –  View Data Model –  Real Time data exchange between multi-users

Drag & Drop

Page    7  

Page    8  

Web application Drag n Drop

v 선택지 –  jQuery Plug-in (jQuery UI) –  HTML5 –  ???

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    10  

HTML5 Drag & Drop

v 가능한 요소들 –  Text –  Links –  HTML and XML –  Files –  Images –  Document Nodes

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    12  

HTML5 Drag & Drop

enter leaver

over start drop

see demo..

Page    13  

Page    14  

HTML5 Drag & Drop

v implementation

Page    15  

HTML5 Drag & Drop

v Pros – 사용하기 쉽다 – 좀 더 부드럽다(?)

v Cons – 응용라이브러리 부족

•  html5 sortable

– 브라우저마다 구현도가 다름 •  예상외로 고퀄 IE

Page    16  

TaskBoard

v we need model not DOM

View Model

Page    17  

Page    18  

MVC Model

v MVC 모델의 세상

– Model – View

– Controller

Page    19  

MVC Model

v Web 2.0 이후의 세계

– Model

– View – Controller

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    22  

back to web application development

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    25  

AngularJs

v AngularJs –  ng-app –  ng-model –  $scope –  filter

see demo..

hello.html

Page    26  

TaskBoard

v Wait! Let’s think about it! Consistency choice! –  ‘View -> Model’ vs ‘Model -> View’

another demo..

Page    27  

board.html

Page    28  

AngularJs

v Pros – 사용하기 쉽다 – 문서화가 잘 되어 있다 – 테스트가 설계 초기부터 잘 고려되어 있다 –  dependency injection 방식의 모듈화 지원 – 구글이 민다

v Cons –  easy to learn but hard to master – 아직은 사례가 부족

•  backbone.js ? – 구글이 민다

Page    29  

TaskBoard - tricks

v placeholder

Real Time data exchange

Page    30  

Page    31  

TaskBoard

v if model is changed, broadcast emits

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    34  

TaskBoard

v broadcast emit

Page    35  

TaskBoard - tricks

v broadcast emit

Page    36  

socket.io

v implementation

Page    37  

socket.io

v Pros – 사용하기 쉽다. – 자바스크립트

v Cons –  node.js를 사용해야 한다.

•  구현체들이 등장하고 있음 (vert.x 등)

– 자바스크립트

TR;DL

Page    38  

협업 태스크 보드를 손쉽게 만드는 방법?

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/

Q&A

Page    40  

감사합니다