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 결정
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);
47. transform 순서
완벽한 중간 값은 복잡 matrix 연산 필요
Matrix 연산 줄이고, transform 연산으로 자연스럽게
그러나, 일부 상황(움직임 적은)에서 약간 부자연
유명 라이브러리들(ex. )도 순서 고려 못함
결국, 순서는 사용자 몫
Velocity.js
▪ [참고] jQuery 애니메이션은 어떻게 작동하는가? - / /기본 심화 응용
49. eg.Flicking
패널을 쓸어 넘김 형태로 이동하는 플리킹 UI를 구현
Why?
흔히 사용되는 UI/UX
빠른 이슈 대응 필요
높은 브라우저 커버리지
지속적 성능요인 개선을 빠르게 적용
터치 제스처는 활용Hammer.js
50. 렌더링 성능 향상
렌더링 성능을 위해 하드웨어 가속 적용
Layer hack이 일반적 (ex. translateZ(0))
will-change
변경이 발생할 속성을 브라우저에 힌트 주면, 사전 최적화
효율적 리소스 관리
(ex. GPU 메모리의 사용을 관리, 과도한 composite layer 생성 제한)
52. 시행착오
will-change
패널 이동하기 직전 설정, 이동 후 제거
브라우저가 holding 하고 있을수 있는 리소스 release 위해
사용 후, 제거 권고 ( )
설정 제거가 단시간에 반복해 이루어지는 형태엔 부적합
→ 프레임별 rasterization 비용이 크게 증가
Always Remove will-change
58. 성능향상
DOM Recycling
일정 수 노드만 유지
뷰포트 밖 요소 제거
물리적 DOM과
논리적 데이터 분리
이미지 포함한 경우,
크기를 구하기 위해
complete 속성 비동기 확인
59. 시행착오
스크롤 시 paint 비용을 줄이기 위해 하드웨어 가속
그러나,
카드 UI 특성상 컨텐츠가 매번 변경
composite layer의 잦은 업데이트는 성능저하 요인
하드웨어 가속은 무조건 좋은 것이 아니다.
상황에 맞게 적용 고려
▪ [2014 deview]
▪ [Hello world]
네이버 모바일 홈을 움직이는 반응형 무한스크롤의 비밀
네이버 쇼핑의 새로운 카드형 UI 라이브러리, eg.In�niteGrid
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 도입/참고