beyond the browser: html5 and the evolving mobile web

Download Beyond the Browser: HTML5 and the Evolving Mobile Web

Post on 23-Feb-2016




0 download

Embed Size (px)


Beyond the Browser: HTML5 and the Evolving Mobile Web. Chris Smith & Laurent Hasson Research In Motion. BlackBerry Loves the Web. Industry leading webkit browser with best in class standards support Full Web Application platform across tablet and smartphones - PowerPoint PPT Presentation


Slide 1

Beyond the Browser: HTML5 and the Evolving Mobile WebChris Smith & Laurent HassonResearch In Motion

BlackBerry Loves the Web Industry leading webkit browser with best in class standards support Full Web Application platform across tablet and smartphones Leading edge web dev tools for inspection, debugging, emulation

Terrible user experienceDumbed down, constrained contentNon-standard, completely fragmentedNo security model, not-sticky, sandboxedBrowser chrome (yuck)No local content & storage

WMLMobile ProfilesWAPXHTML/MobileFlash LiteHDMLTTML.mobi1st Gen Mobile Web

Full Desktop web content on Mobile Web Standards driven (HTML CSS, JavaScript) Mobile Optimized

The rise of HTML5 and CSS3 Store large data using HTML5 storage and stop sending fat cookies over-the-air Use webWorkers to move heavy processing and blocking communications off the main thread Take advantage of HTML5 app cache so your application will work out of coverage Use HTML5 form controls, they do good things on mobile

2nd Gen Mobile Web

HTML5 address key native integration constraints by providing offline storage, proper threading, content cache and data access (geolocation)

But native integration is sandboxed and not-extensible

Without a security model sensitive user data remains out of reach

There is no way to escape the browser chrome to support alternate entry points and navigation modes

The full Native application experience remains out of reach

Browser Limitations

User interface entirely authored in HTML/CSSApplication logic written in JavaScript with full support for standard frameworksFull support for HTML5 APIs for threading, local storage, GeolocationComplete security model allowing full access outside the browser to file system, user data and applicationsDeeply integrated native application experience without the browser chromePush enabled to allow content providers to target their audience whenever they want wherever they areBenefits of both native and browser discovery and distribution

Next Gen Mobile Web


7Pure NativePure WebNative UI Browser-based UIAll Native logic Mostly native logicMostly Browser logic All Browser logicSome local web resources All remote web resourcesAll local web resourcesHybrid model gives developers choice to leverage best of native and web without compromises

HybridApplication Continuum

A BlackBerry WebWorks app is a standalone application, created using standard web technologies, that provides full integration with native APIs

OSS Community

BlackBerryWebWorksBlackBerry WebWorks Framework

Web Inspector: Ultimate Web Dev Tool

Ripple: Open Browser-based Emulator

Ripple Notes:Emulation right in your browserInfo Pane shows you information about your application and the environment youre emulatingYou can easily change both the framework youre working with as well as the device youre emulatingDeep control of phone features like, Geo Location, Device Settings, Phone Calls, Messaging, AccelerometerConfig.xml validationCross-Platform, supports WebWorks, PhoneGap, Mobile Web, and moreWeb Inspector for DOM manipulation and JavaScript debugging10

HW acceleration with CSS3 in mobile Web browsers is underutilizedNothing much has changed in the past 4 years since slide/fade/zoom/flip.Flash in comparison for instance has many libraries of very cool effectsSmartphones and tablets have the horse power to do betterSome samples out there, but results in lots of CSS and JS to setup, requiring lots of skillsAlice (A Lightweight Independent CSS Engine) is a micro-library focused on packaging advanced hardware accelerated visual effects for Web appsFramework and application independent (can be plugged into Dojo, jQuery, Sencha Touch or other libraries)Single-line-of-code setupPhysics and OrganicsRich visual effects like bounce, toss, flip, fold

Alice: Micro-library of visual effects

Thank You


View more >