HTML5 and BlackBerry:

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

65 views

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



-
Not a competition

-
Scale

-
Breadth of skills

-
Cross
-
platform

-
Still lags native, but gap is
closing

NIBS

*
N
ative
I
s
B
etter
S
yndrome

Basic Anatomy


HTML 5


+ CSS3


+
Javascript


+ optional frameworks


+ Browser
webview


+ package/deploy

_____________________


= Mobile Web Application

Acid3 Score: 100/100

CSS3 Selectors Test:
578/578

HTML5: 260/450

It starts with the Browser


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!

http://touchsolitaire.mobi/app/

Sencha Touch

jQuery Mobile

http://jquerymobile.com/demos/

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


A

L
ightweight
I
ndependent
C
SS
E
ngine


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.






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

Tooling


IDE vs. SDK vs. VIM & Browser


Web very different from Native


Edit
-
> Refresh, Rinse
-
> Repeat

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

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

Test on
Device

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)

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


M
ore 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…

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

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

+


>51M BlackBerrys

How to get there

+

=


>51M BlackBerrys


Every PlayBook

How to get there

+

=


>51M BlackBerrys


Every PlayBook


All Future Devices

How to get there

+

=


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