하이브리드앱 성능 극복

하이브리드앱 성능 극복

리스트잇 앱 개발 경험

쿠폰모아, 포켓스타일, ..

앱 개발하며 느끼는 건

하이브리드앱 필요하다!

보다 빠르기 위해

아이폰, 안드로이드 앱동일한 부분을 웹으로 개발

개발기간 단축!

웹 변경은 앱스토어 통하지 않고

바로 업데이트!

하이브리드앱 필요성

1. 개발기간 단축

2. 빠른 업데이트

그렇다면.. one source

하이브리드앱 개발 플랫폼?

각 앱 특성에 맞게!

No No.. Android <> iOS적지 않은 다른점

단지..

공통된 부분만 웹으로 개발

페이스북 앱 처럼..

문제는 성능ㅠㅠ

많은 네트워크 커넥션 때문

GET html, css, js, img, ...

웹페이지 로딩 시

모바일에선 속도에 큰 영향

네이티브 구현 동작

로딩

화면뷰 그리기

단일 커넥션

.json

<App> <Web Server>

웹 구현 동작

url 접속

화면뷰 그리기

많은 커넥션

.

.

.화면뷰 그리기

.css

.html

.js

<App> <Web Server>

변경 확인을 위한 연결

캐시되어 있어도

302 Not Modified

HTML5 Offline AppCache

많은 커넥션 문제 해결은

manifest 앱캐시 정의

exam.html<html manifest="exam.appcache" ...>... exam.appcacheCACHE:app.jsapp.css...

캐시 변경 확인은 한번

manifest 파일에서만

AppCache 웹 구현 동작

url manifest 확인

html, css, ... 로드

단일 커넥션

화면뷰 그리기

.appcache

<App> <Web Server>

웹 구조 변경 필요

AppCache에 따른

/shops/1.html<html><script src="/js/shops.css">...<h1>상점1</h1><p>상점 소개1</p>...</html>

뷰와 데이터 혼합된 html

/shops/2.html<html><script src="/js/shops.css">...<h1>상점2</h1><p>상점 소개2</p>...</html>

HTML의 뷰와 데이터 분리

데이터를 제외한 뷰 캐시를 위해

/shops/#1<html><script src="/js/shops.js">...<h1></h1><p></p>...</html> /js/shops.jsvar id = location.hash;$.getJSON('/shops/' + id,...

뷰와 데이터 분리

/shops/1.json{

"name": "상점1",

"description: "상점소개1",

...}

서버 -> 클라이언트

html 템플릿 랜더링

Hogan.js

자바스크립트 템플릿 랜더링 엔진

● open source from twitter● lightweight / fast

/shops/#1<html>...<script src="/js/hogan.js"></script> <script id="tpl" type="text/template"><h1>{{name}}</h1><p>{{description}}</p></script></html>

html 랜더링

/js/shops.js...tpl = $('#tpl').html();template = Hogan.compile(tpl);html = template.render(data);...

AppCache를 위한 웹 구현

1. manifest 정의

2. 뷰/데이터 분리

3. 자바스크립트 템플릿 랜더링

남은 성능 문제

one more thing..

웹뷰 터치 후 0.3초 후 반응

Tappable: tab event library

참고

HTML5 Offline AppCache Tutorialhttp://www.html5rocks.com/en/tutorials/appcache/beginner/ Hogan.jshttp://twitter.github.com/hogan.js/ Tappablehttps://github.com/cheeaun/tappable

문의

http://twitter.com/[email protected]

하이브리드앱 성능 극복

Technology

Transcript of 하이브리드앱 성능 극복