bef2013 - toronto - dev track 2 - migrating apps to blackberry 10

Join the Conversation!

BlackBerry Experience Forum 2013 - #BEF13



M I G R A T I N G A P P S T O

B L A C K B E R R Y 1 0

D E F I N I T I V E P O I N T S

O F I N T E R E S T

Jim Ing (@jim_ing)

Sr. Enterprise Developer

Join the Conversation! BlackBerry Experience Forum 2013 - #BEF13

…and dive straight down

• Applications types

• Tools to use

• Strategies

• Samples and examples

• Resources


Go green by recycling existing apps

• BlackBerry OS

• HTML5 / web-based

• Adobe Air / Flash

• Qt

• And even iOS!


One-size does not fit ALL

ActionScript

Adobe AIR HTML5

BlackBerry

WebWorks

C/C++/Qt/Cascades

Native SDK


Compiled Native Application

Enterprise Ready Application

6

Generic HTML User Interface

Premium Rendering Fidelity

Powerful Framework Support

Support for App Frameworks

Access 100% of the Native API’s

Open Sourced Apache 2.0

Customizable Configuration Define icons, features, and

permissions. Enable

communication protocols.

Use the existing BlackBerry

extensions, or build your

own custom extensions to

execute any class you’ve

already built.

Community participation

extends beyond the sole

interest of RIM, check out:

http://blackberry.github.com

No compromises, run in the

background, run at startup,

listen for pushed data, invoke

other applications.

Manage and deploy

WebWorks applications

with the most trusted MDM

solution in enterprise.

https://developer.blackberry.com/html5/documentation/


Browser Application

WebWorks

WebKit

BlackBerry 10 OS

JavaScript/HTML/CSS

Framework for running Web code

Web rendering Engine

QNX!


http://developer.blackberry.com/native/documentation/bb10/getting_started.html


Cascades Application

Developers

Native Application

Developers

Gaming & Porting

Developers

C++ UI APIs

C++ platform, device &

service APIs

Wide range of API’s (From open source and

platform providers)

BlackBerry 10

Core APIs

Cascades

Platform API (C++)

QtCore


• Easily adapt and deploy existing content

• Native BlackBerry® component set look and feel

• Can create hybrid apps

• Access to native API’s with Adobe® AIR® Native Extensions

• Lots of great community support

• Lots of open-source frameworks

https://developer.blackberry.com/air/documentation/bb10/


• Based on 2.3.3 release; Jelly Bean coming!

• Self Contained Virtual Machine

• Only supports Personal Perimeter

http://developer.blackberry.com/android/documentation/

Java

Android Runtime

• Camera API

• Compose Support

• File Picker

• Notifications

• Push Support

• Sensor Support

Let’s Talk Strategy … because the devil is in the details


How?

• Avoid platform dependent

functionality

• Use cross-platform libraries,

frameworks or engines

• Isolate platform dependent code

Why?

• Easier to port

• More code reuse across projects

• Easily identify platform dependent

code


If you are using any of these, you might have some things to

think about:

• UI and graphics

• Event handling

• Touch screen input

• Application control

• Sensors

• Audio / video

• NFC

• File I/O

• Threads

Maybe you already

developed with

standard libraries?


Mobilizing the Enterprise for YEARS!

• Developed with BlackBerry Java

• Tightly coupled application tiers

• No “Java to BlackBerry 10 Converter”

Strategies:

• The HTML5 Recipe

• Native leveraging cascades

Join the Conversation! BlackBerry Experience Forum 2013 - #BEF13 6

Decouple

the A

pplic

atio

n

User Interface

Business Logic

Device Integration

Web Native

Leverage Web UI

Framework

Java Methods to

JavaScript Functions

BlackBerry

WebWorks or Hybrid

Container

BlackBerry

Cascades UI

BlackBerry or Open-

Source Libraries

BlackBerry 10 Core


Your target for years!

• Developed with HTML, CSS, JavaScript

• Running the internet to intranets

• Cross-platform

Strategies:

• The HTML5 Recipe


“Micro”

Frameworks

To create repeatable cross-platform:

Your Org

Age of Device

0+

months

Forget

it 4-5+

year

2-3+

year

HTML5, CSS3, JavaScript…

JavaScript Libraries

“Meso”

Frameworks

“Macro”

Frameworks

Build towards Standards: WebKit, HTML5, CSS3 + JavaScript

Frameworks:

Don’t re-invent the wheel

Research frameworks

(Macro) jQuery, Sencha

(Micro) ZeptoJS, jQmobi

JavaScript Libraries: (External) Animations, Look

and Feel, + Code

AliceJS, bbuiJS, ZeptoJS


Layer Light DOM Zepto.js

MVC Spine, Knockout

UI Bootstrap, Jo, jQTouch

Loader defer.js, LABjs, RequireJS

Storage Lawnchair

Touch Events Hammer.js, Swipe JS

Event Chaining jWorkflow, Chainvas

Animations Alice.js, Emile, Shifty, Morf

Graphics Raphael

Graphics/Charting gRaphael

Media

Mapping Modest Maps, Leaflet,

Open Layers Mobile

Utilities xmlObjectifier

Legacy devices need Micro Frameworks:

• Layered approach recommended

• Gives you the tools you need and not every tool

• Perform well on little horsepower

HTML5, CSS3, JavaScript, …


“Micro” Frameworks

Your Org


Layer Medium DOM xui.js

MVC Backbone.js, AngularJS

UI bbUI, Enyo, Ember

Loader PreloadJS

Storage remoteStorage.js

Touch Events Covered by Frameworks (bbui)

Event Chaining jWorkflow

Animations FluxSlider, TweenJS

Graphics EaselJS

Graphics/Charting HighCharts

Media SoundJS

Mapping Bing, Nokia Ovi

Utilities Underscore.js

Modern devices can use both Frameworks:

• Bigger libraries = more or combined feature sets

• New browsers understand HTML5

• Web features are hardware accelerated



“Meso” Frameworks

Your Org


Layer Heavy DOM jQuery, sencha, dojo, jo

MVC JavaScriptMVC

UI DHTMLX Touch,

jQuery Mobile

Loader Covered by Frameworks

Storage Any (HTML5, Framework, etc)

Touch Events Covered by Frameworks

Event Chaining jWorkflow

Animations Any

Graphics Box2DJS

Graphics/Charting D3, Google Charts

Media Popcorn.js

Mapping MapQuest, Google Maps

Utilities Any

Future devices will run everything:

• Resource consumption irrelevant

• Exact look and feel cross-platform

• Framework becomes Enterprise philosophy



“Macro” Frameworks

Your Org


• Supports Qt 4.8 framework

• C/C++ and QML

• Port Qt Widget or

• Qt Quick

Strategies:

• Minor changes

• Use Cascades UI over

Qt Widget or Qt Quick UI

Qt Quick

Cascades UI apps

(C++ and QML)

Cascades UI

framework

Qt-based

Platform API

QtNetwork QtCore QtSvg QtScript

QtXmlPatterns QtXml QtSql QtDeclarative

Items and

elements

QtGui

Style

BlackBerry

adaptations QNX adaptations QPA plugin

Exclusive modules

Shared modules


Step by step

• Set up the tool chain

• Make the application build

• Set up packaging and deployment

• Fix the look-and-feel issues

• Address platform specific runtime issues

• Add platform specific features (device integration)

• Submit to App-World

• BOOM Done!


• Interact with One app at a time

In/Out Paradigm

• Most of UI app interaction is based

on “taps” and gestures

• An app is a collection of screens

through which the user navigates – a

window always fills the device main

screen

• Interact with Many apps at a time

Extend/Connect Paradigm

• BlackBerry people Multi-Task

• Content is King, App Must Flow


User interface development

• Cocoa Touch UI Framework

• UIKit

• Use Objective-C

Application logic

• Objective-C or…

• Objective-C++ and C++ (rename your .m

file to .mm and add wrappers)

User interface development

• Cascades Framework

• Use QML

Application logic

• C

• C++


UIKit

Application frameworks

Graphics & audio

Core services

iOS kernel & drivers

Cascades/QML

Application frameworks

Graphics & audio

BlackBerry Platform

Services

Microkernel & drivers

WebKit

POSIX


Cocoa Touch

Media Layer

Core Services

Core OS

Cascades

Cascades Qt APIs

BlackBerry Platform Services

Qt APIs

QNX APIs

Graphics

Animation

Media

Sensors

Hardware

Security

Storage

Location

Payment

Application UI

Device integration


Cascades

/ QML MIGRATE UIKit

Commercial

Libraries: Marmalade

Unity3D

Open Source

Libraries: Box2D

Cocos2D

Objective-C to Native C/C++ Wrapper allows Objective-C in pure C++ projects

Native

C/C++

Wrapper

MIGRATE Objective

C

Objective-C to Cascades Mapping approach


iOS NS Class BlackBerry 10 Class Description

NS Array / NSMutableArray QByteArray

An array of bytes. The size of a

QByteArray can be set in the class

constructor or via the size() method.

It can be changed using the resize()

method

NSDate Qdate

Stored a date and provides helper

methods to for example calculate

date differences. QDateTime is used

to store date and time

NSString NSMutableString QString

Used to contain and manipulate

strings. There is no separate class

for strings that cannot be modified in

BlackBerry 10

NSURL QUrl Stores and manipulates a URL

0

Resources


Porting Applications from the BlackBerry PlayBook

• http://developer.blackberry.com/native/documentation/bb10/porting_from_playbook.html

Porting Applications from iOS

• http://developer.blackberry.com/native/documentation/bb10/porting_ios_intro.html

Porting Applications from Android

• http://developer.blackberry.com/native/documentation/bb10/porting_from_android_ndk.html

Porting Applications from QT

• http://developer.blackberry.com/native/documentation/bb10/porting_qt_apps.html

2


Qt on BlackBerry 10

• https://github.com/blackberry/Qt

Qt Projects

• http://community.qnx.com/sf/sfmain/do/viewProject/projects.qt

Qt

• http://qt-project.org/

Qt4

• git://gitorious.org/qt/qt.git

QtMobility Sensors, Multimedia, Bluetooth and Nfc

• git://gitorious.org/+kdab-developers/qt-mobility/qnx-qt-mobility.git

https://github.com/blackberry/Qt

http://community.qnx.com/sf/sfmain/do/viewProject/projects.qt

http://community.qnx.com/sf/sfmain/do/viewProject/projects.qt

http://qt-project.org/
















BlackBerry 10

Core APIs

Posix compatible

• QNX Neutrino certification of compliance as a PSE52 Realtime Controller 1003.13-2003 System

• http://developer.blackberry.com/native/documentation/bb10/com.qnx.doc.neutrino.prog/topic/posix_confor

mance.html

BPS event model

• BlackBerry Platform Services (BPS) library provides an application with a single consistent interface to a

number of different platform services

Support C and C++ Libraries

• The BlackBerry 10 OS supports Posix-compliant C and C++, as well as the Dinkum C99 and C++

libraries.

• http://developer.blackberry.com/native/reference/bb10/library_support_at_a_glance.html


Wide range of API’s (From open source and

platform providers)

Built-in Libraries

• Tons of built-in libraries

• http://developer.blackberry.com/native/reference/bb10/library_support_at_a_glance.html#builtin

Open Source Libraries

• BlackBerry has ported some of the most commonly used open source libraries to the platform. Check out

our Github repositories!

• http://developer.blackberry.com/native/reference/bb10/library_support_at_a_glance.html#opensource

Commerical Frameworks

• Tools and Middelware support by BlackBerry 10

• http://developer.blackberry.com/native/reference/bb10/library_support_at_a_glance.html#commercial


The Basics

• Application Structure

Screen Structure

• Screen Sizes

• Portrait and Landscape

6

https://developer.blackberry.com/devzone/files/desi

gn/bb10/UI_Guidelines_BlackBerry_10.pdf


JAM808 - Introduction to the BlackBerry 10 NDK - Developing a Native BlackBerry 10 App from

Start to Finish

• New to Native development on BlackBerry® 10? This session will discuss the basics of the Native Software Development

Kit (NDK). It will provide a good foundation for understanding what can be done with the NDK, as well as provide an

overview of the APIs and associated tooling. Follow the development of a Native app from start to finish, including a user

interface written in Cascades™, Qt and QML concepts, file system, accessing device APIs, perimeters and access control.

This session is an excellent way to learn about the key components of the platform and how they work together to enable

application development.

• http://hosting.desire2learncapture.com/RIM/1/watch/85.aspx

JAM804 - BlackBerry 10 Visual Style and Finding your Flow

• Flow is one of the main concepts behind the UI/UX design for BlackBerry® 10. Join this session for a high level

understanding of BlackBerry 10 design concepts, both from a user and developer perspective. You will learn how to design

your apps to take full advantage of the flow related features BlackBerry 10 has to offer, including peek gestures, the tab

sidebar and list peeking


7


JAM811 - Porting: iOS

• Are you an iOS® app developer interested in porting iOS native applications to BlackBerry® 10? Join this session to learn

how to get started with porting apps that use iOS UIKIt to BlackBerry 10 using the Cascades™ framework. We will cover

the iOS and BlackBerry 10 platforms and frameworks, discuss similarities, differences and what to consider when porting

applications. This session will focus on understanding iOS and BlackBerry 10 aspects of application lifecycle. Discover

platform services offered and how to use them as well as aspects of UI design and implementation, networking and data

persistence.


JAM817 - Native API Deep Dive: Location Based Services & Sensors

• Location Based Services and Sensors provide many unique ways to add features and functionality to your app. Join this

session to learn more about Location Based Services and Sensor APIs in the BlackBerry® 10 NDK and to discover new

ways to use them in your native C and Cascades apps



WebKit

Ripple

BlackBerry WebWorks

Samples

Community API extensions

Toolkits (Alice.js, bbUI.js)

http://blackberry.github.com


© 2013 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion® and related trademarks, names

and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world.

All other trademarks are the property of their respective owners.



bef2013 - toronto - dev track 2 - migrating apps to blackberry 10

Technology