하이브리드앱 성능 극복
DESCRIPTION
http://thinkreals.com/1167TRANSCRIPT
하이브리드앱 성능 극복
리스트잇 앱 개발 경험
쿠폰모아, 포켓스타일, ..
앱 개발하며 느끼는 건
하이브리드앱 필요하다!
보다 빠르기 위해
아이폰, 안드로이드 앱동일한 부분을 웹으로 개발
개발기간 단축!
웹 변경은 앱스토어 통하지 않고
바로 업데이트!
하이브리드앱 필요성
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
