실시간 웹 협업도구 만들기 V0.3

실시간 웹 협업도구 만들기

홍영택

Sunday, October 13, 13


홍영택



홍영택


About Me


About Me

Javascript








https://github.com/HackerWins/summernote












Collaborationis everything



조장A: “제길 내가 조장 ㅠ”

팀원 C: “대학은 술먹는 곳”

팀원 B: “아인슈타인은 내친구”


Email based Collaboration


조장A: 템플릿 받으셈


조장A:나도 내부분 작성

팀원 B: “E=mc^2”

팀원 C: “지식인에서 C & P”


팀원 C: “난 한글 없어서 HWP 파일 편집 못해”


조장 A: “다했으면 보내주셈”


조장A: 취합 취합


조장 A: “이거 다시보내 주셈”


팀원 C: “지식인에서 C & P”


조장 A: “제대로 고쳤나?”


조장A: “취합 취합 (파일이 많아졌어...)”


조장A: “취합 취합(죽겠네...)”


첨부파일을 이용한 이메일 기반 협업

로컬 컴퓨터에 편집기가 설치되어 있어야함

리비전 관리가 어려움


조장A: “문서 링크 받으셈”

http://wiki.ooo.com


http://wiki.summernote.com




http://wiki.ooo.com




Lock, Save


Lock & Save


사용자 C: “Blah Blah”


사용자 B: “문서에 락걸렸네”


사용자 C: “저장!”


사용자 B: “이제 편집된다.”


사용자 B: “몽창 날라갔다.ㅠ”


Lock & Save 협업 도구

페이지 락을 기다리는 불편함이 있음

네트워크가 끊어질 경우 데이터 손실의 위험이 있음


real-time collaboration





사용자 C: “Blah Blah”

사용자 B: “Blah Blah”

조장A: “취합이 필요없군”


웹 협업



실시간 협업 도구


웹 협업



실시간 협업 도구


편집기 만들기


입력

출력


이벤트 핸들러


이벤트 핸들러


도큐먼트 모델

이벤트 핸들러


도큐먼트 모델

렌더러

이벤트 핸들러


도큐먼트 모델

렌더러

이벤트 핸들러

코드가 많아


도큐먼트 모델

렌더러

‘가’이벤트 핸들러


도큐먼트 모델

렌더러

‘가’ doc.addText(‘가’)

이벤트 핸들러


도큐먼트 모델

렌더러


renderer.paint(para)

이벤트 핸들러


도큐먼트 모델

렌더러



가{HTML}

이벤트 핸들러


‘node cookbook’번역중...

학기말 과제 작성중...

난 그냥 들어와 봤어...


‘node cookbook’번역중...

나도 껴줘~!!!



‘가’





update(doc)



update(doc)

change(doc)



update(doc)

change(doc)

renderer.paint(doc)




가{HTML}

update(doc)

change(doc)

renderer.paint(doc)가{HTML}




가{HTML}

update(doc)

change(doc)



동일한 결과~!!!



가{HTML}

update(doc)

change(doc)



하지만 문서를 전송해서느리다~!!!


‘가’

‘나’



‘나’doc.addText(‘나’)



update(doc)


update(doc)



update(doc)


update(doc)

Conflict!동시편집은 무리


실시간 협업 에디터 만들기

문서 전체 전송으로 Network 사용량이 많음

동시 편집시 충돌 발생














스타크래프트 마린부대는이동중 모든 좌표를 전송할까?





OT(Operational�� Transformation)


OT�� (wikipedia)

• Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.


OT�� (wikipedia)

• Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.


“OT is likereal-time Git”

- Joseph Gentle(ShareJS, ex google wave...)


• Data Model

• Operation Model

• OT Function

OT�� (basic)


• Data Model

• Operation Model

• OT Function

OT�� (basic)


• Data Model

• Operation Model

• OT Function

OT�� (basic)


• Data Model

• Operation Model

• OT Function

OT�� (basic)


도큐먼트 모델

렌더러



가{HTML}

이벤트 핸들러

기억하세요?


replicated�� architecture�� for�� shared�� documents



Operation 실행



Operation 전송



Operation 변환



Operation 변환

OT Function



Operation 실행


OT(Function)

Time

Client 1 Client 2“APL” “APL”


Time


O1 = INS(1, ‘P’)

“APPL”

OT(Function)


O1 = INS(1, ‘P’)


O1 = INS(1, ‘P’)

INSERT : 삽입


O1 = INS(1, ‘P’)

글자의 삽입 위치

삽입 문자


“APL” ?

O1 = INS(1, ‘P’)


“APL” “APPL”

O1 = INS(1, ‘P’)


Time


O1 = INS(1, ‘P’)

“APPL”

OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

“APLE”“APPL”

OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1 = INS(1, ‘P’)

“APPLE”


OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1 = INS(1, ‘P’)O2 = INS(3, ‘E’)

“APPLE”“APPEL”


OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1 = INS(1, ‘P’)O2 = INS(3, ‘E’)

“APPLE”“APPEL”


APPEL ≠ APPLE

OT(Function)


Time


OT(Function)


Time


O1 = INS(1, ‘P’)

“APPL”

OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)


OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1’ = INS(1, ‘P’)

“APPLE”


OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)

“APPLE”“APPLE”


OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)



O2’ : index++

OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)



APPLE = APPLE

OT(Function)


Time


O1 = INS(1, ‘P’) O2 = INS(3, ‘E’)

O1’ = INS(1, ‘P’)O2’ = INS(4, ‘E’)



APPLE = APPLE

OT(Function)


O1'⋅O2 = O2'⋅O1

where

(O1', O2') = transform(O1, O2)

OT(Function)


Visualization of OT with a central server

http://localhost:8080/visualization.html





update(doc)


update(doc)

Conflict!동시편집은 무리







Operation 전송으로 Network 사용량이 적음





OT Function으로 동일한 문서 유지








OTServer

OTClient


OTServer

OTClient

Operation만 전송


문제�� 없나요?


OTServer

OTClient


OTServer

OTClient


var document = { insertText : function(){ ... }, deleteText : function(){ ... }, updateStyle : function(){ ... }, ...};

class Document { public Document(){ ... } public void insertText(){ ... } public void deleteText(){ ... } public void updateStyle(){ ... } ...};

비슷하게 생겼는데쉽게 포팅 가능?


Javascript는 Java와 완전히 달라

- 더글라스 크락포드


자바스크립트

“C 언어의 옷을 입은 LISP”

- 더글라스 크락포드

함수 = 일급 객체

클로져


도큐먼트 모델

렌더러

이벤트 핸들러

코드가 많아


문제의 본질은 중복





Document Model 중복


한편...


이벤트 기반의 논 블러킹 I/O작은 서버

- 라이언 달(Node.js)


C? 루아? 하스켈?


Javascript !!!



Javascript가서버에서

돌아간다 ㅠㅠ


var document = { insertText : function(){ ... }, deleteText : function(){ ... }, updateStyle : function(){ ... },...};

class Document { public Document(){ ... } public void insertText(){ ... } public void deleteText(){ ... } public void updateStyle(){ ... }...};


OTServer

OTClient

같은 코드





서버/클라이언트 Document Model 중복





서버/클라이언트 Document Model 재사용


One�� more�� thing...

R.I.P.�� Jobs


JSON POJO

OR-MAPPINGJSON to POJOPOJO to JSON

Server RDBBrowser

Table


우린 왜? 이유없이 데이터 형변환을 하고 있을까?

문서에 무결성이 왠말이냐!!






불필요한 형변환


OR-MAPPINGJSON to POJOPOJO to JSON

Server NoSQL

JSON JSON

Browser

Document


cradlenano mongoskin

Interfacing with Databases

가벼운 API

강력함 API

깨끗한 API






형변환 최소화


Real-time(OT)�� server�� vs�� Web�� server


Long�� connection�� vs�� Short�� connection







Web�� sockets



Realtime application framework for Node.JS, with HTML5 WebSockets and cross-browser fallbacks support.



Request/broadcast�� vs�� Request/response








var joined = false;var room = io.connect('/room');var content = $('#room-content');room.on('connect', function() { $('#room-form').css('display', 'block'); content.append($('').text('Connected'));});

...


Real-time(OT)�� server�� vs�� Web�� server

• Long connection vs Short connection

• Request/broadcast vs request/response


어 때요? 참 쉽죠?



“Unfortunately, implementing OT sucks.”




Name(Github Star)

Type OT Engine Editor C/S Channel Persistence Features

etherpad-lite(2941)

Collaborative editor

Changeset Ace socket.io uberDBChattingCursorUndo

etherpad-lite


“Check out ShareJS. Its the one true way ;)”



Name(Github Star)


ShareJS(2235)

OT framework

ot-typeAce

CodemirrorTextarea

browserchannel

livedb

ShareJS


Name(Github Star)


ot.js(220)

OT framework

ot.js Codemirror socket.io N/ACursorUndo

ot.js


Name(Github Star)


Changeset(30)

Library Changeset N/A N/A N/A

Changeset


OT with node.js

Name(Github Star)


etherpad-lite(2941)

Collaborative editor

Changeset Ace socket.io uberDBChattingCursorUndo

ot.js(220)

OT framework

ot.js Codemirror socket.io N/ACursorUndo

ShareJS(2235)

OT framework

ot-typeAce

CodemirrorTextarea

browserchannel

livedb

Changeset(30)

Library Changeset N/A N/A N/A


Summary• Real-time collaboration

• Text Editor?

• Operational Transformation

• OT with node.js

• OT software in node.js


한편...


Tony�� Stark�� and�� Mark�� 42


마크 1토니가 아이언맨 1편에서 처음 만듬


Tony�� Stark:�� 아이언맨�� 수트�� 42개�� 이상�� 만든�� 용자




ot-summernote






https://github.com/HackerWins/ot-summernote

ot-summernote

Name(Github Star)


ot-summernote

(2)

experimental

Changeset summernote socket.io N/A N/A




[email protected]


mailto:[email protected]


FAQ


FAQQ) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요~? 라는게 가장 궁금하네요. by OO Son

Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO


FAQ

A) 한 개발자의 건전한 주말 취미생활 수준

Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요~? 라는게 가장 궁금하네요. by OO Son

Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO


Q&A

[email protected]




감사합니다.

Documents

실시간 웹 협업도구 만들기 V0.3