[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
4 likes•2,159 views
Introduction of jQuery based library 'egjs'. egjs is a set of UI interactions, effects and utility components library.
![빠른 이슈 대응과 내부
니즈(UI/UX/기능) 충족을 목표
(2004)
(2010)
(2011)
Jindo
Jindo Component
Jindo Mobile Component
▪ [2011 deview]
▪ [2014 deview]
모바일 웹UI 개발, 아직도 맨땅에 삽질부터 하십니까?
자바스크립트 라이브러리 개발/운영 경험기](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-16-320.jpg)
![고민 #1
fork/contribution 접근
jquery.transit
→ $el.transition() 인터페이스 다름
jquery.transfrom
→ heterogeneous(동치 좌표계) matrix를
transform 변경
향후, transform3d 고려시 어려움
▪ [참고] Understanding the CSS Transforms Matrix](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-38-320.jpg)
![transform 순서
완벽한 중간 값은 복잡 matrix 연산 필요
Matrix 연산 줄이고, transform 연산으로 자연스럽게
그러나, 일부 상황(움직임 적은)에서 약간 부자연
유명 라이브러리들(ex. )도 순서 고려 못함
결국, 순서는 사용자 몫
Velocity.js
▪ [참고] jQuery 애니메이션은 어떻게 작동하는가? - / /기본 심화 응용](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-47-320.jpg)
![하드웨어 가속?
https://www.youtube.com/watch?v=jTRe1tvFYdE
▪ [Hello world] 하드웨어 가속에 대한 이해와 적용](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-51-320.jpg)
![시행착오
스크롤 시 paint 비용을 줄이기 위해 하드웨어 가속
그러나,
카드 UI 특성상 컨텐츠가 매번 변경
composite layer의 잦은 업데이트는 성능저하 요인
하드웨어 가속은 무조건 좋은 것이 아니다.
상황에 맞게 적용 고려
▪ [2014 deview]
▪ [Hello world]
네이버 모바일 홈을 움직이는 반응형 무한스크롤의 비밀
네이버 쇼핑의 새로운 카드형 UI 라이브러리, eg.In�niteGrid](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-59-320.jpg)
![안정성 확보 방안들
기본 고려 사항들
브라우저 호환성
다양한 환경(모바일, 테블릿, 데스크탑) 호환성
성능
[ 목표 ]
일관된 코드 품질 유지
지속적이며 끊김없는 테스트 수행을 목표
모든 코드에는 unit test가 존재해야 한다.](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-63-320.jpg)
![Road Map
ES6/7 전환
다양한 프레임워크(Angular, React) 지원
jQuery 의존성 제거
VanillaJS로 전환, 의존성 줄여 사용환경 개선
( [참고] )
모듈별 개별 라이브러리로 분리
light 하게, 기능 중심적 및 사용성 증대
Is jQuery Still Relevant?](https://image.slidesharecdn.com/egjs-161115043853/85/DEVIEW-2016-egjs-67-320.jpg)
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
- 2. 프롤로그
- 3. OOO 기능을 개발해야 하는 상황, 어떻게 하시나요?
- 4. 아마도 다음 옵션 중 한가지 1) 직접 개발 2) 오픈소스 사용
- 5. 1) 직접 개발 다양한 환경에서의 동작 보장 필요
- 6. 체크 리스트 성능? 특정 단말기에서의 버그/이슈 처리? 안정성 보장은 어떻게? 지속적 업데이트(기능개선, 버그픽스, 등) 수행 계획은?
- 7. 2) 오픈소스 사용 안정성과 검증된 라이브러리를 찾는게 중요
- 8. 체크 리스트 컴포넌트? 모듈? 라이브러리? 충분한 성능과 환경에서 검증이 되었나? 꾸준한 업데이트가 이루어지는가?
- 10. 너 믿고 쓸만하니? github 지표들 (star, fork, watch) 인기도 - stackover�ow 게시글(질문/답변) 수 마지막 commit 날짜 충분한 레퍼런스 문서 여부 기타 등등... https://stats.js.org/
- 11. 비용과 안정성 고려시 오픈소스 사용이 현실적 방법
- 12. egjs는 주요 웹 UI/UX 개발을 돕는 UI 인터랙션, 이펙트, 유 틸리티로 구성된 자바스크립트 라이브러리 5개의 컴포넌트 4개의 jQuery 확장 플러그인 2개의 커스텀 이벤트
- 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 스크롤의 마지막 시점을 감지하는 이벤트
- 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("CACHEKEY"); // getter $.persist("CACHEKEY", 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);
- 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 처리는 고려 요소가 많더라.
- 42. Reset 1 2 3 http://codepen.io/netil/pen/JRwAGN
- 44. Reset 1 2 chaining http://codepen.io/netil/pen/xEmvzG
- 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 도입/참고
- 70. 고맙습니다! 사용하러 가기 Go Go! https://github.com/naver/egjs/