jQuery

If you want to use jQuery or jQuery Mobile in your BlackBerry WebWorks app, you might find the information in this section helpful. The information applies to apps for the BlackBerry 10 OS, BlackBerry PlayBook OS, or BlackBerry Device Software 5.0 and later.

What is jQuery?

jQuery is a JavaScript library that simplifies many complex actions, such as DOM manipulation and web service calls, using JSON or AJAX. When you use jQuery, you can minimize the amount of code you write, reduce development cycles, and simplify the maintenance of your application.

To find out more about jQuery, visit the official jQuery website.

It's important to remember that since jQuery is built on top of JavaScript, the functionality of your code on a given platform depends on the platform's support of JavaScript. If you already have a desktop web application that uses jQuery, there is a very good chance that currently existing as well as future desktop and mobile platforms will simply run your code.

You can use jQuery for commercial application development. To use jQuery in commercial projects, view the jQuery license.

What is jQuery Mobile?

jQuery Mobile is a UI framework based on jQuery Core APIs. jQuery Mobile includes a number of widgets (also called components or controls). For more information, visit the jQuery Mobile website.

jQuery Mobile works in the following way:
  • You define jQuery Mobile components in your DOM by specifying the appropriate jQuery Mobile markup.
  • Once your app loads, the jQuery Mobile framework replaces the components you identified with the appropriate controls.
For example, let's say you define a layout grid by specifying the ui-grid-a class on a <div> tag. jQuery Mobile uses the class information only as a reference and attaches any additional CSS, and when applicable, HTML and JavaScript, that are necessary for the component to function.

Things to consider when you're using jQuery

Cross-browser compatibility

jQuery is a JavaScript framework, so its functionality is subject to the features that the underlying browser specifically supports. If you already have a web application that uses jQuery, you likely tested a variety of scenarios on the more popular browsers, such as Windows Internet Explorer, Mozilla Firefox, Google Chrome, Opera, or Safari.

jQuery itself supports the most popular browsers. For information about jQuery support for each browser, visit the Browser Compatibility page on the jQuery site.

Google Chrome and Safari are both WebKit-based browsers. In BlackBerry 6 and later, the BlackBerry Browser is also WebKit-based. This means better support across these browsers for HTML5 and JavaScript functionality of your jQuery-based application, although not all features that work on one browser will automatically work on another.

BlackBerry Browser support

The WebKit implementation in the BlackBerry Browser supports JavaScript, so most jQuery APIs simply work. For a list of supported HTML, JavaScript, and CSS features, visit the Supported web standards page.

One issue with any JavaScript framework is that the underlying implementations are obscured, so if a certain JavaScript functionality isn't supported, the lack of support is more difficult to identify immediately. This difficulty to determine support for a certain JavaScript functionality tends to be more prevalent on the BlackBerry Browser in BlackBerry Device Software 5.0, where JavaScript support is less comprehensive than in later versions of device software. The reason for the lack of support is that before BlackBerry 6, the BlackBerry Browser was not based on the WebKit engine.

Since the jQuery and jQuery Mobile frameworks are frequently updated to use the latest functionality of HTML5, it is important to pay attention to framework version compatibility issues between legacy BlackBerry devices (running software version earlier than BlackBerry Device Software 5.0) and current devices. Also, functionality of the jQuery Mobile framework is dependent on the jQuery framework. Therefore, it is important that you use the appropriate jQuery framework version with the appropriate jQuery Mobile framework version. For example, on legacy devices it might be best to use jQuery 1.7.1 with jQuery Mobile 1.1.1, whereas you can use the most up-to-date version of jQuery and jQuery Mobile frameworks for BlackBerry 10 applications. For details on which jQuery and jQuery Mobile versions to match, visit the official jQuery Mobile website.

Device hardware capability

Most desktop computers now have multiple cores, at least 2.0 GHz of processing power, and enough RAM to accommodate the most inefficiently built applications. Mobile devices like smartphones and tablets have come a long way, but fall short of many computer benchmarks. The differences in hardware among different models of BlackBerry devices can significantly affect application performance. Devices with similar hardware but that run different OS versions also affect application performance.

If you're porting a jQuery-based desktop application to the BlackBerry platform, and even if all jQuery features are supported on your target BlackBerry platform, you may still need to optimize your app to address the resource limitations of the platform. jQuery is not designed to be a light framework, such as jqlite, zepto.js, jq.Mobi, or others, so you might notice a slight overhead in performance in your app, even with the minified form of jQuery. On the latest BlackBerry devices, limited hardware capability or resouce limitations is much less of an issue.

Which BlackBerry Device Software versions should I support?

If you have a specific customer in mind, it might be best to take an inventory of the devices they use and the minimum requirements you have to support. If you only have to support newer BlackBerry devices, you can include more features in your application, and the hardware will be that much faster. For applications that are intended to support a broader audience, your decision may be based on the prevalent BlackBerry Device Software version that your target customers are on.

You may choose to implement only the most basic functionality of jQuery in your application or create a JavaScript version of your application specifically for BlackBerry Device Software 5.0. If your jQuery application uses more than the most basic features, you may need to simplify your code. Generally, there are ways to implement your own JavaScript to replicate some of the common jQuery functionality.

Remember that if you want to use jQuery for applications that are targeted to run on BlackBerry Device Software 5.0, the limited support for jQuery on BlackBerry Device Software 5.0 may result in fewer features in your application. If you intend to make your application compatible with BlackBerry Device Software 5.0, this intention should should be part of your application development plan right from the start so that the application architecture takes the associated compatibility issues into consideration and guides the development efforts throughout the development cycle accordingly, as opposed to developing an application based on the newest BlackBerry smartphones and then making an effort to make the application backwards compatible. This approach to developing applications to ensure that they are compatible with legacy platforms is not only a consideration with jQuery, but also applies to many JavaScript frameworks that use newer HTML5 functionality.

UI considerations

BlackBerry WebWorks uses all aspects of HTML5, including JavaScript and CSS, and provides you with standard UI components that you can use in your application. This gives you the opportunity to be as creative with your application design as you want.

However, there are times when you simply want to focus on development, and not spend too much time laying out, skinning, and tweaking various UI components.

You can use the jQuery UI library to simplify the process. This library provides you with many powerful components. However, this flexbility comes with the same considerations previously noted for using the jQuery framework in general. Specifically, there will be additional performance overhead as well as shrinking support on older platforms. There are options available that can help you minimize this overhead. For example, jQuery Mobile is better suited for developing on the mobile platform as it addresses a lot of the above concerns. Using jQuery Mobile tends to result in leaner, performance-conscious components. But since jQuery Mobile relies on the core jQuery framework, there is still some overhead.

Getting that native feeling

You can use any number of UI libraries and extensions to meet the needs for performance and style. A common concern, however, is that many of these libraries lack the look and feel of native BlackBerry applications. This includes the jQuery Mobile framework. The jQuery Mobile framework does not provide any BlackBerry specific look and feel either. There are two options to address this.

One option is from an open-source project that is integrated with jQuery Mobile to provide a BlackBerry 10 look and feel to your BlackBerry WebWorks apps. For more information, visit the GitHub repository for the jQuery Mobile BlackBerry 10 theme.

The other option is to use the bbUI.js framework. It is a UI framework that is designed specifically for the BlackBerry platform with a focus on BlackBerry 10, although legacy BlackBerry OS versions, such as BlackBerry 6 and later and BlackBerry Tablet OS, are also supported. This framework makes a number of optimizations to increase performance and reduce the memory footprint. Similar to using the jQuery Mobile framework, to use the bbUI.js framework you set <div> attributes to identify components that the bbUI.js framework then replaces to turn the components into compelling controls. For more information, visit the GitHub repository for the bbUI.js framework.

.

Debugging

Eventually, you're bound to run into issues. With some luck, the problem is simply a missing semicolon. Other times, you might come across something that's really broken. Here are some ways to more easily solve your problem.

JavaScript validation

Before you run your code, you should be fairly confident that it will run. JSLint is a great tool for validating code. Depending on which HTML or text editor you're using, there is likely a JSLint plug-in that you can leverage as well. Running JSLint will pick out the most common errors for you, including syntax or formatting.

Web Inspector

If you have developed a web application for desktop computers, chances are you've come across some form of Web Inspector tool to let you examine the source code as it runs. As of BlackBerry 7 (and the BlackBerry Tablet OS), this functionality is also available for BlackBerry WebWorks applications. See Debugging using Web Inspector for details on using Web Inspector.

This functionality is also available from within Ripple by right-clicking the background space and launching the Inspect tool.

Reporting bugs

If you find a bug, you can report it at the appropriate site below:

If you have feedback regarding your experience with BlackBerry WebWorks and jQuery, visit the Web and WebWorks Development forums to share your insight or see what others are saying.

Resources

Here are some resources that can help you with your jQuery application:

GitHub repositories

Last modified: 2014-03-10

comments powered by Disqus