HTML 5 and Black Berry The next level

HTML 5 and Black. Berry: The next level of Web development Ken Wallis – Product Manager, Web. Works

Topics • • • Web Apps vs. Native Apps The Browser. It start’s here Frameworks (all flavours of the rainbow) Tooling Community Why Black. Berry? Why Web. Works?

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 • + CSS 3 • + Javascript • + optional frameworks • + Browser webview • + package/deploy ___________ • = Mobile Web Application

It starts with the Browser Acid 3 Score: 100/100 CSS 3 Selectors Test: 578/578 HTML 5: 260/450

• Black. Berry has an industry leading browser experience – Web. Kit since 6. 0, Provided by Torch Mobile team • • Full HTML 5, CSS 3, Flash position: fixed, overflow: auto Web. Inspector Optimized and hardware accelerated – CSS 3 animations – Canvas – JIT’ed Java. Script engine

• Web. GL - One of the first mobile implementations – HW accelerated – Tunnel Tilt (http: //github. com/blackberry/Web. GL-Samples)

• Touch optimized Web frameworks support multiple platforms – Examples: j. Query 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/ j. Query Mobile http: //jquerymobile. com/demos/

Be Careful… • Frameworks are built cross-platform – Even though it’s Web. Kit, 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 CSS 3, 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. rand. Angle(-45, 180)+’%’ +app. rand. Angle(-45, 180)+'%', random: 10 });

Web. Works 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 (HTML 5, CSS 3, Java. Script) • Framework to leverage Black. Berry API’s in a secure manageable container • Black. Berry 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 Web. Kit Engine • Java. Script® • Web. Works APIs • Access to Platform OS Web. Works Platform Black. Berry 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. Black. Berry Style. • Ripple emulator: – Testing in a browser like env. – Cross-platform! (Phone. Gap, Mobile Web, …) – Simulate device APIs and sensors – F 5, 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 Web. Kit – Ripple – Web. Works – Samples (API, UI, Native-feel UI) – Community APIs – More on the native side (gaming, toolkits…)

Community • Active contributions to Phone. Gap aka Callback aka Cordova • Involvement with web toolkits • JS Meetups, developer evangelism, awesome Dev. Con 5 keynotes…

s ar d nd Sta en e Op urc rib st Di n io ut App World Desktop Manager OTA Black. Berry Enterprise Server So Web. Kit HTML 5, CSS 3 Java. Script l fu n r e tio w a Po egr t In Build Community Grow Involvement Transparency Super. Apps True multi-tasking Background Processing Native App Integration Commercial Services Push Data

So, Why Black. Berry & Web. Works? >70 Million Subscribers >1 Billion app downloads > 5 M app downloads a day 129 Countries (App World) 13% of vendors make > $100, 000 (more than Apple, Android) 3 end-user payment options: carrier, Pay. Pal, credit Advertising service, subscription based content BBM platform & viral application discovery …. .

How to get there

How to get there +

How to get there + = • >51 M Black. Berrys

How to get there + = • >51 M Black. Berrys • Every Play. Book

How to get there + = • >51 M Black. Berrys • Every Play. Book • All Future Devices

• App Express – Wednesday evening 6 – 9 PM – Bring any/all web content on a USB stick – Make an app – 200 FREE Play. Books! • Visit our booth, more Play. Books…

Resources http: //developer. blackberry. com/html 5 – 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, Web. Works