Your SlideShare is downloading. ×
Building a Next Generation Mobile Browser using Web technologies
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building a Next Generation Mobile Browser using Web technologies


Published on

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 …

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.

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Building a Next Generation MobileBrowserAdam Stanley @n_adam_stanleyOctober 19, 2012 1
  • 2. Hello World Adam Stanley  Team Lead, BlackBerry Developer Relations  Likes: ninjas, bacon, JavaScript  Dislikes: cilantro, Styrofoam, JavaScript  is Waterloo, Ontario, Canada 2
  • 3. The Cast The new BlackBerry 10 browser  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  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) ... 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
  • 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 browsersMozilla/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 demandMozilla/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
  • 34. Thank youAdam Stanley @n_adam_stanleyOctober 19, 2012