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

실시간 웹 협업도구 만들기

홍영택

Sunday, October 13, 13

홍영택

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

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)

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)

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 변환

OT Function

Operation 실행

OT(Function)

Client 1 Client 2“APL” “APL”

O1 = INS(1, ‘P’)

“APPL”

OT(Function)

O1 = INS(1, ‘P’)

INSERT : 삽입

O1 = INS(1, ‘P’)

글자의 삽입 위치

삽입 문자

“APL” ?

O1 = INS(1, ‘P’)

“APL” “APPL”

O1 = INS(1, ‘P’)

“APPL”

OT(Function)

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

“APLE”“APPL”

OT(Function)

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

O1 = INS(1, ‘P’)

“APPLE”

OT(Function)

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

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

“APPLE”“APPEL”

OT(Function)

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

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

“APPLE”“APPEL”

APPEL ≠ APPLE

OT(Function)

O1 = INS(1, ‘P’)

“APPL”

OT(Function)

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

OT(Function)

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

O1’ = INS(1, ‘P’)

“APPLE”

OT(Function)

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

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

“APPLE”“APPLE”

OT(Function)

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

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

O2’ : index++

OT(Function)

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

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

APPLE = APPLE

OT(Function)

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

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

APPLE = APPLE

OT(Function)

O1'⋅O2 = O2'⋅O1

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

OT(Function)

Visualization of OT with a central server

http://localhost:8080/visualization.html

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

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

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

불필요한 형변환

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

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

experimental

Changeset summernote socket.io N/A N/A

susukang98@gmail.com

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

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

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

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

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

susukang98@gmail.com

감사합니다.

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

Documents

자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)

XECon PHPFest 2014 - 쉽고 강력한 XE 웹사이트 만들기

Ionic으로 모바일앱 만들기 #4

소프트웨어 학습 및 자바 웹 개발자 학습 로드맵

자바 웹 개발 시작하기 (6주차 : 커뮤니티를 만들어보자!)

웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기

자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)

자바 웹 개발 시작하기 (3주차 : 스프링 웹 개발)

[1D1]신개념 N스크린 웹 앱 프레임워크 PARS

1년에 1서비스 만들기

[D2 CAMPUS]웹 개발자의 스펙 : HTTP

Zeppelin notebook 만들기

장고로 웹서비스 만들기 기초

2015.8.12 웹 보안 이슈와 보안 공학의 중요성

강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안

프론트엔드로 시작하는 웹 개발 방법과 지식들

아두이노 RC카 만들기

20140512 node.js를 활용한 실시간 웹채팅

유니티로 flappy brid 만들기(Unity 5.1)

움직이는 장치 만들기