The BlackBerry 10 browser was created using groundbreaking Web technologies and has opened new doors for even better web experiences. In fact, many building blocks, including the application’s chrome itself, were created using HTML5 and CSS3. In this session we will showcase how the next generation mobile browser was built using the very web technologies it was designed to render. We will dispel myths that Web technologies can be limiting and explore various lessons learned about optimizing performance. This session will also serve as a preview for next generation Web application technologies, and possibly what BlackBerry WebWorks™ and Apache Cordova may evolve to in the not so distant future.

1. Building a Next Generation Mobile
Browser
Adam Stanley @n_adam_stanley
October 19, 2012
1

2. Hello World
 Adam Stanley
 Team Lead, BlackBerry Developer Relations
 Likes: ninjas, bacon, JavaScript
 Dislikes: cilantro, Styrofoam, JavaScript
 127.0.0.1 is Waterloo, Ontario, Canada
2

3. The Cast
 The new BlackBerry 10 browser
 http://www.blackberry.com/html5
3

4. Sneak peak
Everything you
see in the chrome
is actually Web
content!
“Built for the Web,
using the Web”
4

5. A Next Generation Browser

6. Setting the stage
 Building something awesome:
 The BlackBerry 10 browser
 Web platform
 Natively Web
 Inside the browser
 Optimizations
 Lessons learned
 Development tools
6

7. How does it look at 1024 feet?
Browser Application
WebKit engine
Web platform
Multi-processing OS

8. Metaphor time
8

9. In perfect harmony
Bacon Happy
Tomato Mayo
9

10. A browser, in harmony
Rich Content
Awesome
Fidelity
High Great User
Performance Experience
10

11. The next generation mobile browser
“The BlackBerry 10 browser combines
powerful web rendering engine capabilities
with multi-threaded web view objects to
render both chrome and content.”
11

12. Web Platform
 Framework for Web applications
 The Browser, WebWorks SDK, and QNXCar2 UI
 BlackBerry 10 UI elements
 Multi-process launcher
 Management of concurrent WebViews
 Native API access from JavaScript
 e.g. PPS, sharing framework, invocation framework
12

13. Why Web for a browser?
 Why use Web instead of Native?
 Leader in HTML5 development (feature coverage)
 Leader in HTML5 implementation (performance)
 Leader in HTML5 developer experience (community, tooling)
 Push the boundaries of what can be done
 Eat our own dog food
 Stronger browser
 Stronger platform
13

14. Ingredient 1 : Fidelity
 Support the web really well
 Powered by WebKit
 HTML5, CSS3
 Flash
 WebGL http://www.html5test.com
 Driven by strong standards support
14

15. Ingredient 2 : Performance
 Hardware accelerated CSS3 transformations (GPU)
 Touch Input events optimized for quick response times
 Progressive page loading
 WebKit engine optimized for kinetic scrolling (iScroll not needed!)
15

16. Webviews
16

17. WebView
 Independent Web content containers
 Similar to a browser “tab”, but layered on top of each other
17

18. Two types of WebViews
 “Chrome” WebViews are granted special privileges
 WebView API access
 Native API plugin
 Relaxed Web runtime constraints (e.g. FileSystem sandbox)
 “Content” WebViews are optimized for websites
 Large backing store
 Access to disk cache
 Can scroll the webview without repainting page content
18

19. Inside the Browser Application
RPC
Navigation Bar
Weblauncher Chrome (Webview)
(native)
Create (Webview)
index.html
RPC
Native API qnx.* App Menu
JS/Native Binding (Webview)
Chrome Process
19

20. Inside the Browser Application
Navigation Bar
Weblauncher Chrome Webview
Create
(native) Webview
Native API
App Menu
Webview
Chrome Process
Content Process (tabs)
smh.com.au starbucks.com blackberry.com aircanada.com ...
20

21. Ingredient 3 : Experience
 Intuitive
 You already know how to use it
 Integrated & Contextual
 It knows what you want to do next
 Moments of charm
 It’ s more than just drawing web pages
21

22. Intuitive “Look and Feel”
 BlackBerry 10 native UI guidelines
 UI elements:
 Action bar
 Crosscut menus
 Viewers/cards
 Form controls
 Sheets
 Dialogs
22

23. Native UI in the browser
 Web versions of native BlackBerry 10 UI
 Each UI element defined in its own web view
 Uses HTML, CSS, JavaScript, SVG, images
 CSS transitions
 Hardware accelerated compositing
 Smooth animations

24. Contextual
 It knows what you want to do next
 Contextual menu
 Keyboard
24

25. Moments of charm
 Native hardware integration
 Camera
 Disk cache
 Sensors
 Geolocation
 Native software integration:
 Invocation framework
 Instant messaging
http://people.opera.com/danield/html5/explode

26. Developers
 Remote Web Inspector
 Debug web content running from a simulator or live device
26

27. Developers
 User Agent
 Leaving the past behind
 Reducing poor user experiences targeting LCD browsers
Mozilla/5.0 (BB10; <Device Model>) AppleWebKit/<WebKit Version>
(KHTML, like Gecko) Version/<BB Version #> Mobile Safari/<WebKit Version>
 Desktop mode
 Can emulate desktop Chrome user agent on demand
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/<WebKit Version>
(KHTML, like Gecko) Chrome/21.0.1180.75 Safari/<WebKit Version>

28. Lessons learned
 Many interesting problems:
 Disk access
 Window animations
 Localization
 Web overlays
 Access to screen
28

29. Lessons learned
 Rules are meant to be broken …
 New CSS :
 webkit-overflow-scrolling: -blackberry-touch
 text-overflow: -blackberry-fade
 data-blackberry-end-selection-on-touch=“on”
29

30. Lessons learned
 Some problems remain unsolved:
 Animating block height
 Efficient large data transfer
 The web is still fundamentally single-threaded
30

31. Lessons learned
 Conclusion: “A browser built for the Web using the Web”
 Yes, good performance is possible
 Yes, rich and responsive UI is possible
 Yes, highly interactive web apps are possible
 Proof:
 BlackBerry 10
31

32. The Future
 The bar has been raised:
 We want everyone to develop Web applications as powerful as the
new BlackBerry 10 Browser
 The evolution continues:
 The Web engine is constantly getting faster and more powerful
 This technology will be coming to WebWorks
 As the “Open Web Platform” evolves, more will be
possible across platforms 32

33. Melbourne, Oct 19

35. Thank you
Adam Stanley @n_adam_stanley
October 19, 2012