html5 app dev on blackberry 10

Silicon ValleyWeb Builder Meetup4-24-13

Larry McDonoughPrincipal Evangelist, BlackBerry

@LMCDUNNA

Agenda• Intro

• Short BlackBerry 10 Demo

• Developing for BlackBerry 10

• BlackBerry 10: A Leading Mobile Web Platform

• Building “Hello World” using Ripple

• Sampling of HTML5 Apps on BlackBerry

• Upcoming BlackBerry Events

3OpenGL APIs®

lex/yacc parsers

MapViewDesert StormPentagon…

Chair, Los AngelesACM SIGCHI

Eyematic FaceStation

J2ME

Who is this guy? Late 1980’sM

id 1990’s

Late 1990’sEarly 2000’s

200

620

10

200

3

BlackBerry 10

Launched on January 30th, 2013

Device Demo•The Hub•Time Shift•Balance•Keyboard

Where Did BlackBerry 10 Come From?

6

BlackBerry® PlayBook™

HTML5 WebWorks

BlackBerry 10TM

http://developer.blackberry.com

BlackBerry World Reach• Over 80 Million

Subscribers• 170 Markets• Over 4 Billion Apps

Downloaded• 100,000+ BB10 apps

up for sale• 110,000+ apps for

BBOS and older devices

• 64,000+ vendors

Today

100K+

Apps

High Level Architecture

BlackBerry Services(BES / Mobile Fusion, BIS, Push, Maps, Payments, BBM, Scoreloop, etc.)

HTML 5 & WebWorks

Native C/C++ &Cascades UI

BlackBerry 10 OS

http://developer.blackberry.com

Developers have ChoicesRuntimes & Frameworks

ActionScript

Adobe AIRHTML5, CSS, JavaScript

WebWorksC/C++

Native SDK

Java

AndroidRuntime

Other “Frameworks”??

Lots on GitHub! https://github.com/blackberry Other “frameworks” ?

Backbone.js – a framework for adding MVC (or MVP) structure to your Web applications. Not a UI framework. See: http://devblog.blackberry.com/tag/backbone-js/

Angular.js – similar to backbone.js, but created by Google. Node.js – This is a JavaScript runtime (not a JavaScript framework). You

install this on a machine and interact with it via JavaScript from the command line. Think of it as a browser with no UI. See: http://devblog.blackberry.com/?s=node.js&search=

10

BaaS Providers?

All have javascript API They help you focus on your app’s UI/UX by dealing with

all the ugly backend stuff (databases, notifications, authentication, scalability, cloud storage, etc.)

Stackmob: https://www.stackmob.com/ Parse: https://parse.com/ Kinvey: http://www.kinvey.com/ Fat Fractal: http://fatfractal.com/

11

BlackBerry 10: A Leading Mobile Web Platform


@LMCDUNNA

BlackBerry 10

13

TOP TIER BrowserCOMMITTED to Open Standards & Open Web

Web Apps are FIRST CLASS Citizens

BlackBerryZ10

What’s BlackBerry’s Web Strategy?

Leading HTML5 support Be very active in

WebKit contributions Top open source frameworks (jQM, Cordova)

First-class support for packaged Web apps Enable native integration

But deprecate in favor of Standards as they evolve

Push the boundaries of mobile web as a platform…

14

Not Your Father’s Smart Phone!

15

1. BlackBerry has a TOP TIER Browser now (and has for a while!)

2. BlackBerry is COMMITTED to working in the OPEN and contributing to Open Standards. We are putting Money and Resources behind the Open Web

3. We treat Web Apps as FIRST CLASS CITIZENS on the Platform

BlackBerryQ10

HTML5Test.com/compare/browser/index.html

16

Mobile

Desktop / Other

ringmark on BlackBerry 10

17

BlackBerry 10 is the first vendor mobile browser to pass ringmark ring 1!

A web-based test suite for capabilities that modern web apps require

Top New Features

Performance is always feature #1 New CSS support File System APIs getUserMedia indexedDB WebGL requestAnimationFrame In app payments

18

What’s on the Roadmap?

https://developer.blackberry.com/html5/download/roadmap/

19

What’s on the Roadmap?

https://developer.blackberry.com/html5/download/roadmap/

20

The Browser Stack

21

Web Platform

Web Platform – a new framework for Web applications The foundation of the Browser, WebWorks, QNXCar2 UI Multi-process launcher Management of WebViews (independent web content container) Native API access from JavaScript – platform integration

e.g. PPS, sharing framework, invocation framework BlackBerry 10 UI elements…

22

Web Platform provides Native UI Elements

We have Web versions of BlackBerry 10 UI Using HTML, CSS, JavaScript, SVG, images CSS transitions (accelerated compositing) are key to making things fast,

window animations cover some additional tricky cases Dialogs, form elements, action bar, sheets, crosscut menu, viewers/cards

23

Anatomy of the Browser

24

Did you know?The

BlackBerry Browser itself _IS_ an

HTML5/WebWorks app!


25


26Chrome WebViews Content WebViews

Open Web

We Build in the Open (http://github.com/blackberry)

We Contribute to Open Standards and Frameworks (WebKit, jQuery Mobile, Apache Cordova)

We are Aligning our Web Platform around Cordova:

27

WebWorksApacheCordova

ApacheCordova

WebWorks

Today Coming Soon

BlackBerry

BlackBerry

Application Development

What if you could build a BlackBerry application using Web technologies?

Web Flow. Web Experience. Just like Native.

29

jQuery MobileSenchaDojoZepto3.js…

Web InspectorRippleWeinreCodiqaCloud9…

Apache CordovaWebWorks

Frameworks Tools Build / Deploy

1 2 3

First Class Means: Same Performance and Features as browser Same Performance and Features as native apps (goal)

BlackBerry 10, Web Platform Recap

30

1. TOP TIER Browser

2. COMMITTED to Open Standards & Open Web

3. Web Apps are FIRST CLASS Citizens Performance & Feature Parity

The Proverbial“Hello World”App…

1. Review

2. Build

3. Deploy

4. Run

“Hello World” Resources:

• http://developer.blackberry.com/

• http://devblog.blackberry.com/

• https://github.com/blackberry

• https://github.com/Noctivagan/HelloWorld

Source code &Tutorial ppt.

Sample of HTML5 Apps on BlackBerry

Fly Delta Flixster New York Rangers Official

App porter Snooby: a reddit client StubHub theScore Trapeez TuneIn USA Today

33

Upcoming Events

Casual Hack Day at the Dojo Sunday April 28th @ Hacker Dojo, Mountain View http://www.meetup.com/SVBBDev-Silicon-Valley-BlackBerry-Jammors/

events/109782412/

BlackBerry Jam Americas @ BlackBerry Live May 14-16 in Orlando, Florida. Your reg code for free access: CWGX66 Register here: http://www.blackberryjamconference.com/americas?

CPID=OTC-2013BBJAMAM05]

All Events: https://www.blackberrydeveloperevents.com/events/home.html

34

Thank You


@LMCDUNNA

html5 app dev on blackberry 10

Technology