![Page 1: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/1.jpg)
모바일 웹 성능 최적화 동향 및 사례:Syrup Store 앱
임상석SK 플래닛
![Page 2: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/2.jpg)
Syrup Store
O2O Marketing Platform/Solution
![Page 4: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/4.jpg)
HTML5 기반안드로이드/iOS 앱 개발 삽질기
![Page 5: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/5.jpg)
왜 HTML5!
Front-end 개발자 중심으로Cross Platform 앱 내부 개발
![Page 6: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/6.jpg)
타협 불가 최소 품질
Native 수준 Look/Motion by UX
(앱 UI 성능 지표 만족)
Be Acceptible otherwise Be Native
![Page 7: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/7.jpg)
Android 4.03 Webview/Browser
HTML Layer HW 가속 시대 개막
그러나 구글의 배신 GPU Texture Upload 지연시간 1초...
![Page 8: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/8.jpg)
Android 4.2 >=
도전적이지만 달성 가능한 환경으로 판단
![Page 9: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/9.jpg)
HTML5 UI Framework 선택
자체 → Sencha,Onsen,famo.us → Ionic
React/React Native (차기 검토중)
![Page 10: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/10.jpg)
Ionic
Angularjs 기반 HTML5 Framework
Android/iOS Native 느낌의 앱 개발 지원
![Page 11: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/11.jpg)
Ionic UI component
Android/iOS Native-like UI styling
(Theme, Style, Icon, Transition)
![Page 12: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/12.jpg)
Ionic UI Component
헤더버튼리스트그리드폼탭...
$ionicActionSheet$ionicBackDropslideBox$ionicPopUp...
SVG icon→ viewport 밖에서도 지속적으로 rendering
![Page 13: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/13.jpg)
Ionic 기능/장점
SPA (View 단위 DOM lifecycle 관리)Native-style UI component
grade에 따른 성능 제어UI routing
Cordova Integration
![Page 14: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/14.jpg)
Custom UI Animation 개발
GPU 가속Declarative Animation
![Page 15: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/15.jpg)
RenderLayer SW(CPU) Painting● Stacking Context에서 낮은 z-index에 위치한 RenderLayer부터 순차적으로
CPU로 painting을 수행● 다른 Layer와 겹쳐진 부분은기 painting된 값을 읽어서 compositing
○ compositor는 window manager 기본 기능
● compositing 연산의 복잡도○ READ SRC PIXEL on DRAM○ READ DEST PIXEL on DRAM○ ADD SRC PIXEL, DEST PIXEL○ DIV RESULT○ WRITE RESULT PIXEL
![Page 16: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/16.jpg)
Graphics Layer 생성 조건● 3D 또는 perspective transform CSS 속성● video● canvas 2D/3D● CSS filter● 투명도를 부여하는 CSS animation 수행● z-index가 낮은 형제가 composition layer를 갖는 경우
![Page 17: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/17.jpg)
GPU 기반 Layer 합성● CPU로 생성된 graphics buffer는 해당 HTML의 속성이 변경되지 않는 한 계속 유지되어 다음 합성에 재활용됨
![Page 18: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/18.jpg)
Declarative VS JavaScript 기반 animation● Declarative animation
○ CSS로 animation 설정○ Webkit 엔진 내에서 기본 최적화 수행○ main thread overloaded되어도 수행이 됨 (HW timer에의한 동작)
● JavaScript animation (setTimeout/requestAnimationFrame)○ 애니메이션 시작, 끝, 일시 중지등 복잡한 형태를 구현 가능○ main thread가 overload될 경우 animation이 제대로 수행되지 않음○ main thread 부하 증가
● Web animation 표준○ Declarative/JavaScript 기반 애니메이션의 단점을 모두 해결해주는 표준○ iOS 미지원 (webkit에 구현중)○ Android 5.0이상 일부 지원
![Page 19: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/19.jpg)
Declatrive Animation: keyframe● 시작, 중간점들 및 끝점을 명기하면 중간 지점은 엔진이 내부적으로 생성해주는 animation 방식
● 엔진 내부의 system timer를 기반으로 animation이 수행이 됨● JS 개입이 없음 → 고속 수행
div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s;}
/* Chrome, Safari, Opera */@-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;}}
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2
![Page 20: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/20.jpg)
Declarative Animation: Transition● keyframe과 개념은 동일하나 시작과 끝, 두 부분만 명시하면 나머지 부분은 엔진에서 interpolation
http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2
div { width: 100px; height: 100px; background: red;
-webkit-transition: width 2s, hegith 4s; transition: width 2s, hegith 4s;}
div:hover { width: 300px; height: 300px;}
![Page 21: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/21.jpg)
JavaScript Animation: setTimeout/RequestAniFrame
● setTimeout (0)로 animation 수행시 문제점○ 실제 LCD buffer로 쓰여지는 주기 보다 훨씨 빠르게 painting을 하여 frame drop이 발생○ CPU/Battery 낭비
http://www.html5rocks.com/en/tutorials/speed/rendering/?redirect_from_locale=ko
![Page 22: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/22.jpg)
JavaScript Animation: vsync
● 현재 LCD buffer로 frame을 flush후 다음 frame을 보내주기 위해서 시스템단에서 발생 시켜주는 signal
● webkit엔진은 vsync를 requesAnimationFrame에 통합하여 제공
![Page 23: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/23.jpg)
Hybrid Application - Native 부분Cordova plugin
PushBLE
Splash screenCipherstorage
CameraImage cropper
![Page 24: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/24.jpg)
삽질기 공유
![Page 25: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/25.jpg)
Scroll View
HTML5 App 개발 알파와 오메가
![Page 26: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/26.jpg)
Ionic Scroll View
CSS 2D/3D scroll, Native browser scroll간 프로그램적 선택 지원
<ion-content overflow-scroll="true" class="no-header homeContent" scrollbar-y="false" on-scroll="verticalScroll()>
$ionicConfigProvider.scrolling.jsScrolling(false);
![Page 27: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/27.jpg)
Ionic Performant Infinite Scrolling
ng-repeat → collection-repeat로 변경viewport 기준 DOM node 개수 상수 고정
<ion-item collection-repeat="product in products" item-render-buffer="8" ng-click="checkAchievements( product )" item-height="70px" item-width="100%" class="item-icon-right">
<h2>{{product.name}}</h2>
<p>{{product.period}}</p>
<i ng-class="product.status" class="item-status"></i>
</ion-item>
<ion-infinite-scroll icon="ion-loading-c" on-infinite="loadMore()" ng-if="loadRequired">
</ion-infinite-scroll>
![Page 28: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/28.jpg)
Page Navigation Animation
CSS transform 기반-GPU 렌더링
iOS는 Native 수준, Android 단말별 최적화 불가피
![Page 29: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/29.jpg)
Page Navigation Animation
성능 저하 요인 분석
DOM element load timing-filter: blur
-border-radiusgradient
QHD 단말의 고해상도
![Page 30: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/30.jpg)
DOM element load timing
$ionic.beforeEnter- 최소한의 화면 구성, AJAX request, ng-repeat data binding
$ionic.afterEnter- 이미지, SVG등 화면 적재, loading icon
$ionic.loaded- DOM 적재시
$ionic.unloaded- DOM 제거시
![Page 31: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/31.jpg)
-filter: blur (5px)Transition Element 포함시 성능 저하Blur 적용된 정적 Image로 변경- 서버단 filter- client단 filter (<canvas>, native)
<cavas> tag를 활용한 filter 구현- blur filter var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
![Page 32: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/32.jpg)
gradient, box-shadow, border-radius
단말별로 제거하거나 Image로 대체if ( ionic.Platform.isAndroid() ) { if ( ionic.Platform.version() >= 5 ) { //안드로이드 롤리팝 G4일 경우 grade를 b로 설정 if ( (/LG-F500/).test(window.navigator.userAgent) ) { console.log("set to grade b device"); ionic.Platform.setGrade('b'); } }}
![Page 33: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/33.jpg)
URL 기반 3rd party 솔루션 Plug-iniFrame vs 별도 Webview
4.2 이상에서는 iFrame 가능
![Page 34: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/34.jpg)
iOS 버전 상용 개발
Ionic UI 재활용 + swift 기반 plugin 개발코드 재활용도 80% 수준
![Page 35: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/35.jpg)
한줄 기술 교훈 요약
Android 4.2>, iOS 7.0> 앱 상용 개발 가능
단 UI Layer의 복잡도 고려Ionic 성능 Turning 필요
![Page 36: Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유](https://reader033.vdocuments.mx/reader033/viewer/2022050800/58735e4a1a28abe7648b502f/html5/thumbnails/36.jpg)
self.next() === undefined