Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유

모바일 웹 성능 최적화 동향 및 사례:
Syrup Store 앱
임상석
SK 플래닛

Syrup Store
O2O Marketing Platform/Solution

HTML5 기반
안드로이드/iOS 앱 개발 삽질기

왜 HTML5!
Front-end 개발자 중심으로
Cross Platform 앱 내부 개발

타협 불가 최소 품질
Native 수준 Look/Motion by UX
(앱 UI 성능 지표 만족)
Be Acceptible otherwise Be Native

Android 4.03 Webview/Browser
HTML Layer HW 가속 시대 개막
그러나 구글의 배신 GPU Texture Upload 지연시간 1초...

Android 4.2 >=
도전적이지만 달성 가능한 환경으로 판단

HTML5 UI Framework 선택
자체 → Sencha,Onsen,famo.us → Ionic
React/React Native (차기 검토중)

Ionic
Angularjs 기반 HTML5 Framework
Android/iOS Native 느낌의 앱 개발 지원

Ionic UI component
Android/iOS Native-
like UI styling
(Theme, Style, Icon, Transition)

Ionic UI Component
헤더
버튼
리스트
그리드
폼
탭
...
$ionicActionSheet
$ionicBackDrop
slideBox
$ionicPopUp
...
SVG icon
→ viewport 밖에서
도 지속적으로
rendering

Ionic 기능/장점
SPA (View 단위 DOM lifecycle 관리)
Native-style UI component
grade에 따른 성능 제어
UI routing
Cordova Integration

Custom UI Animation 개발
GPU 가속
Declarative Animation

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

Graphics Layer 생성 조건
● 3D 또는 perspective transform CSS 속성
● video
● canvas 2D/3D
● CSS filter
● 투명도를 부여하는 CSS animation 수행
● z-index가 낮은 형제가 composition layer를 갖는 경우

GPU 기반 Layer 합성
● CPU로 생성된 graphics buffer는 해당 HTML의 속성이 변경되지 않는 한 계속
유지되어 다음 합성에 재활용됨

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이상 일부 지원

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

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;
}

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

JavaScript Animation: vsync
● 현재 LCD buffer로 frame을 flush후 다음 frame을 보내주기 위해서 시스템단에
서 발생 시켜주는 signal
● webkit엔진은 vsync를 requesAnimationFrame에 통합하여 제공

Hybrid Application - Native 부분
Cordova plugin
Push
BLE
Splash screen
Cipherstorage
Camera
Image cropper

Scroll View
HTML5 App 개발 알파와 오메가

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);

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 Navigation Animation
CSS transform 기반-GPU 렌더링
iOS는 Native 수준, Android 단말별 최적화 불가피

Page Navigation Animation
성능 저하 요인 분석
DOM element load timing
-filter: blur
-border-radius
gradient
QHD 단말의 고해상도

DOM element load timing
$ionic.beforeEnter
- 최소한의 화면 구성, AJAX request, ng-repeat data binding
$ionic.afterEnter
- 이미지, SVG등 화면 적재, loading icon
$ionic.loaded
- DOM 적재시
$ionic.unloaded
- DOM 제거시

-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"

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');
}
}
}

URL 기반 3rd party 솔루션 Plug-in
iFrame vs 별도 Webview
4.2 이상에서는 iFrame 가능

iOS 버전 상용 개발
Ionic UI 재활용 + swift 기반 plugin 개발
코드 재활용도 80% 수준

한줄 기술 교훈 요약
Android 4.2>, iOS 7.0> 앱 상용 개발 가
능
단 UI Layer의 복잡도 고려
Ionic 성능 Turning 필요

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유

More Related Content

What's hot

Viewers also liked

Similar to Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유