Operational Transformation in node.js

Operational Transformationin Node.js

(웹 기반 협업 소프트웨어는 Node.js)

홍영택 (사이냅소프트, 노사모)

12년 11월 20일 화요일









About Me

Javascript





NAVER Office


지난 3년간의 삽질로~


NAVER Office

2012.9.25 오픈12년 11월 20일 화요일

그게 무슨 웹오피스야!!!




나도 ‘Fan’이야


이게 웹 오피스야~!!!


그래�� 동시편집�� 만들자-!


편집기 만들기


입력

출력


이벤트 핸들러


이벤트 핸들러


도큐먼트 모델

이벤트 핸들러


도큐먼트 모델

렌더러

이벤트 핸들러


도큐먼트 모델

렌더러

이벤트 핸들러

코드가 많아


도큐먼트 모델

렌더러

‘가’이벤트 핸들러


도큐먼트 모델

렌더러

‘가’ 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 사용량이 많음

•따라서 느림


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


•따라서 느림



•따라서 느림

•Conflict 발생


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.


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



Operation 실행



Operation 전송



Operation 변환



Operation 실행


OT Basics

Time

Client 1 Client 2“APL” “APL”


OT Basics

Time


O1 = INS(1, ‘P’)

“APPL”


O1 = INS(1, ‘P’)


O1 = INS(1, ‘P’)

INSERT : 삽입


O1 = INS(1, ‘P’)

글자의 삽입 위치

삽입 문자


“APL” ?

O1 = INS(1, ‘P’)


“APL” “APPL”

O1 = INS(1, ‘P’)


OT Basics

Time


O1 = INS(1, ‘P’)

“APPL”


OT Basics

Time


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

“APLE”“APPL”


OT Basics

Time


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

O1 = INS(1, ‘P’)

“APPLE”



OT Basics

Time


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

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

“APPLE”“APPEL”



OT Basics

Time


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

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

“APPLE”“APPEL”


APPEL ≠ APPLE


OT Basics

Time



OT Basics

Time


O1 = INS(1, ‘P’)

“APPL”


OT Basics

Time


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



OT Basics

Time


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

O1’ = INS(1, ‘P’)

“APPLE”



OT Basics

Time


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

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

“APPLE”“APPLE”



OT Basics

Time


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

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



O2’ : index++


OT Basics

Time


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

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



APPLE = APPLE


OT Basics

Time


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

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



APPLE = APPLE


O1'⋅O2 = O2'⋅O1

where

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

OT Basics



•느림

•Conflict 발생







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와 완전히 달라

- 더글라스 크락포드(JSON inventor)


자바스크립트

“C 언어의 옷을 입은 LISP”

- 더글라스 크락포드

함수 = 일급 객체

클로져


도큐먼트 모델

렌더러

이벤트 핸들러

코드가 많아


문제의 본질은 중복



•느림

•Conflict 발생

•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

같은 코드



•느림

•Conflict 발생

•Document Model 중복코드


One�� more�� thing...

R.I.P.�� Jobs


JSON POJO

OR-MAPPINGJSON to POJOPOJO to JSON

Server RDBBrowser

Table


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

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



•느림

•Conflict 발생

• Javascript, Java 중복코드

•불필요한 데이터 형변환


OR-MAPPINGJSON to POJOPOJO to JSON

Server NoSQL

JSON JSON

Browser

Document


cradlenano mongoskin

Interfacing with Databases

가벼운 API

강력함 API

깨끗한 API



•느림

•Conflict 발생

• Javascript, Java 중복코드

•불필요한 데이터 형변환


기술 > 서비스 기술 < 서비스

결론


Single Page App은 node.js로 수렴

웹 기반

협업


FAQ


FAQQ) 서버측과 클라이언트측 코드를 통합할때 호환성 문제는 없나요?


FAQQ) 서버측과 클라이언트측 코드를 통합할때 호환성 문제는 없나요?

A) 노드는 ECMA 5의 기본적인 메소드를 가지고 있습니다.IE8 같은 구형 브라우저는 ECMA 5의 일부 메소드만 지원합니다.

교집합을 찾으셔야 원할하게 코딩할 수 있습니다.

http://kangax.github.com/es5-compat-table/




FAQQ) 동시편집을 위한 Node.js에 OT 모듈이 있나요?


동시편집ShareJS

http://synapoffice.com/




동시편집

connect

socket.io-client

ShareJS


Q&A

[email protected]


mailto:[email protected]

mailto:[email protected]

감사합니다.

Documents

Operational Transformation in node.js