I?ve worked very closely with Clearbridge Mobile Inc. ? the developers of USA TODAY for BlackBerry 10 and we could not be more pleased with the outcome. This application is a favorite among BlackBerry 10 users and maintains a solid five star rating in BlackBerry World with a range of fantastic reviews:
?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.
No comments:
Post a Comment