html5 app dev on blackberry 10
DESCRIPTION
Presentation I gave at the Silicon Valley Web Builders Meetup on 4/24/13TRANSCRIPT
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
Larry McDonoughPrincipal Evangelist, BlackBerry
@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!
Anatomy of the Browser
25
Anatomy of the Browser
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
Larry McDonoughPrincipal Evangelist, BlackBerry
@LMCDUNNA