Operational Transformation in node.js

8,070 views
8,119 views

Published on

play.node(http://nodeconf.kr/2012/)에서 이야기. 협업 기반 소프트웨어에 node.js가 잘 어울린다. \(^_^)/ 노사모~

0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,070
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
69
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

Operational Transformation in node.js

  1. 1. Operational Transformation in Node.js (웹 기반 협업 소프트웨어는 Node.js) 홍영택 (사이냅소프트, 노사모)12년 11월 20일 화요일
  2. 2. Operational Transformation in Node.js (웹 기반 협업 소프트웨어는 Node.js) 홍영택 (사이냅소프트, 노사모)12년 11월 20일 화요일
  3. 3. Operational Transformation in Node.js (웹 기반 협업 소프트웨어는 Node.js) 홍영택 (사이냅소프트, 노사모)12년 11월 20일 화요일
  4. 4. About Me Javascript12년 11월 20일 화요일
  5. 5. 12년 11월 20일 화요일
  6. 6. 12년 11월 20일 화요일
  7. 7. 12년 11월 20일 화요일
  8. 8. NAVER Office12년 11월 20일 화요일
  9. 9. 지난 3년간의 삽질로~12년 11월 20일 화요일
  10. 10. NAVER Office 2012.9.25 오픈12년 11월 20일 화요일
  11. 11. 그게 무슨 웹오피스야!!!12년 11월 20일 화요일
  12. 12. 12년 11월 20일 화요일
  13. 13. 12년 11월 20일 화요일
  14. 14. 나도 ‘Fan’이야12년 11월 20일 화요일
  15. 15. 이게 웹 오피스야~!!!12년 11월 20일 화요일
  16. 16. 그래
  17. 17.  동시편집
  18. 18.  만들자-!12년 11월 20일 화요일
  19. 19. 편집기 만들기12년 11월 20일 화요일
  20. 20. 입력 출력12년 11월 20일 화요일
  21. 21. 이벤트 핸들러12년 11월 20일 화요일
  22. 22. 이벤트 핸들러12년 11월 20일 화요일
  23. 23. 이벤트 핸들러 도큐먼트 모델12년 11월 20일 화요일
  24. 24. 이벤트 핸들러 도큐먼트 모델 렌더러12년 11월 20일 화요일
  25. 25. 이벤트 핸들러 도큐먼트 모델 렌더러 코드가 많아12년 11월 20일 화요일
  26. 26. ‘가’ 이벤트 핸들러 도큐먼트 모델 렌더러12년 11월 20일 화요일
  27. 27. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러12년 11월 20일 화요일
  28. 28. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러 renderer.paint(para)12년 11월 20일 화요일
  29. 29. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 P가/P {HTML} 렌더러 renderer.paint(para)12년 11월 20일 화요일
  30. 30. 입력 처리기 도큐먼트 모델 렌더러12년 11월 20일 화요일
  31. 31. 학기말 과제 작성중... ‘node cookbook’ 번역중... 난 그냥 들어와 봤어...12년 11월 20일 화요일
  32. 32. ‘node cookbook’ 번역중... 나도 껴줘~!!!12년 11월 20일 화요일
  33. 33. 12년 11월 20일 화요일
  34. 34. ‘가’12년 11월 20일 화요일
  35. 35. ‘가’ doc.addText(‘가’)12년 11월 20일 화요일
  36. 36. ‘가’ doc.addText(‘가’) update(doc)12년 11월 20일 화요일
  37. 37. ‘가’ doc.addText(‘가’) update(doc) change(doc)12년 11월 20일 화요일
  38. 38. ‘가’ doc.addText(‘가’) update(doc) renderer.paint(para) change(doc) renderer.paint(doc)12년 11월 20일 화요일
  39. 39. ‘가’ doc.addText(‘가’) update(doc) P가/P renderer.paint(para) {HTML} change(doc) P가/P renderer.paint(doc) {HTML}12년 11월 20일 화요일
  40. 40. ‘가’ doc.addText(‘가’) update(doc) P가/P renderer.paint(para) {HTML} 동일한 결과~!!! change(doc) P가/P renderer.paint(doc) {HTML}12년 11월 20일 화요일
  41. 41. ‘가’ doc.addText(‘가’) update(doc) P가/P renderer.paint(para) 하지만 문서를 전송해서 {HTML} 느리다~!!! change(doc) P가/P renderer.paint(doc) {HTML}12년 11월 20일 화요일
  42. 42. ‘가’ ‘나’12년 11월 20일 화요일
  43. 43. ‘가’ doc.addText(‘가’) doc.addText(‘나’) ‘나’12년 11월 20일 화요일
  44. 44. ‘가’ doc.addText(‘가’) update(doc) doc.addText(‘나’) ‘나’ update(doc)12년 11월 20일 화요일
  45. 45. ‘가’ doc.addText(‘가’) update(doc) doc.addText(‘나’) ‘나’ update(doc) Conflict! 동시편집은 무리12년 11월 20일 화요일
  46. 46. • 문서 전체 전송으로 Network 사용량이 많음 • 따라서 느림12년 11월 20일 화요일
  47. 47. • 문서 전체 전송으로 Network 사용량이 많음 • 따라서 느림 스타크래프트 마린부대는 이동중 모든 좌표를 전송할까?12년 11월 20일 화요일
  48. 48. • 문서 전체 전송으로 Network 사용량이 많음 • 따라서 느림 • Conflict 발생12년 11월 20일 화요일
  49. 49. OT (Operational
  50. 50.  Transformation)12년 11월 20일 화요일
  51. 51. OT
  52. 52.  (wikipedia) • Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.12년 11월 20일 화요일
  53. 53. OT
  54. 54.  (wikipedia) • Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems.12년 11월 20일 화요일
  55. 55. replicated
  56. 56.  architecture
  57. 57.  for
  58. 58.  shared
  59. 59.  documents12년 11월 20일 화요일
  60. 60. replicated
  61. 61.  architecture
  62. 62.  for
  63. 63.  shared
  64. 64.  documents Operation 실행12년 11월 20일 화요일
  65. 65. replicated
  66. 66.  architecture
  67. 67.  for
  68. 68.  shared
  69. 69.  documents Operation 전송12년 11월 20일 화요일
  70. 70. replicated
  71. 71.  architecture
  72. 72.  for
  73. 73.  shared
  74. 74.  documents Operation 변환12년 11월 20일 화요일
  75. 75. replicated
  76. 76.  architecture
  77. 77.  for
  78. 78.  shared
  79. 79.  documents Operation 실행12년 11월 20일 화요일
  80. 80. OT Basics Client 1 Client 2 “APL” “APL”Time12년 11월 20일 화요일
  81. 81. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) “APPL”Time12년 11월 20일 화요일
  82. 82. O1 = INS(1, ‘P’)12년 11월 20일 화요일
  83. 83. INSERT : 삽입 O1 = INS(1, ‘P’)12년 11월 20일 화요일
  84. 84. 글자의 삽입 위치 O1 = INS(1, ‘P’) 삽입 문자12년 11월 20일 화요일
  85. 85. O1 = INS(1, ‘P’) “APL” ?12년 11월 20일 화요일
  86. 86. O1 = INS(1, ‘P’) “APL” “APPL”12년 11월 20일 화요일
  87. 87. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) “APPL”Time12년 11월 20일 화요일
  88. 88. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time12년 11월 20일 화요일
  89. 89. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O1 = INS(1, ‘P’) “APPLE”12년 11월 20일 화요일
  90. 90. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2 = INS(3, ‘E’) O1 = INS(1, ‘P’) “APPEL” “APPLE”12년 11월 20일 화요일
  91. 91. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2 = INS(3, ‘E’) O1 = INS(1, ‘P’) “APPEL” APPEL ≠ APPLE “APPLE”12년 11월 20일 화요일
  92. 92. OT Basics Client 1 Client 2 “APL” “APL”Time12년 11월 20일 화요일
  93. 93. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) “APPL”Time12년 11월 20일 화요일
  94. 94. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time12년 11월 20일 화요일
  95. 95. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O1’ = INS(1, ‘P’) “APPLE”12년 11월 20일 화요일
  96. 96. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2’ = INS(4, ‘E’) O1’ = INS(1, ‘P’) “APPLE” “APPLE”12년 11월 20일 화요일
  97. 97. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2’ : index++ O2’ = INS(4, ‘E’) O1’ = INS(1, ‘P’) “APPLE” “APPLE”12년 11월 20일 화요일
  98. 98. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2’ = INS(4, ‘E’) O1’ = INS(1, ‘P’) “APPLE” APPLE = APPLE “APPLE”12년 11월 20일 화요일
  99. 99. OT Basics Client 1 Client 2 “APL” “APL” O1 = INS(1, ‘P’) O2 = INS(3, ‘E’) “APPL” “APLE”Time O2’ = INS(4, ‘E’) O1’ = INS(1, ‘P’) “APPLE” APPLE = APPLE “APPLE”12년 11월 20일 화요일
  100. 100. OT Basics O1⋅O2 = O2⋅O1 where (O1, O2) = transform(O1, O2)12년 11월 20일 화요일
  101. 101. • 문서 전체 전송으로 Network 사용량이 많음 • 느림 • Conflict 발생12년 11월 20일 화요일
  102. 102. 12년 11월 20일 화요일
  103. 103. 12년 11월 20일 화요일
  104. 104. 12년 11월 20일 화요일
  105. 105. 12년 11월 20일 화요일
  106. 106. 12년 11월 20일 화요일
  107. 107. OT OT Client Server12년 11월 20일 화요일
  108. 108. Operation만 전송 OT OT Client Server12년 11월 20일 화요일
  109. 109. 문제
  110. 110.  없나요?12년 11월 20일 화요일
  111. 111. OT OT Client Server12년 11월 20일 화요일
  112. 112. OT OT Client Server12년 11월 20일 화요일
  113. 113. 비슷하게 생겼는데 쉽게 포팅 가능? class Document { public Document(){ ... var document = { } insertText : function(){ public void insertText(){ ... ... }, } deleteText : function(){ public void deleteText(){ ... ... }, } updateStyle : function(){ public void updateStyle(){ ... ... }, } ... ... }; };12년 11월 20일 화요일
  114. 114. Javascript는 Java와 완전히 달라 - 더글라스 크락포드(JSON inventor)12년 11월 20일 화요일
  115. 115. 클로 져 자바스크립트 “C 언어의 옷을 입은 LISP” - 더글라스 크락포드 급 객체 수 =일 함12년 11월 20일 화요일
  116. 116. 이벤트 핸들러 도큐먼트 모델 렌더러 코드가 많아12년 11월 20일 화요일
  117. 117. 문제의 본질은 중복12년 11월 20일 화요일
  118. 118. • 문서 전체 전송으로 Network 사용량이 많음 • 느림 • Conflict 발생 • Document Model 중복코드12년 11월 20일 화요일
  119. 119. 한편...12년 11월 20일 화요일
  120. 120. 이벤트 기반의 논 블러킹 I/O 작은 서버 - 라이언 달(Node.js 창시자)12년 11월 20일 화요일
  121. 121. C? 루아? 하스켈?12년 11월 20일 화요일
  122. 122. Javascript !!!12년 11월 20일 화요일
  123. 123. 12년 11월 20일 화요일
  124. 124. Javascript가 서버에서 돌아간다 ㅠㅠ12년 11월 20일 화요일
  125. 125. class Document { public Document(){ var document = { ... insertText : function(){ } ... public void insertText(){ }, ... deleteText : function(){ } ... public void deleteText(){ }, ... updateStyle : function(){ } ... public void updateStyle(){ }, ... ... } }; ... };12년 11월 20일 화요일
  126. 126. OT OT Client Server 같은 코드12년 11월 20일 화요일
  127. 127. • 문서 전체 전송으로 Network 사용량이 많음 • 느림 • Conflict 발생 • Document Model 중복코드12년 11월 20일 화요일
  128. 128. One
  129. 129.  more
  130. 130.  thing... R.I.P.
  131. 131.  Jobs12년 11월 20일 화요일
  132. 132. JSON to POJO OR-MAPPING POJO to JSON JSON POJO Table Browser Server RDB12년 11월 20일 화요일
  133. 133. 우린 왜? 이유없이 데이터 형변환을 하고 있을까? 문서에 무결성이 왠말이냐 ㅠㅠ12년 11월 20일 화요일
  134. 134. • 문서 전체 전송으로 Network 사용량이 많음 • 느림 • Conflict 발생 • Javascript, Java 중복코드 • 불필요한 데이터 형변환12년 11월 20일 화요일
  135. 135. JSON to POJO OR-MAPPING POJO to JSON JSON JSON Document Browser Server NoSQL12년 11월 20일 화요일
  136. 136. Interfacing with Databases nano cradle mongoskin 가벼운 강력함 깨끗한 API API API12년 11월 20일 화요일
  137. 137. • 문서 전체 전송으로 Network 사용량이 많음 • 느림 • Conflict 발생 • Javascript, Java 중복코드 • 불필요한 데이터 형변환12년 11월 20일 화요일
  138. 138. 결론 기술 서비스 기술 서비스12년 11월 20일 화요일
  139. 139. 웹 기 Single Page App은 node.js로 수렴 반 협 업12년 11월 20일 화요일
  140. 140. FAQ12년 11월 20일 화요일
  141. 141. FAQ Q) 서버측과 클라이언트측 코드를 통합할때 호환성 문제는 없나요?12년 11월 20일 화요일
  142. 142. FAQ Q) 서버측과 클라이언트측 코드를 통합할때 호환성 문제는 없나요? A) 노드는 ECMA 5의 기본적인 메소드를 가지고 있습니다. IE8 같은 구형 브라우저는 ECMA 5의 일부 메소드만 지원합니다. 교집합을 찾으셔야 원할하게 코딩할 수 있습니다. http://kangax.github.com/es5-compat-table/12년 11월 20일 화요일
  143. 143. FAQ Q) 동시편집을 위한 Node.js에 OT 모듈이 있나요?12년 11월 20일 화요일
  144. 144. Shar eJS 동시편집 http://synapoffice.com/12년 11월 20일 화요일
  145. 145. c t n e on c Shar eJS 동시편집 nt io- clie et. sock12년 11월 20일 화요일
  146. 146. QA susukang98@gmail.com12년 11월 20일 화요일
  147. 147. 감사합니다.12년 11월 20일 화요일

×