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

1 Intel® XDK HTML5 Cross-Platform Development Environment

Olga Mineeva – Product Validation Engineer, Intel Corporation

2 Topics to be Covered

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

• * – the Bridge to Native API’s

• What is the Intel® XDK?

• Crosswalk Project for Consistent Behavior

• Debugging and Profiling your App

3 Обзор мобильных систем

4 4 Тенденция развития

5 5 Средства быстрого прототипирования интерфейсов мобильных приложений

• Бумага и ручка • Flinto (от $8 в месяц) • InVision (бесплатно / $15 в месяц) • Proto.io (бесплатно / $24 в месяц) • Marvel (бесплатно) • Codiqa (от $16 в месяц) • UXPin ($14.99 в месяц) • FluidUI (от $12 в месяц)

6 6 Native apps development means...

7 7 …walled gardens systems

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

Google* Microsoft* Mozilla* Apple* iOS* BlackBerry* * Android* Windows* Phone Firefox* OS

Platform code Open source, released to Open source, code released open source Closed, code released during Closed, after first Development controlled Closed, controlled during development. controlled commercial model by by Microsoft development; Controlled by by Apple device ships; Blackberry controlled by Tizen TSG, co- key pieces are Mozilla chaired by Intel Google and Samsung proprietary

C/C++; Java; some Objective C; C/C++; managed HTML5 in C/C++; HTML5 HTML5 in (C#, JavaScript); APIs browser HTML5 in HTML5 only preferred; browser and HTML5 in browser and hybrid; browser and C/C++ hybrid and hybrid Java hybrid

Architecture ARM only ARM only ARM and x86 ARM only ARM only ARM and x86 support OEM and Leading 1 OEM, Many OEMs, Limited OEMs, Supported by service Many OEMs, OEM, broad good SP broad SP good SP leading OEM, provider broad SP support SP support support support support good SP support support Device Smartphone, Smartphone, Smartphone Smartphone, Entry categories Smartphone, tablet tablet IVI, TV, tablet, TV , tablet tablet, TV smartphone supported PC 9 9 HTML5 - это спецификация

• HyperText Markup Language, version 5

Что нового:

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

11 11 Why HTML5 Apps?

HTML5 is the language of the web. Used by millions of developers!

Allows developers to build apps …that can be distributed in using web skills and tools… native app stores.

12 Native vs. Web Apps Native Apps Single  Advanced UI interactions Platform  Smoothest performance  App store distribution

Partial Full Capabilities Capabilities

Web Apps  Web developer skills  Instant updates  Unrestricted distribution

Multiple Platforms

13 Hybrid HTML5 App Advantage Native Apps Single  Advanced UI interactions Platform  Smoothest performance  App store distribution

Partial Full Capabilities Capabilities

Web Apps Hybrid HTML5 Apps  Web developer skills  Web developer skills  Instant updates  Access to native platform  Unrestricted distribution  App store distribution

Multiple Platforms

14 Cordova* Bridges the HTML5 to Native Gap HTML5 Programming Native Programming

HTML5 App Hybrid HTML5 App Native App

Browser Accessed Downloadable via Stores Downloadable via Stores HTML5 based HTML5 based Native user experience Limited device API access Access to device APIs thru Cordova* Full device APIs access 15 Mobile HTML5 Web App Block Diagram

HTML5 Web App

Mobile Browser

RestrictedDevice Device Libraries Access

Mobile Device OS

16 Mobile Hybrid HTML5 WebView App Diagram

Hybrid Extension HTML5 Bridge WebView App

Device Libraries Native WebView

Mobile Device OS

17 Intel® XDK Cordova* Development Environment

Create Code Preview Debug Build

Code Samples HTML5 Code Editor Emulator CPU & Memory Profiling One click app packaging

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

Streamlined developer workflow Easily reach Advanced and easy-to-use tools to and building blocks for crafting across many help perfect the mobile apps great app experiences app stores

18 Android* WebView Problem

19 The Android* WebView Problem

System WebView

Chromium* 43+

Chromium 30 & 33

Non-Chromium

Chrome* Browser

https://developer.android.com/about/dashboards/index.html Chromium 43+ Data collected during a 7-day period ending on June 1, 2015. Any versions with less than 0.1% distribution are not shown. Consistent HTML5 App Behavior Default Android* WebViews Crosswalk Project WebViews

Crosswalk Project enables consistent behavior on Android 4.0+ devices

21 Intel® XDK Demo

22 Demo: Mobile App Design Tools

23 Intel® XDK Demo: Ripple Emulator

24 Intel® XDK Demo: App Preview

25 Intel® XDK Demo: Remote Debugging

26 Intel® XDK Demo: Remote Debugging

27 Intel® XDK Demo: Application Profiling

28 Intel® XDK Users and Builds – Trendlines November, 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

29 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

30 https://software.intel.com/en-us/android/app-testing 31 Download Intel® XDK

xdk.intel.com

32 32 Download Intel® App Preview Onto Your Device

Android* Windows® 8 Apple* iOS* bit.ly/1i8VEgl bit.ly/1j8rxdJ bit.ly/1a3W7Bk

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

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

www.youtube.com/watch?v=_4PF79XZWxg

34 34 “Things”

35 Intel® XDK IoT Edition

• IoT App • Companion App - Program device with Node.js* - Full Intel XDK Capability - Remote debug in Intel® XDK - Mobile Device  IoT device - Wireless connection . Wireless - http server - Interact/Control IoT device with - Socket server mobile device

36 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

37 What will you develop?

38 Legal Notices and Disclaimers

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

39 Домашнее задание

• Установить Intel® XDK • Создать своё собственное мобильное приложение • Прислать рабочий результат .xdk и .apk • Написать отчёт в свободной форме: - какова была основная идея - С какими проблемами столкнулись - Как их разрешили - Скриншоты - Что понравилось/не понравилось в среде разработки

40 Backup

41 Crosswalk External Extensions JS Extension Custom Native Apache Cordova* Runtime Model Framework APIs Framework

* Manifest Parsing SysApps APIs Tizen* APIs etc. Chromium Core

Extensions Chromium + Cordova Cross-platform Content Module content rendering in sandboxed Web Engine Network Stack libraries (base, ipc) processes Native UX Aura Framework ffmpeg skia windowing and compositing Integration

Ozone Compositor v8 WebRTC Android 4.0+ GPU Command Buffer

Android* OS

Windowing System Graphics Sensors Services Input Methods Input Devices

42 Crosswalk Project Adoption Timeline

2013/12 – First official release w/ Android* support Influence of Crosswalk Adopted by Intel® XDK and Construct 2 2014/6 – Adopted by Google* Mobile Chrome* App team HTML5 Framework Presented by Google team in Google IO 2014 / Tools 2014/7 – Adopted by Famo.us HTML5 Gaming 2014/7 – Being adopted by upstream Cordova*, Tools targeting Cordova 4.0 2014/9 – Adopted by Ludei (CocoonJS) Dozens of Apps w/ 2014/10 – 400+ Crosswalk Apps in Google Play HTML5 Apps 100,000+ Installs in Google 2014/11 – Adopted by AppGyver Play by 2015/1 2015/1 – Adopted by Ionic Standardization Presentation API 2015/1 – 3 w/ 1M-5M installs, 22 w/ 100,000+ installs (W3C/ECMAScript) SIMD.JS, WebCL*, Depth Camera ... 2015/3 - 1 w/ 14M+ active users ! - Youdao Note

43 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

44 Crosswalk Project Features and APIs (cont.)

• W3C Promises API • W3C SysApps: Raw Sockets • W3C Resource Timing API • W3C SysApps: Device • W3C User Timing API Capabilities • W3C Ambient Light API • W3C SysApps: App URI • W3C GamePad API • HTML5 input enhancements • EcmaScript SIMD - context menu, pattern attribute, data list element, autocomplete • W3C WebRTC • Beacon • W3C WebGL, Canvas • Vehicle API (IVI) • W3C Web Animations • DLNA API (IVI)

45 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

46 Embedded Crosswalk Project Build Options

MyApp.apk MyApp.apk MyApp.apk App code HTML, JS, CSS, etc. App code App code HTML, JS, CSS, etc. HTML, JS, CSS, etc. + OR Crosswalk (x86) Crosswalk (x86) Crosswalk (ARM) Crosswalk (ARM)

Two “thin” APK files One “fat” APK file • One for each CPU architecture • Includes x86 and ARM* Crosswalk size: Crosswalk size: • Adds 20 MB to APK • Adds 40 MB to APK • Adds 50 MB installed • Adds 100 MB installed Submit two apps to the Android* store Submit one app to Android store

47 Shared Crosswalk Project Library

MyApp.apk

App code HTML, JS, CSS, etc.

Crosswalk_x86.apk Crosswalk_arm.apk

Crosswalk (x86) Crosswalk (ARM*)

• Link to shared Crosswalk Project library • Dynamically downloaded • Version dynamically updated • Distributed via Android* store

48