Desktop Application에
도전하는 JavaScript
권병철
SynapSoft WebOffice Team
네이버 오피스는
어떻게 만들었나요?
그러게요....
어떻게 만들었을까요?
Naver Office 개발 뒷담화
SynapSoft?
•

문서 처리 솔루션의 히든 챔피
언

•

문서 필터, HTML 변환기 제작
WebOffice?

웹오피스,
만들지 않겠는가?
그까이꺼 대~충

HTML 변환기
+
편집기능
모든 게 잘 되는 것 같았다
But...
Performance Tuning
JavaScript에 날개를 달자
Dynamic Rendering
Dynamic Rendering
•

Rendering 도중 브라우저 사망
Dynamic Rendering
•

render 대상을 chunk

•

브라우저 '응답 없음'의 기준
• 실행 시간(×)
• Function call 내 명령 수

•

setInterval, setTimeout

...
Dynamic Rendering
•

Rendering 이후
• 스크롤 안돼!
• 메뉴 클릭 안돼!!
• 편집도 안돼!!!

•

DOM 객체가 많다
= DOM Tree가 무겁다
= 리소스를 많이 먹는다
Dynamic Rendering
•

보이는 부분만 렌더링하면?

•

보이지 않는 부분은 소거

whole contents

browser window
Dynamic Rendering
•

보이는 부분만 렌더링하면?

•

보이지 않는 부분은 소거

•

사용자 경험을 고려해 buffer
영역 설정

whole contents

buffer
browser window
그래도 안 돼요!
•

DOM element를 삽입/소거하
는 과정에서 reflow 발생!!

•

적게는 성능 하락

•

많게는
◀ 보시다시피 -_-;;
Reflow & Repaint
repaint

bgColor
reflow
visibility

insert / delete
node

reposition

resize

font

border
Reflow & Repaint
// bad

var left = 10, top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// good
el.styl...
Reflow & Repaint
// bad

function setStyle(oStyle) {
// move if needed
// resize if needed
// set color if....
}
// good
f...
Dynamic CSS Styling
Dynamic CSS Styling
•
•

hello, again :-P

모든 node의 CSS style 재정의
loop 돌다 브라우저 사망
Dynamic CSS Styling
// Internet Explorer

document.styleSheets
.addRule(sel, idx);
document.styleSheets
.rules[idx].style....
Exploits
브라우저의 한계를 회피하는 꼼수(?)
들
Local Font Detection
Local Font Detection
•

임의의 DIV에 문자열 삽입

•

글꼴 적용

•

높이/너비가 변경되는지 확인!

hello, world!
hello, world!
not installed

hello, ...
Clipboard Handling
•

외부 클립보드 데이터가 브라
우저와 호환되지 않음

•

브라우저 clipboard 객체에서
접근 불가능한 정보도 존재

•

[office Object]
Clipboard Handling
•

브라우저간/제품간 클립보드
정보 공유

•

각 process별로 독립된 클립보
드 제어

•

제품간 적절한 문서 모델로 변
경
Clipboard Handling
•

hidden iframe to hook
Ctrl+C/V
Clipboard Handling
•
pic?

text?

typ
e
obj?

encode

model
↔ html

strip
tags

객체의 type에 따라
• base64 인코딩
• html로 변환
• 태그 ...
Vector Element Events
•

<SVG> or <VML>,
whatever it is...

click!
BOOO~!

selected
?

이벤트의 기본은 직교 영역

•

사용자 직관을 벗어남
Vector Element Events(Non-IE)
•

pointer-events property
• SVG 전용 속성

•

"그려진 부분"만 이벤트가 적
용되게 할 수 있음
• mouseDown
• mouseOv...
Vector Element Events(IE)
•

특정 클래스명을 검사
• 실제 path와 상위 VML 클
래스명이 다름

•

이벤트가 적절하지 않으면
• document
.elementFromPoint()
• ne...
Conclusion
단언컨대,
JavaScript는 가장 hot한 언어입니다.
JavaScript Rules!

Toy

Trash
JavaScript Rules!

Trend
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
하지만 실제론...

Just another Community app
with bootstrap!
우린 아직 배고프다!
•

워드 : 인쇄 결과물과 동일한 편집 페이지 분할(pagination)

•

공동 편집

•

오프라인 캐시

•

더욱 강력한 기능들
• 문서 효과(그림자, 반사 등)
• 글머리 기호
• 애...
도전하세요!
Thank You!

overock@synapsoft.co.kr
twitter.com/overockaffe
facebook.com/overockaffe

Any Questions?
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Upcoming SlideShare
Loading in …5
×

Deview2013 track1 session7

3,086 views

Published on

DEVIEW2013 - 네이버 오피스 삽질기

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,086
On SlideShare
0
From Embeds
0
Number of Embeds
1,760
Actions
Shares
0
Downloads
57
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Deview2013 track1 session7

  1. 1. Desktop Application에 도전하는 JavaScript 권병철 SynapSoft WebOffice Team
  2. 2. 네이버 오피스는 어떻게 만들었나요?
  3. 3. 그러게요.... 어떻게 만들었을까요?
  4. 4. Naver Office 개발 뒷담화
  5. 5. SynapSoft? • 문서 처리 솔루션의 히든 챔피 언 • 문서 필터, HTML 변환기 제작
  6. 6. WebOffice? 웹오피스, 만들지 않겠는가?
  7. 7. 그까이꺼 대~충 HTML 변환기 + 편집기능
  8. 8. 모든 게 잘 되는 것 같았다
  9. 9. But...
  10. 10. Performance Tuning JavaScript에 날개를 달자
  11. 11. Dynamic Rendering
  12. 12. Dynamic Rendering • Rendering 도중 브라우저 사망
  13. 13. Dynamic Rendering • render 대상을 chunk • 브라우저 '응답 없음'의 기준 • 실행 시간(×) • Function call 내 명령 수 • setInterval, setTimeout • 뻗는 것보다 조금 느린 게 낫 다!
  14. 14. Dynamic Rendering • Rendering 이후 • 스크롤 안돼! • 메뉴 클릭 안돼!! • 편집도 안돼!!! • DOM 객체가 많다 = DOM Tree가 무겁다 = 리소스를 많이 먹는다
  15. 15. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 whole contents browser window
  16. 16. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 • 사용자 경험을 고려해 buffer 영역 설정 whole contents buffer browser window
  17. 17. 그래도 안 돼요! • DOM element를 삽입/소거하 는 과정에서 reflow 발생!! • 적게는 성능 하락 • 많게는 ◀ 보시다시피 -_-;;
  18. 18. Reflow & Repaint repaint bgColor reflow visibility insert / delete node reposition resize font border
  19. 19. Reflow & Repaint // bad var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // good el.style.cssText += "; left: " + left + "px; top: " + top + "px;"; • reflow가 일어날 상황은 한 번 에 몰아서 처리
  20. 20. Reflow & Repaint // bad function setStyle(oStyle) { // move if needed // resize if needed // set color if.... } // good function move(x, y) {...} function resize(x, y) {...} function setColor(c) {...} • paint 함수를 세분화하여 repaint만 가능할 때는 repaint 만 하도록 유도
  21. 21. Dynamic CSS Styling
  22. 22. Dynamic CSS Styling • • hello, again :-P 모든 node의 CSS style 재정의 loop 돌다 브라우저 사망
  23. 23. Dynamic CSS Styling // Internet Explorer document.styleSheets .addRule(sel, idx); document.styleSheets .rules[idx].style.cssText = "..."; // FireFox & Chrome document.styleSheets .insertRule(sel, idx); document.styleSheets .deleteRule(idx); • document.styleSheets 객체 • 스타일 시트 정의 • script level에서 임의로 추 가/수정/삭제 가능
  24. 24. Exploits 브라우저의 한계를 회피하는 꼼수(?) 들
  25. 25. Local Font Detection
  26. 26. Local Font Detection • 임의의 DIV에 문자열 삽입 • 글꼴 적용 • 높이/너비가 변경되는지 확인! hello, world! hello, world! not installed hello, world! installed
  27. 27. Clipboard Handling • 외부 클립보드 데이터가 브라 우저와 호환되지 않음 • 브라우저 clipboard 객체에서 접근 불가능한 정보도 존재 • [office Object]
  28. 28. Clipboard Handling • 브라우저간/제품간 클립보드 정보 공유 • 각 process별로 독립된 클립보 드 제어 • 제품간 적절한 문서 모델로 변 경
  29. 29. Clipboard Handling • hidden iframe to hook Ctrl+C/V
  30. 30. Clipboard Handling • pic? text? typ e obj? encode model ↔ html strip tags 객체의 type에 따라 • base64 인코딩 • html로 변환 • 태그 정렬 등등...
  31. 31. Vector Element Events • <SVG> or <VML>, whatever it is... click! BOOO~! selected ? 이벤트의 기본은 직교 영역 • 사용자 직관을 벗어남
  32. 32. Vector Element Events(Non-IE) • pointer-events property • SVG 전용 속성 • "그려진 부분"만 이벤트가 적 용되게 할 수 있음 • mouseDown • mouseOver • mouseUp pointerEvents == "auto"? click! selected!
  33. 33. Vector Element Events(IE) • 특정 클래스명을 검사 • 실제 path와 상위 VML 클 래스명이 다름 • 이벤트가 적절하지 않으면 • document .elementFromPoint() • nextElement.fireEvent() className=="manipulable" ? click! selected!
  34. 34. Conclusion 단언컨대, JavaScript는 가장 hot한 언어입니다.
  35. 35. JavaScript Rules! Toy Trash
  36. 36. JavaScript Rules! Trend
  37. 37. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  38. 38. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  39. 39. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  40. 40. 하지만 실제론... Just another Community app with bootstrap!
  41. 41. 우린 아직 배고프다! • 워드 : 인쇄 결과물과 동일한 편집 페이지 분할(pagination) • 공동 편집 • 오프라인 캐시 • 더욱 강력한 기능들 • 문서 효과(그림자, 반사 등) • 글머리 기호 • 애니매이션 • 겹선 테두리 • 기타등등...
  42. 42. 도전하세요!
  43. 43. Thank You! overock@synapsoft.co.kr twitter.com/overockaffe facebook.com/overockaffe Any Questions?

×