You Got A Question? Ask    GNOME Community!

gtk-theme2
 11890   |  Oct 25
gtk_logo2
 9535   |  Mar 17
arch
 7988   |  Mar 28

Run GNOME + HTML5 Applications over Network

This post was made with an older stylesheet


Local HTML5 Apps

Applications today have become too big to run them online, and if we do, they will feel slow. Instead we can download the data once in the client and do all the processing there. We can also take advantage of Google’s Native, Client and use some of the existing C/C++ code natively in our Web-Apps.

Let’s say now we want to add some network functionality like Browser Quest. What I don’t like in Google is that they are making things way to specific for their services. Let’s don’t tie up with a specific framework and lets make code that will run everywhere.

In a Network HTML5 App there are 3 parts. The interface (which is HTML/CSS/JavaScript), the actual processing (ie video editing) and of course the distribution of the data over network. So I will try to explain (quite quite shortly) all these 3, with very simple examples, and how we can make a Native Gnome App, that we can run it in every system. Basically whatever work we do here, we can re-use it!


NodeJS + GNOME WebKit

I am not going to explain the semantics of how NodeJS work. Just keep on mind that WebKit / NodeJS integration works as any website. We should POST or Ajax something to get access to the server and having a response.

Obviously that isn’t optimal specially for real time applications. So instead I will use Sockets to keep alive a real time connection. Socket Programming is really easy with NodeJS and in practice it hasn’t any difference that sending a message in an object and get back a response.

Sockets in NodeJS feel seamless and you can emit custom events, so it is perfect for big scale applications and keep a clean code. Also think that NodeJS is the best technology today, there is nothing better you can use, and it is a worth to learn it as it pays a lot and it is really funny to programming.

There is no reason to talk about the possibilities, creativity is limited to your imagination. You don’t even have to be a good programmer.. It is just made of easy! To be honest on the following example I spend 4-5h cause I got stacked in few things, but these happens. I have stacked 4-5 days in simpler things :)


Run

Remember that in all examples I keep a socket connection with the servers. Also although I am not using anything, you can have full access to GNOME parts like Notification System, Online Accounts etc. This is a quite Native GNOME way of doing Apps ;)

run

In this case I emit a “run command” event. I send the event from Client (Gtk/WebKit) to the server (NodeJS), the server execute the command, and if ok sends an ok message. Also I capture the PID of the App, so I can shut it down.

Although I just sent a one-word command here, we can add arguments and even whole scripts.


Read Remote Files

remote

Here I access a remote NodeJS (Virtual Box) that I run a Rawhide. Accessing a remote system has no difference than accessing your local. By sending a message to the remote I get a response from localhost in JavaScript Alert. That is because the remote message come from the Remote NodeJS to the Local NodeJS and then to my Gtk App.

Of course you can connect the App to a Remote Server but this way I am demonstrating the capabilities of connecting NodeJS between them. I guess that is why they call it Node ;) Same way I am reading the remote /etc/hosts file and I am displaying it to the browser.

The possibilities here are endless, you can connect as many NodeJS as you want and making a service similar to Torrents, but more clever ;) Something you have to be careful about, is since you are having asynchronous connection, some processing can fail. For example if you have two processes: A: Create File, B: Read File, you have to wait for A to end before to begin B. That was the one part I stacked 1h cause I didn’t catch the error :)


WebGL

webgl

This is the second part I spend 1h for nothing. I couldn’t run WebGL in WebKit. The reason is that WebGL is disabled by default in Gtk.WebKit, and I was Googling for an hour to find out was was wrong :) I am using the same code as the previous post, so to enable it, you have to add:

this.webSettings = new WebKit.WebSettings({			
			enable_accelerated_compositing: "true",
			enable_webgl: "true"
		});	

		this.html5view = new WebKit.WebView();
		this.html5view.set_settings(this.webSettings)

Check on Gtk WebKit API for all the properties.


YouTube

Just a ScreenCast with this cool song (cool video clip!)

Gnome Control Center isn’t bugged, I am just running 3.6 in my 3.8 installation ..Just a broken JHBuild Path :)


Try it

NodeJS and WebKit are the very best solution for Network applications that you can use today, and probably they will still remain for the next years.  The best part is that you can make awesome Apps for GNOME without the “thinking”, why to learn GTK or whatever else and making complex applications,  since I most probably won’t be able to re-use my code anywhere else.

I don’t want to expand. You simply can do nothing less than anything! Just give it a try :)

Software I used:

There is also:

Which is a NodeJS bundle with a WebKit (I think, I didn’t try it) so you can run HTML5 Native Apps in any Operating System. However NodeJS has limited possibilities  in Windows.


CSS Theming

Be realistic. HTML 5 has no match in UI Development ;)

theming

It would be great if Gnomers were doing a CSS/JS framework that mimic GNOME UI similar in what Jakub has done.

That would be just great :)


 
  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community
  • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

    It’s Awesome :D

  • http://twitter.com/paugnu Pau Iranzo

    Thanks for this, Alex!!!!

  • Kai

    Security? Using SSL (how to check the cert?) and what kind of authentification (like Basic Auth)?

    • alex285

      NodeJS is enterprise software. Obviously you can use OpenSSL, HTTPS, OAUTH2. They also provide excellent documentation with samples for every function. Is the most rapid growing server for real time applications over network. And the community support is just massive!

  • Pascal Garber

    I’am working on a app that can transform a css based gtk-theme to a browser compatible css-format: https://github.com/JumpLink/web-light-themes

    Maybe next I will start a JS framework for this css to have the same widgets like gtk.

    • alex285

      Awesome! I will try it today or tomorrow and I will make a post about it. I will catch you if I have any issues!

  • jinzhi chen

    wow,wow,wow