Introduction to BlackBerry WebWorks

  • 3,259 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,259
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to BlackBerry WebWorksKen Wallis – Product Manager, WebWorksDEV301February 7, 2012
  • 2. Topics Web Apps vs. Native Apps The Browser. It starts here Frameworks (all flavours of the rainbow) Tooling Community Why BlackBerry® WebWorks™?
  • 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. 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.  Not a competition  ScaleNIBS  Breadth of skills  Cross-platform  Still lags native, but gap is closing* Native Is Better Syndrome
  • 6. Basic Anatomy HTML 5 + CSS3 + Javascript® + optional frameworks + Browser webview + package/deploy _____________________ = Mobile Web Application
  • 7. It starts with the Browser Acid3 Score: 100/100 CSS3 Selectors Test: 578/578 HTML5: 266/475
  • 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.  WebGL® - One of the first mobile implementations  HW accelerated  Tunnel Tilt (http://github.com/blackberry/WebGL-Samples)
  • 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 http://touchsolitaire.mobi/app/ http://jquerymobile.com/demos/
  • 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. • A Lightweight Independent CSS Engine• Micro Library for HW-accelerated visual affects• Entirely JS• Leverages CSS3, cross-platform• http://blackberry.github.com/Alice
  • 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. bbUI.js• BlackBerry native UI look and feel• Screen management, transitions• Optimized for mobile • Performance • Memory consumption • Dynamic screen resolution handling• http://www.github.com/blackberry/bbUI.js
  • 15. Screenshots 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. 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.  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. • 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. 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  https://github.com/blackberry/WebWorks-Community-APIs @ken_wallis– 22
  • 21. Config.xml
  • 22. Tooling IDE vs. SDK vs. VIM & Browser Web very different from Native  Not expecting a full IDE Edit -> Refresh, Rinse -> Repeat
  • 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. 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. 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. 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. 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. 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. Ultimately, you go to device… Go to your device options  Security tab  Activate the development mode  Set up a password
  • 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. Open Source Commitmenthttp://blackberry.github.com
  • 32. Community Active contributions to PhoneGap aka Callback aka Cordova Involvement with web toolkits JS Meetups, developer evangelism, awesome DevCon5 keynotes…
  • 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. 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. How to get there
  • 36. How to get there +
  • 37. How to get there • >60M BlackBerrys + =
  • 38. How to get there • >60M BlackBerrys + = • Every PlayBook
  • 39. How to get there • >60M BlackBerrys + = • Every PlayBook • BlackBerry® 10
  • 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. 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!
  • 42. THANK YOUKen Wallis – Product Manager, WebWorks (@ken_wallis)DEV301February 7, 2012