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

Instagram

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