Upload
lytuyen
View
217
Download
0
Embed Size (px)
Citation preview
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
6
Средства быстрого прототипирования интерфейсов мобильных приложений
• Бумага и ручка
• Flinto (от $8 в месяц)
• InVision (бесплатно / $15 в месяц)
• Proto.io (бесплатно / $24 в месяц)
• Marvel (бесплатно)
• Codiqa (от $16 в месяц)
• UXPin ($14.99 в месяц)
• FluidUI (от $12 в месяц)
6
9
Что общего между этими платформами?
9
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
12
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.
13
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
14
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
15
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
16
Mobile HTML5 Web App Block Diagram
Device Libraries
Mobile Device OS
HTML5 Web App
Mobile Browser
Restricted Device Access
17
Mobile Hybrid HTML5 WebView App Diagram
Device Libraries
Mobile Device OS
Native WebView
HTML5 WebView App
Hybrid ExtensionBridge
18
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
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.
21
Consistent HTML5 App Behavior
Default Android* WebViews Crosswalk Project WebViews
Crosswalk Project enables consistent behavior
on Android 4.0+ devices
29
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
30
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
33
Download Intel® App Preview Onto Your Device
Android*
bit.ly/1i8VEglApple* iOS*
bit.ly/1a3W7Bk
Проблемы со сканированием? Попробуй Google Goggles* или RedLaser* Barcode.
Windows® 8bit.ly/1j8rxdJ
36
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
37
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
39
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.
40
Домашнее задание
• Установить Intel® XDK
• Создать своё собственное мобильное приложение
• Прислать рабочий результат .xdk и .apk
• Написать отчёт в свободной форме:
- какова была основная идея
- С какими проблемами столкнулись
- Как их разрешили
- Скриншоты
- Что понравилось/не понравилось в среде разработки
42
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.
43
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
44
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
45
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)
46
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
47
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