slide1 n.
Download
Skip this Video
Download Presentation
HTML5 and BlackBerry: The next level of Web development Ken Wallis – Product Manager, WebWorks

Loading in 2 Seconds...

play fullscreen
1 / 41

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


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


Download Now 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
slide1

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
slide5

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

slide9

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
slide10

WebGL - One of the first mobile implementations

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

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
slide13

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
slide14

<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

slide16

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

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
slide25

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
slide27

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

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

+

=

slide39

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!
slide41

THANK YOU!

Ken Wallis – Product Manager, WebWorks