mobile web apps and the intel® xdk
DESCRIPTION
Mobile Web Apps and the Intel® XDK AnDevCon San Francisco November 18-21, 2014TRANSCRIPT
Intel Confidential — Do Not Forward
Mobile Web Apps and the Intel® XDKDale Schouten – TCE, Intel Corporation - @OldGeeksGuide
Bob Spencer – Sr. Software Engineer, Open Source Technology Center, Intel
Corporation
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
Agenda
Mobile Web Apps and the Intel XDK
Android Apps
Web Apps
HTML5
Hybrid Apps
Intel XDK
Crosswalk
Intel XDK IoT
Develop on Intel to increase your business opportunity
40M Unit Tablet Goal in 2014
>200 Designs Entry to Performance Windows* and Android*
4
Rich Portfolio of Android* and Windows* Mobile DevicesNew Tablets From $99 - ~$499+
Over 200 Designs Available globally
Acer
Iconia Tab 8
Acer*
Iconia One 7
Acer
Aspire Switch 10
ASUS*
FonePad 7
FE375CG
ASUS
Transformer Pad LTE
TF303CL
Dell
Venue 7
Dell*
Venue 8 KD Interactive*
Kurio Tablet
Toshiba*
Excite Go
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
Android AppsGold rush . . .
6
Full Bleed Image Example
77
8
Creating Android Apps is hard . . .
9
Magic?
HTML AppsRun Everywhere
10
Why HTML5?
11
HTML5 is the language of the web!
Flexible, Adaptable
Used by millions of developers
HTML5 == HTML5/CSS3/JS
Hybrid HTML5 Apps…
12
…allow developers to build apps using
these skills and tools…
…that can be distributed in native
app stores.
Native vs. Web Apps
13
Single
Platform
Multiple
Platforms
Full
CapabilitiesPartial
Capabilities
Web Apps
Web Developer Skills
Instant updates
Unrestricted Distribution
Native Apps
Advanced UI Interactions
Smoothest Performance
App Store distribution
Native vs. Web Apps
14
Single
Platform
Multiple
Platforms
Full
CapabilitiesPartial
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
Mobile HTML5 Web App Block Diagram
15
Device Libraries
Mobile Device OS
HTML5 Web App
Mobile Browser
Restricted Device Access
Mobile Hybrid HTML5 WebView App Block
Diagram
16
Device Libraries
Mobile Device OS
Native WebView
HTML5
WebView App
Hybrid Extension
Bridge
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/
Intel XDKCreating Hybrid Mobile Web Apps
18
Intel XDK: Hybrid HTML5 Mobile App Development
Debug and Test ToolsServices 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
Intel® XDK – Every stage of development
20
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
Existing
App
New
App
Cordova
FrameworksCloud build
Manually
submit to
app
store
Apple App Store
Google Play Store
Windows Store
Nook
. . .
Brackets
Editor
App
Designer
Ripple
Emulator
CDT
DebugApp
Preview
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
. . .
Intel® XDK: Mashery APIs
22
Intel® Mashery™ API Services
Rotten Tomatoes
Markit OnDemand
Woot
Dropbox
Weather Underground
Many more . . . .
Information
Products
Services
{JSON}
APIhttp://. . .
DevelopCreating your app
23
24
Intel® XDK: HTML Editor (Brackets)
25
Intel® XDK: Live Layout Editing
26
Intel® XDK: App Designer
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
Test, Debug, Preview and ProfileMake it work
28
29
Intel® XDK: Ripple Emulator
30
Intel® XDK: Ripple Emulator
31
Intel® XDK: App Preview
32
XDK: Remote Debugging
33
XDK: Remote Debugging
34
XDK: Profile
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
Build and PackageCross platform
36
37
Intel® XDK: Package and Build
38
Intel® XDK: Plugin Settings
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*
CrosswalkThe advanced web runtime for ambitious HTML5 applications
40
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
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
Crosswalk
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
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
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
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
Embedding Crosswalk in your Android app
3 easy steps:
1. Download Crosswalk
2. Package Crosswalk with your application using make_apk.py:
• Bundles Crosswalk runtime with your application
• Creates apk for both x86 and arm
3. Install
$ python make_apk.py --package=org.abc.myapp \
--manifest=myapp/manifest.json
$ adb install -r myapp_x86.apk
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
Intel XDK IoT EditionInternet of Things
51
52
Things
53
Intel® XDK: IoT Edition
54
Intel® XDK: IoT Edition - Debugger
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
Trying it outGet the Intel XDK
56
Download the Intel®
XDK
57
xdk.intel.com
Experiment with the demo apps.
Visit the Intel booth (#400) for an in-
depth demo.
58
Download App Preview onto your Device
Android*
bit.ly/1i8VEgliOS*
bit.ly/1a3W7BkWindows* 8
bit.ly/1j8rxdJ
Intel® Developer Zone
• Free tools and code samples
• Technical articles, forums and tutorials
• Connect with Intel and industry experts
• Get development support
• Build relationships
Tools. Knowledge. Community.
software.intel.com
60
Legal DisclaimerINFORMATION 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.
http://software.intel.com/html5Please visit the Intel booth (#400) to learn more about these solutions and to see the technology in action
61
Intel Confidential — Do Not Forward
Backup
63