Ubuntu Wiki

   1 [17:03] <alex-abreu> Hi All
   2 [17:03] <lamalex> hello everybody
   3 [17:03] <alex-abreu> welcome this this session about Unity Web Apps technology
   4 [17:04] <lamalex> we're both on Canonical's webapps team, working on- well webapps
   5 [17:05] <lamalex> Canonical introduced webapps for a few reasons. We want to help close the gab between desktop and web development
   6 [17:05] <lamalex> the distinction is kind of arbitrary and the only barrier is technological
   7 [17:06] <lamalex> we're not the first to try and do this, but we think there is some novelty in our solution
   8 [17:06] <lamalex> 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
   9 [17:07] <lamalex> 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
  10 [17:08] <alex-abreu> From the javascript API exposed to integration scripts (we will talk about what it is later) we offer multiple desktop integration points
  11 [17:10] <alex-abreu> from this, the script has access to functionnalities from the messaging menu, the sound menu, the launcher (new icon, quicklists and counts),
  12 [17:10] <alex-abreu> the dash (dynamically added actions), drag and drop (each integration scripts declares a set of mime-types that it supports)
  13 [17:10] <alex-abreu> and the alt-tab switcher
  14 [17:11] <alex-abreu> 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)
  15 [17:12] <alex-abreu> the integrated view of a given webapp can be reached in two ways basically
  16 [17:13] <alex-abreu> 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 [17:14] <alex-abreu> 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
  18 [17:14] <alex-abreu> this basically does not limits you to a given specific way to access a supported webapp
  19 [17:15] <alex-abreu> The chromeless mode offers a streamlined view of the default browser, removing all the unnecessary chrome keeping only the multitabs view
  20 [17:16] <alex-abreu> the menu is then streamlined to the bare minimum (and in the future will be expanded with webapp specific commands)
  21 [17:16] <alex-abreu> and some generic actions are disabled
  22 [17:17] <alex-abreu> the idea of a chromeless window is also to also act as a container for a group of common webapps (based on same website)
  23 [17:17] <alex-abreu> e.g. for the google docs webapp
  24 [17:18] <alex-abreu> all your document should open in the same chromeless window, nothing else
  25 [17:19] <alex-abreu> browsing outside of googledocs from a given chromeless tab will open a new chromeless window and start a new webapps container
  26 [17:20] <lamalex> we're really excited that this work we're doing offers so much opportunity for the Ubuntu community to contribute
  27 [17:21] <lamalex> 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
  28 [17:21] <lamalex> 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.
  29 [17:22] <lamalex> 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
  30 [17:22] <lamalex> ok onto the overview
  31 [17:23] <lamalex> first up is the userscript. this is the javascript code that integrates with a webapp to provide integration.
  32 [17:23] <lamalex> there are 2 types of scripts. userscripts and native
  33 [17:24] <lamalex> a userscript is essentially a greasemonkey script that gets injected into the browser and executed when the page loads, just like normal javascript.
  34 [17:24] <lamalex> these are what we ship in the unity-webapps package
  35 [17:25] <lamalex> 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
  36 [17:25] <lamalex> these are the bread and butter of what we do. the rest of our work goes into building the support structure so these work
  37 [17:26] <lamalex> 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
  38 [17:27] <lamalex> so far we're already seeing some adopting of our API with web developers
  39 [17:27] <lamalex> for instance, Rd.io have integrated the unity api into their webapp
  40 [17:28] <alex-abreu> whatever the mean of integration as explained above
  41 [17:28] <alex-abreu> everything through browser specific extensions
  42 [17:29] <alex-abreu> that acts as a bridge between the "integration script" and the native backend
  43 [17:29] <alex-abreu> that communicates with the various Unity components targetted
  44 [17:30] <alex-abreu> 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
  45 [17:31] <alex-abreu> two extensions are available, one for chromium and one for firefox
  46 [17:32] <alex-abreu> the one for chromium, can be seen in when navigating to chrome://extensions
  47 [17:33] <alex-abreu> 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
  48 [17:34] <alex-abreu> the content script also injects the API in the javascript "world" associated with the page so that anywebsite can "natively" use it
  49 [17:34] <lamalex> 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
  50 [17:35] <lamalex> From the browser extensions, the data sent via the API shoots to a daemon running in the background.
  51 [17:36] <lamalex> there are two daemons, context-daemons and the webapps-service daemon
  52 [17:36] <lamalex> webapps service takes care of general tasks (unrelated to specific website).
  53 [17:37] <lamalex> and the context-daemons do the integration for each instance of a webapp and the desktop
  54 [17:37] <lamalex> if you open up D-feet, the dbus browser and type webapp
  55 [17:37] <lamalex> you'll see the named service bus and a few private ones
  56 [17:37] <lamalex> the private ones represent an instance of a webapp. those are spawned each time you open gmail, docs, twitter, etc
  57 [17:39] <lamalex> ok- now onto the tutorial! we're going to walk through the one published on webapps.ubuntu.com
  58 [17:39] <lamalex> http://developer.ubuntu.com/resources/app-developer-cookbook/unity/integrating-tumblr-to-your-desktop/
  59 [17:39] <lamalex> 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
  60 [17:40] <lamalex> 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
  61 [17:41] <lamalex> 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
  62 [17:42] <lamalex> 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
  63 [17:42] <lamalex> ctrl+shift+j will open the javascript console
  64 [17:43] <lamalex> 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?
  65 [17:44] <lamalex> step 1 is always to load the unity object, and is done the same way every time
  66 [17:44] <lamalex> in your JS console enter window.Unity = external.getUnityObject(1);
  67 [17:45] <lamalex> 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.
  68 [17:45] <alex-abreu> (sure)
  69 [17:47] <alex-abreu> Please keep in mind that a given integration script will be run & executed everytime you basically browse a webpage
  70 [17:47] <alex-abreu> one thing that you will see in most of the integration scripts already there
  71 [17:47] <alex-abreu> is a function called isCorrectPage()
  72 [17:47] <alex-abreu> this is not mandatory per se
  73 [17:47] <alex-abreu> but strongly advised
  74 [17:48] <alex-abreu> one of the *important* thing that we try to do is to *expand* the user's experience
  75 [17:48] <alex-abreu> without altering the experience or deteriorating it if something is wrong
  76 [17:48] <alex-abreu> or even modifying the webpage in any way
  77 [17:49] <alex-abreu> 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
  78 [17:50] <lamalex> are we out of time already?
  79 [17:50] <ClassBot> There are 10 minutes remaining in the current session.
  80 [17:50] <lamalex> yar
  81 [17:51] <lamalex> so if we refer to the tutorial, we see is isCorrectPage function wrapping a call to Unity.init
  82 [17:51] <lamalex> 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
  83 [17:52] <lamalex> it takes its parameters in the form of a dictionary and has 3 required parameters
  84 [17:52] <lamalex> name, iconUrl, onInit
  85 [17:52] <lamalex> name is the name of your webapp, very obvious
  86 [17:53] <lamalex> 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
  87 [17:53] <alex-abreu> (make sure to select a meaningful name, it will be used when the user is being asked for integration permission)
  88 [17:53] <lamalex> for instance the url to the tumblr icon on the dashboard is http://assets.tumblr.com/images/logo.png. so you could do:
  89 [17:54] <lamalex> Unity.init({name: "Tumblr", iconUrl: "http://assets.tumblr.com/images/logo.png", onInit: wrapCallback(setupTumblr)});
  90 [17:54] <lamalex> and this would use the hosted tumblr icon rather than one installed in the system.
  91 [17:55] <lamalex> onInit is a callback and that's where all of the meat of your userscript will happen
  92 [17:55] <ClassBot> There are 5 minutes remaining in the current session.
  93 [17:55] <lamalex> 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
  94 [17:56] <lamalex> 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/
  95 [17:56] <lamalex> and #ubuntu-webapps is always available if you need more help feel free to ping any one of us
  96 [17:56] <lamalex> are there any questions?
  97 [17:56] <lamalex> comments?
  98 === decko__ is now known as decko
  99 [17:57] <alex-abreu> 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
 100 [17:57] <lamalex> thanks for tuning in. hope this session was informative and inspiring
 101 [17:58] <lamalex> go write userscripts
 102 [17:58] <alex-abreu> you can reach us and ask any question in #ubuntu-webapps as stated by lamalex, or in askbuntu.com w/ the "webapps" tag