실시간 웹 협업도구 만들기 V0.3
Upcoming SlideShare
Loading in...5
×
 

실시간 웹 협업도구 만들기 V0.3

on

  • 3,738 views

 

Statistics

Views

Total Views
3,738
Views on SlideShare
1,678
Embed Views
2,060

Actions

Likes
11
Downloads
62
Comments
0

8 Embeds 2,060

http://deview.kr 2019
http://mangastorytelling.tistory.com 27
http://deview.admin.nhn.com 5
http://www.hanrss.com 4
http://local.deview.kr 2
https://www.google.co.kr 1
http://geekple.com 1
http://www.google.co.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

실시간 웹 협업도구 만들기 V0.3 실시간 웹 협업도구 만들기 V0.3 Presentation Transcript

  • 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  • 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  • 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  • About Me Sunday, October 13, 13
  • About Me Javascript Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • https://github.com/HackerWins/summernote Sunday, October 13, 13
  • https://github.com/HackerWins/summernote Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • 실시간 웹 협업도구 만들기 Sunday, October 13, 13
  • Collaboration is everything Sunday, October 13, 13
  • Sunday, October 13, 13
  • 팀원 B: “아인슈타인은 내친구” 조장A: “제길 내가 조장 ㅠ” 팀원 C: “대학은 술먹는 곳” Sunday, October 13, 13
  • Email based Collaboration Sunday, October 13, 13
  • 조장A: 템플릿 받으셈 Sunday, October 13, 13
  • 팀원 B: “E=mc^2” 조장A:나도 내부분 작성 팀원 C: “지식인에서 C & P” Sunday, October 13, 13
  • 팀원 C: “난 한글 없어서 HWP 파일 편 집 못해” Sunday, October 13, 13
  • 조장 A: “다했으면 보내주셈” Sunday, October 13, 13
  • 조장A: 취합 취합 Sunday, October 13, 13
  • 조장 A: “이거 다시보내 주셈” Sunday, October 13, 13
  • 팀원 C: “지식인에서 C & P” Sunday, October 13, 13
  • 조장 A: “제대로 고쳤나?” Sunday, October 13, 13
  • 조장A: “취합 취합 (파일이 많아졌어...)” Sunday, October 13, 13
  • 조장A: “취합 취합 (죽겠네...)” Sunday, October 13, 13
  • 첨부파일을 이용한 이메일 기반 협업 로컬 컴퓨터에 편집기가 설치되어 있어야함 리비전 관리가 어려움 Sunday, October 13, 13
  • 조장A: “문서 링크 받으셈” http://wiki.ooo.com Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • http://wiki.ooo.com Sunday, October 13, 13
  • Lock, Save Sunday, October 13, 13
  • Lock & Save Sunday, October 13, 13
  • 사용자 C: “Blah Blah” Sunday, October 13, 13
  • 사용자 B: “문서에 락걸렸네” Sunday, October 13, 13
  • 사용자 C: “저장!” Sunday, October 13, 13
  • 사용자 B: “이제 편집된다.” Sunday, October 13, 13
  • 사용자 B: “몽창 날라갔다.ㅠ” Sunday, October 13, 13
  • Lock & Save 협업 도구 페이지 락을 기다리는 불편함이 있음 네트워크가 끊어질 경우 데이터 손실의 위험이 있음 Sunday, October 13, 13
  • real-time collaboration Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • 사용자 B: “Blah Blah” 조장A: “취합이 필요없군” 사용자 C: “Blah Blah” Sunday, October 13, 13
  • 웹 협업 첨부파일을 이용한 이메일 기반 협업 Lock & Save 협업 도구 실시간 협업 도구 Sunday, October 13, 13
  • 웹 협업 첨부파일을 이용한 이메일 기반 협업 Lock & Save 협업 도구 실시간 협업 도구 Sunday, October 13, 13
  • 편집기 만들기 Sunday, October 13, 13
  • 입력 출력 Sunday, October 13, 13
  • 이벤트 핸들러 Sunday, October 13, 13
  • 이벤트 핸들러 Sunday, October 13, 13
  • 이벤트 핸들러 도큐먼트 모델 Sunday, October 13, 13
  • 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  • 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13 코드가 많아
  • ‘가’ 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13 renderer.paint(para)
  • ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 <P>가</P> {HTML} 렌더러 Sunday, October 13, 13 renderer.paint(para)
  • 학기말 과제 작성중... ‘node cookbook’ 번역중... 난 그냥 들어와 봤어... Sunday, October 13, 13
  • ‘node cookbook’ 번역중... 나도 껴줘~!!! Sunday, October 13, 13
  • Sunday, October 13, 13
  • ‘가’ Sunday, October 13, 13
  • ‘가’ Sunday, October 13, 13 doc.addText(‘가’)
  • ‘가’ doc.addText(‘가’) update(doc) Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) update(doc) change(doc) Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) update(doc) renderer.paint(para) change(doc) renderer.paint(doc) Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} change(doc) <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc)
  • ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} 동일한 결과~!!! <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc) change(doc)
  • ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} 하지만 문서를 전송해서 느리다~!!! change(doc) <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc)
  • ‘가’ ‘나’ Sunday, October 13, 13
  • ‘가’ ‘나’ Sunday, October 13, 13 doc.addText(‘가’) doc.addText(‘나’)
  • ‘가’ doc.addText(‘가’) update(doc) ‘나’ doc.addText(‘나’) update(doc) Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) update(doc) ‘나’ doc.addText(‘나’) update(doc) Conflict! 동시편집은 무리 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 스타크래프트 마린부대는 이동중 모든 좌표를 전송할까? Sunday, October 13, 13
  • OT (Operational
  •   Transformation) Sunday, October 13, 13
  • OT 
  •   (wikipedia) • Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems. Sunday, October 13, 13
  • OT 
  •   (wikipedia) • Operational transformation(OT) is a technology for supporting a range of collaboration functionalities in advanced collaborative software systems. Sunday, October 13, 13
  • “OT is like real-time Git” - Joseph Gentle(ShareJS, ex google wave...) Sunday, October 13, 13
  • OT 
  •   (basic) • Data Model • Operation Model • OT Function Sunday, October 13, 13
  • OT 
  •   (basic) • Data Model • Operation Model • OT Function Sunday, October 13, 13
  • OT 
  •   (basic) • Data Model • Operation Model • OT Function Sunday, October 13, 13
  • OT 
  •   (basic) • Data Model • Operation Model • OT Function Sunday, October 13, 13
  • 기억하세요? ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 <P>가</P> {HTML} 렌더러 Sunday, October 13, 13 renderer.paint(para)
  • replicated
  •   architecture
  •   for
  •   shared
  •   documents Sunday, October 13, 13
  • replicated
  •   architecture
  •   for
  •   shared
  •   documents Operation 실행 Sunday, October 13, 13
  • replicated
  •   architecture
  •   for
  •   shared
  •   documents Operation 전송 Sunday, October 13, 13
  • replicated
  •   architecture
  •   for
  •   shared
  •   documents Operation 변환 Sunday, October 13, 13
  • OT Function replicated
  •   architecture
  •   for
  •   shared
  •   documents Operation 변환 Sunday, October 13, 13
  • replicated
  •   architecture
  •   for
  •   shared
  •   documents Operation 실행 Sunday, October 13, 13
  • OT(Function) Client 1 “APL” Time Sunday, October 13, 13 Client 2 “APL”
  • OT(Function) Client 1 “APL” O1 = INS(1, ‘P’) “APPL” Time Sunday, October 13, 13 Client 2 “APL”
  • O1 = INS(1, ‘P’) Sunday, October 13, 13
  • INSERT : 삽입 O1 = INS(1, ‘P’) Sunday, October 13, 13
  • 글자의 삽입 위치 O1 = INS(1, ‘P’) 삽입 문자 Sunday, October 13, 13
  • O1 = INS(1, ‘P’) “APL” Sunday, October 13, 13 ?
  • O1 = INS(1, ‘P’) “APL” Sunday, October 13, 13 “APPL”
  • OT(Function) Client 1 “APL” O1 = INS(1, ‘P’) “APPL” Time Sunday, October 13, 13 Client 2 “APL”
  • OT(Function) Client 1 Client 2 “APL” O1 = INS(1, ‘P’) Sunday, October 13, 13 O2 = INS(3, ‘E’) “APPL” Time “APL” “APLE”
  • 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
  • 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”
  • 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”
  • OT(Function) Client 1 “APL” Time Sunday, October 13, 13 Client 2 “APL”
  • OT(Function) Client 1 “APL” O1 = INS(1, ‘P’) “APPL” Time Sunday, October 13, 13 Client 2 “APL”
  • OT(Function) Client 1 Client 2 “APL” O1 = INS(1, ‘P’) Sunday, October 13, 13 O2 = INS(3, ‘E’) “APPL” Time “APL” “APLE”
  • 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
  • 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”
  • 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”
  • 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”
  • 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”
  • OT(Function) O1'⋅O2 = O2'⋅O1 where (O1', O2') = transform(O1, O2) Sunday, October 13, 13
  • Visualization of OT with a central server http://localhost:8080/visualization.html Sunday, October 13, 13
  • ‘가’ doc.addText(‘가’) update(doc) ‘나’ doc.addText(‘나’) update(doc) Conflict! 동시편집은 무리 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 동시 편집시 충돌 발생 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • OT Client Sunday, October 13, 13 OT Server
  • Operation만 전송 OT Client Sunday, October 13, 13 OT Server
  • 문제
  •   없나요? Sunday, October 13, 13
  • OT Client Sunday, October 13, 13 OT Server
  • OT Client Sunday, October 13, 13 OT Server
  • 비슷하게 생겼는데 쉽게 포팅 가능? 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(){ ... } ... };
  • Javascript는 Java와 완전히 달라 - 더글라스 크락포드 Sunday, October 13, 13
  • 클로 져 자바스크립트 “C 언어의 옷을 입은 LISP” 함수 Sunday, October 13, 13 객체 일급 = - 더글라스 크락포드
  • 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13 코드가 많아
  • 문제의 본질은 중복 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 Document Model 중복 Sunday, October 13, 13
  • 한편... Sunday, October 13, 13
  • 이벤트 기반의 논 블러킹 I/O 작은 서버 - 라이언 달(Node.js) Sunday, October 13, 13
  • C? 루아? 하스켈? Sunday, October 13, 13
  • Javascript !!! Sunday, October 13, 13
  • Sunday, October 13, 13
  • Javascript가 서버에서 돌아간다 ㅠㅠ Sunday, October 13, 13
  • 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(){ ... } ... };
  • OT Client OT Server 같은 코드 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 서버/클라이언트 Document Model 중복 Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 서버/클라이언트 Document Model 재사용 Sunday, October 13, 13
  • One
  •   more
  •   thing... R.I.P.
  •   Jobs Sunday, October 13, 13
  • JSON to POJO POJO to JSON JSON Browser Sunday, October 13, 13 OR-MAPPING POJO Server Table RDB
  • 우린 왜? 이유없이 데이터 형변환을 하고 있을까? 문서에 무결성이 왠말이냐!! Sunday, October 13, 13
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 서버/클라이언트 Document Model 재사용 불필요한 형변환 Sunday, October 13, 13
  • JSON to POJO POJO to JSON JSON Browser Sunday, October 13, 13 OR-MAPPING JSON Server Document NoSQL
  • Interfacing with Databases nano 가벼운 API Sunday, October 13, 13 cradle 강력함 API mongoskin 깨끗한 API
  • 실시간 협업 에디터 만들기 Operation 전송으로 Network 사용량이 적음 OT Function으로 동일한 문서 유지 서버/클라이언트 Document Model 재사용 형변환 최소화 Sunday, October 13, 13
  • Real-time(OT)
  •   server
  •   vs
  •   Web
  •   server Sunday, October 13, 13
  • Long
  •   connection
  •   vs
  •   Short
  •   connection Sunday, October 13, 13
  • Long
  •   connection
  •   vs
  •   Short
  •   connection Sunday, October 13, 13
  • Long
  •   connection
  •   vs
  •   Short
  •   connection Sunday, October 13, 13
  • Sunday, October 13, 13
  • Web
  •   sockets Sunday, October 13, 13
  • Sunday, October 13, 13
  • Realtime application framework for Node.JS, with HTML5 WebSockets and cross-browser fallbacks support. Sunday, October 13, 13
  • Sunday, October 13, 13
  • Request/broadcast
  •   vs
  •   Request/response Sunday, October 13, 13
  • Request/broadcast
  •   vs
  •   Request/response Sunday, October 13, 13
  • Request/broadcast
  •   vs
  •   Request/response Sunday, October 13, 13
  • Request/broadcast
  •   vs
  •   Request/response Sunday, October 13, 13
  • 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
  • Real-time(OT)
  •   server
  •   vs
  •   Web
  •   server • • Long connection vs Short connection Request/broadcast vs request/response Sunday, October 13, 13
  • 어 때요? 참 Sunday, October 13, 13 쉽죠?
  • Sunday, October 13, 13
  • “Unfortunately, implementing OT sucks.” - Joseph Gentle(ShareJS, ex google wave...) Sunday, October 13, 13
  • Sunday, October 13, 13
  • 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
  • “Check out ShareJS. Its the one true way ;)” - Joseph Gentle(ShareJS, ex google wave...) Sunday, October 13, 13
  • 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
  • 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
  • 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
  • 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
  • Summary • Real-time collaboration • Text Editor? • Operational Transformation • OT with node.js • OT software in node.js Sunday, October 13, 13
  • 한편... Sunday, October 13, 13
  • Tony
  •   Stark
  •   and
  •   Mark
  •   42 Sunday, October 13, 13
  • 마크 1 토니가 아이언맨 1편에서 처음 만듬 Sunday, October 13, 13
  • Tony
  •   Stark:
  •   아이언맨
  •   수트
  •   42개
  •   이상
  •   만든
  •   용자 Sunday, October 13, 13
  • Sunday, October 13, 13
  • Sunday, October 13, 13
  • ot-summernote Sunday, October 13, 13
  • https://github.com/HackerWins/summernote Sunday, October 13, 13
  • 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
  • susukang98@gmail.com Sunday, October 13, 13
  • FAQ Sunday, October 13, 13
  • FAQ Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요 ~? 라는게 가장 궁금하네요. by OO Son Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO Sunday, October 13, 13
  • FAQ Q) 구글독스가 잘되어있는데 그것을 과연 뛰어넘을 수가 있을까요 ~? 라는게 가장 궁금하네요. by OO Son Q) 글쎄요... 구글독스가 너무 잘 되어 있어서... 새롭게 만드셨다는 것이.. 어떨진... ^^);; 구글독스보다 더 멋질 것을 기대해보겠습니다. by 이OO A) 한 개발자의 건전한 주말 취미생활 수준 Sunday, October 13, 13
  • Q&A susukang98@gmail.com Sunday, October 13, 13
  • 감사합니다. Sunday, October 13, 13