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

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


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

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


Html5 and blackberry the next level of web development ken wallis product manager webworks

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


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • WebGL - One of the first mobile implementations

    • HW accelerated

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


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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

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


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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


Html5 and blackberry the next level of web development ken wallis product manager webworks

<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


Html5 and blackberry the next level of web development ken wallis product manager webworks

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


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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

Tooling

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

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

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

  • 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


Html5 and blackberry the next level of web development ken wallis product manager webworks

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

Ultimately, you go to device…

  • Go to your device options

    • Security tab

    • Activate the development mode

    • Set up a password


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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

Open Source Commitment


Community

Community

  • 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

  • Active contributions to PhoneGap aka Callback aka Cordova

  • Involvement with web toolkits

  • JS Meetups, developer evangelism, awesome DevCon5 keynotes…


Html5 and blackberry the next level of web development ken wallis product manager webworks

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

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 there1

How to get there

+


How to get there2

How to get there

  • >51M BlackBerrys

+

=


How to get there3

How to get there

  • >51M BlackBerrys

  • Every PlayBook

+

=


How to get there4

How to get there

  • >51M BlackBerrys

  • Every PlayBook

  • All Future Devices

+

=


Html5 and blackberry the next level of web development ken wallis product manager webworks

  • 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

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!


  • Html5 and blackberry the next level of web development ken wallis product manager webworks

    THANK YOU!

    Ken Wallis – Product Manager, WebWorks


  • Login