Mobile Web Apps and the Intel® XDK AnDevCon San Francisco November 18-21, 2014

1. Mobile Web Apps and the Intel® XDK
Dale Schouten – TCE, Intel Corporation - @OldGeeksGuide
Bob Spencer – Sr. Software Engineer, Open Source Technology Center, Intel
Corporation
Intel Confidential — Do Not Forward

2. All about me . . .
2
Working at Intel for nearly 20 years in
various capacities in compiler
development and support, performance
analysis and web app development
tools.
Currently working with the Intel XDK
team.
 Recovering C Programmer
 Compiler Guy
 Performance
 Android compiler
 Intel XDK

3. 3
Agenda
Mobile Web Apps and the Intel XDK
 Android Apps
 Web Apps
 HTML5
 Hybrid Apps
 Intel XDK
 Crosswalk
 Intel XDK IoT

4. 40M Unit Tablet Goal in 2014
>200 Designs Entry to Performance Windows* and Android*
Develop on Intel to increase your business opportunity
4

5. Rich Portfolio of Android* and Windows* Mobile Devices
New Tablets From $99 - ~$499+
Acer
Iconia Tab 8
Toshiba*
Excite Go
Dell*
Venue 8 KD Interactive*
Over 200 Designs Available globally
Acer*
Iconia One 7
Acer
Aspire Switch 10
ASUS*
FonePad 7
FE375CG
ASUS
Transformer Pad LTE
TF303CL
Dell
Venue 7
Kurio Tablet
Toshiba
Encore2 10”
FUHU*
DreamTab
ASUS
Zenfone 4.5
A450CG
ASUS
MeMO Pad 7
ME170C, ME176C
ASUS
MeMO Pad 8
ME 181C, ME581CL
ASUS
FonePad 8
FE380CG
ASUS
Transformer pad
TF103CG, TF103C
Lenovo*
ThinkPad 10”
FOXCONN*
Anchor Premium
FOXCONN
Anchor 7.8
Toshiba
Encore2 8”
5

6. Android Apps
Gold rush . . .
6

7. Full Bleed Image Example
7 7

8. 8
Creating Android Apps is hard . . .

9. 9
Magic?

10. HTML Apps
Run Everywhere
10

11. Why HTML5?
11
HTML5 is the language of the web!
 Flexible, Adaptable
 Used by millions of developers
 HTML5 == HTML5/CSS3/JS

12. Hybrid HTML5 Apps…
12
…allow developers to build apps using
these skills and tools…
…that can be distributed in native
app stores.

13. Native vs. Web Apps
13
Single
Platform
Multiple
Platforms
Full
Capabilities
Partial
Capabilities
Web Apps
 Web Developer Skills
 Instant updates
 Unrestricted Distribution
Native Apps
 Advanced UI Interactions
 Smoothest Performance
 App Store distribution

14. Native vs. Web Apps
14
Single
Platform
Multiple
Platforms
Full
Capabilities
Partial
Capabilities
Web Apps
 Web Developer Skills
 Instant updates
 Unrestricted Distribution
Native Apps
 Advanced UI Interactions
 Smoothest Performance
 App Store distribution
Hybrid HTML5 Apps
 Web developer skills
 Access to native platform
 App Store distribution

15. Mobile HTML5 Web App Block Diagram
15
HTML5 Web App
Mobile Browser
Device Libraries
Restricted Device Access
Mobile Device OS

16. Mobile Hybrid HTML5 WebView App Block
Diagram
16
Hybrid Extension
Bridge
Device Libraries
HTML5
WebView App
Native WebView
Mobile Device OS

17. Think of Hybrid as a “Black and Tan”
17
Web App Stuff
(stout)
Native App Stuff
(pale ale)
/fōn•gap/
stuff
P.S. - It’s spelled “Cordova” but pronounced /fōn•gap/ 

18. Intel XDK
Creating Hybrid Mobile Web Apps
18

19. Intel XDK: Hybrid HTML5 Mobile App Development
Debug and Test Tools
Services and Content
thru APIs and Plugins
Mashery* (et al)
Multiple Form Factors
and Platforms
 HTML5 Brackets* Editor
 App Designer Layout Editor
 Ripple* Cordova* Emulator
 Intel App Preview Debugger
 Remote Chrome* DevTools*
 “weinre” Remote Inspector
 On Device Live Preview
 iOS* - iPhone* and iPad*
 Android* - x86 and ARM*
 Crosswalk* - x86 and ARM
 Windows* 8 Store - “Metro” UI
 Windows 8 Phone
 HTML5 Packaged Web Apps:
 Tizen*, Firefox* and Chrome
19

20. Intel® XDK – Every stage of development
20
Existing
App
New
App
Cordova
Frameworks
Cloud build
Manually
submit to
app
store
The Intel® XDK facilitates the development of hybrid HTML5
applications for iOS*, Android*, Windows* 8 and other mobile devices.
Visit the Intel Developer Zone  xdk.intel.com
Apple App Store
Google Play Store
Windows Store
Nook
. . .
Brackets
Editor
App
Designer
Ripple
Emulator
CDT
Debug
App
Preview

21. Intel® XDK: Cordova Plugins
21
Cordova Plugins
 Core Plugins
 Intel.xdk.*
 Featured plugins
 Google Play Games Services
 Dolby Audio
 Third-party plugins
 Cordova plugin registry (or not)
 Built from sources
Intel XDK
Cloud
Build Service
Your
Sources
Cordova
Plugins
Built app
Android .apk
iOS
Windows
. . .

22. Intel® XDK: Mashery APIs
22
Intel® Mashery™ API Services
 Rotten Tomatoes
 Instagram
 Markit OnDemand
 Woot
 Dropbox
 Weather Underground
 Many more . . . .
Information
Products
Services
API
http://. . .
{JSON}

23. Develop
Creating your app
23

24. 24
Intel® XDK: HTML Editor (Brackets)

25. 25
Intel® XDK: Live Layout Editing

26. 26
Intel® XDK: App Designer

27. Summary: Mobile App Design Tools
27
HTML5 Built-in Editor
 Based on Brackets* --or-- use your
favorite editor
App Designer
 Drag-n-Drop UI components
 Configure media query switch [wrap]
points
 Compatible with multiple UI
frameworks
App Framework
 jQuery* compatible UI framework
 Optimized for mobile device web
views
 Android*, iOS*, Blackberry* and
Windows 8* themes
 app-framework-software.
intel.com/style.php

28. Test, Debug, Preview and Profile
Make it work
28

29. 29
Intel® XDK: Ripple Emulator

30. 30
Intel® XDK: Ripple Emulator

31. 31
Intel® XDK: App Preview

32. 32
XDK: Remote Debugging

33. 33
XDK: Remote Debugging

34. 34
XDK: Profile

35. Summary: Emulate and On-Device Debug
35
Intel® XDK Emulator
 Preview in various phone and tablet
formats
 Simulate device-specific features
 Debug using standard Chrome
DevTools (CDT)
 Simulation of intel.xdk and Apache
Cordova APIs
App Preview  On-Device Previewer
 Quickly load and run projects directly
on real devices
App Debugger  On-Device Remote
Android Debug
 Remote access to Android device
JavaScript console (aka CDT)
Live Layout Editing
 Experiment with layout and styling
options in real-time

36. Build and Package
Cross platform
36

37. 37
Intel® XDK: Package and Build

38. 38
Intel® XDK: Plugin Settings

39. Alternate Build Service Offerings
39
Intel® XDK† Adobe* PhoneGap*
Build*
Other Options
(typical)
iOS*   
Android*   
Windows* Phone 8  
Windows* 8 Tablet 
Tizen* 
Amazon* Kindle* 
Barnes & Nobile* Nook* 
FireFox* OS 
Chrome* OS 
Web App 
Facebook* 

40. Crosswalk
The advanced web runtime for ambitious HTML5 applications
40

41. What is Crosswalk
• New HTML5 runtime based on Google’s Blink and Chromium Content Module
• Optimized for Android
• Supports Tizen, Linux, Mac, and Windows
• Open source, BSD licensed. Started in September, 2013
• 6-week release cadence. Stable, Beta and Canary channels
• GitHub for code and reviews. JIRA for features and bugs. FreeNode for IRC.
41

42. Why do we need a new HTML5 Runtime?
• Deploying on Android is complex
• Multiple type of devices (low cost, high cost)
• Multiple versions of Android (sometimes very old)
• WebView very old, behavior different from one device to the other
• Google focus on the browser, need for a product tailored for app developers
• Based on Blink, the most competitive HTML5 engine
• Many other companies and communities have made the same conclusion and
moved to Blink
42

43. 43
Crosswalk

44. Crosswalk Project Goals
44
• Enable latest, advanced web application features across all Android devices
• Based on W3C standards and landing zone for new draft APIs and Intel
differentiation, such as SIMD and Presentation API
• Bring web applications to the next level, closer to native
• Easy adaptation for downstream projects
• Integrated with Cordova, Intel® XDK or even existing Android Java applications.
• Good co-operation with upstream projects
• Chromium, Blink, Skia, V8, Wayland
• Fully open source project – embraces participation

45. Crosswalk Architecture Goals
• Based on Blink and selected parts of Chromium
• Work with upstream to enable features we need
• Minimize the changes on Crosswalk Blink and Chromium
• Crosswalk rapid release cycle always updated with the latest Chromium
version.
• API extensions in separate repositories
• Cordova APIs, early or experimental W3C APIs
45

46. 46

47. Features and APIs
 Web Components (http://www.w3.org/TR/components-intro/)
 Future of the web app design
 Service Worker (http://www.w3.org/TR/service-workers/)
 Closing the gap between the native and web applications
 Responsive Design
 Media queries (L4), @viewport (http://dev.w3.org/csswg/css-device-adapt/)
 PIcture element, srcset attribute
 Native Client
 Portable version, pNaCl
 Manifest (http://w3c.github.io/manifest/)
 Standard manifest for web applications
 W3C SysApps: Raw Sockets (http://www.w3.org/2012/sysapps/tcp-udp-sockets/)
 W3C SysApps: Device Capabilities (http://www.w3.org/2012/sysapps/device-capabilities/)
 W3C SysApps: App URI (http://www.w3.org/2012/sysapps/app-uri/)
47

48. Features and APIs (cont.)
 W3C Promises API
 W3C Resource Timing API (http://www.w3.org/TR/resource-timing/)
 W3C User Timing API (http://www.w3.org/TR/user-timing/)
 W3C Ambient Light API
 W3C GamePad API
 EcmaScript SIMD
 W3C WebRTC
 W3C WebGL, Canvas
 W3C Web Animations
 HTML5 input enhancements
 context menu, pattern attribute, data list element, autocomplete
 Beacon (http://www.w3.org/TR/beacon/)
 Vehicle API (IVI)
 DLNA API (IVI)
48

49. 49
Embedding Crosswalk in your Android app
3 easy steps:
1. Download Crosswalk
2. Package Crosswalk with your application using make_apk.py:
$ python make_apk.py --package=org.abc.myapp
• Bundles Crosswalk runtime with your application
• Creates apk for both x86 and arm
3. Install
--manifest=myapp/manifest.json
$ adb install -r myapp_x86.apk

50. The Crosswalk Advantage
• Advanced web runtime and webview features available for legacy Android platforms
• Application consistency across all Android versions
• Extendable
• Full control over upgrade cycle
• Based on Blink and Chromium
• Latest innovations, strong performance
• Intel is driving innovation in Blink and Chromium, including reviewing and owning various areas of
the code base
• Wide community adoption
• Strong corporate backing
• Open source
50

51. Intel XDK IoT Edition
Internet of Things
51

52. 52
Things

53. 53
Intel® XDK: IoT Edition

54. 54
Intel® XDK: IoT Edition - Debugger

55. Summary: XDK IoT Edition
55
IoT App
 Program device with Node.js
 Remote debug in XDK
 Wireless connection
 http server
 Socket server
Companion App
 Full XDK Capability
 Mobile Device  IoT device
 Wireless
 Interact/Control IoT device with mobile
device

56. Trying it out
Get the Intel XDK
56

57. Download the Intel®
XDK
57
xdk.intel.com
Experiment with the demo apps.
Visit the Intel booth (#400) for an in-depth
demo.

58. 58
Download App Preview onto your Device
Android*
bit.ly/1i8VEgl
iOS*
bit.ly/1a3W7Bk
Windows* 8
bit.ly/1j8rxdJ

59. Intel® Developer Zone
Tools. Knowledge. Community.
• Free tools and code samples
• Technical articles, forums and tutorials
• Connect with Intel and industry experts
• Get development support
• Build relationships
software.intel.com

60. 60
Legal Disclaimer
INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR
OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND
CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED
WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A
PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.
A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in personal injury or death. SHOULD YOU
PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS
SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL
CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF
PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT
INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS.
Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any
features or instructions marked "reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or
incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information.
The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published
specifications. Current characterized errata are available on request.
Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.
Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go
to: http://www.intel.com/design/literature.htm
Intel, Look Inside and the Intel logo are trademarks of Intel Corporation in the United States and other countries.
*Other names and brands may be claimed as the property of others.
Copyright ©2014 Intel Corporation.

61. http://software.intel.com/html5
Please visit the Intel booth (#400) to learn more about these solutions and to see the technology in action
61

62. Intel Confidential — Do Not Forward

63. Backup
63