Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

13 179 vues

Publié le

The best practice of Android application development based on Anjularjs, Ionic, Cordva based Android application

Publié dans : Technologie
  • Login to see the comments

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

  1. 1. 모바일 웹 성능 최적화 동향 및 사례: Syrup Store 앱 임상석 SK 플래닛
  2. 2. Syrup Store O2O Marketing Platform/Solution
  3. 3. Syrup Store App for SMB
  4. 4. HTML5 기반 안드로이드/iOS 앱 개발 삽질기
  5. 5. 왜 HTML5! Front-end 개발자 중심으로 Cross Platform 앱 내부 개발
  6. 6. 타협 불가 최소 품질 Native 수준 Look/Motion by UX (앱 UI 성능 지표 만족) Be Acceptible otherwise Be Native
  7. 7. Android 4.03 Webview/Browser HTML Layer HW 가속 시대 개막 그러나 구글의 배신 GPU Texture Upload 지연시간 1초...
  8. 8. Android 4.2 >= 도전적이지만 달성 가능한 환경으로 판단
  9. 9. HTML5 UI Framework 선택 자체 → Sencha,Onsen,famo.us → Ionic React/React Native (차기 검토중)
  10. 10. Ionic Angularjs 기반 HTML5 Framework Android/iOS Native 느낌의 앱 개발 지원
  11. 11. Ionic UI component Android/iOS Native- like UI styling (Theme, Style, Icon, Transition)
  12. 12. Ionic UI Component 헤더 버튼 리스트 그리드 폼 탭 ... $ionicActionSheet $ionicBackDrop slideBox $ionicPopUp ... SVG icon → viewport 밖에서 도 지속적으로 rendering
  13. 13. Ionic 기능/장점 SPA (View 단위 DOM lifecycle 관리) Native-style UI component grade에 따른 성능 제어 UI routing Cordova Integration
  14. 14. Custom UI Animation 개발 GPU 가속 Declarative Animation
  15. 15. 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
  16. 16. Graphics Layer 생성 조건 ● 3D 또는 perspective transform CSS 속성 ● video ● canvas 2D/3D ● CSS filter ● 투명도를 부여하는 CSS animation 수행 ● z-index가 낮은 형제가 composition layer를 갖는 경우
  17. 17. GPU 기반 Layer 합성 ● CPU로 생성된 graphics buffer는 해당 HTML의 속성이 변경되지 않는 한 계속 유지되어 다음 합성에 재활용됨
  18. 18. 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이상 일부 지원
  19. 19. 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
  20. 20. 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; }
  21. 21. 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
  22. 22. JavaScript Animation: vsync ● 현재 LCD buffer로 frame을 flush후 다음 frame을 보내주기 위해서 시스템단에 서 발생 시켜주는 signal ● webkit엔진은 vsync를 requesAnimationFrame에 통합하여 제공
  23. 23. Hybrid Application - Native 부분 Cordova plugin Push BLE Splash screen Cipherstorage Camera Image cropper
  24. 24. 삽질기 공유
  25. 25. Scroll View HTML5 App 개발 알파와 오메가
  26. 26. 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);
  27. 27. 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>
  28. 28. Page Navigation Animation CSS transform 기반-GPU 렌더링 iOS는 Native 수준, Android 단말별 최적화 불가피
  29. 29. Page Navigation Animation 성능 저하 요인 분석 DOM element load timing -filter: blur -border-radius gradient QHD 단말의 고해상도
  30. 30. DOM element load timing $ionic.beforeEnter - 최소한의 화면 구성, AJAX request, ng-repeat data binding $ionic.afterEnter - 이미지, SVG등 화면 적재, loading icon $ionic.loaded - DOM 적재시 $ionic.unloaded - DOM 제거시
  31. 31. -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"
  32. 32. 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'); } } }
  33. 33. URL 기반 3rd party 솔루션 Plug-in iFrame vs 별도 Webview 4.2 이상에서는 iFrame 가능
  34. 34. iOS 버전 상용 개발 Ionic UI 재활용 + swift 기반 plugin 개발 코드 재활용도 80% 수준
  35. 35. 한줄 기술 교훈 요약 Android 4.2>, iOS 7.0> 앱 상용 개발 가 능 단 UI Layer의 복잡도 고려 Ionic 성능 Turning 필요
  36. 36. self.next() === undefined

×