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

Open

SourceSt

anda

rds

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