Download to read offline
![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](https://image.slidesharecdn.com/html5appdevonblackberry10-130426234617-phpapp02/85/HTML5-App-Dev-on-BlackBerry-10-34-320.jpg)
Uploaded byLarry McDonough
HTML5 App Dev on BlackBerry 10
Larry McDonough, Principal Evangelist at BlackBerry, gave a presentation on developing apps for the BlackBerry 10 platform using web technologies. The key points were: 1. BlackBerry 10 has a top-tier browser and is committed to open standards and the open web. 2. Web apps are treated as first-class citizens on the platform, with performance and feature parity with native apps. 3. Developers have choices in using frameworks like HTML5, WebWorks, and native SDKs to build and deploy apps. 4. An upcoming focus is aligning the BlackBerry web platform around Apache Cordova to further improve the web app experience.
More Related Content
Similar to HTML5 App Dev on BlackBerry 10
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 App Dev on BlackBerry 10
- 1. Silicon Valley Web Builder Meetup 4-24-13 LarryMcDonough Principal Evangelist, BlackBerry @LMCDUNNA
- 2. Agenda • Intro • ShortBlackBerry 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
- 3. 3OpenGL APIs® lex/yacc parsers MapView DesertStorm Pentagon… Chair, Los Angeles ACM SIGCHI Eyematic FaceStation J2ME Who is this guy? Late 1980’s Mid1990’s Late 1990’sEarly 2000’s 200620102003
- 4.
- 5. Launched on January30th , 2013 Device Demo •The Hub •Time Shift •Balance •Keyboard
- 6. Where Did BlackBerry10 Come From? 6 BlackBerry® PlayBook™ HTML5 WebWorks BlackBerry 10TM http://developer.blackberry.com
- 7. 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
- 8. High Level Architecture BlackBerryServices (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
- 9. Developers have Choices Runtimes& Frameworks ActionScript Adobe AIR HTML5, CSS, JavaScript WebWorks C/C++ Native SDK Java Android Runtime
- 10. Other “Frameworks”?? Lotson 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
- 11. BaaS Providers? Allhave 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
- 12. BlackBerry 10: A LeadingMobile Web Platform Larry McDonough Principal Evangelist, BlackBerry @LMCDUNNA
- 13. BlackBerry 10 13 TOP TIERBrowser COMMITTED to Open Standards & Open Web Web Apps are FIRST CLASS Citizens BlackBerry Z10
- 14. What’s BlackBerry’s WebStrategy? 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
- 15. Not Your Father’sSmart 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 BlackBerry Q10
- 16.
- 17. ringmark on BlackBerry10 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
- 18. Top New Features Performance is always feature #1 New CSS support File System APIs getUserMedia indexedDB WebGL requestAnimationFrame In app payments 18
- 19. What’s on theRoadmap? https://developer.blackberry.com/html5/download/roadmap/ 19
- 20. What’s on theRoadmap? https://developer.blackberry.com/html5/download/roadmap/ 20
- 21.
- 22. Web Platform WebPlatform – 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
- 23. Web Platform providesNative 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
- 24. Anatomy of theBrowser 24 Did you know? The BlackBerry Browser itself _IS_ an HTML5/WebWorks app!
- 25. Anatomy of theBrowser 25
- 26. Anatomy of theBrowser 26 Chrome WebViews Content WebViews
- 27. Open Web WeBuild 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 WebWorks Apache Cordova Apache Cordova WebWorks Today Coming Soon BlackBerry BlackBerry
- 28. Application Development What ifyou could build a BlackBerry application using Web technologies?
- 29. Web Flow. WebExperience. Just like Native. 29 jQuery Mobile Sencha Dojo Zepto 3.js … Web Inspector Ripple Weinre Codiqa Cloud9 … Apache Cordova WebWorks Frameworks Tools Build / Deploy 1 2 3 First Class Means: Same Performance and Features as browser Same Performance and Features as native apps (goal)
- 30. BlackBerry 10, WebPlatform Recap 30 1. TOP TIER Browser 2. COMMITTED to Open Standards & Open Web 3. Web Apps are FIRST CLASS Citizens Performance & Feature Parity
- 31. The Proverbial “Hello World” App… 1.Review 2. Build 3. Deploy 4. Run
- 32. “Hello World” Resources: •http://developer.blackberry.com/ • http://devblog.blackberry.com/ • https://github.com/blackberry • https://github.com/Noctivagan/HelloWorld Source code & Tutorial ppt.
- 33. Sample of HTML5Apps on BlackBerry Fly Delta Flixster New York Rangers Official App porter Snooby: a reddit client StubHub theScore Trapeez TuneIn USA Today 33
- 34. Upcoming Events CasualHack 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
- 35. Thank You Larry McDonough PrincipalEvangelist, BlackBerry @LMCDUNNA
Editor's Notes
- #7 TAT was acquired by RIM the winter of 2010 Creating a new platform is very difficult task
- #8 AppWorld e’ stato creato per far avere successo agli sviluppatore e dare visibilità alla propria app E se la propria app è bella, integrata e social, aumenterà la probabilità che altri la scaricheranno e lasceranno una review positiva 04/27/13 04:46 AM
- #14 This slide remains up during Lunch hour. These are the 3 main messages that I want to drive home in the talk. My talk begins 10 minutes before the start of the first session after lunch.
- #15 What’s BlackBerry’s Strategy? Essentially, We try to do the best implementation of standards possible. We’re very active in WebKit (3 rd or 4 th most active contributor I believe) and Open Source Frameworks like jQuery Mobile and Apache Cordova. If developers leverage the frameworks, we want them to get pure “BlackBerry 10 goodness” for free. We treat web applications as “first class citizens” on the platform We enable native integration, but will deprecate our device specific APIs as the Standards evolve. We ALWAYS favor being in tune and aligned with the standards. Finally, we’re continuously pushing the boundaries of the mobile web platform. If this seems odd to you coming from BlackBerry, then I think you’ll find this presentation very enlightening!
- #16 It’s true, we’re not the same old BlackBerry you once knew. These 3 messages are what I want to make sure you all go away with understanding from my brief talk today. #1. BlackBerry 10 is TOP TIER Browser and Web Platform. By “TOP TIER” I mean, leading, #1, ahead of the pack, aggressive. #2. BlackBerry is COMMITTED to working in the Open and contributing to Open Standards. As a company, we’ve made a very strategic decision to put a lot of money and resources behind the Open Web. #3. As a Web Platform, we’re making sure that Web Applications are FIRST CLASS CITIZENS enjoying all that the platform has to offer.
- #17 Now, let’s look at our leadership in HTML5 standards conformance. I’m sure most of you are familiar with HTML5Test.com. They have a really cool feature there where you can choose 3 browsers and get a detailed comparison report on them. Check it out. By any measure, BlackBerry 10 is, and has been for many months, an aggressive contender in the conformance numbers game. If you compare BlackBerry 10 browser with other mobile vendor’s browsers such as iOS, Android, and WP8, BlackBerry 10 comes out on top. If you compare BlackBerry 10 browser with even the top desktop browsers on the market, BlackBerry 10 comes out on top. There are other 3 rd party browsers I didn’t show here that perform better than some shown here, but none of them scores as high as BlackBerry 10. The BlackBerry 10 Browser maintains the highest conformance in all categories across all device types.
- #18 I’m sure most of you are also familiar with the ringmark test suite developed by Facebook. BlackBerry 10 is the first mobile vendor browser to pass ringmark 1. This was no small feat. My understanding is that our web team has been working closely with the ringmark folks to improve bugs and various issues in the tests that will benefit the industry as a whole. Again, another example of industry leadership you would expect from a TOP TIER Browser provider.
- #19 The speed of the web is blindingly fast, and you need to be sprinting just to stay with the pack. At BlackBerry, we’ve been pushing the boundaries on our browser and the platform as a whole. Listed here are some of the most recent updates and new features we’ve added to our browser. Performance is ALWAYS feature #1. Of special note, is WebGL –I believe we continue to be the only mobile web browser to support WebGL. [Larry only] And as an old graphics guy (and ex OpenGL APIs Product Manager at SGI), this is really exciting to me. The main reason we’ve made so much progress here is that we’ve been working so hard on OpenGL ES as much of our platform depends on it. Therefore, as advances are made there, we move them over to WebGL (makes sense!)
- #20 As with all our developer platforms, we provide Look-Ahead roadmaps we call ARRIVAL BOARDS” like the ones you’d see in airports). This allows developers can see what’s coming up and helps them plan accordingly for API support they need. If you look at the Web Roadmap now, you’re only going to see “CORDOVA ALIGNMENT” [next slide]
- #21 CORDOVA ALIGNMENT is the big thing our web team has been working on. I’ll talk more about this in the next slide. The important thing to understand here is that we routinely provide new information about what new APIs are coming up. What release number they’re expected to arrive in, the date, and the status. When they arrive, you’ll see them appear as “LANDED” in the FLIGHT ARRIVAL Board.
- #22 Some of you may know this, but some may not: The BlackBerry 10 browser is entirely developed using Web Technologies. It’s a web app, essentially. It’s very interesting, so let’s take a quick glance at how it’s structured. You have the OS at the bottom. Built on QNX of course. Layered on that is WebKit, the web rendering engine On top of WebKit is what we call the “Web Platform”. This is the real interesting piece. I’ll talk about that on the next slide. Finally, on top are the applications.
- #23 So, what’s the “Web Platform”? This is a piece of code we built that allows developers to build websites and apps using web technologies and have native experience/access to BlackBerry 10. It’s the foundation of the browser, WebWorks, and QNX Car2 UI. The WebPlatform is a multi-process launcher and it manages the WebViews (for example, Tabs). WebViews are all the independent web content containers and run in separate processes. It’s also what provides the glue between your webpage/app and any native API –like the sharing and invocation framework APIs. The Web Platform layer also provides some BlackBerry 10 UI elements
- #24 These UI elements look just like their native counterparts, but they’re purely written in web technologies and have been tuned to ensure high performance. Among these UI elements are: Dialogs, form elements, action bar, sheets, cross cut menues, viewers/cards, date picker, etc.
- #25 [Animations removed and put into 3 discrete slides so that I can give the presentation from my device] Let’s take a look at the anatomy of the browser. On this screen we’re looking at a webpage. [next slide]
- #26 When you click on the icon at the lower left of the URL bar (or you drag it to the right), you can see the options underneath. This is where your Bookmarks, History, New Tab options are.
- #27 If we now explode out all the different objects. Each of these objects are web views –basically independent web content containers. There are “Chrome WebViews” (like the URL bar) and Content WebViews (the other tabs that are being used).
- #28 I described how BlackBerry 10 is a TOP TIER Browser. Now, let’s look at my statement around Open Standards and the Open Web. We do all our development in the open now. BlackBerry WebWorks, our device-specific Java Script library, has been developed completely in the Open for a few years now and is going through an exciting transition I’ll explain in a sec. We also contribute heavily to Open Standards and Frameworks like WebKit, jQuery Mobile, and Apache Cordova. We’ve committed real, dedicated engineering resources to these efforts and it’s all helping to make the browsing experience and the mobile web app experience top tier. Now for the exciting news about the transition we’re undergoing with WebWorks. Instead of developing WebWorks in it’s own repo and then contributing content to Apache Cordova, we’re developing directly into Apache Cordova. WebWorks will shrink to just be a BlackBerry branding of Apache Cordova much the same way Phone Gap is. WebWorks might still need to include a few things that don’t make sense to be in Apache Cordova, and these could be accessed through a plugin or some other mechanism (we’re still exploring how that might look). The message here is clear: We’re jumping in to the Open Web with both feet.
- #29 We’ve covered #1: TOP TIER Browser #2: Open Web Commitment Now let’s look at Apps as First Class citizens. Building real apps using web technologies on BlackBerry 10 is easy.
- #30 The flow of development is just like native flow. First, you leverage existing frameworks such as jQuery Mobile to build your app. Don’t have to do this of course, but the benefits of using frameworks is HUGE. Then, you use standard tools (such as Web Inspector and Ripple) to debug, and test your application. Finally, you build and deploy your application. Submitting your web app to BlackBerry World is the same process regardless of what type of app you’ve built (native or web, etc.) From both a developer’s perspective and a user’s perspective, the experience if first class. Apps are apps are apps. The runtime that powers them is irrelevant.
- #31 Summary of key items in today’s talk: #1. BlackBerry 10 is a TOP TIER Browser and Web Platform #2. BlackBerry is COMMITTED to Open Standards and the Open Web #3. Web Apps are FIRST CLASS Citizens on BlackBerry 10.