Your SlideShare is downloading. ×
0
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Deview2013 track1 session7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Deview2013 track1 session7

2,354

Published on

DEVIEW2013 - 네이버 오피스 삽질기

DEVIEW2013 - 네이버 오피스 삽질기

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

No Downloads
Views
Total Views
2,354
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
53
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×