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. -Not a competition -Scale -Breadth of skills -Cross-platform -Still lags native, but gap is closing NIBS * Native Is Better Syndrome

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

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

9. 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

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

11. 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! http://touchsolitaire.mobi/app/ Sencha Touch jQuery Mobile http://jquerymobile.com/demos/

12. 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

13. A Lightweight 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

14. alice.toss({ id: "overlay", duration: 2000, origin: app.randAngle(-45,180)+’%’ +app.randAngle(-45,180)+'%', random: 10 });

15. 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

16. 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.

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

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

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

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

23. 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

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

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

27. 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

28. Open Source Commitment

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

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

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

32. 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 …..

33. How to get there

34. +

35. >51M BlackBerrys How to get there +=

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

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

39. 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…

40. Resources  http://developer.blackberry.com/html5 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!

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