하이브리드앱 성능 극복

7,583 views
7,145 views

Published on

http://thinkreals.com/1167

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,583
On SlideShare
0
From Embeds
0
Number of Embeds
2,464
Actions
Shares
0
Downloads
71
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

하이브리드앱 성능 극복

  1. 1. 하이브리드앱 성능 극복 리스트잇 앱 개발 경험
  2. 2. 쿠폰모아, 포켓스타일, ..앱 개발하며 느끼는 건
  3. 3. 하이브리드앱 필요하다!
  4. 4. 보다 빠르기 위해
  5. 5. 아이폰, 안드로이드 앱동일한 부분을 웹으로 개발 개발기간 단축!
  6. 6. 웹 변경은 앱스토어 통하지 않고 바로 업데이트!
  7. 7. 하이브리드앱 필요성 1. 개발기간 단축 2. 빠른 업데이트
  8. 8. 그렇다면.. one source하이브리드앱 개발 플랫폼?
  9. 9. No No.. Android <> iOS 적지 않은 다른점각 앱 특성에 맞게!
  10. 10. 단지..공통된 부분만 웹으로 개발 페이스북 앱 처럼..
  11. 11. 문제는 성능ㅠㅠ
  12. 12. 웹페이지 로딩 시많은 네트워크 커넥션 때문 GET html, css, js, img, ...
  13. 13. 모바일에선 속도에 큰 영향
  14. 14. 네이티브 구현 동작 <App> <Web Server> 단일 커넥션 로딩 .json화면뷰 그리기
  15. 15. 웹 구현 동작 <App> <Web Server> 많은 커넥션 url 접속 .html .css화면뷰 그리기 .js . . .화면뷰 그리기
  16. 16. 캐시되어 있어도변경 확인을 위한 연결 302 Not Modified
  17. 17. 많은 커넥션 문제 해결은HTML5 Offline AppCache
  18. 18. manifest 앱캐시 정의exam.html<html manifest="exam.appcache" ...>...exam.appcacheCACHE:app.jsapp.css...
  19. 19. manifest 파일에서만캐시 변경 확인은 한번
  20. 20. AppCache 웹 구현 동작 <App> <Web Server> 단일 커넥션url manifest 확인 .appcachehtml, css, ... 로드 화면뷰 그리기
  21. 21. AppCache에 따른웹 구조 변경 필요
  22. 22. 뷰와 데이터 혼합된 html/shops/1.html /shops/2.html<html> <html><script src="/js/shops.css"> <script src="/js/shops.css">... ...<h1>상점1</h1> <h1>상점2</h1><p>상점 소개1</p> <p>상점 소개2</p>... ...</html> </html>
  23. 23. 데이터를 제외한 뷰 캐시를 위해HTML의 뷰와 데이터 분리
  24. 24. 뷰와 데이터 분리/shops/#1 /shops/1.json<html> {<script src="/js/shops.js"> "name": "상점1",... "description: "상점소개1",<h1></h1> ...<p></p> }...</html>/js/shops.jsvar id = location.hash;$.getJSON(/shops/ + id,...
  25. 25. html 템플릿 랜더링서버 -> 클라이언트
  26. 26. 자바스크립트 템플릿 랜더링 엔진 Hogan.js ● open source from twitter ● lightweight / fast
  27. 27. html 랜더링/shops/#1 /js/shops.js<html> ...... tpl = $(#tpl).html();<script src="/js/hogan.js"></script> template = Hogan.compile(tpl); html = template.render(data);<script id="tpl" type="text/template"> ...<h1>{{name}}</h1><p>{{description}}</p></script></html>
  28. 28. AppCache를 위한 웹 구현 1. manifest 정의 2. 뷰/데이터 분리 3. 자바스크립트 템플 릿 랜더링
  29. 29. one more thing..남은 성능 문제
  30. 30. 웹뷰 터치 후 0.3초 후 반응
  31. 31. Tappable: tab event library
  32. 32. 참고HTML5 Offline AppCache Tutorialhttp://www.html5rocks.com/en/tutorials/appcache/beginner/Hogan.jshttp://twitter.github.com/hogan.js/Tappablehttps://github.com/cheeaun/tappable
  33. 33. 문의http://twitter.com/muikmuik@thinkreals.com

×