1 / 41

HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks

HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks. Topics. Web Apps vs. Native Apps The Browser. It start’s here Frameworks (all flavours of the rainbow) Tooling Community Why BlackBerry? Why WebWorks?. Web Apps vs. Native apps.

ashton
Télécharger la présentation

HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks

  2. Topics • Web Apps vs. Native Apps • The Browser. It start’s here • Frameworks (all flavours of the rainbow) • Tooling • Community • Why BlackBerry? Why WebWorks?

  3. Web Apps vs. Native apps • Different feel (or are they?) • Users expect App life cycle • Driven by browser, but transparent to the user • Download • Install • Launch with icon • Ultimately, the user doesn’t care it’s web

  4. Web Apps vs. Native apps • Am I web? Am I native? • Key: where the app and the platform meet • Power of web design and interaction • Platform services should feel cohesive • Balance

  5. NIBS • Not a competition • Scale • Breadth of skills • Cross-platform • Still lags native, but gap is closing * Native Is Better Syndrome

  6. Basic Anatomy • HTML 5 • + CSS3 • + Javascript • + optional frameworks • + Browser webview • + package/deploy _____________________ • = Mobile Web Application

  7. It starts with the Browser Acid3 Score: 100/100 CSS3 Selectors Test: 578/578 HTML5: 260/450

  8. BlackBerry has an industry leading browser experience • WebKit since 6.0, Provided by Torch Mobile team • Full HTML5, CSS3, Flash • position: fixed, overflow: auto • WebInspector • Optimized and hardware accelerated • CSS3 animations • Canvas • JIT’ed JavaScript engine

  9. WebGL - One of the first mobile implementations • HW accelerated • Tunnel Tilt (http://github.com/blackberry/WebGL-Samples)

  10. Touch optimized Web frameworks support multiple platforms • Examples: jQuery Mobile/UI, Sencha Touch, Dojo • Improve the UI and functionality of your application • Save time and money by using existing code! jQuery Mobile Sencha Touch http://jquerymobile.com/demos/ http://touchsolitaire.mobi/app/

  11. Be Careful… • Frameworks are built cross-platform • Even though it’s WebKit, differences in each • Mobile vendors look for differentiators • Varying levels of support • Framework behaviours may differ from platform norm • Test on all platforms • Behaviour consistency • performance

  12. ALightweight Independent CSS Engine • Micro Library for HW-accelerated visual affects • Entirely JS, separate JS files for each effect • Leverages CSS3, cross-platform • http://blackberry.github.com/Alice

  13. <script src=“alice.core.js"></script> <script src=“alice.toss.js"></script> alice.toss({ id: "overlay", duration: 2000, origin: app.randAngle(-45,180)+’%’ +app.randAngle(-45,180)+'%', random: 10 });

  14. WebWorks Mission Statement To create, as a community, a simple to use cross platform SDK for Web Developers to package their Web assets as a mobile application which has Secure access to deeply integrated system level APIs

  15. Create standalone applications with standard web technology (HTML5, CSS3, JavaScript) • Framework to leverage BlackBerry API’s in a secure manageable container • BlackBerry OS 5.0/6.0/7.0+, Tablet OS, and future QNX powered smartphones.

  16. User interface • Powered by Web • HTML and CSS • Application logic • JavaScript® • WebWorks APIs • Access to Platform OS Your app WebKit Engine WebWorks Platform BlackBerry Platform BBM Security Push Monetization PIM Background Media Storage Multi-Tasking Hardware Compression …

  17. Tooling • IDE vs. SDK vs. VIM & Browser • Web very different from Native • Edit -> Refresh, Rinse -> Repeat

  18. A day in the life… Native Developer Writing Code Test on Simulator Test on Device Desktop Web Developer Writing Code Test in Desktop Browsers Mobile Web Developer Writing Code Test in Desktop Browser Test On Simulator Test on Device

  19. Web Testing • There are some emerging solutions: • Weinre, JSConsole, Firebug Lite… • Native simulators • Big and slow • 95% done, but STILL will need physical device

  20. Web Testing. BlackBerry Style. • Ripple emulator: • Testing in a browser like env. • Cross-platform! (PhoneGap, Mobile Web, …) • Simulate device APIs and sensors • F5, CMD-R • Remote Web Inspector! • Debug on-device • Fully functional, including JS debugging

  21. Native Developer Writing Code Test on Simulator Test on Device Desktop Web Developer Writing Code Test in Desktop Browser Mobile Web Developer Writing Code Test in Desktop Browser Test On Simulator Test on Device Mobile Web Developer (with Ripple) Writing Code Test in Ripple Test on Device

  22. Ultimately, you go to device… • Go to your device options • Security tab • Activate the development mode • Set up a password

  23. Go to the browser on your device • Go to Options -> Privacy and Security • Enable Web Inspector • Information will be displayed as to how to connect to the browser

  24. Open Source Commitment

  25. Community • http://blackberry.github.com • Upstream WebKit • Ripple • WebWorks • Samples (API, UI, Native-feel UI) • Community APIs • More on the native side (gaming, toolkits…)

  26. Community • Active contributions to PhoneGap aka Callback aka Cordova • Involvement with web toolkits • JS Meetups, developer evangelism, awesome DevCon5 keynotes…

  27. App World Desktop Manager OTA BlackBerry Enterprise Server WebKit HTML5, CSS3 JavaScript Build Community Grow Involvement Transparency Open Source Standards SuperApps Powerful Integration True multi-tasking Background Processing Native App Integration Commercial Services Push Data Distribution

  28. So, Why BlackBerry & WebWorks? >70 Million Subscribers >1 Billion app downloads > 5M app downloads a day 129 Countries (App World) 13% of vendors make > $100,000 (more than Apple, Android) 3 end-user payment options: carrier, PayPal, credit Advertising service, subscription based content BBM platform & viral application discovery …..

  29. How to get there

  30. How to get there +

  31. How to get there • >51M BlackBerrys + =

  32. How to get there • >51M BlackBerrys • Every PlayBook + =

  33. How to get there • >51M BlackBerrys • Every PlayBook • All Future Devices + =

  34. App Express • Wednesday evening 6 – 9 PM • Bring any/all web content on a USB stick • Make an app • 200 FREE PlayBooks! • Visit our booth, more PlayBooks…

  35. Resources • http://developer.blackberry.com/html5 • Download Ripple Beta • No signups, no costs! • http://blackberry.github.com • http://appworld.blackberry.com/isvportal • Vendor signup, no costs!

  36. THANK YOU! Ken Wallis – Product Manager, WebWorks

More Related