Native or HTML5? Only the developer knows



Back in November of last year, we started up a little open source project which has quickly been gaining steam within our web development community. It was born from humble beginnings as a set of UI examples to show how to style your BlackBerry® WebWorks™ + HTML5 content with CSS to look like a native app, allowing users to have a consistent application feel in a web application. After a lot of hard work, I’m happy to announce that bbUI now has BlackBerry® 10 support…but more on that later 🙂

A little bit of History and Philosophy

While there are existing UI frameworks out there such as Sencha and jQuery Mobile, there was still a need to create a pixel-perfect application on the BlackBerry platform that also incorporated unique BlackBerry input mechanisms. Features such as the optical track-pad to give end users the experience they expected on a BlackBerry smartphone. Typically these other frameworks are touch only, and the trackpad has been the center of attention on existing BlackBerry smartphones as it requires some special treatment.

We took the opportunity to break out the look and feel provided in those examples, and set out on an adventure to transform them into a JavaScript® UI toolkit that would incorporate concepts of Adaptive Web Design to handle the different devices in the BlackBerry portfolio. This meant handling touch/trackpad inputs, multiple screen resolutions, proper memory management, and an evolution of the BlackBerry UI from BlackBerry® 5.0 to today.

The whole philosophy of the toolkit is to provide a responsive native-looking experience for the end user while incorporating best practices in the toolkit to make it as fast as possible on each of the different device versions. This means things like using AJAX and HTML fragments for pushing/popping screens to save precious memory, and only manipulating the styling of the screen when it’s not connected to the DOM to reduce layout computation.

We’ve provided a bunch of samples and documentation on how to use the toolkit, its controls and more information around the philosophy, so please do check it out on github. We’ve also been getting some great community contributions to the toolkit. So a big “thank you” goes out to those who have been helping!

Now for the cool stuff

We just posted up the latest version of bbUI that incorporates the BlackBerry 10 look and feel so that your BlackBerry WebWorks + HTML5 applications can look right at home on BlackBerry 10. Oh…and did I mention that the toolkit also provides this same look and feel on the BlackBerry® PlayBook™ tablet? Giddy-up!

That’s right – this means you have the ability to bring all the BlackBerry 10 core controls and concepts such as action bars, slide in menus, grid lists, context menus, dropdowns, buttons and so on to your BlackBerry WebWorks application on BlackBerry PlayBook tablets, and also on BlackBerry 10.

While there’s already a lot in bbUI to get you started, there’s still more BlackBerry 10 goodies to come:

  • Tab overflow menus
  • Sliders and progress indicators
  • Checkboxes and Radio buttons
  • Top title bars with integrated toolbar buttons

We’ve posted the details on how to use all these features right in the root of the github project so that you can get rolling today. I’m always tweeting about #bbUI, so if you want to hear my constant ramblings feel free to follow me @brcewane…that’s right, “I’m Batman.”

Now for the eye candy!

Grid Lists and Image Lists:


Action Bar Toolbars with Tabs, Buttons and sliding overflow menus:

Press and hold slide in context menus. “Peek” the menu on press-and-hold to show the icons, and then swipe if you want to bring it into full view:

Crazy animated Dropdown buttons, Inputs with built in delete buttons and styled buttons and pill-buttons:


Join the conversation

Show comments Hide comments
+ -