Building a Next Generation MobileBrowserAdam Stanley @n_adam_stanleyOctober 19, 2012                                    1
Hello World Adam Stanley     Team Lead, BlackBerry Developer Relations     Likes: ninjas, bacon, JavaScript     Dislik...
The Cast The new BlackBerry 10 browser     http://www.blackberry.com/html5                                        3
Sneak peak              Everything you             see in the chrome              is actually Web                  content...
A Next Generation Browser
Setting the stage Building something awesome:     The BlackBerry 10 browser     Web platform     Natively Web     Ins...
How does it look at 1024 feet? Browser Application   WebKit engine     Web platform        Multi-processing OS
Metaphor time                8
In perfect harmony                     Bacon          Happy              Tomato         Mayo                              ...
A browser, in harmony                      Rich Content                                             Awesome               ...
The next generation mobile browser   “The BlackBerry 10 browser combines  powerful web rendering engine capabilities    wi...
Web Platform Framework for Web applications     The Browser, WebWorks SDK, and QNXCar2 UI     BlackBerry 10 UI elements...
Why Web for a browser? Why use Web instead of Native?   Leader in HTML5 development (feature coverage)   Leader in HTML...
Ingredient 1 : Fidelity Support the web really well     Powered by WebKit     HTML5, CSS3     Flash     WebGL        ...
Ingredient 2 : Performance Hardware accelerated CSS3 transformations (GPU) Touch Input events optimized for quick respon...
Webviews           16
WebView Independent Web content containers     Similar to a browser “tab”, but layered on top of each other             ...
Two types of WebViews “Chrome” WebViews are granted special privileges     WebView API access     Native API plugin   ...
Inside the Browser Application                                                     RPC                                    ...
Inside the Browser Application                                                                 Navigation Bar  Weblauncher...
Ingredient 3 : Experience Intuitive     You already know how to use it Integrated & Contextual     It knows what you w...
Intuitive “Look and Feel” BlackBerry 10 native UI guidelines UI elements:     Action bar     Crosscut menus     Viewe...
Native UI in the browser Web versions of native BlackBerry 10 UI     Each UI element defined in its own web view     Us...
Contextual It knows what you want to do next     Contextual menu     Keyboard                                      24
Moments of charm Native hardware integration     Camera     Disk cache     Sensors     Geolocation Native software i...
Developers Remote Web Inspector     Debug web content running from a simulator or live device                           ...
Developers User Agent     Leaving the past behind     Reducing poor user experiences targeting LCD browsersMozilla/5.0 ...
Lessons learned Many interesting problems:     Disk access     Window animations     Localization     Web overlays  ...
Lessons learned Rules are meant to be broken … New CSS :     webkit-overflow-scrolling: -blackberry-touch     text-ove...
Lessons learned Some problems remain unsolved:     Animating block height     Efficient large data transfer     The we...
Lessons learned Conclusion: “A browser built for the Web using the Web”     Yes, good performance is possible     Yes, ...
The Future The bar has been raised:     We want everyone to develop Web applications as powerful as the      new BlackBe...
Melbourne, Oct 19
Thank youAdam Stanley @n_adam_stanleyOctober 19, 2012
Building a Next Generation Mobile Browser using Web technologies
Upcoming SlideShare
Loading in...5
×

Building a Next Generation Mobile Browser using Web technologies

899

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 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building a Next Generation Mobile Browser using Web technologies

  1. 1. Building a Next Generation MobileBrowserAdam Stanley @n_adam_stanleyOctober 19, 2012 1
  2. 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. 3. The Cast The new BlackBerry 10 browser  http://www.blackberry.com/html5 3
  4. 4. Sneak peak Everything you see in the chrome is actually Web content! “Built for the Web, using the Web” 4
  5. 5. A Next Generation Browser
  6. 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. 7. How does it look at 1024 feet? Browser Application WebKit engine Web platform Multi-processing OS
  8. 8. Metaphor time 8
  9. 9. In perfect harmony Bacon Happy Tomato Mayo 9
  10. 10. A browser, in harmony Rich Content Awesome Fidelity High Great User Performance Experience 10
  11. 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. 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. 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. 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. 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. 16. Webviews 16
  17. 17. WebView Independent Web content containers  Similar to a browser “tab”, but layered on top of each other 17
  18. 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. 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. 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. 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. 22. Intuitive “Look and Feel” BlackBerry 10 native UI guidelines UI elements:  Action bar  Crosscut menus  Viewers/cards  Form controls  Sheets  Dialogs 22
  23. 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. 24. Contextual It knows what you want to do next  Contextual menu  Keyboard 24
  25. 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. 26. Developers Remote Web Inspector  Debug web content running from a simulator or live device 26
  27. 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. 28. Lessons learned Many interesting problems:  Disk access  Window animations  Localization  Web overlays  Access to screen 28
  29. 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. 30. Lessons learned Some problems remain unsolved:  Animating block height  Efficient large data transfer  The web is still fundamentally single-threaded 30
  31. 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. 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. 33. Melbourne, Oct 19
  34. 34. Thank youAdam Stanley @n_adam_stanleyOctober 19, 2012

×