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.
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
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
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
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
