Building a Next Generation Mobile Browser using Web technologies

  • 749 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
749
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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  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 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