HTML5 and BlackBerry:The next level of Web developmentKen Wallis – Product Manager, WebWorks
Topics• Web Apps vs. Native Apps• The Browser. It start’s here• Frameworks (all flavours of the rainbow)
• Tooling• Community• Why BlackBerry? Why WebWorks?
Web Apps vs. Native apps• Different feel (or are they?)• Users expect App life cycle
– Driven by browser, but transparent to the user– Download– Install– Launch with icon
• Ultimately, the user doesn’t care it’s web
Web Apps vs. Native apps• Am I web? Am I native?• Key: where the app and the
platform meet– Power of web design and interaction– Platform services should feel
cohesive– Balance
- Not a competition- Scale- Breadth of skills- Cross-platform- Still lags native, but gap is
closing
NIBS* Native Is Better Syndrome
Basic Anatomy• HTML 5• + CSS3• + Javascript• + optional frameworks• + Browser webview• + package/deploy_____________________• = Mobile Web Application
Acid3 Score: 100/100CSS3 Selectors Test:
578/578HTML5: 260/450
It starts with the Browser
• BlackBerry has an industry leading browser experience– WebKit since 6.0, Provided by Torch Mobile team
• Full HTML5, CSS3, Flash• position: fixed, overflow: auto• WebInspector• Optimized and hardware accelerated
– CSS3 animations– Canvas– JIT’ed JavaScript engine
• WebGL - One of the first mobile implementations– HW accelerated– Tunnel Tilt (http://github.com/blackberry/WebGL-Samples)
• Touch optimized Web frameworks support multiple platforms– Examples: jQuery Mobile/UI, Sencha Touch, Dojo
• Improve the UI and functionality of your application– Save time and money by using existing code!
http://touchsolitaire.mobi/app/
Sencha Touch jQuery Mobile
http://jquerymobile.com/demos/
Be Careful…• Frameworks are built cross-platform
– Even though it’s WebKit, differences in each– Mobile vendors look for differentiators– Varying levels of support– Framework behaviours may differ from platform norm– Test on all platforms
• Behaviour consistency• performance
• A Lightweight Independent CSS Engine• Micro Library for HW-accelerated visual affects• Entirely JS, separate JS files for each effect• Leverages CSS3, cross-platform• http://blackberry.github.com/Alice
<script src=“alice.core.js"></script><script src=“alice.toss.js"></script>
alice.toss({ id: "overlay", duration: 2000, origin: app.randAngle(-45,180)+’%’
+app.randAngle(-45,180)+'%', random: 10});
WebWorks Mission StatementTo create, as a community, a simple to use cross platform
SDK for Web Developers to package their Web assets as a mobile application which has Secure access to deeply
integrated system level APIs
• Create standalone applications with standard web technology (HTML5, CSS3, JavaScript)
• Framework to leverage BlackBerry API’s in a secure manageable container
• BlackBerry OS 5.0/6.0/7.0+, Tablet OS, and future QNX powered smartphones.
WebKit Engine
WebWorks Platform
SecurityPIM
Storage
Push
MediaHardware
BBMMonetization
Compression
Background
Multi-Tasking
BlackBerry Platform
…
Your app
• User interface• Powered by Web• HTML and CSS
• Application logic• JavaScript®• WebWorks APIs• Access to Platform
OS
Tooling• IDE vs. SDK vs. VIM & Browser• Web very different from Native• Edit -> Refresh, Rinse -> Repeat
A day in the life…
Test on DeviceTest On Simulator
Test on DeviceTest on SimulatorWriting Code
Native Developer
Test in Desktop BrowsersWriting Code
Desktop Web Developer
Test in Desktop BrowserWriting Code
Mobile Web Developer
Web Testing• There are some emerging solutions:
– Weinre, JSConsole, Firebug Lite…• Native simulators
– Big and slow– 95% done, but STILL will need physical device
Web Testing. BlackBerry Style.• Ripple emulator:
– Testing in a browser like env.– Cross-platform! (PhoneGap, Mobile Web, …)– Simulate device APIs and sensors– F5, CMD-R
• Remote Web Inspector!– Debug on-device– Fully functional, including JS debugging
Test on Device
Test on DeviceTest On Simulator
Test on DeviceTest on SimulatorWriting Code
Native Developer
Test in Desktop BrowserWriting Code
Desktop Web Developer
Test in Desktop BrowserWriting Code
Mobile Web Developer
Test in RippleWriting Code
Mobile Web Developer (with Ripple)
Ultimately, you go to device…• Go to your device
options– Security tab– Activate the
development mode– Set up a password
• Go to the browser on your device– Go to Options -> Privacy and Security– Enable Web Inspector
• Information will be displayed as to how to connect to the browser
Open Source Commitment
Community• http://blackberry.github.com
– Upstream WebKit– Ripple– WebWorks– Samples (API, UI, Native-feel UI)– Community APIs– More on the native side (gaming, toolkits…)
Community• Active contributions to PhoneGap aka Callback
aka Cordova• Involvement with web toolkits• JS Meetups, developer evangelism, awesome
DevCon5 keynotes…
Distribution
OpenSourceSta
ndar
ds
Powerful
Integration
WebKit HTML5, CSS3
JavaScript
Build CommunityGrow Involvement
Transparency
App WorldDesktop Manager
OTABlackBerry Enterprise
Server
True multi-taskingBackground ProcessingNative App IntegrationCommercial Services
Push Data
SuperApps
So, Why BlackBerry & WebWorks?>70 Million Subscribers
>1 Billion app downloads> 5M app downloads a day129 Countries (App World)
13% of vendors make > $100,000 (more than Apple, Android)3 end-user payment options: carrier, PayPal, credit
Advertising service, subscription based contentBBM platform & viral application discovery
…..
How to get there
How to get there
+
• >51M BlackBerrys
How to get there
+ =
• >51M BlackBerrys
• Every PlayBook
How to get there
+ =
• >51M BlackBerrys
• Every PlayBook
• All Future Devices
How to get there
+ =
• App Express– Wednesday evening 6 – 9 PM– Bring any/all web content on a USB stick– Make an app– 200 FREE PlayBooks!
• Visit our booth, more PlayBooks…
Resources http://developer.blackberry.com/html5
– Download Ripple Beta– No signups, no costs!
• http://blackberry.github.com• http://appworld.blackberry.com/isvportal
– Vendor signup, no costs!
THANK YOU!Ken Wallis – Product Manager, WebWorks