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