demystifying native, web, and hybrid mobile development on blackberry 10 with manny elawar, edgar...

1

Demystifying Native, Web, and Hybrid Mobile Development on BlackBerry 10

Manny Elawar and Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada

Agenda

• What is BlackBerry 10?

• Demo

• HTML5 and WebWorks

• Native Development and Cascades

• Hybrid Development

• Q & A

What Is BlackBerry 10?

• Completely new– Not a revision or upgrade of BlackBerry 7

• Secure• Designed as a mobile computing

platform– Not just another mobile phone OS

• Designed for people on the move; people that want to get something done– Not just consume content on the couch

http://developer.blackberry.com

Where Did BlackBerry 10 Come From?

BlackBerry® PlayBook™

HTML5 WebWorks

BlackBerry 10TM


Demo

• Will show the UX & Flow. Specifically, one-hand use, the amazing keyboard, HUB, and insane multitaskingdesigned to get stuff done.http://developer.blackberry.com

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


Easy to Develop Apps

C/C++Native SDK

C++/QtCascades

HTML5 BlackBerry®

WebWorks™

“One F***ing Day”Michael Shchade

CEO Fishlabs


BlackBerry Runtime for

Android AppsAdobe AIR

Developer Options


C/C++Native SDK

C++/QtCascades

HTML5 BlackBerry®

WebWorks™



HTML5 an Open Web Platform

Kudos from developers

Where are we today?

Introducing BlackBerry WebWorks

Here are some fellows

How to get there?

Hello World

<script src="webworks.js" type="text/javascript"></script>

<script>document.addEventListener("webworksready", function(e) {

document.getElementById('someInput').value = "Hello World";}, false);</script>

Something more complex: Sensors

window.addEventListener("devicemotion", function(event) {

var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z;

}, true);

Geolocation, info from the GPS

function onSuccess(position) {console.log("lat = " + pos.coords.latitude);

console.log("lon = " + pos.coords.longitude);}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

Some inspiration: WebGL

http://www.gooengine.com

Why Use WebWorks & HTML5?

• HTML5 Momentum– Support everywhere– Lot of options (frameworks,

libraries, tooling…)– W3C & Cordova Alignment

• Great Native Integration– Same performance & features

as Browser– Access different APIs: Invoke,

BBM, PIM, Advertising, Storage, and many more!


Developer Options


C/C++Native SDK

C++/QtCascades

HTML5 BlackBerry®

WebWorks™



Cascades in the native SDK

Native C/C++

gameplayhttp://developer.blackberry.com

Cascades, A Native UI Framework

• Cascades & Qt, a great match!• Mature C++ application

framework• Great APIs• Signals and Slots• Many helper classes• QML


Typical Cascades App


JavaScriptbased UI logic

QML based UIstructure

QT/C++Backend

Any Mix Is Possible


JavaScriptbased UI logic

QML basedUI structure

QT/C++Backend

Hello world

import bb.cascades 1.0

Page { Label { text: "Hello World" }}

Same thing in C++

Page* root = new Page;Label* label = Label::create() .text("Hello World");root->setContent(label);Application::instance()->setScene(root);

C++ QML

31

60 fps!

Client server architecture

Client Server

Tell the server what to render

Get events back

Animations

• Translate, rotate, scale, fade

• Implicit animations

• Explicit animations

• Duration, start/end, easing curve

• Grouped animations

33

Grouped Animation

SequentialAnimation { id: “turner” repeatCount: AnimationRepeatCount.Forever animations : [ RotateTransition { fromAngleZ: 0;

toAngleZ: 90; duration: 1000;

}, RotateTransition { fromAngleZ: 90;

toAngleZ: 0; duration: 1000;

} ]}

0 ms 1000 ms 2000 ms

Easing Curves

ParallelAnimation { id: bouncer animations : [ TranslateTransition { fromY: 0;

toY: 800; duration: 2000; easingCurve: StockCurve.DoubleBounceOut;

}, TranslateTransition { fromX: 0; toX: 500;

duration: 1000; easingCurve: StockCurve.QuarticOut;

} ]}

Demo Events

Handling Touch Events in QML

Container{ onTouch: { if (event.isDown()) { scaleX = 2; scaleY = 2;

rotationZ = 45; } else if (event.isUp()){ scaleX = 1; scaleY = 1;

rotationZ = 0; } } }}

QObject::connect(bubble,SIGNAL

(touch(bb::cascades::TouchEvent*))

this,SLOT

(touched(bb::cascades::TouchEvent*))

);

Handling Touch Events in C++

touched(bb::cascades::TouchEvent *t){

if (t->isDown()) {

bubble->setScale(2f);

bubble->setRotation(45.0f);

} else if (t->isUp()){

bubble->setScale(1f);

bubble->setRotation(0.0f);

}

}

}

UI Adaptability - Multiple Form Factors

How to create an adaptable UI?

• Built in controls adapt to device type

• Layouts, space quota, 9-sliced images, …

• Unique (sub)set of assets per configuration

Asset selectors

Based on resolution and/or visual style

assets/ main_screen.qml dialog.qml picture.png icon.png 720x720/ main_screen.qml picture.png

Why Use Cascades?

• Elegant UI Framework– Great looking core UI

components– Easy to build custom

components– Dedicated UI tooling including

real-time design preview and Photoshop plugin

• Increased Productivity– Higher level APIs– QT flavored C++ and declarative UI


Demo

• USA Today vs New York Times– Can you tell which is HTML5 and which is

Cascades?

Developer Options


C/C++Native SDK

C++/QtCascades



HTML5 BlackBerry®

WebWorks™

Love is in the AIR

• Open Source SDK• Cross platform (Mobile & Desk)• 3.5 millions of devs• 70% of online games built on Flash• Different tools & frameworks

AIR for BlackBerry 10 SDK

• FileSystem Access• API Sensors• SQL lite• Fuse QNX Components• Invocation Framework• Push, Cards, Payment, etc.• Adobe Native Extensions ANEs

Fuse QNX Components

Hello World

import flash.display.Sprite;import qnx.fuse.ui.text.Label;

public class BlackBerryIOAS3 extends Sprite{

public function BlackBerryIOAS3(){initUI();}

private function initUI():void {var myLabel:Label = new Label();myLabel.text = "BlackBerryIO";addChild(myLabel);

}}

Local File System

var appBundle:File = File.applicationDirectory.resolvePath("myFile.txt");

var shared:File = File.applicationStorageDirectory.resolvePath("writeableFile.txt");

Invoke Framework

var request:InvokeRequest = new InvokeRequest();

request.target = "com.example.image.view";request.action = InvokeAction.OPEN;request.mimeType = "image/png";request.uri = "file:///path/to/image.png";

InvokeManager.invokeManager.invoke(request);

Some inspiration

Why Use AIR?

• AIR Community– Lot of Learning Resources– Fast for create games– Different Frameworks,

Engines & Libraries• Empowering UX

– First Class Citizen for BB10– Great Designer-Developer

Workflows– Creative UI to the limit


BlackBerry Runtime for Android Apps

• Based on Open Source Android, v2.3.3 aka “Gingerbread”• Repackage Android apps, sign, and submitted to BlackBerry World • Majority of apps convert with no changes to source (~65%)• Some limitations for first release• No: Native, Google APIs• Eclipse plugin & SDK w/simulator• Android-based apps appear like all other apps in BlackBerry World (AIR,

WebWorks, etc.). To the consumer, “An app, is an app”


.apk in .bar out

thank you!

Manny Elawar, Edgar ParadaBlackBerry Developer Evangelists@manny_elawar @edgarparada

demystifying native, web, and hybrid mobile development on blackberry 10 with manny elawar, edgar...

Technology