HTML5 and BlackBerry:
The next level of Web development
Ken 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
NIBS
* Native Is Better Syndrome
-
Not a competition
Scale
Breadth of skills
Cross-platform
Still lags native, but gap is
closing
Basic Anatomy
• HTML 5
• + CSS3
• + Javascript
• + optional frameworks
• + Browser webview
• + package/deploy
_____________________
• = Mobile Web Application
It starts with the Browser
Acid3 Score: 100/100
CSS3 Selectors Test:
578/578
HTML5: 260/450
• 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!
Sencha Touch
http://touchsolitaire.mobi/app/
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 Statement
To 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.
• User interface
• Powered by Web
• HTML and CSS
Your app
• Application logic
WebKit Engine
• JavaScript®
• WebWorks APIs
• Access to Platform
OS
WebWorks Platform
BlackBerry Platform
BBM
Monetization
Media
Hardware
Security
PIM
Storage
Compression
Push
Background
Multi-Tasking
…
Tooling
• IDE vs. SDK vs. VIM & Browser
• Web very different from Native
• Edit -> Refresh, Rinse -> Repeat
A day in the life…
Native Developer
Writing Code
Test on Simulator
Test on Device
Desktop Web Developer
Writing Code
Test in Desktop Browsers
Mobile Web Developer
Writing Code
Test in Desktop Browser
Test On Simulator
Test on Device
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
Native Developer
Writing Code
Test on Simulator
Test on Device
Desktop Web Developer
Writing Code
Test in Desktop Browser
Mobile Web Developer
Writing Code
Test in Desktop Browser
Test On Simulator
Test on Device
Mobile Web Developer (with Ripple)
Writing Code
Test in Ripple
Test on
Device
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…
WebKit
HTML5, CSS3
JavaScript
App World
Desktop Manager
OTA
BlackBerry Enterprise
Server
Build Community
Grow Involvement
Transparency
SuperApps
True multi-tasking
Background Processing
Native App Integration
Commercial Services
Push Data
So, Why BlackBerry & WebWorks?
>70 Million Subscribers
>1 Billion app downloads
> 5M app downloads a day
129 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 content
BBM platform & viral application discovery
…..
How to get there
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
• 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