Your SlideShare is downloading. ×
하이브리드앱 성능 극복
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

하이브리드앱 성능 극복

5,759
views

Published on

http://thinkreals.com/1167

http://thinkreals.com/1167

Published in: Technology

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,759
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
58
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×