Introduction of jQuery based library 'egjs'. egjs is a set of UI interactions, effects and utility components library.

1. 네이버의
모던웹
라이브러리
•egj
s
•
24th October, 2016
박재성 - AU개발랩

2. 프롤로그

3. OOO 기능을 개발해야 하는 상황,
어떻게 하시나요?

4. 아마도 다음 옵션 중 한가지
1) 직접 개발
2) 오픈소스 사용

5. 1) 직접 개발
다양한 환경에서의 동작 보장 필요

6. 체크 리스트
성능?
특정 단말기에서의 버그/이슈 처리?
안정성 보장은 어떻게?
지속적 업데이트(기능개선, 버그픽스, 등) 수행 계획은?

7. 2) 오픈소스 사용
안정성과 검증된
라이브러리를 찾는게 중요

8. 체크 리스트
컴포넌트? 모듈? 라이브러리?
충분한 성능과 환경에서 검증이 되었나?
꾸준한 업데이트가 이루어지는가?

9. 잠깐,
오픈소스 검색은
어떻게 하시나요?

10. 너 믿고 쓸만하니?
github 지표들 (star, fork, watch)
인기도 -
stackover៯�ow 게시글(질문/답변) 수
마지막 commit 날짜
충분한 레퍼런스 문서 여부
기타 등등...
https://stats.js.org/

11. 비용과 안정성 고려시
오픈소스 사용이
현실적 방법

12.
egjs는 주요 웹 UI/UX 개발을 돕는 UI 인터랙션, 이펙트, 유
틸리티로 구성된 자바스크립트 라이브러리
5개의 컴포넌트
4개의 jQuery 확장 플러그인
2개의 커스텀 이벤트

13. egjs architecture

14. 주요 구성요소
컴포넌트
eg 유틸리티 모음
MovableCoord 사용자의 동작을 가상 좌표계의 논리적 좌표로 변경
Flicking 플리킹 UI를 구현
in៯�niteGrid 콘텐츠가 있는 카드 엘리먼트를 그리드 레이아웃에 무한으로 배치
Visible 엘리먼트가 기준 엘리먼트나 뷰포트 안에 보이는지 확인
jQuery
확장 플러그인
persist 웹 페이지의 현재 상태를 JSON 형식으로 저장하는 캐시 인터페이스
pre៯�xCss CSS 벤더 프리픽스를 지원하지 않는 일부 jQuery 버전을 사용할 때 제조사 접두어를 지원
animate jQuery.animate() 메서드를 확장해 transform과 3D 가속을 지원
pause / resume jQuery.animate()로 실행한 애니메이션을 일시 정지 및 재실행
이벤트
rotate 모바일 기기의 회전을 감지하는 이벤트
scrollend 스크롤의 마지막 시점을 감지하는 이벤트

15. Is yet another
library?

16. 빠른 이슈 대응과 내부
니즈(UI/UX/기능) 충족을 목표
(2004)
(2010)
(2011)
Jindo
Jindo Component
Jindo Mobile Component
▪ [2011 deview]
▪ [2014 deview]
모바일 웹UI 개발, 아직도 맨땅에 삽질부터 하십니까?
자바스크립트 라이브러리 개발/운영 경험기

17. 그러나... lack of
외부 레퍼런스, 교육비용, 호환성
빠른 변화, 환경의 민첩한 대응
개발자들의 long term 커리어 및 발전 기여
아쉽지만, fade-out 결정

18. 좋은 라이브러리를
만들기 위한 여정
의 경험과 노하우를 잇자.

19. 기본 원칙 1
오픈소스의 활용
좋은 오픈소스가 있다면, 사용한다.
필요한 경우, 커스터마이징 한다.

20. 기본 원칙 2
직접 개발하는 경우
기능/성능이 아쉬운 경우
전략적 기술확보 필요성
필요한 기능을 가진 라이브러리가 없는 경우

21. 도전적인 문제들

22. 브라우저 커버리지
레거시 부터 최신까지

23. 네이버 접속 브라우저 점유율 (2016/09기준)
71.7%
19.8%
IE Chrome Edge Safari Samsung Browser Firefox WebView inapp-search etc

24. 레거시 브라우저는?
IE 7,8: 약 8% 내외
Android 2.3.x ~ 4.3.x: 약 6.5% 내외
국내 전체 점유율은? (IE8 약 1%) (참고: )StatCounter 2015/09 ~ 2016/09
사용자 니즈가 다할때까지

25. 그 외?
성능, 성능, 그리고 성능
안정성
글로벌 사용자/컨트리뷰터 확보를 통한 경쟁력
네이버 서비스만이 아닌 웹 생태계 도움되는

26. 필요에 의해
만들다.
원칙 : 필요한 기능을 가진 라이브러리가 없는 경우

27. 사례#1: 불편한 사용자 경험
긴 동적 목록형 컨텐츠를 스크롤해서
보다가, 해당 컨텐츠를 보고
다시 돌아왔더니 목록 처음으로
이동 되어버려서 보고있던 곳까지
다시 스크롤 해서 이동하다보면...
!@#!@@#!

28. ?
(Back-Forward)
BFCache
이전 페이지로 복귀 시, 이전 상태로 복원하는 캐시

29. 컨텐츠 소비 흐름

30. 페이지 상태 값?
페이지의 스크롤 위치
동적으로 구성된 컨텐츠 UI
자바스크립트의 특정 상태 값, 등등
BFCache 지원환경:
iOS Safari 4.x+는 지원
Android 4.4+ stock &
Chrome(스크롤 위치만 지원) 미지원

31. $.persist()
페이지 상태 값의
'데이터 저장/복원' 캐시 인터페이스

32. 처음 개발땐
BFCache의 복원과 유사하게
이벤트 바인딩 형식
$(window).on("persist",
function(event, state) {
...
});

33. 어라?
데이터 복원 시점이 서비스 마다 다름
이벤트 발생 시점과 데이터 사용 시점의 불일치

34. API 형태로 변경
원하는 시점에 API 호출
$.persist("CACHE­KEY"); // getter
$.persist("CACHE­KEY", data); // setter

35. 스토리지 문제
브라우저 마다 다른 저장
Private mode 에서 Web Storage 이슈 ( )
quota limit
Safari
$.persist() 스토리지 사용순서:
(session → local)
→
Web Storage
history.state

36. 사례#2: 기능성 부족
애니메이션을 쉽게 구현할 수 있는 .
하지만, 크로스 브라우징 이슈로 'transform' 속성 지원되지 않음
jQuery.animate()
$el.animate({
transform: "translate3d(0,200,0)"
}, 1000);

37. 이미 있었다.
jquery.transit
jquery.transform
그런데...
transform3d 미지원
.animate() 인터페이스 및 기능 미약

38. 고민 #1
fork/contribution 접근
jquery.transit
→ $el.transition() 인터페이스 다름
jquery.transfrom
→ heterogeneous(동치 좌표계) matrix를
transform 변경
향후, transform3d 고려시 어려움
▪ [참고] Understanding the CSS Transforms Matrix

39. 고민 #2
인터페이스와 상대 값의 처리는?
기존 transform 사용 방법과 동일하게 처리 필요
상대 값 처리를 위한 '+=, -='등의 표현식 사용

40. 고민 #3
transform 처리는
고려 요소가 많더라.

41. 적용 순서
.animate({ transform: // (1)
"scale(2) rotate(45deg) translateX(100px)"
});
.animate({ transform: // (2)
"rotate(45deg) translateX(100px) scale(2)"
});
.animate({ transform: // (3)
"translateX(100px) scale(2) rotate(45deg)"
});

42. Reset 1 2 3
http://codepen.io/netil/pen/JRwAGN

43. 체이닝: 상대 값
$elem
.animate({transform: //(1)
"scale(2) rotate(45deg) translateX(100px)"})
.animate({transform: //(2)
"+=translateX(100px) +=rotate(45deg)"});

44. Reset 1 2 chaining
http://codepen.io/netil/pen/xEmvzG

45. 체이닝: 절대 값
$elem
.animate({transform: // (1)
"scale(2) rotate(45deg) translateX(100px)"})
.animate({transform: // (2)
"translateX(100px)"});

46. Reset 1 2 chaining
http://codepen.io/netil/pen/EgGqOj

47. transform 순서
완벽한 중간 값은 복잡 matrix 연산 필요
Matrix 연산 줄이고, transform 연산으로 자연스럽게
그러나, 일부 상황(움직임 적은)에서 약간 부자연
유명 라이브러리들(ex. )도 순서 고려 못함
결국, 순서는 사용자 몫
Velocity.js
▪ [참고] jQuery 애니메이션은 어떻게 작동하는가? - / /기본 심화 응용

48. 오픈소스 활용과
기술확보
원칙 : 좋은 오픈소스는 활용하자

49. eg.Flicking
패널을 쓸어 넘김 형태로 이동하는 플리킹 UI를 구현
Why?
흔히 사용되는 UI/UX
빠른 이슈 대응 필요
높은 브라우저 커버리지
지속적 성능요인 개선을 빠르게 적용
터치 제스처는 활용Hammer.js

50. 렌더링 성능 향상
렌더링 성능을 위해 하드웨어 가속 적용
Layer hack이 일반적 (ex. translateZ(0))
will-change
변경이 발생할 속성을 브라우저에 힌트 주면, 사전 최적화
효율적 리소스 관리
(ex. GPU 메모리의 사용을 관리, 과도한 composite layer 생성 제한)

51. 하드웨어 가속?
https://www.youtube.com/watch?v=jTRe1tvFYdE
▪ [Hello world] 하드웨어 가속에 대한 이해와 적용

52. 시행착오
will-change
패널 이동하기 직전 설정, 이동 후 제거
브라우저가 holding 하고 있을수 있는 리소스 release 위해
사용 후, 제거 권고 ( )
설정 제거가 단시간에 반복해 이루어지는 형태엔 부적합
→ 프레임별 rasterization 비용이 크게 증가
Always Remove will-change

53. 시행착오 (cont'd)
CSS z-index
Stacking order로 의도치 않은 하드웨어 가속
(composite layer 생성)
방지 위해 적절하다고 판단되는 'z-index:2000' 설정

54. vseg.Flicking Slick
Initialization
100개의 패널을 갖도록 구성 (각각 10회 실행/결과 값은 ms)
Chrome 54 (Win7) iOS 10 (iPhone7) Android 6 (Galaxy S6 edge+)
20
50
100
140
180
eg.Flicking eg.Flicking (defaultIndex:99) Slick Slick (initialSlide:99)
Chrome 54 (Win7) iOS 10 (iPhone7) Android 6 (Galaxy S6 edge+)
eg.Flicking 18.812 21.05 86.6657
eg.Flicking
(defaultIndex:99)
20.303 21.56 85.5166
Slick 40.8045 37.8225 173.6231
Slick (initialSlide:99) 35.554 85.5166 166.6841

55. Moving from panel 1 to 10
300ms 스피드로 패널 1에서 10 까지 순차적으로 이동 (각각 10회 실행/결과 값은 ms)
Chrome 54 (Win7) iOS 10 (iPhone7) Android 6 (Galaxy S6 edge+)
eg.Flicking#1 eg.Flicking#2 Slick#1 Slick#2
Chrome 54 (Win7) iOS 10 (iPhone7) Android 6 (Galaxy S6 edge+)
eg.Flicking#1 307.786 322.1025 311.9379
eg.Flicking#2 309.0655 322.185 311.9109
Slick#1 302.475 305.9175 303.6311
Slick#2 302.202 304.8545 303.8173
▪ eg.Flicking:
▪ Slick:
http://s.codepen.io/netil/debug/zKaYGA/
http://s.codepen.io/netil/debug/ZpREbY/

56. 기존 오픈소스에
대한 아쉬움
원칙 : 기능과 성능이 부족한 경우 직접 개발한다.

57. eg.InfiniteGrid
카드 엘리먼트를 그리드 레이아웃에 무한으로 배치
Why?
- 대표적 라이브러리
카드 배치 속도의 문제
카드 추가(무한)시 성능의 문제
Masonry

58. 성능향상
DOM Recycling
일정 수 노드만 유지
뷰포트 밖 요소 제거
물리적 DOM과
논리적 데이터 분리
이미지 포함한 경우,
크기를 구하기 위해
complete 속성 비동기 확인

59. 시행착오
스크롤 시 paint 비용을 줄이기 위해 하드웨어 가속
그러나,
카드 UI 특성상 컨텐츠가 매번 변경
composite layer의 잦은 업데이트는 성능저하 요인
하드웨어 가속은 무조건 좋은 것이 아니다.
상황에 맞게 적용 고려
▪ [2014 deview]
▪ [Hello world]
네이버 모바일 홈을 움직이는 반응형 무한스크롤의 비밀
네이버 쇼핑의 새로운 카드형 UI 라이브러리, eg.In៯�niteGrid

60. vseg.IniniteGrid Masonry
in塅�nityGrid VS masorny (Mobile) appending TEST
https://youtu.be/6Kv-NV0dZXw

61. 라이브러리를 보다
잘 만들어 보자

62. 환경 구분
1) 하드웨어 가속 환경에 대한 white list
수년간 직접적인 테스트를 통한 단말기 구분
// 하드웨어 가속 사용이 적절한 단말기 여부를 반환
eg.isHWAccelerable();
https://naver.github.io/egjs/latest/doc/eg.html#isHWAccelerable
2) Transition 속성 사용환경 구분
// CSS transition 사용이 적절한 환경 여부를 반환
eg.isTransitional();
https://naver.github.io/egjs/latest/doc/eg.html#isTransitional

63. 안정성 확보 방안들
기본 고려 사항들
브라우저 호환성
다양한 환경(모바일, 테블릿, 데스크탑) 호환성
성능
[ 목표 ]
일관된 코드 품질 유지
지속적이며 끊김없는 테스트 수행을 목표
모든 코드에는 unit test가 존재해야 한다.

64. 코드 스타일 유지
(부제: 너는 나 나는 너)
코드 스타일 검사 ( - 향후, ESLint로 전환 예정)
코드 정적 검사 ( )
개발자간 에디터와 IDE 등에서의 코드 스타일 유지
( )
JSCS
https://github.com/naver/egjs/blob/master/.jscsrc
JSHint
https://github.com/naver/egjs/blob/master/.jshintrc
EditorCon៯�g
https://github.com/naver/egjs/blob/master/.editorcon៯�g

65. 자동화된 테스트
Total test cases: 3,591 (93% coverage)
Commit/Push 마다
commit hook( )을 통한 linting
CI( )를 통한 push 단위별 검증
husky
TravisCI
https://github.com/naver/egjs/tree/master/test/unit

66. 실 환경 수동 QA
163개의 수동 테스트 케이스를 통한 검증
네이버의 수많은 사용자들을 통해 검증
https://github.com/naver/egjs/tree/master/test/manual

67. Road Map
ES6/7 전환
다양한 프레임워크(Angular, React) 지원
jQuery 의존성 제거
VanillaJS로 전환, 의존성 줄여 사용환경 개선
( [참고] )
모듈별 개별 라이브러리로 분리
light 하게, 기능 중심적 및 사용성 증대
Is jQuery Still Relevant?

68. 맺으며
갈길 멀다.
여러분의 적극적 참여로 발전하는 라이브러리 목표
github repo를 통해 모든 activity 공개
PR은 언제나 환영
개발자(국내/해외)과 웹 생태계 기여
국내 FE 오픈소스들 중 두드러지는 성공 케이스 부재
유명 오픈소스들 best practice 도입/참고

69. 여러분들의 참여를
기다립니다!
github.com/naver/egjs

70. 고맙습니다!
사용하러 가기 Go Go!
https://github.com/naver/egjs/