“A beautiful use of the BlackBerry 10 technology.”

“An absolutely amazing app. Well done.

Many of these reviews refer to USA TODAY as a Native app – in fact, some encourage Native developers to produce apps of this quality – especially impressive as it is a 100% HTML5 WebWorks app.

“Great Native App. Very addictive as you can easily navigate through the menu”

“Watch and learn, that’s how you make a native app”

“Must have. Go native or go home!”

USA TODAY is a perfect example of what can be achieved using HTML5 and the powerful BlackBerry 10 WebWorks Platform to produce an app that proudly carries the Built for BlackBerry ribbon.

Performance

Performance was critical to USA TODAY – news, sports, weather, pictures and video sections are combined into a responsive, intuitive viewing experience. Each section contains subsections, while each subsection contains lists and grids of articles. With this much content, view management becomes quite difficult. Having worked closely with Backbone.js (http://backbonejs.org) for a few years, I did not hesitate to recommend it to be the ‘backbone’ of the USA TODAY application.

Backbone.js is a MVC (Model-View-Controller) framework that provides the tools and discipline to write de-coupled, re-usable code while not imposing any non-standard syntax. It is also highly customizable, which is ideal for large projects.

The USA TODAY application uses Backbone.js to its full potential. Articles, gallery, weather, videos, and other data are stored as Data Models and Collections, which are passed to views that combine the data with HTML templates to display it on the screen.

A View is a JavaScript object that contains a set of properties and methods responsible for displaying a region of the application UI. The View also maintains its own DOM structure, which is typically compiled with data to render and display on the screen. HTML templates are code snippets that are re-used across an application. These templates may vary from static pieces of UI to complex dynamic views that contain logic such as loops.

These views are also responsible for listening for changes in the data of the collections and updating regions of UI when a change occurs. Picture the weather section for example: if the weather data on the server changes, we need to update the UI. In order for the UI to reflect the change in the weather and change the graphic from cloudy to sunny, the data model can explicitly tell the view to update, but by doing so, the view becomes tightly coupled with the data model. If we were to add a weather widget to the main screen of the application – we are also required to add a call its update methods from within the data model and so on.

Backbone and other MVC frameworks encourage the use of Publish/Subscribe programming pattern, where views subscribe to changes on the data model. When the data changes on the server, subscribed views receive a change notification, which typically triggers an update of UI. The data model does not need to be aware of what views are subscribed, and therefore remains flexible and de-coupled. This is very similar to how we bind to click events on buttons – imagine having to change the button’s logic to call functions, versus listening for click events.

This pattern also allows for smaller UI region updates. For example, we can bind a function to only update the current weather UI region, if the weather for the week hasn’t changed. Smaller UI updates result in smaller re-render regions, which drastically improve performance, especially when targeting mobile.

The USA TODAY application uses this pattern throughout the application, which makes UI updates efficient and seamless.

Code organization

As the complexity of any application increases, organizing code into modules becomes a necessity. Unfortunately, JavaScript does not natively satisfy all use cases for ‘modules’ yet, so USA TODAY relies on Require.js (http://requirejs.org) to separate code into neatly organized modules that are confined to performing a single task. Require.js supports Asynchronous Module Definition (AMD), that allows modules to be loaded as needed at run-time, rather than making them available as the application initializes using tags. Require also adds the ability to define dependencies, similar to more traditional languages such as C++ and Java. This ensures required scripts or templates are available to the module when it is initialized. This also means fewer name conflicts, as libraries and functions are defined in the scope of the module rather than globally, as with the tag.

The source code for USA TODAY is inside an intuitive folder structure. Views, collections, models and templates are separate. Logic, structure and styles are separated into JavaScript, HTML and CSS respectively, which is a great practice for all HTML5 developers. This allows for easy maintenance and debugging as well as adding of new features, while maintaining stability. Modules can be swapped in and out, as they are designed to be de-coupled from one another, and communicate with each other using a router and URL hashchanges.

UI/UX decisions

Aside from great performance, USA TODAY offers stunning native looking graphics and transitions that make it shine as a Built for BlackBerry App.

The menu, action bar and all other UI elements were made from scratch to closely mimic their native counterparts. They’ve closely followed our UI guidelines, including colors, graphics, sizes that make this application practically indistinguishable from a native BlackBerry 10 application.

(http://developer.blackberry.com/devzone/design/bb10/application_structure.html).

When viewing an article, frequently used actions such as font size and share are located on the action bar, which is very intuitive to both existing BlackBerry 10 users as well as those new to the platform.

Within the article, USA TODAY allows navigating back and forth using swipe gestures. This allows the reader to navigate through a list of articles without ever leaving the article view – a fantastic UX decision that keeps the user immersed in the experience, which is one of the core promises of the BlackBerry 10 platform.

Using the font action, readers can quickly modify the font-size, which is a key feature in any news reader app.

The main menu reveals itself as the content view slides out in a smooth transition, thanks to hardware accelerated CSS3 animations. There is lots of attention to detail here – transitions are timed in way that they don’t interfere with each other, such as the gentle fading out of the content view to focus on the menu, which is done right after the menu is fully revealed, as to not interfere with the sliding animation resulting in a smooth transition.

The main menu is a great example of how to provide intuitive, easy to use navigation for an application that includes a ton of sections and sub-sections. It is also an excellent example of how developers can extend our UI guidelines to enhance the User Experience further. Unlike other BlackBerry 10 Applications, the menu contains sections as well as sub-sections, which adds a great personal touch to the user interface and makes an excellent use of space from a User Experience perspective.

Within ‘Day in Pictures’, clicking on a photograph reveals slideshow mode. Using WebWorks API, device orientation is rotated to landscape and photos are displayed and scrolled in widescreen HD. Tapping on the photo will reveal the header, description and action bar, which fades away in a few seconds – another example of attention to detail. Navigating between photos is done by swiping gestures very much like in the native Pictures app for BlackBerry 10.

(API here: https://developer.blackberry.com/html5/apis/blackberry.app.html#.rotate)

Service Integration

Each article displays a share icon on the action bar, which integrates with the BlackBerry 10 Share framework to display all available media where the article may be shared. The USA TODAY application makes use of the invoke WebWorks API to query the device and return a list of all applications that can be used to share content.

(API here: <a href=”https://developer.blackberry.com/html5/apis/blackberry.invoke.html#.query” target=”_new”>https://developer.blackberry.com/html5/apis/blackberry.invoke.html#.query)

Conclusion

When starting a new HTML5 project, developers have a plethora of frameworks to choose from. Some are used for data and view management alone, while others provide all-in-one solutions, both platform-specific and platform-agnostic. By leaning towards a custom solution with the help of Backbone.js and Require.js, developers at Clearbridge Mobile Inc. remained completely in control over the performance and user experience from start to finish, resulting in a very responsive and attractive application. They’ve followed our UI guidelines, integrated platform services and added a personal touch to the user interface. As a result, USA TODAY is a perfect example of how to build a stunning HTML5 application that is truly Built for BlackBerry.

As I prepared to teach the Mobile Application Programming course of the Conestoga College Computer Programmer/Analyst (CPA) program for the fall 2012 school term, I chose the new BlackBerry PlayBook tablet and BlackBerry 10 platforms because they are both developer and student-friendly. In this blog post, I will present my top three reasons for choosing the BlackBerry platform.

1. The BlackBerry Platform has excellent HTML5 support

In fall 2012, the BlackBerry PlayBook OS 2.0 had an HTML5Test.com score of 373. The recently released OS 2.1 update continued to lead with a score of 411.

Under the mobile category, the upcoming BlackBerry 10 browser has an HTML5Test.com score of 484 – higher than iOS 6 or Android 4.0. TechVibes recently published an article entitled “BlackBerry 10 is going to have the best web browser of any mobile platform”.

The independent HTML5test.com score measures how well the browser supports HTML5, and the new BlackBerry Platform has scored very high. This is great for BlackBerry developers and students who want to test new HTML5 features on a tablet or mobile device. Having excellent HTML5 support means that HTML5 features working on desktop computers will likely work on the tablet or mobile device without recoding. It also means that richer apps can be built using HTML5. More recently, CNET Australia published an article stating that the BlackBerry 10 browser beats every desktop browser.

2. The new BlackBerry Platform has lots of FREE tools and online resources

A computer programming course is effective only when there is a lot of hands-on programming assignments and projects. The new BlackBerry Platform has lots of excellent software development tools and online resources, and the best part is that they are all FREE. Using both free and online tools provides equal opportunities to all students.

All the BlackBerry tools and documentation can be downloaded with ease. Some of the most downloaded free software includes:

• Ripple Emulator plugin for Google Chrome
• VMWare and BlackBerry simulators (Tablet OS, BlackBerry 10 Beta)
• BlackBerry WebWorks SDK and Native SDK (Tablet OS, BlackBerry 10 Beta)

Several online resources were also available, including:

• The Main BlackBerry HTML5 Page
  • Provided easy instructions and links to tools, documentation and sample code
• The BlackBerry Support Forums
• • Provided many relevant articles
  • E.g., the Remote Web inspector can debug web content running on a live device or simulator
• Free and up-to-date BlackBerry Jam recordings
• BlackBerry hands-on labs and resources
• • Hands-on Labs for a Mini-Course on Mobile Application Development
  • Open-source frameworks and sample code for the BBUI.js framework is available in GitHub
• To learn about the changes to the new BlackBerry Platform, there are webinars and online sessions available for free

In addition to the free tools and online resources, RIM donated BlackBerry Bold 9900 smartphones and BlackBerry PlayBook tablets as part of the BlackBerry Academic Program Canada (http://bit.ly/TFaBur ). These devices allow students to test their apps before final submission and release to the public. At the start of the term, a class survey was conducted, and the survey found that 33% of the class had their own BlackBerry PlayBook tablet and 36% have their own BlackBerry smartphone. In addition, 94% of students were satisfied with their being no mandatory textbook for this course. Furthermore, approximately 33% of students indicated that they will acquire a BlackBerry PlayBook tablet on their own. The BlackBerry PlayBook tablet WiFi 16 GB currently retails for less than C$130. This price is affordable given that the price of most mandatory textbooks can be over C$100.

3. The new BlackBerry Platform is open, flexible and future-proof

RIM has started to build partnerships with open-source leaders. BlackBerry WebWorks and the Ripple Emulator are shared on GitHub, and many code samples for BlackBerry WebWorks and Cascades are also freely available on GitHub. As of this writing, there are now 330 samples in the BlackBerry GitHub catalog. This allows students to get the latest source code and extend the framework, learn sample code, and customize them to satisfy their project requirements. The new BlackBerry Platform has SDKs on Windows, Linux and MacOS. With this selection, students can use their favorite OS to build their mobile apps.

The new BlackBerry Platform is flexible. It supports many development platforms: HTML5 WebWorks, Native C/C++ and Cascades, ActionScript Adobe AIR, and Java Android Runtime. Although HTML5 and Mobile Web provides the opportunity to build one mobile app code base for multiple platform devices (i.e., Android, BlackBerry and iOS), there are instances where the Native Development option is a better approach. Students who want to build mobile applications other than HTML5 can either port their existing Android applications or build new Native SDK/Cascades applications and make them available on the new BlackBerry Platform.

Teaching mobile programming is challenging because the mobile technologies change frequently. Using mobile web technologies such as HTML5, JavaScript, jQuery Mobile and PhoneGap to build mobile apps is the first step in future-proofing mobile apps. In Part 2 of this blog post, I will discuss other future-proofing characteristics of the new BlackBerry Platform.

The new BlackBerry Platform is developer-friendly and student-friendly. Do you believe I made the right choice for using the new BlackBerry Platform to teach mobile application programming? Do you want to know the results of student assignments and projects and how they compare to student projects from the past two years? In Part 2 of this blog post, I will answer these questions with examples of student projects.

Supporting open standards and open source are keystones of the BlackBerry® platform. We are pleased to announce another repository of open source contributions through Github. Our 56th repository, jQuery-Mobile-Samples, will contain samples and tutorials using jQuery Mobile for building outstanding BlackBerry applications and mobile web experiences.

If you’ve done mobile web development, then jQuery will be familiar to you. It’s used by many organizations to make compelling websites and applications on the leading platforms. jQuery Mobile is a recent release focused on mobile devices with excellent cross-platform capabilities. With this repository we will be providing examples that detail some advanced features of the jQuery Mobile Framework which you will want to use in your next project.

Watch the repository on Github and you’ll see the first few tutorials with sample code appearing this month. Later in the roadmap are examples for using jQuery Mobile with other frameworks for even more opportunities to impress your users.