Más contenido relacionado La actualidad más candente (19) Similar a 하이브리드앱 성능 극복 (20) 하이브리드앱 성능 극복14. 네이티브 구현 동작
<App> <Web Server>
단일 커넥션
로딩
.json
화면뷰 그리기
15. 웹 구현 동작
<App> <Web Server>
많은 커넥션
url 접속
.html
.css
화면뷰 그리기
.js
.
.
.
화면뷰 그리기
20. AppCache 웹 구현 동작
<App> <Web Server>
단일 커넥션
url manifest 확인
.appcache
html, css, ... 로드
화면뷰 그리기
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>
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,
...
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>
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