HTML5 and
Download
1 / 41

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


  • 147 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks' - ashton


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
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
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 apps1
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
Basic Anatomy

  • HTML 5

  • + CSS3

  • + Javascript

  • + optional frameworks

  • + Browser webview

  • + package/deploy

    _____________________

  • = Mobile Web Application


It starts with the browser
It starts with the Browser

Acid3 Score: 100/100

CSS3 Selectors Test: 578/578

HTML5: 260/450



  • WebGL - One of the first mobile implementations

    • HW accelerated

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


jQuery Mobile

Sencha Touch

http://jquerymobile.com/demos/

http://touchsolitaire.mobi/app/


Be careful
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
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



  • User (HTML5, CSS3, JavaScript)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
Tooling (HTML5, CSS3, JavaScript)

  • IDE vs. SDK vs. VIM & Browser

  • Web very different from Native

  • Edit -> Refresh, Rinse -> Repeat


A day in the life
A day in the life… (HTML5, CSS3, JavaScript)

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
Web Testing (HTML5, CSS3, JavaScript)

  • 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
Web Testing. BlackBerry Style. (HTML5, CSS3, JavaScript)

  • 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 (HTML5, CSS3, JavaScript)

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
Ultimately, you go to device… (HTML5, CSS3, JavaScript)

  • Go to your device options

    • Security tab

    • Activate the development mode

    • Set up a password


  • Go to the browser on your device (HTML5, CSS3, JavaScript)

    • Go to Options -> Privacy and Security

    • Enable Web Inspector

  • Information will be displayed as to how to connect to the browser


Open source commitment
Open Source Commitment (HTML5, CSS3, JavaScript)


Community
Community (HTML5, CSS3, JavaScript)

  • http://blackberry.github.com

    • Upstream WebKit

    • Ripple

    • WebWorks

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

    • Community APIs

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


Community1
Community (HTML5, CSS3, JavaScript)

  • Active contributions to PhoneGap aka Callback aka Cordova

  • Involvement with web toolkits

  • JS Meetups, developer evangelism, awesome DevCon5 keynotes…


App World (HTML5, CSS3, JavaScript)

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
So, Why BlackBerry & WebWorks? (HTML5, CSS3, JavaScript)

>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 (HTML5, CSS3, JavaScript)


How to get there1
How to get there (HTML5, CSS3, JavaScript)

+


How to get there2
How to get there (HTML5, CSS3, JavaScript)

  • >51M BlackBerrys

+

=


How to get there3
How to get there (HTML5, CSS3, JavaScript)

  • >51M BlackBerrys

  • Every PlayBook

+

=


How to get there4
How to get there (HTML5, CSS3, JavaScript)

  • >51M BlackBerrys

  • Every PlayBook

  • All Future Devices

+

=


  • App Express (HTML5, CSS3, JavaScript)

    • 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
Resources (HTML5, CSS3, JavaScript)

  • 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! (HTML5, CSS3, JavaScript)

    Ken Wallis – Product Manager, WebWorks


    ad