HTML5 and
Sponsored Links
This presentation is the property of its rightful owner.
1 / 41

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


  • 113 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

  • 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


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


NIBS

  • Not a competition

  • Scale

  • Breadth of skills

  • Cross-platform

  • Still lags native, but gap is closing

* Native Is Better Syndrome


Basic Anatomy

  • HTML 5

  • + CSS3

  • + Javascript

  • + optional frameworks

  • + Browser webview

  • + package/deploy

    _____________________

  • = Mobile Web Application


It starts with the Browser

Acid3 Score: 100/100

CSS3 Selectors Test: 578/578

HTML5: 260/450


  • 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


  • WebGL - One of the first mobile implementations

    • HW accelerated

    • Tunnel Tilt (http://github.com/blackberry/WebGL-Samples)


  • 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/


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


  • 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


<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

});


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


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


  • 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


Tooling

  • IDE vs. SDK vs. VIM & Browser

  • Web very different from Native

  • Edit -> Refresh, Rinse -> Repeat


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


Web Testing

  • There are some emerging solutions:

    • Weinre, JSConsole, Firebug Lite…

  • Native simulators

    • Big and slow

    • 95% done, but STILL will need physical device


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


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


Ultimately, you go to device…

  • Go to your device options

    • Security tab

    • Activate the development mode

    • Set up a password


  • 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


Open Source Commitment


Community

  • http://blackberry.github.com

    • Upstream WebKit

    • Ripple

    • WebWorks

    • Samples (API, UI, Native-feel UI)

    • Community APIs

    • More on the native side (gaming, toolkits…)


Community

  • Active contributions to PhoneGap aka Callback aka Cordova

  • Involvement with web toolkits

  • JS Meetups, developer evangelism, awesome DevCon5 keynotes…


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


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

…..


How to get there


How to get there

+


How to get there

  • >51M BlackBerrys

+

=


How to get there

  • >51M BlackBerrys

  • Every PlayBook

+

=


How to get there

  • >51M BlackBerrys

  • Every PlayBook

  • All Future Devices

+

=


  • 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…


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!


  • THANK YOU!

    Ken Wallis – Product Manager, WebWorks


  • Login