Building HTML5 apps with nativecapabilitiesJorge del Casar – @jorgecasarFebruary 29, 2013
HTML5 is good for developers
Community momentum
What can you do with HTML5?  Geolocation  Web Sockets  Offline storage  Audio / Video               ScoreMobile Tablet  No...
HTML5Test.comhttp://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html                                            ...
BlackBerry WebWorks               “A cross-platform HTML5 application framework for                creating standalone Bla...
Real Examples in App World    The Economist     News360       HockeyCentral    Huffington Post   Pesktop   Canada’s Got Ta...
HTML5 powered by WebWorksHTML5, CSS3, JavaScript  WebKit engine     WebWorks platform        BlackBerry Developer APIs    ...
How to get there?    Web Assets      WebWorks Tools   BlackBerry Applications
Connect HTML5 with native devicecapabilitiesSoftware & hardware & data … oh my!                                      10
Storage  HTML5 localStorage     Name-value pairs       localStorage.clear();       localStorage.setItem("Greeting", "Hell...
HTML5 File System Read/Write native file-system Able to un-sandbox when wrapped in WebWorks  function gotFile(fileEntry) {...
Touch    Define custom touch event handlers       Up to 4-finger touch events supported       See “Sample Code – SketchP...
Accelerometer, Magnetometer  HTML5 Device motion, Orientation     Respond to physical user inputwindow.addEventListener("...
GPS     HTML5 Geolocation        Retrieve users’ GPS coordinates        Provide location-aware contentfunction onSuccess...
Web Notification  HTML5 API for generating system messages     Proactively notify users about application events       va...
HTML5: Media Capture Capture Picture/Video Leverages System Camera app <input type="file" accept="image/*" capture="camera">
HTML5 API: Sockets    Real-time communication using persistent connections       Frameworks: Socket.io, Pusher.js       ...
HTML5 API: WebGL 3D graphics powered by OpenGL ES    Frameworks: three.js, CopperLicht, SceneJS, GLGE    GPU provides ha...
BlackBerry 10WebWorks reborn                  20
WebWorks APIs JavaScript wrappers for OS developer APIs    http://developer.blackberry.com/html5/api    Identity, Invoke...
BlackBerry 10 WebWorks SDK JavaScript framework, backed by Native C/C++    No longer Java J2ME or Adobe AIR JavaScript pa...
BlackBerry 10 and Ripple                           Chrome extension                           Multi-platform support      ...
Ripple mobile emulator   Development tool for web developers       Preview, test and build BlackBerry web applications  ...
Remote Web Inspector  What is it?     Debug web content running on a remote device.     Profile to optimize web page per...
BlackBerry 10 WebWorks APIs           blackberry.app          blackberry.event          blackberry.system          blackbe...
BlackBerry 10 WebWorks<script type="text/javascript" src="webworks.js"></script>function onLoad() {    document.addEventLi...
Config.xml<?xml version="1.0" encoding="UTF-8"?><widget xmlns="http://www.w3.org/ns/widgets"        xmlns:rim="http://www....
Some recent API additions  Invoke     Invoke other apps, card     Be invoked  PIM     Contacts     Calendar, Messages ...
Custom ExtensionsBuilding your own WebWorks APIs                                  30
Custom WebWorks APIs Build your own APIs    Access native layer functionality    Go beyond HTML5 and core WebWorks JavaS...
Custom WebWorks APIs WebWorks SDK for BlackBerry 10    Platforms = BlackBerry 10    Native language = C/C++  javascript ...
Custom WebWorks APIs Open Source    http://github.com/blackberry/WebWorks-Community-APIs    Get started using TEMPLATE s...
ResourcesPlaces to go, people to see, what’s comingnext                                             34
WebWorks Roadmap Frequent releases Incremental APIs, emulation            http://developer.blackberry.com/downloads/roadmap
For more information         http://developer.blackberry.com/html5
THANK YOUJorge del Casar - @jorgecasarFebruary 29, 2013
Upcoming SlideShare
Loading in...5
×

HTML5 WebWorks

2,578

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,578
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Originally presented at BlackBerry 10 Jam by: Adam Stanley (RIM) and Ken Wallis (RIM) Re-formatted for a 45 minute presentation: 35 minutes of content and 10 minutes of Q&amp;A (or live demos) Added overview of custom WebWorks extensions.
  • Talking points: HTML5 is a standard that will continue to evolve for the next 10 years. Its popularity is growing. HTML5 offers native capabilities to Web content (hardware integration and access to device capabilities)
  • Talking points: All of these applications are free for download from App World (as of May 1, 2012).EconomostTwimbow TIFF Lemma Slacker
  • Talking points: HTML5 content is powered by WebKit on BlackBerry – any improvements to the WebKit engine automatically benefit Web apps.Though the power of the WebWorks platform this content has access to BlackBerry Developer APIs: HTML5 content powered by native capabilities.
  • Demo: build sample app using Ripple &amp; WebWorks BB10
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q &amp; A [10 mins]Suggestion: If there is time at this point, show demos of real apps on a live devicePesktop (PlayBook) or Lensboost (Smartphone) are good examples
  • Talking points: Storage enables offline access to Web content. Storage enables faster performing web apps (cached content doesn’t need to be re-downloaded).WebDB spec is no longer being worked on (IndexDB is coming but not supported on most platforms).
  • Talking points: Storage enables offline access to Web content. Storage enables faster performing web apps (cached content doesn’t need to be re-downloaded).WebDB spec is no longer being worked on (IndexDB is coming but not supported on most platforms).
  • Talking points: The WebKit engine provides default touch event behaviors. Developers can override these behaviors and create their own (e.g. custom swipe gestures, disable pinch-zoom or page scrolling) Very important for BlackBerry 10 Dev Alpha = touch only device.
  • Talking points: Use physical device movement as a form of user input = great for games.devicemotion event fires in very quick intervals (milliseconds apart) when the device is moving. Aura is a WebWorks sample created by TAT that demonstrates using the accelerometer.
  • Talking points: Location aware content = contextual experience. Show users content relevant to their location. Can provide (optional) options. Low accuracy = FAST response (cell-site geolocation) ; High accuracy = slower response (satellite) PlayBook supports autonomous GPS (Satellite) and WiFigeolocation (but only if the hotspot is registered with RIM’s geolocation service).
  • Talking points: Send proactive notifications from your app to the system task bar. Alert users when event(s) happen in your app (e.g. new message, user online, alarm). Great example of HTML5 offering a way to integrate web content with native capabilities.
  • Talking points: Input types can improve the user experience of your Web apps (e.g. make it easier to enter an email address, or URL) Increases quality of data input received from user (e.g. only want numeric data? Provide user with a numeric keyboard). Types of input fields: text, numeric, URL, email, data, time.
  • Talking points: Sockets allow you to maintain a persistent connection – means a server can send real-time messages to an application. Apps can communicate to each other through a server (that acts as a dispatch). 3rd party frameworks make this easy.
  • Talking points: RIM is the first mobile platform to offer WebGL as an application framework to developers. RIM is contributing bug fixes and feature enhancements to community frameworks (e.g. Three.js) Tunnel tilt was created to announce WebGL support on PlayBook.
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q &amp; A [10 mins]
  • Talking points: WebWorks SDK has been re-written for BlackBerry 10 – it now uses native C/C++ as its underlying platform. The packager itself is also brand new. Everything is running as JavaScript and node.js is used to generate your compiled BB10 application. The JavaScript signatures / interface of the WebWorks APIs for BB10 are also being modified to align with similar PhoneGap/Cordova APIs. Why? Make it easier for developers to port content between the two platforms.
  • Talking points: Ripple was recently released again as a Chrome extension. It was originally a Chrome extension, then became a standalone tool and is now back to being an extension. This structure allows the Chrome web engine to evolve on its own, and RIM to easily make over-the-air (OTA) improvements to Ripple for all developers (less upgrades needed!). Ripple extension for chrome supports building apps using the WebWorks SDK.
  • Talking points: Use the Ripple mobile emulator for previewing how your Web content will look on a real device. Can switch between different device profiles (e.g. Test your Web app on a BB10 Dev Alpha, or PlayBook or even iPad profile). Can switch between different platforms to emulate APIs (e.g. test WebWorks APIs, or PhoneGap/Cordova APIs).
  • Talking points: BlackBerry is the only platform to offer remote web inspector to developers. Web Inspector is the industry leading debugging solution for HTML5 content. RIM is contributing features into Web Inspector to make it better.
  • Talking points: 4 APIs were created for initial launch at BB10Jam Orlando. Represent features from most popular app use-cases. JavaScript interface calling native C code.
  • Talking points: New format for calling WebWorks APIs. All apps must include the new webworks.js file and then wait for the webworksready event before calling a WebWorks API. Existing WebWorks applications will need some work to adjust to this new format.
  • Talking points: New format for calling WebWorks APIs. All apps must include the new webworks.js file and then wait for the webworksready event before calling a WebWorks API. Existing WebWorks applications will need some work to adjust to this new format.
  • Talking points: This is a code example of using the new BB10 blackberry.event API. Notice we are working with events and are using the addEventListener() method. This new interface format is very similar to PhoneGap (Cordova).
  • Talking points: The architecture for custom extensions on the BlackBerry 10 platform is still being finalized. A few APIs have already been produced by RIM, but their internal architecture will change. Instead of J2ME or ActionScript, the underlying code used to implement extensions on BB10 will be Native (C/C++).
  • Talking points: This is the tentative schedule for BlackBerry 10 WebWorks APIs over summer 2012.This slide will need to be updated throughout the road show as this roadmap evolves.
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q &amp; A [10 mins]
  • Transcript of "HTML5 WebWorks"

    1. 1. Building HTML5 apps with nativecapabilitiesJorge del Casar – @jorgecasarFebruary 29, 2013
    2. 2. HTML5 is good for developers
    3. 3. Community momentum
    4. 4. What can you do with HTML5? Geolocation Web Sockets Offline storage Audio / Video ScoreMobile Tablet Notifications WebGL … and more Slacker
    5. 5. HTML5Test.comhttp://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html 5
    6. 6. BlackBerry WebWorks “A cross-platform HTML5 application framework for creating standalone BlackBerry applications “
    7. 7. Real Examples in App World The Economist News360 HockeyCentral Huffington Post Pesktop Canada’s Got Talent
    8. 8. HTML5 powered by WebWorksHTML5, CSS3, JavaScript WebKit engine WebWorks platform BlackBerry Developer APIs https://developer.blackberry.com/html5/api
    9. 9. How to get there? Web Assets WebWorks Tools BlackBerry Applications
    10. 10. Connect HTML5 with native devicecapabilitiesSoftware & hardware & data … oh my! 10
    11. 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. 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. 13. Touch Define custom touch event handlers  Up to 4-finger touch events supported  See “Sample Code – SketchPad Application” http://bit.ly/hz67JXdocument.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. 14. Accelerometer, Magnetometer HTML5 Device motion, Orientation  Respond to physical user inputwindow.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. 15. GPS HTML5 Geolocation  Retrieve users’ GPS coordinates  Provide location-aware contentfunction 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. 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. 17. HTML5: Media Capture Capture Picture/Video Leverages System Camera app <input type="file" accept="image/*" capture="camera">
    18. 18. HTML5 API: Sockets Real-time communication using persistent connections  Frameworks: Socket.io, Pusher.js  E.g. Twitter  Requires server componentvar url = "ws://my.url.com:8001";var socket = new WebSocket(url);socket.onmessage = function(e) { displayMessage(e.data);} wordsquared.com
    19. 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. 20. BlackBerry 10WebWorks reborn 20
    21. 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. 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. 23. BlackBerry 10 and Ripple Chrome extension Multi-platform support  BlackBerry 10, Tablet OS and BlackBerry OS Build and sign BlackBerry apps
    24. 24. Ripple mobile emulator Development tool for web developers  Preview, test and build BlackBerry web applications  Emulate device-specific APIs and capabilities
    25. 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. 26. BlackBerry 10 WebWorks APIs blackberry.app blackberry.event blackberry.system blackberry.identity JavaScript C/C++
    27. 27. BlackBerry 10 WebWorks<script type="text/javascript" src="webworks.js"></script>function onLoad() { document.addEventListener("webworksready", start);}
    28. 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. 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. 30. Custom ExtensionsBuilding your own WebWorks APIs 30
    31. 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. 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. 33. Custom WebWorks APIs Open Source  http://github.com/blackberry/WebWorks-Community-APIs  Get started using TEMPLATE sample in Github
    34. 34. ResourcesPlaces to go, people to see, what’s comingnext 34
    35. 35. WebWorks Roadmap Frequent releases Incremental APIs, emulation http://developer.blackberry.com/downloads/roadmap
    36. 36. For more information http://developer.blackberry.com/html5
    37. 37. THANK YOUJorge del Casar - @jorgecasarFebruary 29, 2013
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×