1

Intel® XDK для разработки кросс-платформенных

мобильных приложений

2

Intel® XDK HTML5 Cross-Platform Development Environment

Olga Mineeva – Product Validation Engineer, Intel Corporation

3

Topics to be Covered

• HTML5 Apps - Why Would You Want to do That?

• Apache Cordova* – the Bridge to Native API’s

• What is the Intel® XDK?

• Crosswalk Project for Consistent Behavior

• Debugging and Profiling your App

4 4

Native apps development means...

5 5

…walled gardens systems

6

Что общего между этими платформами?

6

Apple* iOS* BlackBerry*Google*

Android*Microsoft*

Windows* PhoneMozilla*

Firefox* OSTizen*

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 andhybrid

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

Java; some C/C++;HTML5 in browser and hybrid

C/C++; managed (C#, JavaScript); HTML5 in browser and hybrid

HTML5 onlyHTML5preferred; 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, tabletEntry

smartphone

Smartphone, tablet IVI, TV,

PC

7

HTML5 - это спецификация

• HyperText Markup Language, version 5

Что нового:

7

8

HTML5 - новое поколение веб-стандартов

8

9

Why HTML5 Apps?

HTML5 is the language of the web.

Used by millions of developers!

Allows developers to build apps using web skills and tools…

…that can be distributed in native app stores.

10

Native vs. Web AppsNative Apps

Advanced UI interactions Smoothest performance App store distribution

SinglePlatform

PartialCapabilities

MultiplePlatforms

FullCapabilities

Web Apps Web developer skills Instant updates Unrestricted distribution

11

Hybrid HTML5 App AdvantageNative Apps

Advanced UI interactions Smoothest performance App store distribution

SinglePlatform

PartialCapabilities

MultiplePlatforms

FullCapabilities

Web Apps Web developer skills Instant updates Unrestricted distribution

Hybrid HTML5 Apps Web developer skills Access to native platform App store distribution

12

HTML5 Programming Native Programming

HTML5 App

Browser AccessedHTML5 based

Limited device API access

Hybrid HTML5 App

Downloadable via StoresHTML5 based

Access to device APIs thru Cordova*

Native App

Downloadable via StoresNative user experienceFull device APIs access

Cordova* Bridges the HTML5 to Native Gap

13

Mobile HTML5 Web App Block Diagram

Device Libraries

Mobile Device OS

HTML5 Web App

Mobile Browser

Restricted Device Access

14

Mobile Hybrid HTML5 WebView App Diagram

Device Libraries

Mobile Device OS

Native WebView

HTML5 WebView App

Hybrid ExtensionBridge

15

Intel® XDK Cordova* Development Environment

Create Code Preview Debug Build

Streamlined developer workflow and building blocks for crafting

great app experiences

Advanced and easy-to-use tools to help perfect the mobile apps

Easily reach across many app stores

Cordova* plugin management Visual App Designer Live on-device display of edits

CPU & Memory Profiling One click app packaging EmulatorHTML5 Code EditorCode Samples

JavaScript* debugging

16

Android* WebView Problem

The Android* WebView Problem

System WebView

Chromium* 43+

Chromium 30 & 33

Non-Chromium

Chrome* Browser

Chromium 43+https://developer.android.com/about/dashboards/index.htmlData collected during a 7-day period ending on June 1, 2015.Any versions with less than 0.1% distribution are not shown.

18

Consistent HTML5 App Behavior

Default Android* WebViews Crosswalk Project WebViews

Crosswalk Project enables consistent behavior

on Android 4.0+ devices

19

Intel® XDK Demo

20

Demo: Mobile App Design Tools

21

Intel® XDK Demo: Ripple Emulator

22

Intel® XDK Demo: App Preview

23

Intel® XDK Demo: Remote Debugging

24

Intel® XDK Demo: Remote Debugging

25

Intel® XDK Demo: Application Profiling

26

Intel® XDK Users and Builds – TrendlinesNovember, 2013 (Crosswalk build intro) through mid July, 2015

Intel® XDK Active Users per Week, Trend Intel® XDK Builds per Week, Trend

Android*

Crosswalk

iOS*

Windows® 8

Windows Phone

27

Ten Reasons to Use the Intel® XDK

1. Integrated tools All in one toolset to easily build mobile apps with a single codebase

2. One click packaging Build system makes it easy to reach more stores and customers

3. Flexible developer experience Use the integrated editor or your own editor, such as Sublime*, with the Intel® XDK

4. Visual mock ups Drag & drop GUI designer to help lay out your apps UX

5. Add web services RESTful web services support integrated

6. Real-time on-device preview “Live Layout Editing” see layout code changes in real-time

7. Debug & Profiling App Preview and on-device debugging

8. Device API support Seamless Cordova* 4.x support and plug-in management support

9. Performance Latest Crosswalk Project webview for your Android* apps

10. Cost effective tools Free to use, no royalties or restrictions on your apps

28

Download Intel® XDK

xdk.intel.com

28

29

Download Intel® App Preview Onto Your Device

Android*

bit.ly/1i8VEglApple* iOS*

bit.ly/1a3W7Bk

Проблемы со сканированием? Попробуй Google Goggles* или RedLaser* Barcode.

Windows® 8bit.ly/1j8rxdJ

30

How to Create Your First HTML5 Mobile App with Intel® XDK

www.youtube.com/watch?v=_4PF79XZWxg

30

31

“Things”

32

Intel® XDK IoT Edition

• IoT App

- Program device with Node.js*

- Remote debug in Intel® XDK

- Wireless connection

- http server

- Socket server

• Companion App

- Full Intel XDK Capability

- Mobile Device IoT device

Wireless

- Interact/Control IoT device with mobile device

33

Q&A

• HTML5 Apps - Why Would you Want to do That?

• Apache Cordova* – the Bridge to Native API’s

• What is the Intel® XDK?

• Crosswalk Project for Consistent Behavior

• Debugging and Profiling Your App

• The Intel XDK and IoT

34

What will you develop?

35

Legal Notices and DisclaimersIntel technologies’ features and benefits depend on system configuration and may require enabled hardware, software or service activation. Learn more at intel.com, or from the OEM or retailer.

No computer system can be absolutely secure.

Tests document performance of components on a particular test, in specific systems. Differences in hardware, software, or configuration will affect actual performance. Consult other sources of information to evaluate performance as you consider your purchase. For more complete information about performance and benchmark results, visit http://www.intel.com/performance.

Cost reduction scenarios described are intended as examples of how a given Intel-based product, in the specified circumstances and configurations, may affect future costs and provide cost savings. Circumstances will vary. Intel does not guarantee any costs or cost reduction.

This document contains information on products, services and/or processes in development. All information provided here is subject to change without notice. Contact your Intel representative to obtain the latest forecast, schedule, specifications and roadmaps.

Statements in this document that refer to Intel’s plans and expectations for the quarter, the year, and the future, are forward-looking statements that involve a number of risks and uncertainties. A detailed discussion of the factors that could affect Intel’s results and plans is included in Intel’s SEC filings, including the annual report on Form 10-K.

The products described 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.

No license (express or implied, by estoppel or otherwise) to any intellectual property rights is granted by this document.

Intel does not control or audit third-party benchmark data or the web sites referenced in this document. You should visit the referenced web site and confirm whether referenced data are accurate.

Intel 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.

© 2015 Intel Corporation.

36

Backup

37

Chromium*

Core

Extensions+ Cordova

Native UX Integration

Android 4.0+

Crosswalk

Runtime ModelJS ExtensionFramework

Manifest Parsing SysApps APIs

ChromiumCross-platform

libraries (base, ipc)Content Module

content rendering in sandboxed processes

Aura Frameworkwindowing and compositing

Ozone Compositor

GPU Command Buffer

Blink Web Engine

ffmpeg

v8

Network Stack

skia

WebRTC

Android* OS

ServicesSensorsWindowing

System Graphics Input DevicesInput Methods

External ExtensionsCustom Native

APIsApache Cordova*

Framework

Tizen* APIs etc.

38

Crosswalk Project Adoption Timeline

2013/12 – First official release w/ Android* support Adopted by Intel® XDK and Construct 2

2014/6 – Adopted by Google* Mobile Chrome* App teamPresented by Google team in Google IO 2014

2014/7 – Adopted by Famo.us

2014/7 – Being adopted by upstream Cordova*,targeting Cordova 4.0

2014/9 – Adopted by Ludei (CocoonJS)

2014/10 – 400+ Crosswalk Apps in Google Play

2014/11 – Adopted by AppGyver

2015/1 – Adopted by Ionic

2015/1 – 3 w/ 1M-5M installs, 22 w/ 100,000+ installs

2015/3 - 1 w/ 14M+ active users ! - Youdao Note

Influence of Crosswalk

HTML5 Framework/ Tools

HTML5 Gaming Tools

HTML5 Apps

Standardization(W3C/ECMAScript)

Presentation API SIMD.JS, WebCL*, Depth Camera ...

Dozens of Apps w/ 100,000+ Installs in Google Play by 2015/1

39

Crosswalk Project Features and APIs

• Web Components

- Future of the web app design

• Service Worker

- Closing the gap between the native and web applications

• Responsive Design

- Media queries (L4), @viewport, Picture element, srcset attribute

• Native Client

- Portable version, pNaCl

• Manifest

- Standard manifest for web applications

40

Crosswalk Project Features and APIs (cont.)

• W3C Promises API

• W3C Resource Timing API

• W3C User Timing API

• W3C Ambient Light API

• W3C GamePad API

• EcmaScript SIMD

• W3C WebRTC

• W3C WebGL, Canvas

• W3C Web Animations

• W3C SysApps: Raw Sockets

• W3C SysApps: Device Capabilities

• W3C SysApps: App URI

• HTML5 input enhancements

- context menu, pattern attribute, data list element, autocomplete

• Beacon

• Vehicle API (IVI)

• DLNA API (IVI)

41

Apps Run Consistently Across Devices

• HexGL game example

• WebGL + WebAudio

- Device Orientation

- Game Pad

- Presentation API (Intel® WiDi)

• Runs well on mobile devices!

- Hongmi, ZTE* Geek, Xiaomi, Samsung* Galaxy* S3, Nexus* 7, ASUS* Pad, et al

http://hexgl.bkcore.com

42

Embedded Crosswalk Project Build Options

MyApp.apk

App codeHTML, JS, CSS, etc.

Crosswalk (x86)

+ OR

MyApp.apk

App codeHTML, JS, CSS, etc.

Crosswalk (ARM)

MyApp.apk

App codeHTML, JS, CSS, etc.

Crosswalk (x86)

Crosswalk (ARM)

Two “thin” APK files• One for each CPU architecture

Crosswalk size:• Adds 20 MB to APK• Adds 50 MB installed

Submit two apps to the Android* store

One “fat” APK file• Includes x86 and ARM*

Crosswalk size:• Adds 40 MB to APK• Adds 100 MB installed

Submit one app to Android store

43

Shared Crosswalk Project Library

MyApp.apk

App codeHTML, JS, CSS, etc.

Crosswalk_x86.apk

Crosswalk (x86)

Crosswalk_arm.apk

Crosswalk (ARM*)

• Link to shared Crosswalk Project library

• Dynamically downloaded

• Version dynamically updated

• Distributed via Android* store