bridging the gap from a web app to a mobile app et al 26 html5 devcon - april, 2013 build services...

Bridging the Gap: from a Web App to a Mobile Device App

…or, so how does this PhoneGap* stuff work? *Other names and brands may be claimed as the property of others.

HTML5 DevCon - April, 2013 1

Users Want Mobile Apps, Not Mobile Websites


http://www.cioinsight.com/it-strategy/application-development/slideshows/users-want-mobile-apps-not-mobile-websites/



















Why Mobile Apps, Rather than Mobile Websites?





















State of the Smartphone Market

Strategy Analytics, Global Smartphone OS Market Shares by Region, Q4 2012, Feb’13


And if You’re in It for the Money…


So What Does it Take to Build an App?


Creating Conventional “Native” Apps…


Sorry for these very bad graphics!

…Means Working Inside Walled Gardens


Sorry for these extremely bad graphics!

What’s Common Across these Platforms?

Apple* iOS* Blackberry* Google* Android*

M icrosoft* Windows* Phone

Mozilla* Firefox* OS

Tizen*

Development model

Closed, controlled by Apple

Closed, controlled by Blackberry

Platform code released to open source after first commercial device ships; key pieces are Google proprietary

Closed, controlled by Microsoft

Open source, code released during development; controlled by Mozilla

Open source, code released during development. Controlled by Tizen TSG, co-chaired by Intel and Samsung

APIs

Objective C; HTML5 in browser; hybrid

C/C++; HTML5; hybrid; Java

Java; restricted C/C++; HTML5 in browser; hybrid

C/C++; managed (C#, JavaScript); HTML5 with Microsoft extensions

HTML5 only with Mozilla extensions

HTML5 with Tizen extensions; C/C++

Architecture support

ARM only ARM only ARM and x86 ARM only ARM only ARM and x86

OEM and service

provider support

Leading OEM, broad SP support

1 OEM, good SP support

Many OEMs, broad SP support

Many OEMs, broad SP support

Limited OEMs, good SP support

Supported by leading OEM, good SP support

Device categories supported

Smartphone, tablet, TV

Smartphone, tablet

Smartphone, tablet, TV

Smartphone, tablet Entry smartphone

Smartphone, tablet IVI, TV, PC


Can You Create Native Apps from Web Apps?


Web vs. Hybrid vs. HTML5 Applications


Web App limited

sensor input

Hybrid App full

sensor input

HTML5 App full

device access

Runs w/o network Yes Yes Yes

Flexible Layout Yes Yes Yes

Device APIs Limited Mostly Complete

Distribution URL Native Binary URL/WGT

Cross Platform Yes Yes & No Yes

Runs in Browser Yes No No

Runs in Web Runtime No Yes Yes

Tomorrow

the HTML5 standard is evolving to include device APIs

Today

Use HTML/CSS/JS for UI and Program Logic…


…and /fōn•gap/ for Device Feature Access


/fōn•gap/ is a Cross Platform Tool (CPT)


/fōn•gap/ is NOT…

… a magic elixir – won’t auto-magically make your app aware of device features

… a compiler or translator – does not convert HTML5 code into native code

… a “browser bundler” – does not bundle a browser with your application

– not like Chrome Embedded Framework (aka CEF) or Node-Webkit

» it is not the same as using tools like: – Appcelerator*

– Mosync*

– Marmalade*

– Xamarin*

– et al


Apache Cordova* Essentials pronounced /fōn•gap/

PhoneGap* is a trademark of Adobe*

Adobe* PhoneGap* is a “distribution” of Apache Cordova*

*Other names and brands may be claimed as the property of others.


Apache Cordova (/fōn•gap/) Device APIs

Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage


Apache Cordova (/fōn•gap/) API Sampling

Accelerometer navigator.accelerometer.getCurrentAcceleration(accSuccess,accError);

var watchID = navigator.accelerometer.watchAcceleration(accSuccess,accError,[accOptions]);

navigator.accelerometer.clearWatch(watchID);

Camera navigator.camera.getPicture(cameraSuccess,cameraError,[cameraOptions]);

navigator.camera.cleanup(cameraSuccess,cameraError);

Compass navigator.compass.getCurrentHeading(compassSuccess,compassError,compassOptions);

var watchID = navigator.compass.watchHeading(compassSuccess,compassError,[cOptions]);

navigator.compass.clearWatch(watchID);

Geolocation navigator.geolocation.getCurrentPosition(geoSuccess,[geoError],[geoOptions]);

var watchId = navigator.geolocation.watchPosition(geoSuccess,[geoError],[geoOptions]);

navigator.geolocation.clearWatch(watchID);

ref: http://docs.phonegap.com/


http://docs.phonegap.com/



Apache Cordova Platform Support Levels

Core – primary platforms supported by Apache Cordova – iOS – Android

– BlackBerry

– Windows Phone & Windows 8

Horizon –some level of support, future core support candidates – Tizen

– Qt

– Firefox OS – Ubuntu Mobile (Qt)

– Windows Desktop (Win32)

Sunset –code available, but no distribution of these platforms – Symbian

– webOS

– Bada

ref: http://wiki.apache.org/cordova/PlatformSupport


http://wiki.apache.org/cordova/PlatformSupport



Apache Cordova Method of Operation

Write your HTML5 “web app” using HTML/CSS/JavaScript

Open a “native web-view” inside a “native app”

Package your “web app” inside that “native web-view”

Deploy your “web app” as a “hybrid native app”

ref: http://wiki.apache.org/cordova/AddingNewPlatforms


http://wiki.apache.org/cordova/AddingNewPlatforms

Apache Cordova Application Block Diagram


System Services

Operating System

Native Web Runtime

Your Web App cordova.js

cordova plugins

Mobile Device Hardware

Just Think of it as a Tasty “Black and Tan”

(if you don’t like beer, think of it as an “Arnold Palmer”)


Web App Stuff (stout)

Native App Stuff (pale ale)

/fōn•gap/

stuff

Where Does One Start?


http://wiki.apache.org/cordova

http://docs.phonegap.com http://phonegap.com

https://github.com/phonegap/phonegap





http://phonegap.com/

http://phonegap.com/



Learn to use Android, Xcode and VS’12 SDKs!?


Online HTML5 Mobile App Build Services

Adobe* PhoneGap* Build*

– http://build.phonegap.com

Intel® XDK

– http://software.intel.com/html5tools

Tiggzi* Mobile App Builder*

– https://appbuilder.tiggzi.com/projects

Trigger.io*

– https://trigger.io

ApplicationCraft*

– http://www.applicationcraft.com/blog/2012/11/ac-mobile-build

et al


Build services may not be interoperable!

http://build.phonegap.com/

http://software.intel.com/html5tools

https://appbuilder.tiggzi.com/projects

https://appbuilder.tiggzi.com/projects

https://trigger.io/

https://trigger.io/

http://www.applicationcraft.com/blog/2012/11/ac-mobile-build/





Online Build Supported Platforms


Adobe* PhoneGap* Build*

Intel® XDK Other Options

(typical)

iOS*

Android*

Windows* Phone 7

Blackberry*

WebOS*

Symbian*

Tizen* (soon)

Windows* 8 (soon)

Android SDK and /fōn•gap/ Project Example


HTML5 Device App on My Local Disk

config.xml gives directions to the build process


HTML5 Device App in an Android APK

an APK is just a zip file

build process adds some /fōn•gap/ specific files


an XAP is also just a zip file

some of the “native wrapper” bits in a Windows Phone app

HTML5 Device App in a Windows Phone XAP


Load Your Script Files Locally, Not via a CDN


Inside a Browser vs. Inside a WebView


PhoneGap Plugins

ref: https://github.com/phonegap/phonegap-plugins


https://github.com/phonegap/phonegap-plugins





iOS /fōn•gap/ Plugins


Android /fōn•gap/ Plugins


And a Few Other Platforms…


Debug Using Intel® XDK Device Emulator


Debug Using Apache* Ripple* Device Emulator


HTML5 Device Application Challenges

App Store Fragmentation

Performance

Debugging

Testing

Device APIs

Security

etc.


HTML5 Trades Optimization for Portability


Why Does Intel Love HTML5?

44

HTML5 is advanced

Intel takes HTML5 further with new APIs and Parallel JavaScript

HTML5 is open

Intel advances HTML5 via open source projects and the W3C

HTML5 is everywhere

Intel supports HTML5 developers with new tools and communities

Learn more at software.intel.com/html5

HTML5 DevCon - April, 2013

Taking HTML5 Further

45

** Partial List as of January, 2013

Develop ways for web pages to interact

with NFC devices

W3C NFC WG

Develop and maintain cascading style sheets

3 Intel members

W3C CSS WG

HTML5 core, elements, layouts, DOM

W3C HTML WG

Security and policy mechanisms to improve

security of web applications

2 Intel members

W3C WebApp

Security WG

Define cryptography APIs to provide

common functionality to web applications

W3C Web

Cryptography WG

Add more advanced audio capabilities, such

as the processing and synthesis of audio

streams

W3C Audio WG

Define runtime environment, security model

and associated APIs to build web apps

similar to native

W3C System

Applications WG

Improve privacy and user control

W3C

Tracking Protection WG

Improve client-side application development

on the web

W3C Web

Applications WG

Enhance application performance of user

agent features and APIs

W3C Web

Performance WG

Enable web application interaction with

device HW, services, and applications

W3C Device

API WG

Develop technologies for use in testing,

debugging, and troubleshooting of web

applications

W3C

Browser Testing and Tools

HTML5 DevCon - April, 2013

Leading Open Source Contributor


software.intel.com/html5


bridging the gap from a web app to a mobile app et al 26 html5 devcon - april, 2013 build services...

Documents