Introduction to BlackBerry WebWorks


Published on

This presentation provides developers with an introduction to BlackBerry® WebWorks. The slides cover the difference between Web and Native apps, the browser, frameworks, tooling, the community, and the benefits of WebWorks.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to BlackBerry WebWorks

  1. 1. Introduction to BlackBerry WebWorksKen Wallis – Product Manager, WebWorksDEV301February 7, 2012
  2. 2. Topics Web Apps vs. Native Apps The Browser. It starts here Frameworks (all flavours of the rainbow) Tooling Community Why BlackBerry® WebWorks™?
  3. 3. 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
  4. 4. 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
  5. 5.  Not a competition  ScaleNIBS  Breadth of skills  Cross-platform  Still lags native, but gap is closing* Native Is Better Syndrome
  6. 6. Basic Anatomy HTML 5 + CSS3 + Javascript® + optional frameworks + Browser webview + package/deploy _____________________ = Mobile Web Application
  7. 7. It starts with the Browser Acid3 Score: 100/100 CSS3 Selectors Test: 578/578 HTML5: 266/475
  8. 8.  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
  9. 9.  WebGL® - One of the first mobile implementations  HW accelerated  Tunnel Tilt (
  10. 10.  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 jQuery Mobile
  11. 11. 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
  12. 12. • A Lightweight Independent CSS Engine• Micro Library for HW-accelerated visual affects• Entirely JS• Leverages CSS3, cross-platform•
  13. 13. Example<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});
  14. 14. bbUI.js• BlackBerry native UI look and feel• Screen management, transitions• Optimized for mobile • Performance • Memory consumption • Dynamic screen resolution handling•
  15. 15. Screenshots 16
  16. 16. Example<div data-bb-type="panel-header">Font</div><div style="margin:3px;”> <div data-bb-type="label">Font Family:</div> <select data-bb-style="stretch"onchange="alert(Changed to value +this.options[this.selectedIndex].text)" id="fontFamily"> <option value="bbalphasans"selected="true">BBAlpha Sans</option> <option value="arial">Arial</option> <option value="andalemono">Andale Mono</option> </select></div>
  17. 17. 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
  18. 18.  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+, BlackBerry® Tablet OS, and future QNX® powered smartphones.
  19. 19. • User interface • Powered by Web • HTML and CSS Your app WebKit Engine• Application logic WebWorks Platform • JavaScript BlackBerry Platform • WebWorks APIs • Access to Platform OS BBM Security Push Monetization PIM Background Media Storage Multi-Tasking Hardware Compression …
  20. 20. WebWorks APIs Device Integration  Contacts, Calendar, Appointments, Identity, Homescreen, File I/O Platform Services  Push, Advertising, Payments, BBM™ Custom Extensions  Access any existing API on the BlackBerry platform  @ken_wallis– 22
  21. 21. Config.xml
  22. 22. Tooling IDE vs. SDK vs. VIM & Browser Web very different from Native  Not expecting a full IDE Edit -> Refresh, Rinse -> Repeat
  23. 23. 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 Test On Writing Code Test in Desktop Browser Test on Device Simulator
  24. 24. Web Testing There are some emerging solutions:  Weinre, JSConsole, Firebug Lite… Native simulators  Big and slow  95% done, but STILL will need physical device
  25. 25. 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
  26. 26. Ripple Goals Cross device and platform API support Fidelity emulation Dirt simple updates & upgrades Easily package your application Simple final testing and publishing @ken_wallis– 29
  27. 27. Native Developer Writing Code Test on Simulator Test on DeviceDesktop Web Developer Writing Code Test in Desktop BrowserMobile Web Developer Writing Code Test in Desktop Browser Test On Simulator Test on DeviceMobile Web Developer (with Ripple) Test on Writing Code Test in Ripple Device
  28. 28. BlackBerry WebWorks SDKs BlackBerry® PlayBook™ tablet PlayBook Development Adobe® AIR® SDK *.bar BlackBerry WebWorks SDK for PlayBook WebWorks ApplicationArchive (ZIP) Java® SDK *.cod Smartphone Development BlackBerry WebWorks SDK BlackBerry Smartphone
  29. 29. Ultimately, you go to device… Go to your device options  Security tab  Activate the development mode  Set up a password
  30. 30.  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
  31. 31. Open Source Commitment
  32. 32. Community Active contributions to PhoneGap aka Callback aka Cordova Involvement with web toolkits JS Meetups, developer evangelism, awesome DevCon5 keynotes…
  33. 33. WebKit Build Community HTML5, CSS3 Grow Involvement JavaScript TransparencyBlackBerry App World™ SuperApps Desktop Manager True multi-tasking OTA Background ProcessingBlackBerry® Enterprise Native App Integration Server Commercial Services Push Data
  34. 34. Why BlackBerry? >75 Million Subscribers >2 Billion app downloads > 174M app downloads a month > 160 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 …..
  35. 35. How to get there
  36. 36. How to get there +
  37. 37. How to get there • >60M BlackBerrys + =
  38. 38. How to get there • >60M BlackBerrys + = • Every PlayBook
  39. 39. How to get there • >60M BlackBerrys + = • Every PlayBook • BlackBerry® 10
  40. 40. For More Information… Tons of sessions that cover HTML5/WebWorks  14 DEV sessions on various web topics  9 COM sessions given by community developer  2 LABS: hands-on experience for developers in building BlackBerry WebWorks applications  ASK (Ask the Experts) – ask them anything web related!  App Express - Build a WebWorks app and submit to App World on the spot! @ken_wallis– 44
  41. 41. Resources  Download Ripple Beta  No signups, no costs!  Vendor signup, no costs!
  42. 42. THANK YOUKen Wallis – Product Manager, WebWorks (@ken_wallis)DEV301February 7, 2012