Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×

of

Deview2013 track1 session7 Slide 1 Deview2013 track1 session7 Slide 2 Deview2013 track1 session7 Slide 3 Deview2013 track1 session7 Slide 4 Deview2013 track1 session7 Slide 5 Deview2013 track1 session7 Slide 6 Deview2013 track1 session7 Slide 7 Deview2013 track1 session7 Slide 8 Deview2013 track1 session7 Slide 9 Deview2013 track1 session7 Slide 10 Deview2013 track1 session7 Slide 11 Deview2013 track1 session7 Slide 12 Deview2013 track1 session7 Slide 13 Deview2013 track1 session7 Slide 14 Deview2013 track1 session7 Slide 15 Deview2013 track1 session7 Slide 16 Deview2013 track1 session7 Slide 17 Deview2013 track1 session7 Slide 18 Deview2013 track1 session7 Slide 19 Deview2013 track1 session7 Slide 20 Deview2013 track1 session7 Slide 21 Deview2013 track1 session7 Slide 22 Deview2013 track1 session7 Slide 23 Deview2013 track1 session7 Slide 24 Deview2013 track1 session7 Slide 25 Deview2013 track1 session7 Slide 26 Deview2013 track1 session7 Slide 27 Deview2013 track1 session7 Slide 28 Deview2013 track1 session7 Slide 29 Deview2013 track1 session7 Slide 30 Deview2013 track1 session7 Slide 31 Deview2013 track1 session7 Slide 32 Deview2013 track1 session7 Slide 33 Deview2013 track1 session7 Slide 34 Deview2013 track1 session7 Slide 35 Deview2013 track1 session7 Slide 36 Deview2013 track1 session7 Slide 37 Deview2013 track1 session7 Slide 38 Deview2013 track1 session7 Slide 39 Deview2013 track1 session7 Slide 40 Deview2013 track1 session7 Slide 41 Deview2013 track1 session7 Slide 42 Deview2013 track1 session7 Slide 43 Deview2013 track1 session7 Slide 44 Deview2013 track1 session7 Slide 45 Deview2013 track1 session7 Slide 46
Upcoming SlideShare
116 deview2013-guitar
Next
Download to read offline and view in fullscreen.

7 Likes

Share

Download to read offline

Deview2013 track1 session7

Download to read offline

DEVIEW2013 - 네이버 오피스 삽질기

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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?
  • hansudong

    Sep. 22, 2015
  • underbellpark

    May. 27, 2015
  • darthJun

    Feb. 24, 2015
  • doosungeom

    Feb. 4, 2015
  • pastelblue

    Nov. 26, 2014
  • chjin

    Aug. 2, 2014
  • ainoai

    Oct. 18, 2013

DEVIEW2013 - 네이버 오피스 삽질기

Views

Total views

3,830

On Slideshare

0

From embeds

0

Number of embeds

2,245

Actions

Downloads

58

Shares

0

Comments

0

Likes

7

×