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

Transcription

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

2 Intel XDK HTML5 Cross-Platform Development Environment Olga Mineeva Product Validation Engineer, Intel Corporation 2

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 3

4 Native apps development means

5 walled gardens systems 5 5

6 Что общего между этими платформами? Apple* ios* BlackBerry* Google* Android* Microsoft* Windows* Phone Mozilla* Firefox* OS Tizen* 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, cochaired by Intel and Samsung APIs Objective C; HTML5 in browser and hybrid 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 only HTML5 preferred; C/C++ Architecture support OEM and service provider support Device categories supported ARM only ARM only ARM and x86 ARM only ARM only ARM and x86 Leading OEM, broad SP support Smartphone, tablet, TV 1 OEM, good SP support Smartphone, tablet Many OEMs, broad SP support Smartphone, tablet, TV Many OEMs, broad SP support Smartphone, tablet Limited OEMs, good SP support Entry smartphone Supported by leading OEM, good SP support Smartphone, tablet IVI, TV, PC 6

7 HTML5 - это спецификация HyperText Markup Language, version 5 Что нового: 7 7

8 HTML5 - новое поколение веб-стандартов 8 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. 9

10 Native vs. Web Apps Single Platform Native Apps Advanced UI interactions Smoothest performance App store distribution Partial Capabilities Full Capabilities Web Apps Web developer skills Instant updates Unrestricted distribution Multiple Platforms 10

11 Hybrid HTML5 App Advantage Single Platform Native Apps Advanced UI interactions Smoothest performance App store distribution Partial Capabilities Full Capabilities Web Apps Web developer skills Instant updates Unrestricted distribution Hybrid HTML5 Apps Web developer skills Access to native platform App store distribution Multiple Platforms 11

12 Cordova * Bridges the HTML5 to Native Gap HTML5 Programming Native Programming HTML5 App Hybrid HTML5 App Native App 12 Browser Accessed HTML5 based Limited device API access Downloadable via Stores HTML5 based Access to device APIs thru Cordova * Downloadable via Stores Native user experience Full device APIs access

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

14 Mobile Hybrid HTML5 WebView App Diagram Hybrid Extension Bridge HTML5 WebView App Device Libraries Native WebView Mobile Device OS 14

15 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 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 15

16 16 Android* WebView Problem

17 The Android * WebView Problem System WebView Chromium * 43+ Chromium 30 & 33 Non-Chromium Chrome * Browser Data collected during a 7-day period ending on June 1, Any versions with less than 0.1% distribution are not shown. Chromium 43+

18 Consistent HTML5 App Behavior Default Android * WebViews Crosswalk Project WebViews Crosswalk Project enables consistent behavior on Android 4.0+ devices 18

19 19 Intel XDK Demo

20 20 Demo: Mobile App Design Tools

21 21 Intel XDK Demo: Ripple Emulator

22 22 Intel XDK Demo: App Preview

23 23 Intel XDK Demo: Remote Debugging

24 24 Intel XDK Demo: Remote Debugging

25 25 Intel XDK Demo: Application Profiling

26 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 26

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 27

28 Download Intel XDK xdk.intel.com 28 28

29 Download Intel App Preview Onto Your Device Android * bit.ly/1i8vegl Windows 8 bit.ly/1j8rxdj Apple * ios * bit.ly/1a3w7bk Проблемы со сканированием? Попробуй Google Goggles * или RedLaser * Barcode. 29

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

31 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 32

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 33

34 34 What will you develop?

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

36 36 Backup

37 Crosswalk Runtime Model JS Extension Framework External Extensions Custom Native APIs Apache Cordova * Framework Manifest Parsing SysApps APIs Tizen * APIs etc. Chromium * Core Chromium Cross-platform libraries (base, ipc) Content Module content rendering in sandboxed processes Aura Framework windowing and compositing Blink Web Engine ffmpeg Network Stack skia Extensions + Cordova Native UX Integration Ozone Compositor GPU Command Buffer v8 WebRTC Android 4.0+ Android * OS Windowing System Graphics Sensors Services Input Methods Input Devices 37

38 Crosswalk Project Adoption Timeline 2013/12 First official release w/ Android * support Adopted by Intel XDK and Construct /6 Adopted by Google * Mobile Chrome * App team Presented by Google team in Google IO /7 Adopted by Famo.us 2014/7 Being adopted by upstream Cordova *, targeting Cordova /9 Adopted by Ludei (CocoonJS) 2014/ 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 HTML5 Framework / Tools HTML5 Gaming Tools HTML5 Apps Standardization (W3C/ECMAScript) Influence of Crosswalk Dozens of Apps w/ 100,000+ Installs in Google Play by 2015/1 Presentation API SIMD.JS, WebCL *, Depth Camera... 38

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 Picture element, srcset attribute Native Client - Portable version, pnacl Manifest - Standard manifest for web applications 39

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) 40

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 41

42 Embedded Crosswalk Project Build Options MyApp.apk App code HTML, JS, CSS, etc. Crosswalk (x86) MyApp.apk App code HTML, JS, CSS, etc. + OR Crosswalk (ARM) MyApp.apk App code HTML, 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 42

43 Shared Crosswalk Project Library MyApp.apk App code HTML, 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 43