© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® HTML5 Development Environment
Helping Developers Efficiently Produce True Cross-Platform HTML5 Apps
April 2013
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Q&A – attendee questions that I did not answer in the presentation
• Q: Is source code of my app safe after uploading to the build process in the cloud? A: the „cloud“ service is running on a secure server that is only accessible to the customer and selected Intel employees.
• Q: Java poses a security risk and more and more developers want to get rid of it. Why do you have a Java backend in the Intel XDK? A: We are working on removing any use of Java in an update of XDK.
• Q: Do I still need an Apple developer license, if I build my HTML5 app and then have it packaged for Apple‘s app store in the App Dev center? A: You still need an account at the respective app store (Apple, Google, Windows) to submit your app. Submission is a separate step that you need to do manually, just like before.
• Q: Currently the Chrome browser is required on the development host for running the XDK. Will you support other browsers? A: We are planning to remove browser dependencies for the XDK. When using a browser‘s development tools (eg for debuggging) you will still need a browser.
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel is Making HTML5 Better
Intel is helping software developers around the globe to create and deploy incredible cross-platform experiences, reach more customers, reduce costs and improve time-to-market
3
Intel contributes to Open Source, Standards, and provides Tools & Resources to support HTML5
3
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Delivering Tools & Resources— From Development to Deployment
4
http://software.intel.com/html5
Intel® HTML5 Developer Zone
Intel® HTML5
Development Environment
HTML5 Playground BETA
Intel® HTML5 App Porter Tool BETA
Tutorials, videos, documentation, forums
Let‘s have a closer look!
4
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Cross Platform Tools Requirements: What App Developers Want Most
• Availability Across Platforms
• Development Speed
• Short Learning Curve
• Access To Native APIs
• Performance
• Native UI Look & Feel
Source: Vision Mobile Developer Economics 2013 http://www.visionmobile.com
5
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® HTML5 Development Environment
6
App Dev Center
Intel®XDK
Intel® HTML5 Development Environment = Intel® XDK + App Dev Center
• Developer Frontend • Chrome* Browser plug-in with
local project file storage capabilities
• Develop offline and online • Windows*, OS X*
• Intel cloud-based tools & build service for Apple* App Store Google* Play Windows* Store HTML5 Web Apps
• No need to download and learn Native Platform SDKs
A no cost, integrated and front-to-back HTML5 App Dev Environment for True Cross-Platform Apps for multiple App Stores and form factor devices
6
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
What‘s New – April 2013
7
Windows* 8
• Build Support for Windows* 8 Store
Integrated Project Wizard
• Now fully integrated into Intel® XDK
• Graphical wizard for website-like apps
• Games/physics app framework
• Demo examples, and more...
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® HTML5 Development Environment Intel® XDK & App Dev Center
8
Develop Test Deploy
Device Emulator
Build System
Coding Editor
On-Device App Tester
JS Debugger
Hybrid Apps
Web Apps
On-Device App Debugger
App Starter Project Wizard
App Framework Optimized JS libs
Style Builder CSS generator
App Game Interface
Optimized Canvas
App Dev Center Intel®XDK
Develop, Test & Deploy True Cross-Platform HTML5 Apps Write Once, Deploy Everywhere
software.intel.com/html5
Apple* AppStore
Google* Play*
Windows* Store
Chrome* Store
Facebook*
Own Website
8
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Platform Availability
HYBRID APPS PACKAGED FOR STORES
iOS Apple* App Store
Android* Google* Play
- Nook* Nook* Store
- Amazon* Amazon* Appstore for Android
Windows*8 Windows* Store
WEB APPS STORES
HTML5 Facebook*
HTML5 Intel® AppUpSM
HTML5 Chrome* Store
HTML5 Your Own Website!
Write ONCE – package for MULTIPLE app stores
9
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others. 10
10
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others. 11
Frameworks/Libraries App Framework
App Game Interfaces Cloud Services APIs
Build System Packages apps for store distiribution
iOS, Android, Amazon, Nook, Windows 8
Intel® XDK Chrome Browser extension - Control Panel
Quick-Start App Creation: App Starter
Samples Wizard App Prototyper
Editing Integrated editor or Use your own
Weltmeister Integration
Testing Emulators: form factors & sensors
App Debugger App Tester
http://software.intel.com/html5tools
Download Cloud Based
App Dev Center control panel
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® XDK
Intel® XDK – an easy cross-platform app development environment, hosted in a browser
Develop Test Deploy
12
• Downloadable Development Front End
• Chrome* Browser Plug-in Windows*, OS X*
• Java Backend Local project file
handling
Offline Development
• Connects to App Dev Center
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® XDK Project Setup
Where do you want to go? WebApp, Hybrid App, Game… just click
13
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Alternatively: Start In The Cloud
14
14
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
App Starter • For website-like
apps
- Themes
- Menu structures
- pages etc.
App Starter
15
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Continue Development With Intel® XDK
16
16
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Code Editor
The Intel® XDK Is The Face For The HTML5 App Developer
Code Editor with
Syntax coloring
Project folders
with local files
Toggle between
Emulation and
Editing
17
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
App Framework - Optimized JS Libraries
App framework provides great JS performance
• Designed for mobile devices supporting latest CSS3 and HTML5 features
• Using built-in browser features, makes the framework fast and light
• Uses CSS3 animations, W3C selectors and native scrolling on iOS for a great performance
jQMobi
• jQuery compatible APIs • 60+ APIs • built from ground up • light, fast, and excel on mobile devices. • takes advantage of new browser features • supports valid W3C CSS selectors
jQUi • Optimized for Android*, iOS*, BlackBerry* • Works on webkit browsers for mobile
smartphones • Supports fixed headers and footers for a
more native-like look & feel
jQPlugins
• Plug-ins power the core of jQUi • Utilizes
Scrolling bar lib CSS3 Animation lib Popup box Animation sheet, etc.
$.is$ $.map
$.isFunction .find
.addClass
$.ui.popup
$.ui.setBackButtonStyle
$.ui.setTitle
18
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Style Builder – A CSS File Generator
Tools to make your life easier…
Let Style Builder Create Your CSS
file
19
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
App Game Interface - accelerated canvas
implementation - multi channel sound - accelerated physics
more realistic modeling
and smoother gameplay more native-like
capabilities and performance.
App game interfaces for faster HTML5 games
optimized implementations for iOS*, Android*, Windows*8
20
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Test
21 21
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Device Emulator
Device Emulator
GPS, Accelerometer,
Data Connection
simulation
Select devices...
Develop Test Deploy
22
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Debugging
Write
Chrome Debug Console
App debugging with Chrome* debug console
23
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
App Dev Center
On-Device App Testing
„app-lab“ app
on real device,
emulates
Phonegap API App runs on
target device
On-device app preview – no need to go through Apple* App Store or Google* Play for testing
24
real screenshot from an iPhone 5*
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
On Device Debugging
Send debug messages from App to host – via internet
25
Develop Test Deploy
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Deploy
26 26
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Build Process
• Upload Project With Intel® XDK to App Dev Center
• Select Target Platform and Build App – one by one
No need to download and learn native platform SDKs to create Apps Apple* App Store, Google* Play, Windows* Store
Build process for HYBRID and WEB apps - in the cloud
Develop Test Deploy
27
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® HTML5 App Porter Tool Helping iOS* Developers Broaden Their
Market Reach Through HTML5
28
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Have You Created an iOS* App?
...and you want to broaden your market reach, by extending your iOS* app to other platforms?
We may have something for you!
Apple* App Store
Google* Play*
Facebook* Store Chrome* Store Own Website
Windows* Store
29
Your
App
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Intel® HTML5 App Porter Tool iOS* App to HTML5 App Converter
• Minimizes porting effort to generic HTML5
• Clean 1-to-1 source code conversion, incl. comments
• Indicates source code that needs manual translation
• Even 80% API match helps to reduce porting efforts
• Industry leading solution
Expands market reach for Objective-C* app developers
Download and test it - at no cost software.intel.com/html5
30
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
App Is Now Ready For Next Steps
Automatic Translation is
done
Now it‘s up
To you to
finishing
the porting
Clearly indicates which parts need to be converted manually
31
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Before / After porting
iOS* App
app
32
HTML5 App
32
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others.
Summary
• Intel is making HTML5 better through Open Source Contributions, Standards, Tools & Resources
• At no cost, Intel provides a complete, integrated HTML5 development environment to support true cross-platform apps
• Intel® HTML5 App Porter Tool - Beta helps to broaden the market reach for existing iOS* apps by converting them to HTML5 cross-platform
Register and start building your HTML5 app today!
http://software.intel.com/html5
33
© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.
and/or other countries. *Other names and brands may be claimed as the property of others. 34