== Dev Week -- Getting started with Ubuntu WebApps -- lamalex and alex-abreu -- Thu, Aug 30th, 2012 == {{{#!irc [17:03] Hi All [17:03] hello everybody [17:03] welcome this this session about Unity Web Apps technology [17:04] we're both on Canonical's webapps team, working on- well webapps [17:05] Canonical introduced webapps for a few reasons. We want to help close the gab between desktop and web development [17:05] the distinction is kind of arbitrary and the only barrier is technological [17:06] we're not the first to try and do this, but we think there is some novelty in our solution [17:06] previously its been tried to bring html5 development to native apps, i think rick spencer wrote up a demo of this a few months ago. that's cool and all, but it leaves a lot to be desired [17:07] we're trying to allow the web to integrate itself into the desktop via a javascript api that site authors can use to make their web application feel at home on a desktop, not like webapp but integrate into the shell just like a native application [17:08] From the javascript API exposed to integration scripts (we will talk about what it is later) we offer multiple desktop integration points [17:10] from this, the script has access to functionnalities from the messaging menu, the sound menu, the launcher (new icon, quicklists and counts), [17:10] the dash (dynamically added actions), drag and drop (each integration scripts declares a set of mime-types that it supports) [17:10] and the alt-tab switcher [17:11] we plan to add more in the future (not necessarly in terms of API changes but better desktop integration to get closer to native feel) [17:12] the integrated view of a given webapp can be reached in two ways basically [17:13] 1. by browsing (with firefox or chromium at this point) to a supported websites, i.e. one that has an installed integration script associated, or one that "natively" integrated with Ubuntu through a direct usage of our API [17:14] 2. by using the launcher icon to start an already integrated web application, it then start a browser window (default one) in a special "chromeless" mode [17:14] this basically does not limits you to a given specific way to access a supported webapp [17:15] The chromeless mode offers a streamlined view of the default browser, removing all the unnecessary chrome keeping only the multitabs view [17:16] the menu is then streamlined to the bare minimum (and in the future will be expanded with webapp specific commands) [17:16] and some generic actions are disabled [17:17] the idea of a chromeless window is also to also act as a container for a group of common webapps (based on same website) [17:17] e.g. for the google docs webapp [17:18] all your document should open in the same chromeless window, nothing else [17:19] browsing outside of googledocs from a given chromeless tab will open a new chromeless window and start a new webapps container [17:20] we're really excited that this work we're doing offers so much opportunity for the Ubuntu community to contribute [17:21] now that we've introduce what we're trying to build, there are 2 more parts of our talk here. next we're going to give an overview of how all of the components fit together. then we'll go through a tutorial of writing a userscript [17:21] that's where the most help from the community will come, we hope. the more apps are integrated the better our work is and the better the web experience on ubuntu becomes. [17:22] we have some plans for the future to bring all of the work we've done to the various web standards bodies so that this can all be web supported cross platform work, started by and best on Ubuntu [17:22] ok onto the overview [17:23] first up is the userscript. this is the javascript code that integrates with a webapp to provide integration. [17:23] there are 2 types of scripts. userscripts and native [17:24] a userscript is essentially a greasemonkey script that gets injected into the browser and executed when the page loads, just like normal javascript. [17:24] these are what we ship in the unity-webapps package [17:25] these work to parse the DOM tree, and by making various calls to the Unity webapps API (http://developer.ubuntu.com/api/ubuntu-12.04/javascript/unity-web-api-reference.html) manage to send and receive messages to and from the launcher, HUD, messaging menu, and all of the various integration points [17:25] these are the bread and butter of what we do. the rest of our work goes into building the support structure so these work [17:26] our goal is for web developers to integrate our API right into their site so that the userscripts arent necessary, relieving us of a maintenance burden and allowing the web developers who really know their code, to craft a really beautiful and fully integrated experience for their site [17:27] so far we're already seeing some adopting of our API with web developers [17:27] for instance, Rd.io have integrated the unity api into their webapp [17:28] whatever the mean of integration as explained above [17:28] everything through browser specific extensions [17:29] that acts as a bridge between the "integration script" and the native backend [17:29] that communicates with the various Unity components targetted [17:30] the extensions manage all the tasks related with injecting our API, keeping track of the integration elements, and doing some book keeping in the background [17:31] two extensions are available, one for chromium and one for firefox [17:32] the one for chromium, can be seen in when navigating to chrome://extensions [17:33] without going too much into the technical side (ask questions if needed), each navigated tab has a content script associated to it that communicates back and forth with a background page script that checks if one or more integration script are available for the currently visited URL [17:34] the content script also injects the API in the javascript "world" associated with the page so that anywebsite can "natively" use it [17:34] The logic of the firefox extension is very similar to that of the chromium one, but the firefox extension uses a forked version of greasemonkey to handle loading and injecting the userscripts. In Quantal we ship Firefox with a patch that backports a feature from FF17 that allows us to get the XID of the tab. We use this for window tracking, raising the right tab of a webapp, and stuff like that [17:35] From the browser extensions, the data sent via the API shoots to a daemon running in the background. [17:36] there are two daemons, context-daemons and the webapps-service daemon [17:36] webapps service takes care of general tasks (unrelated to specific website). [17:37] and the context-daemons do the integration for each instance of a webapp and the desktop [17:37] if you open up D-feet, the dbus browser and type webapp [17:37] you'll see the named service bus and a few private ones [17:37] the private ones represent an instance of a webapp. those are spawned each time you open gmail, docs, twitter, etc [17:39] ok- now onto the tutorial! we're going to walk through the one published on webapps.ubuntu.com [17:39] http://developer.ubuntu.com/resources/app-developer-cookbook/unity/integrating-tumblr-to-your-desktop/ [17:39] which i guess we should also pimp out webapps.ubuntu.com as the developer site for webapps. API docs, tutorial, etc is all there. if you need info- that's a good place to start [17:40] so let's just jump right in- you're all literate and can read the tutorial in its entirety at another time. we just want to help you explore the API [17:41] this tutorial is mostly based around the tumblr dashboard so if you don't have a tumblr account you'll have to a) make one or b) just follow along and try modifying what we're doing to match some other site. that's really what you'll be doing when you write a userscript anyway [17:42] this tutorial uses firefox, let's use chromium just for change of pace. open up tumblr.com in a chromium browser and log in to the dashboard [17:42] ctrl+shift+j will open the javascript console [17:43] this is where we'll be working for the rest of this demo- and while we're doing this demo I suppose we can start Q&A since we're running out of time. Sound good to you alex-abreu? [17:44] step 1 is always to load the unity object, and is done the same way every time [17:44] in your JS console enter window.Unity = external.getUnityObject(1); [17:45] the parameter (1) is for API version. it's just to ensure your script is set up to use the proper version of the API. [17:45] (sure) [17:47] Please keep in mind that a given integration script will be run & executed everytime you basically browse a webpage [17:47] one thing that you will see in most of the integration scripts already there [17:47] is a function called isCorrectPage() [17:47] this is not mandatory per se [17:47] but strongly advised [17:48] one of the *important* thing that we try to do is to *expand* the user's experience [17:48] without altering the experience or deteriorating it if something is wrong [17:48] or even modifying the webpage in any way [17:49] so the idea behind the function above, is to make sure that the webpage has all the elements that you expect it to have before starting an init [17:50] are we out of time already? [17:50] There are 10 minutes remaining in the current session. [17:50] yar [17:51] so if we refer to the tutorial, we see is isCorrectPage function wrapping a call to Unity.init [17:51] Unity.init is the base function for all of your userscripts. This kicks off a new context-daemon, adds an icon to the launcher/switcher [17:52] it takes its parameters in the form of a dictionary and has 3 required parameters [17:52] name, iconUrl, onInit [17:52] name is the name of your webapp, very obvious [17:53] the icon url is a url to an icon. this can take the form of icon:// for a local icon in an icon theme- or the location of an image on a webpage [17:53] (make sure to select a meaningful name, it will be used when the user is being asked for integration permission) [17:53] for instance the url to the tumblr icon on the dashboard is http://assets.tumblr.com/images/logo.png. so you could do: [17:54] Unity.init({name: "Tumblr", iconUrl: "http://assets.tumblr.com/images/logo.png", onInit: wrapCallback(setupTumblr)}); [17:54] and this would use the hosted tumblr icon rather than one installed in the system. [17:55] onInit is a callback and that's where all of the meat of your userscript will happen [17:55] There are 5 minutes remaining in the current session. [17:55] once the daemon has been initialized and all of the system bits are ready to go, this will be called and your script will start to run. in here you integrate with the messaging menu, etc [17:56] since we're pretty much out of time I don't see much reason in going too much deeper. like we said, there's a helpful tutorial available from http://developer.ubuntu.com/resources/app-developer-cookbook/unity/integrating-tumblr-to-your-desktop/ [17:56] and #ubuntu-webapps is always available if you need more help feel free to ping any one of us [17:56] are there any questions? [17:56] comments? === decko__ is now known as decko [17:57] once your callback (specified in the onInit propery or the init() call) is called, you will have: a launcher icon present and be ready to use the API and integration points [17:57] thanks for tuning in. hope this session was informative and inspiring [17:58] go write userscripts [17:58] you can reach us and ask any question in #ubuntu-webapps as stated by lamalex, or in askbuntu.com w/ the "webapps" tag }}}