하이브리드앱 성능 극복
•
4 gefällt mir•1,218 views
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie 하이브리드앱 성능 극복
Ähnlich wie 하이브리드앱 성능 극복 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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