Recommended
More Related Content
What's hot
What's hot (20)
Similar to 하이브리드앱 성능 극복
Similar to 하이브리드앱 성능 극복 (20)
Recently uploaded
Recently uploaded (6)
하이브리드앱 성능 극복
- 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.appcache CACHE: app.js app.css ...
- 19. manifest 파일에서만 캐시 변경 확인은 한번
- 20. AppCache 웹 구현 동작 <App> <Web Server> 단일 커넥션 url manifest 확인 .appcache html, 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.js var 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 Tutorial http://www.html5rocks.com/en/tutorials/appcache/beginner/ Hogan.js http://twitter.github.com/hogan.js/ Tappable https://github.com/cheeaun/tappable