SlideShare uma empresa Scribd logo
1 de 118
Baixar para ler offline
Operational Transformation
                          in Node.js
                       (웹 기반 협업 소프트웨어는 Node.js)




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

12년 11월 20일 화요일
Operational Transformation
                          in Node.js
                       (웹 기반 협업 소프트웨어는 Node.js)




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

12년 11월 20일 화요일
Operational Transformation
                          in Node.js
                       (웹 기반 협업 소프트웨어는 Node.js)




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

12년 11월 20일 화요일
About Me

                             Javascript




12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
NAVER Office




12년 11월 20일 화요일
지난 3년간의 삽질로~



12년 11월 20일 화요일
NAVER Office




                        2012.9.25 오픈
12년 11월 20일 화요일
그게 무슨 웹오피스야!!!




12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
나도 ‘Fan’이야




12년 11월 20일 화요일
이게 웹 오피스야~!!!



12년 11월 20일 화요일
그래
 동시편집
 만들자-!




12년 11월 20일 화요일
편집기 만들기



12년 11월 20일 화요일
입력




                  출력




12년 11월 20일 화요일
이벤트 핸들러




12년 11월 20일 화요일
이벤트 핸들러




12년 11월 20일 화요일
이벤트 핸들러




                            도큐먼트 모델




12년 11월 20일 화요일
이벤트 핸들러




                            도큐먼트 모델




                    렌더러




12년 11월 20일 화요일
이벤트 핸들러




                                도큐먼트 모델




                    렌더러
                            코드가 많아



12년 11월 20일 화요일
‘가’
                        이벤트 핸들러




                                  도큐먼트 모델




                          렌더러




12년 11월 20일 화요일
‘가’             doc.addText(‘가’)

                        이벤트 핸들러




                                    도큐먼트 모델




                          렌더러




12년 11월 20일 화요일
‘가’                   doc.addText(‘가’)

                        이벤트 핸들러




                                           도큐먼트 모델




                          렌더러     renderer.paint(para)




12년 11월 20일 화요일
‘가’                        doc.addText(‘가’)

                             이벤트 핸들러




                                                도큐먼트 모델



                  P가/P
                    {HTML}
                               렌더러     renderer.paint(para)




12년 11월 20일 화요일
입력 처리기




                           도큐먼트 모델




                    렌더러




12년 11월 20일 화요일
학기말 과제 작성중...


                                   ‘node cookbook’
                                       번역중...




                  난 그냥 들어와 봤어...




12년 11월 20일 화요일
‘node cookbook’
                      번역중...




                   나도 껴줘~!!!




12년 11월 20일 화요일
12년 11월 20일 화요일
‘가’




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




                                     update(doc)




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




                                     update(doc)




                                     change(doc)




12년 11월 20일 화요일
‘가’             doc.addText(‘가’)




                                               update(doc)



                  renderer.paint(para)




                                               change(doc)



                        renderer.paint(doc)




12년 11월 20일 화요일
‘가’                      doc.addText(‘가’)




                                                        update(doc)



             P가/P      renderer.paint(para)
                  {HTML}




                                                        change(doc)



             P가/P            renderer.paint(doc)
                  {HTML}




12년 11월 20일 화요일
‘가’                      doc.addText(‘가’)




                                                        update(doc)



             P가/P      renderer.paint(para)
                  {HTML}




                           동일한 결과~!!!
                                                        change(doc)



             P가/P            renderer.paint(doc)
                  {HTML}




12년 11월 20일 화요일
‘가’                      doc.addText(‘가’)




                                                        update(doc)



             P가/P      renderer.paint(para)
                                                       하지만 문서를 전송해서
                  {HTML}



                                                          느리다~!!!


                                                        change(doc)



             P가/P            renderer.paint(doc)
                  {HTML}




12년 11월 20일 화요일
‘가’




            ‘나’




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




                  doc.addText(‘나’)
            ‘나’




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




                                     update(doc)




                  doc.addText(‘나’)
            ‘나’

                                     update(doc)




12년 11월 20일 화요일
‘가’   doc.addText(‘가’)




                                     update(doc)




                  doc.addText(‘나’)
            ‘나’

                                     update(doc)


                                       Conflict!
                                     동시편집은 무리

12년 11월 20일 화요일
• 문서 전체 전송으로 Network 사용량이 많음
                  • 따라서 느림




12년 11월 20일 화요일
• 문서 전체 전송으로 Network 사용량이 많음
                  • 따라서 느림               스타크래프트 마린부대는
                                       이동중 모든 좌표를 전송할까?




12년 11월 20일 화요일
• 문서 전체 전송으로 Network 사용량이 많음
                  • 따라서 느림
                  • Conflict 발생



12년 11월 20일 화요일
OT
                   (Operational
 Transformation)




12년 11월 20일 화요일
OT
 (wikipedia)




                  • Operational transformation(OT) is a
                    technology for supporting a range of
                    collaboration functionalities in advanced
                    collaborative software systems.




12년 11월 20일 화요일
OT
 (wikipedia)




                  • Operational transformation(OT) is a
                    technology for supporting a range of
                    collaboration functionalities in advanced
                    collaborative software systems.




12년 11월 20일 화요일
replicated
 architecture
 for
 shared
 documents




12년 11월 20일 화요일
replicated
 architecture
 for
 shared
 documents
                                            Operation 실행




12년 11월 20일 화요일
replicated
 architecture
 for
 shared
 documents


                                                                           Operation 전송




12년 11월 20일 화요일
replicated
 architecture
 for
 shared
 documents


                                                                                               Operation 변환




12년 11월 20일 화요일
replicated
 architecture
 for
 shared
 documents


                                                                                               Operation 실행




12년 11월 20일 화요일
OT Basics
                     Client 1     Client 2
                  “APL”                  “APL”




Time




12년 11월 20일 화요일
OT Basics
                            Client 1        Client 2
                      “APL”                        “APL”


                  O1 = INS(1, ‘P’)

                     “APPL”
Time




12년 11월 20일 화요일
O1 = INS(1, ‘P’)




12년 11월 20일 화요일
INSERT : 삽입



                  O1 = INS(1, ‘P’)




12년 11월 20일 화요일
글자의 삽입 위치



                  O1 = INS(1, ‘P’)
                            삽입 문자




12년 11월 20일 화요일
O1 = INS(1, ‘P’)

                  “APL”        ?

12년 11월 20일 화요일
O1 = INS(1, ‘P’)

                  “APL”     “APPL”

12년 11월 20일 화요일
OT Basics
                            Client 1        Client 2
                      “APL”                        “APL”


                  O1 = INS(1, ‘P’)

                     “APPL”
Time




12년 11월 20일 화요일
OT Basics
                            Client 1        Client 2
                      “APL”                          “APL”


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

                     “APPL”                         “APLE”
Time




12년 11월 20일 화요일
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일 화요일
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일 화요일
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일 화요일
OT Basics
                     Client 1     Client 2
                  “APL”                  “APL”




Time




12년 11월 20일 화요일
OT Basics
                            Client 1        Client 2
                      “APL”                        “APL”


                  O1 = INS(1, ‘P’)

                     “APPL”
Time




12년 11월 20일 화요일
OT Basics
                            Client 1        Client 2
                      “APL”                          “APL”


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

                     “APPL”                         “APLE”
Time




12년 11월 20일 화요일
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일 화요일
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일 화요일
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일 화요일
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일 화요일
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일 화요일
OT Basics

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




12년 11월 20일 화요일
• 문서 전체 전송으로 Network 사용량이 많음
                  • 느림
                  • Conflict 발생



12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
12년 11월 20일 화요일
OT       OT
                  Client   Server




12년 11월 20일 화요일
Operation만 전송


                   OT         OT
                  Client     Server




12년 11월 20일 화요일
문제
 없나요?


12년 11월 20일 화요일
OT       OT
                  Client   Server




12년 11월 20일 화요일
OT       OT
                  Client   Server




12년 11월 20일 화요일
비슷하게 생겼는데
                   쉽게 포팅 가능?
                                    class Document {
                                    	 public Document(){
                                          ...
      var document = {                 }
      	 insertText : function(){    	 public void insertText(){
            ...                           ...
         },                            }
      	 deleteText : function(){    	 public void deleteText(){
            ...                           ...
         },                            }
      	 updateStyle : function(){   	 public void updateStyle(){
            ...                           ...
         },                            }	
         ...                           ...
      };                            };

12년 11월 20일 화요일
Javascript는 Java와
                      완전히 달라
                   - 더글라스 크락포드(JSON inventor)




12년 11월 20일 화요일
클로
                                             져


                         자바스크립트

                    “C 언어의 옷을 입은 LISP”

                             - 더글라스 크락포드



                  급 객체
             수 =일
        함
12년 11월 20일 화요일
이벤트 핸들러




                                도큐먼트 모델




                    렌더러
                            코드가 많아




12년 11월 20일 화요일
문제의 본질은 중복




12년 11월 20일 화요일
• 문서 전체 전송으로 Network 사용량이 많음
                  • 느림
                  • Conflict 발생
                  • Document Model 중복코드


12년 11월 20일 화요일

Mais conteúdo relacionado

Destaque

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...Palo Alto Software
 

Destaque (20)

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
 

Operational Transformation in node.js

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