Building a Next Generation Mobile Browser using Web technologies
- 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
- 35. Thank you Adam Stanley @n_adam_stanley October 19, 2012