Presentación de Jorge del Casar para Device Days 2013 sobre HTML5 y WebWorks.

1. Building HTML5 apps with native
capabilities
Jorge del Casar – @jorgecasar
February 29, 2013

2. HTML5 is good for developers

3. Community momentum

4. What can you do with HTML5?
Geolocation
Web Sockets
Offline storage
Audio / Video ScoreMobile Tablet
Notifications
WebGL
… and more
Slacker

5. HTML5Test.com
http://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html
5

6. BlackBerry WebWorks
“A cross-platform HTML5 application framework for
creating standalone BlackBerry applications “

7. Real Examples in App World
The Economist News360 HockeyCentral
Huffington Post Pesktop Canada’s Got Talent

8. HTML5 powered by WebWorks
HTML5, CSS3, JavaScript
WebKit engine
WebWorks platform
BlackBerry Developer APIs
https://developer.blackberry.com/html5/api

9. How to get there?
Web Assets WebWorks Tools BlackBerry Applications

10. Connect HTML5 with native device
capabilities
Software & hardware & data … oh my!
10

11. Storage
HTML5 localStorage
 Name-value pairs
localStorage.clear();
localStorage.setItem("Greeting", "Hello World");
key = localStorage.key(0); // "Greeting"
item = localStorage.getItem(key); // "Hello World"
HTML5 Web DB
 Structured relational database
var size = 2 * 1024 * 1024;
db = window.openDatabase("WebDB", "1.0", "Example", size, onInit);

12. HTML5 File System
Read/Write native file-system
Able to un-sandbox when wrapped in WebWorks
function gotFile(fileEntry) {
fileEntry.createWriter(gotWriter, errorHandler);
}
function gotFs(fs) {
fs.root.getFile(blackberry.io.sharedFolder +
"/downloads/blackberry.jpg",
{create: true}, gotFile, errorHandler);
}
...
blackberry.io.sandbox = false;
window.webkitRequestFileSystem(PERSISTENT, 10 * 1024, gotFs,
errorHandler);
}

13. Touch
Define custom touch event handlers
 Up to 4-finger touch events supported
 See “Sample Code – SketchPad Application” http://bit.ly/hz67JX
document.ontouchstart = function(event) {
//Tell browser engine not to scroll/span/zoom
// when user touches screen:
event.preventDefault();
var touch = event.changedTouches[0];
alert(touch.pageX + "," + touch.pageY);
Pong-port sample
}
http://spaceport.io

14. Accelerometer, Magnetometer
HTML5 Device motion, Orientation
 Respond to physical user input
window.addEventListener("devicemotion",
function(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
// Facing up from the Earth’s surface is:
// { x : 0, y : 0, z : 9.81 }
}, true);
Aura sample app

15. GPS
HTML5 Geolocation
 Retrieve users’ GPS coordinates
 Provide location-aware content
function onSuccess(position) {
console.log("lat = " + pos.coords.latitude);
console.log("lon = " + pos.coords.longitude);
}
var ops = { enableHighAccuracy : true };
navigator.geolocation.getCurrentPosition(
onSuccess, onError, ops);

16. Web Notification
HTML5 API for generating system messages
 Proactively notify users about application events
var icon = "http://testuri.com/icon.png";
var title = "Web Notification";
var msg = "Sent from the Kitchen Sink app.";
var notification =
webkitNotifications.createNotification(icon, title, msg);
notification.show();
 Separate Notification() with app-like
experience, BlackBerry Hub

17. HTML5: Media Capture
Capture Picture/Video
Leverages System Camera app
<input type="file" accept="image/*" capture="camera">

18. HTML5 API: Sockets
Real-time communication using persistent connections
 Frameworks: Socket.io, Pusher.js
 E.g. Twitter
 Requires server component
var url = "ws://my.url.com:8001";
var socket = new WebSocket(url);
socket.onmessage = function(e) {
displayMessage(e.data);
}
wordsquared.com

19. HTML5 API: WebGL
3D graphics powered by OpenGL ES
 Frameworks: three.js, CopperLicht, SceneJS, GLGE
 GPU provides hardware acceleration
Tunnel Tilt game
 Free download in App World
 Source code in Github
https://github.com/blackberry/WebGL-Samples

20. BlackBerry 10
WebWorks reborn
20

21. WebWorks APIs
JavaScript wrappers for OS developer APIs
 http://developer.blackberry.com/html5/api
 Identity, Invoke, System…
Learning resources
 http://github.com/blackberry/WebWorks-Samples
 See “kitchen sink” sample application for demos

22. BlackBerry 10 WebWorks SDK
JavaScript framework, backed by Native C/C++
 No longer Java J2ME or Adobe AIR
JavaScript packager
 Running in Node.js
API evolution
 W3C/Cordova alignment
 Build plan for future move

23. BlackBerry 10 and Ripple
Chrome extension
Multi-platform support
 BlackBerry 10, Tablet
OS and BlackBerry OS
Build and sign
BlackBerry apps

24. Ripple mobile emulator
 Development tool for web developers
 Preview, test and build BlackBerry web applications
 Emulate device-specific APIs and capabilities

25. Remote Web Inspector
What is it?
 Debug web content running on a remote device.
 Profile to optimize web page performance.
 Works with simulators or live devices

26. BlackBerry 10 WebWorks APIs
blackberry.app
blackberry.event
blackberry.system
blackberry.identity
JavaScript C/C++

27. BlackBerry 10 WebWorks
<script type="text/javascript" src="webworks.js"></script>
function onLoad() {
document.addEventListener("webworksready", start);
}

28. Config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.100"
id="webworkspim"
xml:lang="en">
<name>PIM Contacts</name>
<author>Research In Motion</author>
<content src="index.html"/>
<icon src="appicon.png" />
<feature id="blackberry.pim.contacts" />

29. Some recent API additions
Invoke
 Invoke other apps, card
 Be invoked
PIM
 Contacts
 Calendar, Messages on their way
BBM
 Update profile, invite to download

30. Custom Extensions
Building your own WebWorks APIs
30

31. Custom WebWorks APIs
Build your own APIs
 Access native layer functionality
 Go beyond HTML5 and core WebWorks
JavaScript interface for platform code
 BlackBerry OS = Java
Lensboost
 Tablet OS = AIR Mblware Ltd
 BlackBerry 10 = C/C++

32. Custom WebWorks APIs
WebWorks SDK for BlackBerry 10
 Platforms = BlackBerry 10
 Native language = C/C++
javascript native
client.js index.js manifest.json jnext.cpp jnext.hpp

33. Custom WebWorks APIs
Open Source
 http://github.com/blackberry/WebWorks-Community-APIs
 Get started using TEMPLATE sample in Github

34. Resources
Places to go, people to see, what’s coming
next
34

35. WebWorks Roadmap
Frequent releases
Incremental APIs, emulation
http://developer.blackberry.com/downloads/roadmap

36. For more information
http://developer.blackberry.com/html5

37. THANK YOU
Jorge del Casar - @jorgecasar
February 29, 2013