The document discusses the BlackBerry web platform and tools for developing web applications for BlackBerry devices. It provides an overview of BlackBerry's support for web standards and frameworks for building web apps with native app features. It also describes tools for testing apps in the browser using Ripple and on actual devices using WebInspector, and the process for building, signing and submitting apps to BlackBerry AppWorld.
1. THE BLACKBERRY WEB
PLATFORM
SenchaCon’11 – Austin 2011-10-25
LDH (Laurent Hasson)
Technical Director, Web Platform
lhasson@rim.com
@ldhasson
2011-10-25 SenchaCon'11 1
Wednesday, November 2, 11
2. Agenda
• BlackBerry loves the Web
• Anatomy of an App
• Simulation/Testing with Ripple and WebInspector
• Build, Sign and Submit with WebWorks
2011-10-25 SenchaCon'11 2
Wednesday, November 2, 11
4. BlackBerry Loves the Web
• Industry leading webkit browser with best in class standards support
• position: fixed, overflow: auto, webInspector shipped in Spring 2011 on PB, and late Summer 2011
on BB7 devices
• Full Web Application platform across tablets and smartphones
• Leading edge Web dev tools for inspection, debugging, emulation
2011-10-25 SenchaCon'11 4
Wednesday, November 2, 11
5. But what’s a Web app?
• Lots of controversies and differing opinions from very smart
people on the Web
– Should a mobile Web app be more Webby, or more Appy?
• My take: users today are conditioned to the App Life Cycle
– Download something
– Install something
– Have an icon on the home screen
– The App takes the entire screen real estate
– The App is integrated with the device
A site is a place you go to. An app is a thing you get.
• The good news though is that users really don’t care how the app
was built!!!
– So use Web technologies for the job!!
2011-10-25 SenchaCon'11 5
Wednesday, November 2, 11
6. Two Dimensions to App Experience
Web App
Contents
Web Site Many ways
to adapt
Life Cycle
2011-10-25 SenchaCon'11 6
Wednesday, November 2, 11
7. Say no to NIBS
- The “Native Is Better” crowd are missing
the point of the Web
- It’s the scale of the market stupid!
- It’s powerful, cross-platform, and an
NIBS
abundant skill set.
- This is not to say that Web is better than
Native
- That would be silly
- But the Web is absolutely competitive
- Most types of apps can now be built very
nicely using Web technologies
- The gap is narrow today, keeps on
getting narrower, and fast.
* Native Is Better Syndrome
2011-10-25 SenchaCon'11 7
Wednesday, November 2, 11
8. BlackBerry WebWorks
• A BlackBerry WebWorks application is created using
standard web technologies, provides full integration
with native APIs and has a native application life
cycle.
• In market since 2009 on BB5. Now on BB5/6/7, and
PlayBook and future QNX super phones
• OSS Community http://www.github.com/blackberry
BlackBerry
WebWorks
2011-10-25 SenchaCon'11 8
Wednesday, November 2, 11
9. ANATOMY OF THE MEDIA VIEWER
2011-10-25 SenchaCon'11 9
Wednesday, November 2, 11
21. A day in the life…
Native Developer
Writing Code Test on Simulator Test on Device
Desktop Web Developer
Writing Code Test in Desktop Browsers
Mobile Web Developer
Writing Code Test in Desktop Browser Test On Simulator Test on Device
2011-10-25 SenchaCon'11 21
Wednesday, November 2, 11
22. Web Testing
• WebKit is king today
– For desktop testing of your mobile app, both Safari (5 and up)
and Google Chrome (13 and up) are really good and take you a
long way.
• There are emerging solutions to test your application in
a mobile browser
– Weinre, JSConsole, Firebug Lite…
• There are also the standard native simulators
– But they are so big, and so slow
– And they are never quite accurate enough that you don’t need a
physical device in the end anyway
• And you’ll always have alert()!
2011-10-25 SenchaCon'11 22
Wednesday, November 2, 11
23. But BlackBerry Does Web Testing
• BlackBerry Ripple allows you to do device simulation and testing
right on your desktop’s Google Chrome browser
– Simulate device attribute such as screen res, skin etc…
– Simulate device APIs and Sensors
– Not 100% accurate, but small, fast, and conveniently browser-based
• The BlackBerry stack supports remote WebInspector directly to
debug a Web app running on-device
– You can do anything (including stepping through JS) that you can
normally do in WebInspector on a desktop WebKit browser.
• Plus, plug you PlayBook on the USB port of your laptop, and you
have IP connectivity
– No wi-fi actually needed
2011-10-25 SenchaCon'11 23
Wednesday, November 2, 11
25. A day in the life…
Native Developer
Writing Code Test on Simulator Test on Device
Desktop Web Developer
Writing Code Test in Desktop Browser
Mobile Web Developer
Writing Code Test in Desktop Browser Test On Simulator Test on Device
Mobile Web Developer (with Ripple)
Writing Code Test in Ripple Test on
2011-10-25 SenchaCon'11 25
Wednesday, November 2, 11
26. Setting up a device for Web testing
• At some point though, you need to go on device!
• Plug in your device through USB, or on a Wi-Fi network
reachable from your dev machine (laptop/desktop)
– A simple ipconfig /all (on Windows) shows you the device’s IP
address when connected via USB
That’s actually the address of the
development machine
And that’s actually the address of
the device
• Yeah, the device can call your web server on your dev
machine, and vice-versa, just through USB (no Wi-Fi
required).
2011-10-25 SenchaCon'11 26
Wednesday, November 2, 11
27. Setting up device security
• Go to your device options
– Go to the Security tab
– Activate the development mode
– Set up a password
2011-10-25 SenchaCon'11 27
Wednesday, November 2, 11
28. Enabling WebInspector
• Go to the browser on you device
– Go to Options
– Go to the Privacy and Security tab
– Enable Web Inspector
• Information will be displayed as to how to connect to
the browser
2011-10-25 SenchaCon'11 28
Wednesday, November 2, 11
29. Refresh
• Web Apps run full screen, without a browser chrome
– For testing, how do you refresh a page?
– You have to build a “refresh widget” for testing only
• Some funny gesture
• Some semi-transparent button in a corner
– location.reload(true) from WebInspector
2011-10-25 SenchaCon'11 29
Wednesday, November 2, 11
31. BUILD, SIGN AND SUBMIT
2011-10-25 SenchaCon'11 31
Wednesday, November 2, 11
32. Signing
• One of the weakest link in the developer experience
today
– Gotta register with AppWorld
– Gotta register with the certificate auth to get a key (CSJ file)
– Gotta sign your machine
pushd "C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpbin"
..blackberry-tablet-sdkbinblackberry-signer.bat -csksetup -cskpass totoxxx
..blackberry-tablet-sdkbinblackberry-signer.bat -register -csjpin titixxx -cskpass totoxxx
C:PeekABooclient-RDK-1234567890.csj
..blackberry-tablet-sdkbinblackberry-keytool.bat -genkeypair -keystore sigtool.p12
-storepass totoxxx -dname "cn=MyCo"
-alias author
popd
• Not pretty and error prone, but you do it once and it’s
done
2011-10-25 SenchaCon'11 32
Wednesday, November 2, 11
33. BlackBerry WebWorks works
• Overall developer experience is less than stellar
– 3 things to download (Adobe AIR SDK, PlayBook SDK, WebWorks SDK)
• Installers are very basic, but you should pay attention: RTFM!
– Build is tedious (you have to create a ZIP file, build and deploy)
del "c:PeekABooPeekABoo.zip"
del "c:PeekABooPeekABoo.bar"
"zip.exe" a -r "c:PeekABooPeekABoo.zip" "c:PeekABooWebContent*.*"
"C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpbbwp.exe“
“C:PeekABooPeekABoo.zip" -gcsk totoxxx -gp12 totoxxx -buildId 101 -o "c:PeekABoo"
"C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpblackberry-tablet-sdkbinblackberry-deploy.bat“
-installApp -password totoxxx -device 192.168.1.105 -package "c:projectsPeekABoo.bar"
• But the result works as advertized: it’s an App!
– It performs very well, and come on! It’s just a simple build script!
2011-10-25 SenchaCon'11 33
Wednesday, November 2, 11
34. AppWorld
• Register, and submit your app
– Basic steps to upload your binary (BAR file)
– Works OK
• The only trap is that each time you submit a new
binary, YOU MUST increment your build number or else,
the world stops!
– -buildId parameter for bbwp.exe in the build script
2011-10-25 SenchaCon'11 34
Wednesday, November 2, 11
36. Summary
• THE MOBILE WEB IS A POWERFUL OPTION FOR DEVELOPING MOBILE APPS
• Desktop WebKit browsers are really good for a lot of app dev
• There is a next generation of browser-based debugging and
testing tools
• WebWorks SDK, code signing process and BlackBerry AppWorld are
not easy
– But come on, once the initial pain is over, it’s pretty easy
2011-10-25 SenchaCon'11 36
Wednesday, November 2, 11