You Got A Question? Ask    GNOME Community!


What if we replace GTK/Qt with WebKit?

This post was made with an older stylesheet

Few months ago I had made two posts “Making Fancy GNOME Apps with NodeJS, MongoDB and WebKit!” and “Run GNOME + HTML5 Applications over Network” that were using GtkWebkit on the top of a NodeJS instance. Furthermore I was illustrating how we can create Apps that can be Client/Server at the same time, and connected between them with WebSockets.

That means that you can pass an event from the local side to the remote side, the remote will execute a “Gnomish” process, and when done it will return a message to the local.  By “Gnomish” process I mean a process of a Gnome Library, but it can be any library available under Linux.

Today, I will totally escape the GNOME Dependencies (as GTK) , and I’ll shortly point out the way of doing things just with Node-Webkit.


Get started with an App

Before we get started writing an application, we need to analyze the requirements and choose our development tools. Unfortunately “tools” and “requirements” are very relevant each other, and many times we have to use certain frameworks for certain tasks. For instance, if you want to write a Utility for Gnome, Node-Webkit won’t be the most optimal way, although it will be possible.

Portability

Portability is one of the most significant requirements for any (but Utilities) application. While so far we were thinking portability as something that will work with the minimum effort in Mac/Win/Linux platforms things seems to have changed.

Linux Desktop fragmentation (mostly –but not only– with Ubuntu and everyone else), the many Desktops (Unity, KDE, GNOME, XFCE, Cinnamon etc), the different versions of libs that distros package, and many many more factors (as patching the upstream) has gave a new meaning in “portability”.

Perfect scenario. Write something ONCE, that works EVERYWHERE. NodeJs is almost there.

Rapid Application Development (RAD)

What if  we could write applications similar to GNOME Weather and GNOME Clocks inside a week, that would fetch data from online services, in a few lines of JavaScript, and having those apps running in any platform?

nw-wind

~200 lines of JS code using OpenWeatherMap API

Git: https://github.com/rafaelkyrdan/Weather-Map

That is what Node-Webkit is about. You can use all Web-Technologies in desktop -hybrid- native applications, and at the same time you can call NodeJS and some of the hundreds of existent plugins directly from DOM!

Graphics

I guess you all know the possibilities of HTML 5, you are using them daily ;)

Performance

Performance should be okay, Node and WebKit runs in the same thread and function calls are made straightforward. However V8 run in a Virtual Machine and such things are always memory hungry. In reality “performance” won’t be an issue in most common cases.

Packaging

Wouldn’t be awesome if we can package and distribute our application for any Linux Distro, in a matter of few minutes? Node-WebKit does that by shipping the run-time environment into your App.

Looking forward

NodeJS is currently one of the fastest growing technologies and while is relative new, it is already established as an Enterprise Framework. It has plenty of docs, it is JavaScript and you can also expose your  desktop apps in Web! Most importantly the Webkit + NodeJS deal, has a huge community hundreds of times bigger than Qt and GTK together.

Cloud ready!

Authentication and connection with services like Google,  Twitter etc is really trivial. What makes things even better is the amazing async I/O, and how easily can we organize a queue with our tasks.

Speaking of files handling, NodeJS also does awesome with databases like MongoDB and key-values data store like Redis (if we don’t need ACID), which are two great solutions for storing and retrieving App data.

Integration

What about integrating our WebKit App to GNOME? This is where Node-WebKit lacks. I am not meaning “visual look”, but all the set of convenience that GNOME offers like GOA, Notifications and Search. Actually we can wrap GNOME C Libs functions and calling them through JavaScript in NodeJS, but we would lose RAD.

But then again, if you want your App to run everywhere that isn’t even a concern. If you want your App to target GNOME, again the advantages of WebKit maybe overtaken the disadvantage of a good integration. It is all about what are you going to build.


Single Threaded Javascript

NodeJS (V8 Engine) and GJS (Spider Monkey Engine) are using Javascript. Javascript is known to be single threaded, and while this is a bless -at least for the less than experts!- for networking programming as you won’t deal with any weird “locks”, it might be problem for standalone applications that doing some kind of heavy processing (ie video processing).

But is Javascript actually single threaded? The short answer is no. We can have something running in background, while interacting -asynchronous (a user  “clicks” at random times a UI element) with other scripts. But this is another story.

A real world example (-not open source-) is a an application that you drag image files on the browser window and it does real time cropping while displays the status (%) on browser. You can actually keep adding images on browser and start as many threads as you like.

So such kind of Apps are possible with NodeJS. The trick here is that we use NodeJS as interface, while in background we run a C++ program, that does all the dirty work and passes messages to our server and therefore to client at real time.

Basically the same way that you can write multi-threads apps with GJS and GIO Async C API (I think this, since I haven’t used GIO), the same way you can do this with Node-Webkit.


The Spring Seed Example

Spring Seed is an application that syncs your notes with Drop Box. If you visit their page they only give an Ubuntu client. Of course if you unzip the .deb package there, you can run it from any distro. What all those apps do, is to ship the Node-Webkit environment in a single package.

Because NodeJS evolves awesomely fast, it is impossible to use it a system wide version of it. Every App you make, needs its very own NodeJS Version. Yes we are talking about bundles, that just run ..and run everywhere!

springseed-normal

 Spring Seed looks really great ..and is really fast. Notice that it uses its own Window Controls.

springseed-controls

Oh yes, we can easily add our usual Mutter Controls. However I think that we don’t want that. Specially when GNOME will port everything under Client Side Decorations and Wayland. Which we can mimic easily with some CSS. Or make them even better!

springseed-web

Well, this is about Webkit so why don’t add a URL bar? We might want to check if Note Sync actually works, by visiting Drop Box site ;) 


What if we replace GTK/Qt with WebKit?

First of, I used Node-Webkit (NW) for first time yesterday and I just spend 5-6 hours on it. Secondly I don’t have any serious Desktop Programming experience. I can’t really reckon that Node-Webkit is a superior way to do things over GTK and Qt. Possible it depends from what are you going to build. If is something Cloudy, NW is the way to go!

However I am pretty sure that the impact of NW will be huge in Linux Desktop!

I am wondering what would happen if GNOME had an JS/CSS framework for creating native looking Gnome Web Apps, and some Node modules to communicate with things like GNOME Notifications. One thing I bet on, it would have had many many ..many more contributors ;)

Because NW is developed from Intel and keeping on mind the close relationships between GNOME and Intel developers ..who knows ..maybe a day ..not far from now ;)


Whats Next

Yesterday was my first touch with NW and what I am trying to do is an App similar to GNOME Docs, that will sync with Google Drive and let you store the files in your disk, by popping a GNOME Notification “You successfully saved a file”. The funny part is that the hard part ..is the notification part ;)

So next post about Node Webkit will be this as an example ;)

To dive into these cool things you don’t need nothing but ..

Happy Hacking ;)


 
  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
  • Harald Glatt

    Great post, I think you are absolutely right with this

  • Pascal Garber

    I’ve create an example that demonstrates how you can use your/a library written in Vala (and theoretically C libraries, too) in Node-Webkit/Node.js: https://github.com/antono/vala-object/tree/master/valabind/node-webkit I use valabind for that but I think this is also possible with node-gir. So in this way you can use all your gobject based libraries in Node.js and no longer need gjs (theoretically). I think it is also possible to create gtk dialogs in vala and open it in node-webkit (currently you can’t use gtk directly in node.j because the bindings are not good enough for that)

    • alex285

      You rock! I will check on it soon!

    • Craig

      Why does every hipster and his brother want to infect every corner of the software world with Node.js? It’s a poor tool for the job it was intended for. It’s a downright awful tool for this, especially vs. Vala.

      gjs is passable, if you’re sadistic enough to like JavaScript, but what does Node.js bring to the party? Answer: nothing. Except maybe a smug post on your hipster blog about your big achievement of reinventing the wheel and making it square.

      • Pascal Garber

        I just like it to wire things together. The example which I posted shows you also, how you can have vala bindings for dlang, java, php, ruby, perl, python, gjs and seed.

        So I do not infected vala with node.js but I have infected node.js with vala.

        What is your problem with that? Node-webkit is a new possible way to write desktop applications for your desktop with web technologies. This is not reinventing the wheel, this is is just a new way. This is useful for example when you work with web services together anyway. Currently I’m working on a Magento desktop application, which is a good example https://github.com/JumpLink/magento-price .I had first started to do it in pure vala, it works but this is much more complicated: https://github.com/JumpLink/vala-magento and https://github.com/JumpLink/magento-gtk

  • Albi

    Just look at QML/JS. This works even better than HTML5 applications – the syntax is better and it actually works everywhere. The only drawback is that you have to recompile it for every platform if you’re using any C++ code inside (you don’t have to though).

    Just give it a try!

    • alex285

      I’ve seen the Qt5/QML (the docs I mean and some awesome demos). Yes it looks pretty neat!

      But I can’t really compare Web-Apps with Desktop Apps. I mean whats the point to make a Desktop App, that syncs with a Web App? Because most Desktop Apps this is what they really do ;)

      The goal here is how you can best integrate WebApps in the Desktop. Not re-write them from scratch, just to work in Desktop.

  • Christian Hagen

    This site is the absolute worst site for phone viewing I have ever seen, and that’s no exaggeration. Half the page is obscured by the fancy side-/top-bar and text off-screen without possibility of zooming the text to fit the screen. Won’t come back.

    • alex285

      Yes I know, it sucks. Try again in a week!

      • Craig

        Even on a high resolution tablet, leaving a comment is near impossible. The 1990s called, they want their tacky, obtrusive UI designs back.

      • Scott McDonald

        just made me excited! That border must of been spawned by Loki himself. its a torment on mobiles.

  • http://varemenos.com/ Adonis K. (Varemenos)

    JavaScript by itself is single threaded but don’t forget the HTML5 Web Workers API which finally gives you the ability to create threads.

    I’d really love for the desktop development of Linux distros to switch to web-related technologies, all we need are some APIs to give the ability to do those things via JS (see Firefox OS’s APIs).

    • alex285

      I edit that, I will just post some examples instead :)

  • http://michealhark.tk/ Micheal Harker

    Awesome article on the advantages of using webkit+node in a world where we are using cloud more and more. It’s one of the reasons Springseed was made with webkit, it’s fast and simple to implement, and let’s not forget HTML5 support is so dang awesome.

  • Craig

    No, Fisher Price children’s app are not going to replace native code and the ability to fully control data structures and performance characteristics. “HTML5” is great, but I wish people would stop proclaiming it as the universal solution for everything.

  • https://idontdostuff.wordpress.com/ Ladislav Ezr

    “A new branch of modern powerful applications are coming for Linux
    Desktop, ignoring existed UI toolkits as Qt and GTK. Is this the future?
    Definitely yes!”

    LoL, jsut LoL. ” Definitely yes!”, what a joke…