Deview2013 track1 session7

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

browser window

buffer

그래도 안 돼요!

• DOM element를 삽입/소거하

는 과정에서 reflow 발생!!

• 적게는 성능 하락

• 많게는

◀ 보시다시피 -_-;;

Reflow & Repaint

repaint

reflow

insert / delete

nodereposition

resize font

bgColor

visibility

border

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가 일어날 상황은 한 번

에 몰아서 처리

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

만 하도록 유도

Dynamic CSS Styling

Dynamic CSS Styling

• 모든 node의 CSS style 재정의

• loop 돌다 브라우저 사망

hello, again :-P

Dynamic CSS Styling

// Internet Explorer

document.styleSheets

.addRule(sel, idx);


.rules[idx].style.cssText= "...";

// FireFox & Chrome


.insertRule(sel, idx);


.deleteRule(idx);

• document.styleSheets 객체

• 스타일 시트 정의

• script level에서 임의로 추

가/수정/삭제 가능

Exploits

브라우저의 한계를 회피하는 꼼수(?)

들

Local Font Detection

Local Font Detection

• 임의의 DIV에 문자열 삽입

• 글꼴 적용

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

hello, world!

hello, world!

hello, world!

not installed

installed

Clipboard Handling

• 외부 클립보드 데이터가 브라

우저와 호환되지 않음

• 브라우저 clipboard 객체에서

접근 불가능한 정보도 존재

• [office Object]

Clipboard Handling

• 브라우저간/제품간 클립보드

정보 공유

• 각 process별로 독립된 클립보

드 제어

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

경

Clipboard Handling

• hidden iframe to hook

Ctrl+C/V

Clipboard Handling

• 객체의 type에 따라

• base64 인코딩

• html로 변환

• 태그 정렬 등등...

encodemodel

↔ html

strip

tags

pic?

obj?

text?typ

e

Vector Element Events

• 이벤트의 기본은 직교 영역

• 사용자 직관을 벗어남

click!

selected

?

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

BOOO~!

Vector Element Events(Non-IE)

• pointer-events property

• SVG 전용 속성

• "그려진 부분"만 이벤트가 적

용되게 할 수 있음

• mouseDown

• mouseOver

• mouseUp

click!

selected!

pointerEvents == "auto"?

Vector Element Events(IE)

• 특정 클래스명을 검사

• 실제 path와 상위 VML 클

래스명이 다름

• 이벤트가 적절하지 않으면

• document

.elementFromPoint()

• nextElement.fireEvent()

click!

selected!

className=="manipulable"

?

Conclusion

단언컨대,

JavaScript는 가장 hot한 언어입니다.

JavaScript Rules!

Toy Trash

JavaScript Rules!

Trend

JavaScript Rules!

• HTML5 + CSS3 Standard

• Plentiful API & Framework

• Server-side Language

JavaScript Rules!




JavaScript Rules!




하지만 실제론...

Just another Community app

with bootstrap!

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

• 공동 편집

• 오프라인 캐시

• 더욱 강력한 기능들

• 문서 효과(그림자, 반사 등)

• 글머리 기호

• 애니매이션

• 겹선 테두리

• 기타등등...

우린 아직 배고프다!

도전하세요!

Thank You!

[email protected]

twitter.com/overockaffe

facebook.com/overockaffe

Any Questions?

Technology

Deview2013 track1 session7