I received the following email earlier this week from developer Dragos Filipovici. He wanted to share his story about an application he recently created for BlackBerry 10.

As I read the email, it was clear to me that his success was due to the strengths of the BlackBerry 10 HTML5/WebWorks platform and the social power of the open source & blog communities.  As such, I wanted to share.

Some of you might already know Dragos online as BglowDragosh. Before getting into BlackBerry 10 app development, he acquired UI design experience in building BlackBerry themes.

Hi Adam,

About a year and a half ago I tried app development using the Java SDK. I got stuck in the complex ways to achieve simple tasks (even creating a basic UI), the not always clear documentation, and the long deployment processes for OS5-7 devices. Granted, I was still a newbie in Java. 

However, I was (and still am) a JavaScript newbie as well – 6 months ago when I first started learning web app development. 

I believe the biggest factor helping me successfully transition to BlackBerry 10 app development was played by the new tools available, as nothing helps one learn like applying new knowledge into an actual tangible project, if the tools are available. For me, the WebWorks framework, the rich documentation, the forums and Github repositories, even the way the developer.blackberry.com website is designed, helped me immensely as a very-beginner developer. And all of BlackBerry’s efforts in the past year to engage with developers have kept me going, and the company’s new platform vibe kept me excited. 

After getting to know WebWorks and then bbUI.js, the learning curve for me was made much easier. I’ve often sent in questions in the WebWorks & bbUI.js Github repositories and most often it was my own code errors trying to achieve simple things, but I got helped each time anyway. Now I post actual API bug reports and sometimes request API features, as users request new features from my app. And I love this formed cycle which I believe was, for my personal experience, a recipe for success.

Which brings me to the present:

So far, it took me about 14 weeks of (intense) work on my first WebWorks app. Yesterday, CrackBerry.com review my app, and in several hours Workahol became the #1 top paid app in BlackBerry World. I am overwhelmed with user feedback suggesting new features – which I will endeavor to implement. It’s great that we are able to achieve such diverse functionality and performant UI without even using the Native SDK, and no user has complained so far (by invoking the old web apps < native argument). 

Lastly, if there’s any way I can help – either by speaking about my experience, or to promote this platform, BlackBerry World or the BlackBerry 10 user community in any way, please let me know.  

Sincerely, 

Kind Regards,

Dragos Filipovici (@BglowDragosh)

Sent from my BlackBerry® wireless device

If you get a chance, check out Workahol in BlackBerry World today. Do you have a success story building for BlackBerry? We’d like to hear – let us know in the comments below.

JAM 24 – HTML5 Frameworks: Up-And-Comers that are Building Steam

Ask any Web developer how many JavaScript frameworks there are out there and you’ll likely end up waiting a long time as they answer. There are so many to choose from and new ones appear in the wild on a daily basis: UI frameworks, libraries, shims & polyfills, animation, graphs, gestures, MVC, performance, etc. We developers who solve difficult coding problems are eager to share their solutions in the form of JavaScript frameworks, allowing others to also build compelling application content. In this session, I’m going to share a few of my own personal favorite frameworks that are focused on improving the quality of your HTML5 applications or games. I even plan on doing a live coding demo of an HTML5 gaming framework. Wish me luck!

JAM23 – Lab: Getting Deep Device Integration with Third Party Extensions

Okay folks, I’m really excited about this one. This session is actually a 2 hour lab that will empower developers to boost the quality of their HTML5-powered WebWorks applications and take them to the next level of awesomeness.  Developers – have you ever built a Web app using technologies like HTML5, CSS or JavaScript and encountered a situation where the feature you wanted to implement could not be added because it was not defined in any Web standards?  Some examples include: blinking the LED light, sending a message via Bluetooth or keeping the device backlight on (none of these are features that can be added using standard JavaScript).  The BlackBerry 10 OS has a powerful native API platform that can be leveraged in a WebWorks application by exposing native code to the JavaScript engine via custom Third Party extensions.  During this lab, attendees will not only learn how to build WebWorks extensions for BlackBerry 10, but they will actually create their own!  By the time this lab is over, everyone will have a functional WebWorks application running on their free BlackBerry Z10 smartphone that makes use of a native extension. It’s going to get crazy in there.

It has been discovered that bbUI.js version 0.9.5 has a rendering issue when run on BlackBerry 10.1. The device was not being accurately detected and as a result, application content was not being rendered to the screen correctly.

Issue: Grid & Image List in bbUI.js 0.9.5 running on BlackBerry 10

A fix for this issue was applied last month in version 0.9.6 which is available for download from Github. Developers have since been updating their applications and I would encourage you do the same if you haven’t done so already.  A recompile and re-submit of your application to BlackBerry World may be required.  Doing so will ensure that users will continue to enjoy your content, as it was designed, when they upgrade to BlackBerry 10.1. Note: At the time of writing, there is no ETA for when 10.1 will be published.

Upgrade Instructions:

1. Download bbUI.js version 0.9.6.
2. Replace the bbUI.js and bbUI.css files in your application.
3. Review the change Log to confirm whether any feature updates, performance improvements or compatibility changes affect your application.
4. Recompile using the BlackBerry 10 WebWorks SDK.
5. Test! Use the Dev Alpha C simulator to preview how your content will appear on BlackBerry 10.1.0.1020.
6. Once you are happy with the quality of your application, re-submit in BlackBerry World.

Fixed: Grid & Image List in bbUI.js 0.9.6 running on BlackBerry 10.1

Join Jason Scott (RIM), Mike Hostetler (appendTo) and Jonathan Creamer (appendTo) on November 15th from 2-3 pm EST for an exciting online presentation about using the official BlackBerry® 10 theme for jQuery Mobile.

During this one-hour webinar, our speakers will show developers how they can build Web applications that easily integrate the design elements and UI of the BlackBerry 10 user experience. Our speakers will provide a walkthrough on building and deploying a BlackBerry 10 app using jQuery Mobile, and will also demonstrate how to use backbone.js to create data bindings and a MVC architecture in your jQuery Mobile application.

As always, attendees are welcome to join into the discussion, as questions will be answered by these experts from the jQuery Mobile development community.

Register today!

There is still time to register for the October 11^th  webinar “Beta 3 update for the BlackBerry® 10 WebWorks™ SDK”.

As planned, this release delivers a number of significant features that were listed on the WebWorks beta roadmap.  In fact, we made an even bigger splash than anticipated by providing more features than promised (see release notes). Some highlights include: BBM™, contacts, notifications, localization and cards support through the invocation framework.

What do these features look like and how can you use them in your own BlackBerry 10 WebWorks applications? Join me, Adam Stanley, and Erik Oros from BlackBerry Developer Relations for a hands-on demonstration and interactive discussion about some of the new features and changes provided in the latest version of the BlackBerry 10 WebWorks SDK.

We found many examples of things we’re doing right (e.g. automatic updates in Ripple). However, as we hoped to find, we also discovered examples of sub-optimal experiences where new developers could possibly be road blocked in their ability to complete their BlackBerry application. It is these latter examples that proved why we ran this exercise, and we are committed to continuing this review and will re-evaluate the platform again on a regular schedule.

Our group first started by identifying who our development community was. How did they think? What was important to them? How would their potential backgrounds influence how they flow through the “getting started with BlackBerry” experience? Our focus was on the following 5 personalities:

• “The coder” – Lives in a text editor and can modify their own path variable. Comfortable troubleshooting advanced issues without assistance. Likely have built a mobile app already.
• “The beginner” – Just getting started with mobile development or are evaluating BlackBerry Web dev. May have strong development skills in another language or none at all.
• “The desktop web developer” – Have a very strong understanding of client-server web development. Have successfully built web sites and may have used frameworks like jQuery, Sencha or Dojo.
• “The enterprise developer” – Cross platform is a primary goal. Prefers to use IDEs and typically works under an IT enforced environment.
• “The PhoneGap developer” – Someone who has come to the BlackBerry developer site to learn how to port their PhoneGap application

So what did we find? Lots! In fact, I’m still going through all the feedback. Everything from “would be nice” changes to “this is a gating bug and must be fixed” is being documented, and our intent is to file issues so the public can track them in the developer issue tracker . Here are just some of the results from the group:

• Discovery process: Search engine optimization should be improved. Keywords that each developer persona would expect to search for did not always generate correct search results.
  [Michelle] Search term: “enterprise development for BlackBerry 10” on Google. First result is to register for an outdated/unrelated course; next search results are for BlackBerry® Enterprise Server development.
• Sample applications: A number of BlackBerry WebWorks sample applications are published in Github. We need to refine the flow of navigating a user between blackberry.com and github.com. Also, for new developers, Github is unfamiliar. Some preparation of what to expect and how to use it will be helpful:
  [Kevin]: Sample apps… I am not super familiar with Github. Didn’t like getting dumped into git for samples. I’d prefer to get a zip to download. Managed to figure it out then.
  [Brent] – Click the link for samples on Getting Started – Taken to Github – what is Github? And what are these samples for – what do they do?
• HelloWorld sample: More developers will successfully complete the “Creating HelloWorld for BlackBerry 10” tutorial if we provide a direct link to a ZIP file that contains the sample application assets.
  [Brent] HelloWorld sample – copying and Pasting seems like a waste. Possible to download the helloworld package? – Creating config.xml in notepad and pasting the copied xml text puts it all on one lovely line. #NotImpressed
• Ripple: The Ripple Mobile emulator is currently designed to build and sign a BlackBerry WebWorks application. It also provides an option to deploy to a target device, but only when the app is unsigned. For simulators this is ideal; however, not for live devices where a debug token would be required. Not all developers want / know how to use a debug token.
  [Ed] The build choices are confusing and missing the one option I want. I want “package and sign, or package sign and deploy” to a real device. Package and launch is confusing because I don’t want to package and launch to a simulator, but when I do want to for a real device, I want it to do so signed, not with debug tokens I don’t use. I suggest: “Package”, “Package & Sign”, “Package & Sign & deploy” (to a real device” and “Package and launch” to simulator. the last one, the least likely to use.

Here’s how you can send us feedback -

1. Join the discussion in the BlackBerry Web and BlackBerry WebWorks community forum.
2. Log into the developer issue tracker and file a bug report. Remember to provide as much detail as possible about how to reproduce the problem and what are the expected / actual results.
3. Let’s have a chat via @BlackBerryDev on Twitter® or the BlackBerryDevCommunity on Facebook®.

Questions like these are very important and the reasons why I and nine others from our team have gathered today to analyze and explore further.  In the room today we have:

• Developer Relations: Adam Stanley, Michelle Mendoza
• R&D: Chris Del Col, Dan Silivestru, Matt Lantz
• Documentation: Ryan Lehman, Kevin Bater, Kate Wilhelm
• Product Management: Tim Neil
• Wireless Application Architects: Brent Thornton, Ed Bourne

The goal of today’s exercise is to take a step back, and put ourselves in the shoes of our development community.  We are putting the BlackBerry HTML5/WebWorks platform under a microscope to get a deeper understanding of its DNA.

Everyone in the room is uninstalling their SDKs and clearing their minds in order to live through the experience of getting started with BlackBerry Web development for the very first time.  We’re putting on the hats of different developer personalities and discovering how those mindsets affect how they discover the platform, read use our documentation, access samples and use our SDKs.

We want to ensure a developer never has to get stuck at “Now what do I do?”  The next step, whether it is downloading Ripple, installing a code signing key or testing via remote web inspector should be clear.

How did you get started with BlackBerry dev for the first time?

@n_adam_stanley#bbdevxp Sample Apps always be the best way, off course later its necessary read the documentation =)

— PabloC (@twipoc) October 3, 2012

@n_adam_stanley The first apps were all copy&paste from samples.#bbdevxp Now doing the same on #bb10

— Simon Hain (@SimonHain) October 3, 2012

As the folks who are behind the scenes actually building the tools, websites and learning resources that developers use, it’s important we are clearly providing a positive experience that enables our developers to be successful.  Right now we are ½ way through the day and we’ve discovered finding proactive ways to make the existing experience even better for our web community.  Some examples include:

• More focus on putting samples at the forefront of the getting started process.
• Providing offline documentation.
• Better linking between API reference guides, samples and developer documentation.

I want to hear your feedback.  Tell me what was important to you as a developer when you first started and I’ll make sure your voice is heard.

Post a comment below or send us a tweet using hashtag #bbdevxp or post in the BlackBerry Web community forums and let us know what’s on your mind!

Once I arrived, I realized my expectations of Russia turned out to be completely different than I had imagined. For one, there were far less bears. There was however, a very mature and active development community eager to get their hands on and create apps using the BlackBerry 10 developer tools. Russian developers are ready for BlackBerry 10. Note to self: pack less bear spray next time.

Andrey Kisselev, opening the Moscow BlackBerry 10 Jam event.

Held at the Lotte Hotel in Moscow, our day started with Andrey Kisselev, Territory Sales Manager, welcoming an audience of almost 200 developers. Andrey set the tone for the day with some clear messages about the success of the BlackBerry development program and the foundations of the design for BlackBerry 10. I followed with an overview of the BlackBerry 10 experience and was happy to receive a few rounds of applause when I presented some of the new features such as the keyboard and glancing UI demos. Paul then provided an architecture overview and we witnessed immediate interest in the BlackBerry 10 platform and developer tools. These fundamentals of BlackBerry 10 design and platform capabilities translated and were received well by attendees.

In Soviet Russia, myths bust you!

The general session concluded with an exciting announcement by Vkontakte, one of the largest online social networks in Europe (more than 100 million active users). Alexander Cryuglov, technical evangelist from Vkontakte, was invited on stage to announce a two-part developer contest intended to produce the best Vkontakte applications for the BlackBerry platform. The first part of the contest offers a total prize pool of two million rubles ($70,000 USD) and a BlackBerry® PlayBook™ tablet to developers who create a Vkontakte messenger application for BlackBerry smartphones. Contest details and conditions can be found online
http://vk.com/bb_contest
. The second part is for the best VKontakte app for BlackBerry PlayBook tablet and BlackBerry 10. The app can be either a VKontakte client or any of its components such as messenger, photo editor etc. Two winners will receive a BlackBerry PlayBook tablet and case as well as other special prizes from VKontakte.ru. Contest details and conditions can be found online
http://vk.com/rim
.

Alexander Cryuglov, from Vkontakte, announcing BlackBerry development contests.

Once the dust settled from all the excitement during the morning keynote, attendees had a quick lunch and then decided on which technical track to participate in. At this point we realized that native developers represented the majority of attendees at the event! In fact, we ended up over 70% of all attendees in the Native sessions and there was a particular interest in Qt development. It turns out there are many Qt developers in Moscow, which is great news for BlackBerry 10 development.

We also had the pleasure of hosting many members of the Russian press, all of whom were eager to see BlackBerry 10 for the first time in their own country. I answered many questions about the expected user and developer experience for Russia 24, one of the largest TV channels in the country, as they covered the BlackBerry 10 Jam Moscow event and produced this video report.

I was very glad that our roadshow had a stop in Moscow. Russian developers are excited and committed to building BlackBerry 10 applications and we are likewise committed to their success. Moscow is a fantastic centralized location for Russian developers to meet and learn about BlackBerry 10 development. In fact, we received so much positive feedback throughout the event that the hash tag #BB10Jam was trending on Twitter for all of Russia throughout the day. Here are some messages from developers:

#BB10jam #bbjam_RU closed. Thank you, #RIM, #BlackBerry. We are commited.—
Aleksei Lebedev (@lebedevmd) June 26, 2012

@n_adam_stanley thanks for #bb10jam! It was really good, seriously—
theaqua (@justusebrain) June 26, 2012

The game is changing. Get ready #BB10Jam Moscow yfrog.com/oex2jduj—
Peter Varyushin (@pvaryushin) June 26, 2012

#BB10Jam Rocks! BB10 dev alpha is awesome—
Nikolaev Dmitry (@nikolaev_dmitry) June 26, 2012

Вкраце о следущщих темах! Рассказывает! Пол и Адам! В данный момент хочется попасть везде! #BB10Jam. Так интересно http://t.co/9UC1Nfms—
Pchelkina Anastasia (@pchela4ka) June 26, 2012

Translated: A short overview by Paul and Adam about afternoon sessions! Right now I want to be everywhere! #BB10Jam. So interesting!

Я буду счастлив на 100%,если каждый день моей жизни будет таким же драйвовым,как был 26/06. #BB10Jam—
[BIOHAZARD] (@BY0HAZARD) June 28, 2012

Translated: I will be 100% happy if every day of my life will be as exciting as was 06.26 at #BB10Jam

Thanks Moscow for a fantastic turnout and for being part of the BB10Jam tour. We distributed 182 BlackBerry 10 Dev Alpha Devices and now we can’t wait to see all of the great BlackBerry 10 applications that will be created by Russian developers.

Onwards to Berlin!

Have you ever used that cool button on your BlackBerry® PlayBook™ tablet Browser that looks like a book? It’s the icon in the top left that enables Reader Mode. This is a neat feature which takes away all the advertisements and extraneous features from the page and shows you a clean summary of the content. Today I wanted to tell you about how this feature came to be, how we optimized its performance, and how it would not have been possible without BlackBerry® Web Inspector.

Using some clever JavaScript®, we created a mechanism that extracted the page contents and stripped out unwanted HTML. The problem was that it took a really long time to parse a page and display the content — or so we thought. We knew that this would not be a good user experience and the page load time needed to be optimized, especially when compared to the better performance we observed for the same content running in a desktop browser.

As I started my investigation, I wanted to look at the JavaScript to see how it worked so I could start to tweak it, and I thought to myself, “I should use Web Inspector to profile this.” I didn’t know it yet but this idea would save me lots of time and effort to get the feature working.

After adding some profiling information to the script, I discovered that most of the code was already relatively fast. However, after it had reloaded the page in a new WebView, it was doing its removal of the unwanted tags on the live DOM. This incurred a whole page request with sub-resources and content that we were going to be stripped out as soon as the page loaded.

Instead of incurring a page load, I did a deep copy of the DOM using document.body.cloneNode(true), and then manipulated the HTML fragment off DOM. Finally I loaded the resulting HTML in a new WebView. The result of this change was an immediate gain in performance, reducing the amount of processing time from 45 seconds down to less than 5 seconds. But that wasn’t enough — no user should have to wait 5 seconds after hitting a button to see any results.

I then enlisted the help of a colleague, and we were able to optimize the script even further by making changes to our logging. If you log things in JavaScript inline via console.log(), they’re expensive. Instead, add your log message to a buffer and then print the results after the main processing is complete. The DOM was traversed several times during the algorithm’s run. We ended up using a TreeWalker instead of a for loop of document.getElementsByTagName(“*”) being used. With these simple changes and further optimizations to the script, we further reduced the page processing time from 5 seconds down to under 1.5, which in and of itself is still a gain of over 300%.

So in summary, we went from 45 seconds down to less than 1.5 seconds — an astonishing 3000% performance boost that we could not have done without Web Inspector running on device.

Lessons:

1. Add logs to your scripts for performance profiling, but buffer them and don’t print to console right away.
2. Don’t reload the page when you don’t need to. If you want to modify the DOM, use HTML fragments.
3. Profile individual methods and try different things. You’d be surprised how changing one line can make all the difference.

jQuery Mobile is a touch-optimized Web framework for smartphones and tablets, and is one of the most watched and forked projects on Github. We are pleased to announce that one of our own, Jason Scott, has been made an official committer to the jQuery Mobile project.

Jason has been with Research In Motion® (RIM®) for over three years, and has worked on a wide variety of projects such as BlackBerry® Theme Studio, BlackBerry® WebWorks™, and Ripple. Currently he is member of the Web Platform team where his primary focus is on supporting jQuery Mobile.

RIM is committed to providing an excellent experience to their developers and their users. As we see more and more developers transitioning to web-based platforms like BlackBerry WebWorks or Apache Cordova, the need for solid mobile web frameworks becomes apparent. RIM has recognized jQuery Mobile as an important and influential project in the mobile web community, and Jason’s priority is to ensure the jQuery Mobile experience is the best possible experience it can be on the BlackBerry Platform. Currently, Jason is providing general and BlackBerry specific fixes to the jQuery Mobile Project as well as providing related support to enterprise clients and developer guidance in the forums.

We have heard from the community that they want to create a mobile web app that looks like a native BlackBerry app. That is why, as we move closer to releasing BlackBerry® 10, Jason and his team will be releasing a jQuery Mobile theme with the BlackBerry 10 look and feel. Follow the Inside BlackBerry Developer Blog to find out first when you can start using the BlackBerry 10 jQuery Mobile Theme.

Follow Jason® on Twitter (@JsonScott) for updates on jQuery Mobile or whatever else he is thinking about.