C1 하이브리드 앱 어떻게 개발해야 하나

5,095 views
4,850 views

Published on

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

No Downloads
Views
Total views
5,095
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
232
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

C1 하이브리드 앱 어떻게 개발해야 하나

  1. 1. 하이브리드 앱어떻게 개발해야 하나? KTH 앱스프레소팀장 한기태
  2. 2. 하이브리드앱? 2
  3. 3. 하이브리드앱? 연비 3
  4. 4. 하이브리드 앱? 4
  5. 5. 하이브리드 앱? 5
  6. 6. 하이브리드 앱? • Layout HTML • Design CSS • Event Handler JavaScript 6
  7. 7. 하이브리드 앱? Web Resource WebView (Boilerplate) Native App: iOS, Android 크로스 플랫폼 앱 스토어 7
  8. 8. 왜 하이브리드 앱인가? 8
  9. 9. 왜 하이브리드 앱인가? Objective C Java Cocoa, iPhone SDK Android SDK Xcode Eclipse + ADT 9
  10. 10. 왜 하이브리드 앱인가? Vic Gundotra. Vice-President of Engineering for Google 10
  11. 11. 웹 기술의 비약적 발전: HTML5, CSS3 11
  12. 12. 웹 기술의 비약적 발전: HTML5, CSS3 Vic Gundotra. Vice-President of Engineering for Google 12
  13. 13. 웹 기술의 비약적 발전: JavaScript UI Framework 13
  14. 14. 웹 기술의 비약적 발전: JavaScript UI Framework 14
  15. 15. 웹 기술의 비약적 발전: 웹 OS, 웹 플랫폼 B2G(Boot to Gecko) 15
  16. 16. 하이브리드 앱 개발 방법론 16
  17. 17. 하이브리드 앱 개발방법론 17
  18. 18. Device API 보안상의 이유로 웹에서는 로컬 자원에 대한 접근 금지 Device API  카메라, 센서, 주소록, 파일 시스템 등 로컬 자원의 활용 가능 표준화 동향  W3C DAP(Device APIs and Policy) OMTP BONDI API + Nokia WRT API 18
  19. 19. Device API PhoneGap의 방식 alert(ScriptingObject.add(3, 4)); 19
  20. 20. Device API PhoneGap의 방식 document.location = "myapp:" + "ScriptingObject:" + "add:" + "3:" + "4"; 20
  21. 21. 하이브리드 앱 프레임워크 Rhodes 21
  22. 22. Rhomobile Rhodes  Ruby  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 22
  23. 23. Appcelerator Titanium  AWT와 유사한 자체 Window Toolkit  특정 벤더의 비표준 기술  축적된 지식, 자산의 재활용 불가 23
  24. 24. PhoneGap 하이브리드 앱 개발 방법론을 프레임워크화  오픈 소스  개발 환경, 개발 도구 없음: 샘플 소스  웹 표준 기반  Device API는 자체적으로 제정한 스펙  유일하게 6가지 모바일 플랫폼 지원  iOS, Android, RIM BlackBerry, HP webOS, Nokia Symbian, Samsung Bada 24
  25. 25. Appspresso ‘11.03.14 국내 최초의 범용 하이브리드 앱 프레임워크 세계 최초로 표준 Device API와 통합개발환경을 지원하는 하이브리드 앱 프레임워크 25
  26. 26. Appspresso WAC Waikiki API Sensor Camera Contact Device Status SMS File System Native API 26
  27. 27. Appspresso 27
  28. 28. Appspresso 크로스 플랫폼 웹 표준 기반 표준 Device API (WAC Waikiki API): WAC Compatibility 통합개발환경 제공 One Click Build PDK(Plug-in Development Kit)  Open Source Appspresso Plug-in Project 개설 예정 On the fly building – Demo 28
  29. 29. 바람직한 하이브리드 앱 구조 Hybrid App ≠ Web Site 29
  30. 30. 바람직한 하이브리드 앱 구조 Web Site 서버에서 모든 것을 다 처리한다 브라우저는 거들 뿐 30
  31. 31. 바람직한 하이브리드 앱 구조 Web Site 사용자 액션  페이지 이동 JavaScript 다시 로드 / parsing 상태 잃어 버림  Cookie / Session 31
  32. 32. 바람직한 하이브리드 앱 구조 Hybrid App 브라우저에서 모든 것을 다 처리한다 서버는 거들 뿐 32
  33. 33. 바람직한 하이브리드 앱 구조 Local Resource: HTML, CSS, JS, Image, … SDA(Single DOM Architecture) Partial Update 33
  34. 34. 바람직한 하이브리드 앱 구조 Partial Update Local Resource 34
  35. 35. 바람직한 하이브리드 앱 구조 http://microjs.com 35
  36. 36. 바람직한 하이브리드 앱 구조iScroll (http://cubiq.org./iscroll)iScroll for jQuery Mobile (https://github.com/yappo/javascript-jquery.mobile.iscroll) 36
  37. 37. Q&A 37

×