1. 실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13

2. 실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13

3. 실시간 웹 협업도구 만들기
홍영택
Sunday, October 13, 13

4. About Me
Sunday, October 13, 13

5. About Me
Javascript
Sunday, October 13, 13

6. Sunday, October 13, 13

7. Sunday, October 13, 13

8. Sunday, October 13, 13

9. Sunday, October 13, 13

10. Sunday, October 13, 13

11. Sunday, October 13, 13

12. https://github.com/HackerWins/summernote
Sunday, October 13, 13

13. https://github.com/HackerWins/summernote
Sunday, October 13, 13

14. Sunday, October 13, 13

15. Sunday, October 13, 13

16. 실시간 웹 협업도구 만들기
Sunday, October 13, 13

17. Collaboration
is everything
Sunday, October 13, 13

18. Sunday, October 13, 13

19. 팀원 B: “아인슈타인은 내친구”
조장A: “제길 내가 조장 ㅠ”
팀원 C: “대학은 술먹는 곳”
Sunday, October 13, 13

20. Email based Collaboration
Sunday, October 13, 13

21. 조장A: 템플릿 받으셈
Sunday, October 13, 13

22. 팀원 B: “E=mc^2”
조장A:나도 내부분
작성
팀원 C: “지식인에서 C & P”
Sunday, October 13, 13

23. 팀원 C: “난 한글 없어서 HWP 파일 편
집 못해”
Sunday, October 13, 13

24. 조장 A: “다했으면 보내주셈”
Sunday, October 13, 13

25. 조장A: 취합 취합
Sunday, October 13, 13

26. 조장 A: “이거 다시보내 주셈”
Sunday, October 13, 13

27. 팀원 C: “지식인에서 C & P”
Sunday, October 13, 13

28. 조장 A: “제대로 고쳤나?”
Sunday, October 13, 13

29. 조장A: “취합 취합 (파일이
많아졌어...)”
Sunday, October 13, 13

30. 조장A: “취합 취합
(죽겠네...)”
Sunday, October 13, 13

31. 첨부파일을 이용한 이메일 기반 협업
로컬 컴퓨터에 편집기가 설치되어 있어야함
리비전 관리가 어려움
Sunday, October 13, 13

32. 조장A: “문서 링크
받으셈”
http://wiki.ooo.com
Sunday, October 13, 13

33. Sunday, October 13, 13

34. Sunday, October 13, 13

35. http://wiki.ooo.com
Sunday, October 13, 13

36. Lock, Save
Sunday, October 13, 13

37. Lock & Save
Sunday, October 13, 13

38. 사용자 C: “Blah Blah”
Sunday, October 13, 13

39. 사용자 B: “문서에 락걸렸네”
Sunday, October 13, 13

40. 사용자 C: “저장!”
Sunday, October 13, 13

41. 사용자 B: “이제 편집된다.”
Sunday, October 13, 13

42. 사용자 B: “몽창 날라갔다.ㅠ”
Sunday, October 13, 13

43. Lock & Save 협업 도구
페이지 락을 기다리는 불편함이 있음
네트워크가 끊어질 경우 데이터 손실의 위험이 있음
Sunday, October 13, 13

44. real-time collaboration
Sunday, October 13, 13

45. Sunday, October 13, 13

46. Sunday, October 13, 13

47. Sunday, October 13, 13

48. 사용자 B: “Blah Blah”
조장A: “취합이 필요없군”
사용자 C: “Blah Blah”
Sunday, October 13, 13

49. 웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구
Sunday, October 13, 13

50. 웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구
Sunday, October 13, 13

51. 편집기 만들기
Sunday, October 13, 13

52. 입력
출력
Sunday, October 13, 13

53. 이벤트 핸들러
Sunday, October 13, 13

54. 이벤트 핸들러
Sunday, October 13, 13

55. 이벤트 핸들러
도큐먼트 모델
Sunday, October 13, 13

56. 이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13

57. 이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13
코드가 많아

58. ‘가’
이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13

59. ‘가’
doc.addText(‘가’)
이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13

60. ‘가’
doc.addText(‘가’)
이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13
renderer.paint(para)

61. ‘가’
doc.addText(‘가’)
이벤트 핸들러
도큐먼트 모델
<P>가</P>
{HTML}
렌더러
Sunday, October 13, 13
renderer.paint(para)

62. 학기말 과제 작성중...
‘node cookbook’
번역중...
난 그냥 들어와 봤어...
Sunday, October 13, 13

63. ‘node cookbook’
번역중...
나도 껴줘~!!!
Sunday, October 13, 13

64. Sunday, October 13, 13

65. ‘가’
Sunday, October 13, 13

66. ‘가’
Sunday, October 13, 13
doc.addText(‘가’)

67. ‘가’
doc.addText(‘가’)
update(doc)
Sunday, October 13, 13

68. ‘가’
doc.addText(‘가’)
update(doc)
change(doc)
Sunday, October 13, 13

69. ‘가’
doc.addText(‘가’)
update(doc)
renderer.paint(para)
change(doc)
renderer.paint(doc)
Sunday, October 13, 13

70. ‘가’
doc.addText(‘가’)
update(doc)
<P>가</P>
renderer.paint(para)
{HTML}
change(doc)
<P>가</P>
{HTML}
Sunday, October 13, 13
renderer.paint(doc)

71. ‘가’
doc.addText(‘가’)
update(doc)
<P>가</P>
renderer.paint(para)
{HTML}
동일한 결과~!!!
<P>가</P>
{HTML}
Sunday, October 13, 13
renderer.paint(doc)
change(doc)

72. ‘가’
doc.addText(‘가’)
update(doc)
<P>가</P>
renderer.paint(para)
{HTML}
하지만 문서를 전송해서
느리다~!!!
change(doc)
<P>가</P>
{HTML}
Sunday, October 13, 13
renderer.paint(doc)

73. ‘가’
‘나’
Sunday, October 13, 13

74. ‘가’
‘나’
Sunday, October 13, 13
doc.addText(‘가’)
doc.addText(‘나’)

75. ‘가’
doc.addText(‘가’)
update(doc)
‘나’
doc.addText(‘나’)
update(doc)
Sunday, October 13, 13

76. ‘가’
doc.addText(‘가’)
update(doc)
‘나’
doc.addText(‘나’)
update(doc)
Conflict!
동시편집은 무리
Sunday, October 13, 13

77. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13

78. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13

79. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13

80. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13

81. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
스타크래프트 마린부대는
이동중 모든 좌표를 전송할까?
Sunday, October 13, 13

82. OT
(Operational

83. Transformation)
Sunday, October 13, 13

84. OT

85. (wikipedia)
• Operational transformation(OT) is a
technology for supporting a range of
collaboration functionalities in advanced
collaborative software systems.
Sunday, October 13, 13

86. OT

87. (wikipedia)
• Operational transformation(OT) is a
technology for supporting a range of
collaboration functionalities in advanced
collaborative software systems.
Sunday, October 13, 13

88. “OT is like
real-time Git”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13

89. OT

90. (basic)
• Data Model
• Operation Model
• OT Function
Sunday, October 13, 13

91. OT

92. (basic)
• Data Model
• Operation Model
• OT Function
Sunday, October 13, 13

93. OT

94. (basic)
• Data Model
• Operation Model
• OT Function
Sunday, October 13, 13

95. OT

96. (basic)
• Data Model
• Operation Model
• OT Function
Sunday, October 13, 13

97. 기억하세요?
‘가’
doc.addText(‘가’)
이벤트 핸들러
도큐먼트 모델
P가/P
{HTML}
렌더러
Sunday, October 13, 13
renderer.paint(para)

98. replicated

99. architecture

100. for

101. shared

102. documents
Sunday, October 13, 13

103. replicated

104. architecture

105. for

106. shared

107. documents
Operation 실행
Sunday, October 13, 13

108. replicated

109. architecture

110. for

111. shared

112. documents
Operation 전송
Sunday, October 13, 13

113. replicated

114. architecture

115. for

116. shared

117. documents
Operation 변환
Sunday, October 13, 13

118. OT Function
replicated

119. architecture

120. for

121. shared

122. documents
Operation 변환
Sunday, October 13, 13

123. replicated

124. architecture

125. for

126. shared

127. documents
Operation 실행
Sunday, October 13, 13

128. OT(Function)
Client 1
“APL”
Time
Sunday, October 13, 13
Client 2
“APL”

129. OT(Function)
Client 1
“APL”
O1 = INS(1, ‘P’)
“APPL”
Time
Sunday, October 13, 13
Client 2
“APL”

130. O1 = INS(1, ‘P’)
Sunday, October 13, 13

131. INSERT : 삽입
O1 = INS(1, ‘P’)
Sunday, October 13, 13

132. 글자의 삽입 위치
O1 = INS(1, ‘P’)
삽입 문자
Sunday, October 13, 13

133. O1 = INS(1, ‘P’)
“APL”
Sunday, October 13, 13
?

134. O1 = INS(1, ‘P’)
“APL”
Sunday, October 13, 13
“APPL”

135. OT(Function)
Client 1
“APL”
O1 = INS(1, ‘P’)
“APPL”
Time
Sunday, October 13, 13
Client 2
“APL”

136. OT(Function)
Client 1
Client 2
“APL”
O1 = INS(1, ‘P’)
Sunday, October 13, 13
O2 = INS(3, ‘E’)
“APPL”
Time
“APL”
“APLE”

137. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O1 = INS(1, ‘P’)
“APPLE”
Sunday, October 13, 13

138. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2 = INS(3, ‘E’)
“APPEL”
Sunday, October 13, 13
O1 = INS(1, ‘P’)
“APPLE”

139. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2 = INS(3, ‘E’)
“APPEL”
Sunday, October 13, 13
O1 = INS(1, ‘P’)
APPEL ≠ APPLE
“APPLE”

140. OT(Function)
Client 1
“APL”
Time
Sunday, October 13, 13
Client 2
“APL”

141. OT(Function)
Client 1
“APL”
O1 = INS(1, ‘P’)
“APPL”
Time
Sunday, October 13, 13
Client 2
“APL”

142. OT(Function)
Client 1
Client 2
“APL”
O1 = INS(1, ‘P’)
Sunday, October 13, 13
O2 = INS(3, ‘E’)
“APPL”
Time
“APL”
“APLE”

143. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O1’ = INS(1, ‘P’)
“APPLE”
Sunday, October 13, 13

144. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2’ = INS(4, ‘E’)
“APPLE”
Sunday, October 13, 13
O1’ = INS(1, ‘P’)
“APPLE”

145. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2’ : index++
O2’ = INS(4, ‘E’)
“APPLE”
Sunday, October 13, 13
O1’ = INS(1, ‘P’)
“APPLE”

146. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2’ = INS(4, ‘E’)
“APPLE”
Sunday, October 13, 13
O1’ = INS(1, ‘P’)
APPLE = APPLE
“APPLE”

147. OT(Function)
Client 1
Client 2
“APL”
“APL”
O1 = INS(1, ‘P’)
O2 = INS(3, ‘E’)
“APPL”
“APLE”
Time
O2’ = INS(4, ‘E’)
“APPLE”
Sunday, October 13, 13
O1’ = INS(1, ‘P’)
APPLE = APPLE
“APPLE”

148. OT(Function)
O1'⋅O2 = O2'⋅O1
where
(O1', O2') = transform(O1, O2)
Sunday, October 13, 13

149. Visualization of OT with a central server
http://localhost:8080/visualization.html
Sunday, October 13, 13

150. ‘가’
doc.addText(‘가’)
update(doc)
‘나’
doc.addText(‘나’)
update(doc)
Conflict!
동시편집은 무리
Sunday, October 13, 13

151. 실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
Sunday, October 13, 13

152. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
동시 편집시 충돌 발생
Sunday, October 13, 13

153. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
Sunday, October 13, 13

154. Sunday, October 13, 13

155. Sunday, October 13, 13

156. Sunday, October 13, 13

157. Sunday, October 13, 13

158. Sunday, October 13, 13

159. Sunday, October 13, 13

160. OT
Client
Sunday, October 13, 13
OT
Server

161. Operation만 전송
OT
Client
Sunday, October 13, 13
OT
Server

162. 문제

163. 없나요?
Sunday, October 13, 13

164. OT
Client
Sunday, October 13, 13
OT
Server

165. OT
Client
Sunday, October 13, 13
OT
Server

166. 비슷하게 생겼는데
쉽게 포팅 가능?
var document = {
insertText : function(){
...
},
deleteText : function(){
...
},
updateStyle : function(){
...
},
...
};
Sunday, October 13, 13
class Document {
public Document(){
...
}
public void insertText(){
...
}
public void deleteText(){
...
}
public void updateStyle(){
...
}
...
};

167. Javascript는 Java와
완전히 달라
- 더글라스 크락포드
Sunday, October 13, 13

168. 클로
져
자바스크립트
“C 언어의 옷을 입은 LISP”
함수
Sunday, October 13, 13
객체
일급
=
- 더글라스 크락포드

169. 이벤트 핸들러
도큐먼트 모델
렌더러
Sunday, October 13, 13
코드가 많아

170. 문제의 본질은 중복
Sunday, October 13, 13

171. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
Document Model 중복
Sunday, October 13, 13

172. 한편...
Sunday, October 13, 13

173. 이벤트 기반의 논 블러킹 I/O
작은 서버
- 라이언 달(Node.js)
Sunday, October 13, 13

174. C? 루아? 하스켈?
Sunday, October 13, 13

175. Javascript !!!
Sunday, October 13, 13

176. Sunday, October 13, 13

177. Javascript가
서버에서
돌아간다 ㅠㅠ
Sunday, October 13, 13

178. var document = {
insertText : function(){
...
},
deleteText : function(){
...
},
updateStyle : function(){
...
},
...
};
Sunday, October 13, 13
class Document {
public Document(){
...
}
public void insertText(){
...
}
public void deleteText(){
...
}
public void updateStyle(){
...
}
...
};

179. OT
Client
OT
Server
같은 코드
Sunday, October 13, 13

180. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 중복
Sunday, October 13, 13

181. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
Sunday, October 13, 13

182. One

183. more

184. thing...
R.I.P.

185. Jobs
Sunday, October 13, 13

186. JSON to POJO
POJO to JSON
JSON
Browser
Sunday, October 13, 13
OR-MAPPING
POJO
Server
Table
RDB

187. 우린 왜? 이유없이 데이터 형변환을 하고 있을까?
문서에 무결성이 왠말이냐!!
Sunday, October 13, 13

188. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
불필요한 형변환
Sunday, October 13, 13

189. JSON to POJO
POJO to JSON
JSON
Browser
Sunday, October 13, 13
OR-MAPPING
JSON
Server
Document
NoSQL

190. Interfacing with Databases
nano
가벼운
API
Sunday, October 13, 13
cradle
강력함
API
mongoskin
깨끗한
API

191. 실시간 협업 에디터 만들기
Operation 전송으로 Network 사용량이 적음
OT Function으로 동일한 문서 유지
서버/클라이언트 Document Model 재사용
형변환 최소화
Sunday, October 13, 13

192. Real-time(OT)

193. server

194. vs

195. Web

196. server
Sunday, October 13, 13

197. Long

198. connection

199. vs

200. Short

201. connection
Sunday, October 13, 13

202. Long

203. connection

204. vs

205. Short

206. connection
Sunday, October 13, 13

207. Long

208. connection

209. vs

210. Short

211. connection
Sunday, October 13, 13

212. Sunday, October 13, 13

213. Web

214. sockets
Sunday, October 13, 13

215. Sunday, October 13, 13

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

217. Sunday, October 13, 13

218. Request/broadcast

219. vs

220. Request/response
Sunday, October 13, 13

221. Request/broadcast

222. vs

223. Request/response
Sunday, October 13, 13

224. Request/broadcast

225. vs

226. Request/response
Sunday, October 13, 13

227. Request/broadcast

228. vs

229. Request/response
Sunday, October 13, 13

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

231. Real-time(OT)

232. server

233. vs

234. Web

235. server
•
•
Long connection vs Short connection
Request/broadcast vs request/response
Sunday, October 13, 13

236. 어 때요? 참
Sunday, October 13, 13
쉽죠?

237. Sunday, October 13, 13

238. “Unfortunately,
implementing OT sucks.”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13

239. Sunday, October 13, 13

240. etherpad-lite
Name
(Github Star)
Type
OT Engine
etherpad-lite Collaborati
Changeset
(2941)
ve editor
Sunday, October 13, 13
Editor
Ace
C/S Channel Persistence
socket.io
uberDB
Features
Chatting
Cursor
Undo

241. “Check out ShareJS. Its the
one true way ;)”
- Joseph Gentle(ShareJS, ex google wave...)
Sunday, October 13, 13

242. ShareJS
Name
(Github Star)
Type
ShareJS
(2235)
OT
framework
Sunday, October 13, 13
OT Engine
Editor
ot-type
Ace
Codemirror
Textarea
C/S Channel Persistence
browserchan
nel
livedb
Features

243. ot.js
Name
(Github Star)
Type
ot.js
(220)
OT
framework
Sunday, October 13, 13
OT Engine
ot.js
Editor
Codemirror
C/S Channel Persistence
socket.io
N/A
Features
Cursor
Undo

244. Changeset
Name
(Github Star)
Type
OT Engine
Editor
Changeset
(30)
Library
Changeset
N/A
Sunday, October 13, 13
C/S Channel Persistence
N/A
N/A
Features

245. OT with node.js
Name
(Github Star)
Type
OT Engine
OT
framework
Features
Ace
socket.io
uberDB
ot.js
Codemirror
socket.io
N/A
Cursor
Undo
browserchan
nel
livedb
N/A
N/A
ShareJS
(2235)
OT
framework
ot-type
Ace
Codemirror
Textarea
Changeset
(30)
Library
Changeset
N/A
Sunday, October 13, 13
C/S Channel Persistence
Chatting
Cursor
Undo
etherpad-lite Collaborati
Changeset
(2941)
ve editor
ot.js
(220)
Editor

246. Summary
• Real-time collaboration
• Text Editor?
• Operational Transformation
• OT with node.js
• OT software in node.js
Sunday, October 13, 13

247. 한편...
Sunday, October 13, 13

248. Tony

249. Stark

250. and

251. Mark

252. 42
Sunday, October 13, 13

253. 마크 1
토니가 아이언맨 1편에서 처음 만듬
Sunday, October 13, 13

254. Tony

255. Stark:

256. 아이언맨

257. 수트

258. 42개

259. 이상

260. 만든

261. 용자
Sunday, October 13, 13

262. Sunday, October 13, 13

263. Sunday, October 13, 13

264. ot-summernote
Sunday, October 13, 13

265. https://github.com/HackerWins/summernote
Sunday, October 13, 13

266. ot-summernote
https://github.com/HackerWins/ot-summernote
Name
(Github Star)
Type
OT Engine
Editor
otexperiment
summernote
Changeset summernote
al
(2)
Sunday, October 13, 13
C/S Channel Persistence
socket.io
N/A
Features
N/A

267. susukang98@gmail.com
Sunday, October 13, 13

268. FAQ
Sunday, October 13, 13

269. FAQ
Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요
~? 라는게 가장 궁금하네요. by OO Son
Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는
것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다.
by 이OO
Sunday, October 13, 13

270. FAQ
Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요
~? 라는게 가장 궁금하네요. by OO Son
Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는
것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다.
by 이OO
A) 한 개발자의 건전한 주말 취미생활 수준
Sunday, October 13, 13

271. QA
susukang98@gmail.com
Sunday, October 13, 13

272. 감사합니다.
Sunday, October 13, 13