5 ms·

Gtk3 on a HTML5 backend

255 points by biehl 16y ago

DanielRibeiro 16y ago
Now this is getting serious. I was considering porting xul for web apps (with the default and obvious coffeescript dsl, so that no xml verbosity would be needed), but gtk3 is even more outstanding. Any idea when it will be out?
- krakensden 16y ago
  It's not a product, it's a demo he hacked up to see if it was worth pursuing.
emehrkay 16y ago
Didn't some people do this with VNC a few months back? Either way, this is damn cool.
pixelbath 16y ago
It looks cool, but (and please forgive my ignorance in this subject)... Isn't this the sort of thing X was built for? Client rendering, but the underlying app in a remote server? How is rendering this in the browser more useful/cool? (edit: typo)
- postfuturist 16y ago
  Browsers exist in more places than X clients.
- sedachv 16y ago
  Getting X tunneled over HTTP is actually pretty complicated: * The client/server thing is reversed * X expects everything to be fully asynchronous (WebSockets get a lot of hype but they're pretty useless at this stage IMO) * XRender is a big mismatch to canvas drawing API (the old X drawing protocol is in some ways better, in many ways (esp. color) much worse)
fab13n 16y ago
If this turns into a complete and mature implementation, I won't miss anything when Ubuntu drops X11 next year, quite the opposite!
mwg66 16y ago
I can think of potential use cases similar to what 280 North are doing with Atlas and Cappuccino. Check out http://280atlas.com/ http://280atlas.com/
- nailer 16y ago
  Yep, in the sense of cocoa vs gtk. But rather than a port to js, it's a port to canvas.
alkavan 16y ago
this is quite impressive! this can be used as a interface to monitor gtk3 based applications on the web.
travisglines 16y ago
Thats awesome, I'm more than a little jealous I didn't think of that.
cpr 16y ago
This actually makes some sense (if I understand it correctly), vs. a VNC client solution in a browser. You can, in theory, use the higher-level hints given at the toolkit level to optimize the bits sent for each toolkit API invocation.
sedachv 16y ago
(re-posting my comment from the blog because I want to hear people's opinion) This is extremely useful for getting apps written for the desktop to run on the browser for remote access and virtualization. I don’t know if there are any companies with GTK3 desktop apps that need this right now, but for the past six months I’ve been working on doing exactly the same thing for JazzScheme (http://jazzscheme.org/ http://jazzscheme.org/). JazzScheme has its own widget set and UI library that runs on top of Cairo. Instead of sending bitmap data across I’m providing a thin indirection layer on top of Cairo surface and HTML 5 canvas (they’re almost identical in terms of drawing commands). We’re using it for a pretty involved business app that needs a desktop version. Doing a web version any other way would have been a complete nightmare.
xtacy 16y ago
The GTK ports on Mac are pretty bad looking. This would make them awesomer again!
- tvon 16y ago
  Does it just use the default GTK+ theme, or are there rendering issues?
kragen 16y ago
Does anyone else remember the X11 browser plugin? It was an X server that ran as a plugin in Netscape and IE, with a little bit of magic ("xrx") to handle authentication to the web server. So you could visit a web page and start running, say, FrameMaker in your browser. There's a guide to getting it set up still alive at http://www.csn.ul.ie/~caolan/TechTexts/Broadway.html http://www.csn.ul.ie/~caolan/TechTexts/Broadway.html This was in 1996, in the X11R6.3 release ("Broadway"), the same release they came out with LBX, the low-bandwidth extension to X, so that you could run your X11 apps over a modem with reasonable throughput. It never got much adoption. I don't really know why. My guess, though, is that it didn't address the real reasons people were moving from X11 to browser apps: server load, security, ease of administration, latency-tolerance, and ease of development. Today, server load and latency tolerance are a lot less important than they were in 1996, because computers are a hundred times faster and hundreds of millions of people have ping times under 20 milliseconds, ten times faster than you'd get on a modem. But security, ease of administration, and ease of development are a lot more important now than they were in 1996. So, I suspect this won't get widely adopted, but it could go either way. I hope it does!
- ssp 16y ago
  Notice the dropdown menu when he types in the address: it says "Broadway 2.0".
  - kragen 16y ago
    I just read the post; I didn't watch the video.
- crizCraig 16y ago
  Minimizing latency is still very important in mobile, times of network congestion, and the many places around the world that still have slow connections. HTML also has the benefits that it's indexable and semi-open-source. So I hope this is not widely adopted, but it would be awesome for porting existing apps and maybe replacing Flash in some instances.
  - 16y ago
vib 16y ago
"Each toplevel window is mapped to a canvas element" Does this means it's not crawl-able, or is it?
- tjarratt 16y ago
  I'm not an expert, but I believe this to be correct - the contents of the canvas elements are created/managed by javascript, so they would likely appear empty to most spiders. Additionally, I don't believe there is any good way to crawl the contents of a canvas element - the best you can get from it is an image representation as a data uri, so no text or html elements with semantic meaning.
drivebyacct2 16y ago
I was just lying on the couch thinking about this idea. Well, I have much larger, grander idea that is a mix of Palm/HP's new Mocha platform and some play at ubiquitous interfaces and data powering apps on many devices simultaneously. I was thinking though, that some of the frontends for rtorrent look neat, but still fail to look native. What if the browser exposed the GTK resources and allowed web applications to render using the same visual components as native applications on the platform. That'd be sweeet.
olalonde 16y ago
How come is the UI so responsive (much more than what I'm used to with remote X sessions)? Is it because both the app and the HTTP server run on the same machine?
albertzeyer 16y ago
The technical description: Each toplevel window is mapped to a canvas element, and the content in the windows is updated by streaming commands over a multipart/x-mixed-replace XMLHttpRequest that uses gzip Content-Encoding to compress the data. Window data is pushed as region copies (for scrolling) and image diffs. Images are sent as data: uris of uncompressed png data. Input is gathered via dom events and sent to the server using websockets. This doesn't really sound that impressive. It's kind of cool and you could also do the same and port some RDP or VNC client over which would be even cooler. But I don't really feel that this is the way to go. It would be much nicer if the native HTML widgets would be used.
- tjpick 16y ago
  I personally don't give much of a crap about native HTML. That's just a transport, and let's face it, for doing apps it's shit. What I would want it to have is deep linking, back button behaviour and the other nice bits of HTTP.
- pyre 16y ago
  There is not a 1-to-1 mapping between all Gtk+ widgets and all HTML widgets.
  - aberkowitz 16y ago
    There doesn't have to be an exact one-to-one mapping. I doubt there are many Gtk+ widgets that cannot be reasonably emulated in the latest browsers.
  - pornel 16y ago
    HTML5 allows making any element focusable and supports ARIA that exposes custom elements to accessibility API, so you can make pretty good custom widgets using DHTML.
limmeau 16y ago
Related work: the Rich Ajax Platform, an implementation of Eclipse's SWT using the Qooxdoo Javascript framework.
seanalltogether 16y ago
The biggest gotcha with these kinds of demos is, and always will be, keyboard input. Unless browser vendors are willing to relinquish all keyboard controls for a special kind of popup window, HTML5 VNC type solutions are dead in the water.
guruz 16y ago
The Qt guys have a similar thing. It however needs the Google native client plugin. http://labs.qt.nokia.com/2010/06/25/qt-for-google-native-client-preview/ http://labs.qt.nokia.com/2010/06/25/qt-for-google-native-cli... There's also the QWebClient which does not need a plugin, but also does not look very beautiful or native. http://labs.qt.nokia.com/2009/09/18/qt-in-the-cloud-with-qwebclient/ http://labs.qt.nokia.com/2009/09/18/qt-in-the-cloud-with-qwe...

255 points by biehl 16y ago

Now this is getting serious. I was considering porting xul for web apps (with the default and obvious coffeescript dsl, so that no xml verbosity would be needed), but gtk3 is even more outstanding. Any idea when it will be out?

krakensden 16y ago
It's not a product, it's a demo he hacked up to see if it was worth pursuing.

emehrkay 16y ago

Didn't some people do this with VNC a few months back? Either way, this is damn cool.

pixelbath 16y ago

It looks cool, but (and please forgive my ignorance in this subject)... Isn't this the sort of thing X was built for? Client rendering, but the underlying app in a remote server? How is rendering this in the browser more useful/cool? (edit: typo)

postfuturist 16y ago
Browsers exist in more places than X clients.
sedachv 16y ago
Getting X tunneled over HTTP is actually pretty complicated: * The client/server thing is reversed * X expects everything to be fully asynchronous (WebSockets get a lot of hype but they're pretty useless at this stage IMO) * XRender is a big mismatch to canvas drawing API (the old X drawing protocol is in some ways better, in many ways (esp. color) much worse)

fab13n 16y ago

If this turns into a complete and mature implementation, I won't miss anything when Ubuntu drops X11 next year, quite the opposite!

mwg66 16y ago

I can think of potential use cases similar to what 280 North are doing with Atlas and Cappuccino. Check out http://280atlas.com/ http://280atlas.com/

nailer 16y ago
Yep, in the sense of cocoa vs gtk. But rather than a port to js, it's a port to canvas.

alkavan 16y ago

this is quite impressive! this can be used as a interface to monitor gtk3 based applications on the web.

travisglines 16y ago

Thats awesome, I'm more than a little jealous I didn't think of that.

cpr 16y ago

This actually makes some sense (if I understand it correctly), vs. a VNC client solution in a browser. You can, in theory, use the higher-level hints given at the toolkit level to optimize the bits sent for each toolkit API invocation.

sedachv 16y ago

(re-posting my comment from the blog because I want to hear people's opinion) This is extremely useful for getting apps written for the desktop to run on the browser for remote access and virtualization. I don’t know if there are any companies with GTK3 desktop apps that need this right now, but for the past six months I’ve been working on doing exactly the same thing for JazzScheme (http://jazzscheme.org/ http://jazzscheme.org/). JazzScheme has its own widget set and UI library that runs on top of Cairo. Instead of sending bitmap data across I’m providing a thin indirection layer on top of Cairo surface and HTML 5 canvas (they’re almost identical in terms of drawing commands). We’re using it for a pretty involved business app that needs a desktop version. Doing a web version any other way would have been a complete nightmare.

xtacy 16y ago

The GTK ports on Mac are pretty bad looking. This would make them awesomer again!

tvon 16y ago
Does it just use the default GTK+ theme, or are there rendering issues?

kragen 16y ago

Does anyone else remember the X11 browser plugin? It was an X server that ran as a plugin in Netscape and IE, with a little bit of magic ("xrx") to handle authentication to the web server. So you could visit a web page and start running, say, FrameMaker in your browser. There's a guide to getting it set up still alive at http://www.csn.ul.ie/~caolan/TechTexts/Broadway.html http://www.csn.ul.ie/~caolan/TechTexts/Broadway.html This was in 1996, in the X11R6.3 release ("Broadway"), the same release they came out with LBX, the low-bandwidth extension to X, so that you could run your X11 apps over a modem with reasonable throughput. It never got much adoption. I don't really know why. My guess, though, is that it didn't address the real reasons people were moving from X11 to browser apps: server load, security, ease of administration, latency-tolerance, and ease of development. Today, server load and latency tolerance are a lot less important than they were in 1996, because computers are a hundred times faster and hundreds of millions of people have ping times under 20 milliseconds, ten times faster than you'd get on a modem. But security, ease of administration, and ease of development are a lot more important now than they were in 1996. So, I suspect this won't get widely adopted, but it could go either way. I hope it does!

ssp 16y ago
Notice the dropdown menu when he types in the address: it says "Broadway 2.0".
- kragen 16y ago
  I just read the post; I didn't watch the video.
crizCraig 16y ago
Minimizing latency is still very important in mobile, times of network congestion, and the many places around the world that still have slow connections. HTML also has the benefits that it's indexable and semi-open-source. So I hope this is not widely adopted, but it would be awesome for porting existing apps and maybe replacing Flash in some instances.
- 16y ago

vib 16y ago

"Each toplevel window is mapped to a canvas element" Does this means it's not crawl-able, or is it?

tjarratt 16y ago
I'm not an expert, but I believe this to be correct - the contents of the canvas elements are created/managed by javascript, so they would likely appear empty to most spiders. Additionally, I don't believe there is any good way to crawl the contents of a canvas element - the best you can get from it is an image representation as a data uri, so no text or html elements with semantic meaning.

drivebyacct2 16y ago

I was just lying on the couch thinking about this idea. Well, I have much larger, grander idea that is a mix of Palm/HP's new Mocha platform and some play at ubiquitous interfaces and data powering apps on many devices simultaneously. I was thinking though, that some of the frontends for rtorrent look neat, but still fail to look native. What if the browser exposed the GTK resources and allowed web applications to render using the same visual components as native applications on the platform. That'd be sweeet.

olalonde 16y ago

How come is the UI so responsive (much more than what I'm used to with remote X sessions)? Is it because both the app and the HTTP server run on the same machine?

albertzeyer 16y ago

The technical description: Each toplevel window is mapped to a canvas element, and the content in the windows is updated by streaming commands over a multipart/x-mixed-replace XMLHttpRequest that uses gzip Content-Encoding to compress the data. Window data is pushed as region copies (for scrolling) and image diffs. Images are sent as data: uris of uncompressed png data. Input is gathered via dom events and sent to the server using websockets. This doesn't really sound that impressive. It's kind of cool and you could also do the same and port some RDP or VNC client over which would be even cooler. But I don't really feel that this is the way to go. It would be much nicer if the native HTML widgets would be used.

tjpick 16y ago
I personally don't give much of a crap about native HTML. That's just a transport, and let's face it, for doing apps it's shit. What I would want it to have is deep linking, back button behaviour and the other nice bits of HTTP.
pyre 16y ago
There is not a 1-to-1 mapping between all Gtk+ widgets and all HTML widgets.
- aberkowitz 16y ago
  There doesn't have to be an exact one-to-one mapping. I doubt there are many Gtk+ widgets that cannot be reasonably emulated in the latest browsers.
- pornel 16y ago
  HTML5 allows making any element focusable and supports ARIA that exposes custom elements to accessibility API, so you can make pretty good custom widgets using DHTML.

limmeau 16y ago

Related work: the Rich Ajax Platform, an implementation of Eclipse's SWT using the Qooxdoo Javascript framework.

seanalltogether 16y ago

The biggest gotcha with these kinds of demos is, and always will be, keyboard input. Unless browser vendors are willing to relinquish all keyboard controls for a special kind of popup window, HTML5 VNC type solutions are dead in the water.

guruz 16y ago

The Qt guys have a similar thing. It however needs the Google native client plugin. http://labs.qt.nokia.com/2010/06/25/qt-for-google-native-client-preview/ http://labs.qt.nokia.com/2010/06/25/qt-for-google-native-cli... There's also the QWebClient which does not need a plugin, but also does not look very beautiful or native. http://labs.qt.nokia.com/2009/09/18/qt-in-the-cloud-with-qwebclient/ http://labs.qt.nokia.com/2009/09/18/qt-in-the-cloud-with-qwe...