Geekly Articles each Day
📜 ⬆️ ⬇️

How to make a cross-platform desktop application based on web technologies



Dmitry Dudin (xbSoftware)


Today I will tell you about the technology nw.js, most of the slides in my presentation will be devoted to it. This technology allows you to develop desktop applications and write them in html, javascript and css. And the application will be cross-platform - for Windows, Linux and Mac. You can bring them down and they will have access to the graphical interface of the system, i.e. can still work with menus, etc.

My name is Dima ( @nedudi ), I work for XB Software, I'm from Minsk.

We do all sorts of Javascript webix components for admins, i.e. for large amounts of data - you can find and see. We are also engaged in outsourcing, besides this, I am writing a blog html5.by . We also have a 4front front-end community in Minsk, which we organize, and also - we hold “What the Hack” every six months - this is an event where we make lifeless hacks, i.e. anti-starter, but very cool.
')
We turn to the topic.


We all love making web apps. Probably everyone loves to make web applications. We surround them with care, attach some grants, postprocessors, preprocessors to them, we are simply dragging ourselves away from all this development. But, to be honest, most of the applications that we use for work are still desktop applications. These are those applications that have an icon on the desktop that runs and can hang in the background for weeks. These are some kind of graphic editors, file managers, audio editors, video editors, some kind of system utilities. And why not write it all on web technologies? There is such a barrier here - a browser that cares a lot about our security.

Suppose I want to write an application on web technologies and I want it to work like a desktop application. What barriers do I have? I will express them as “I want”:


Is it possible to do all this in applications written on web technologies using nw.js? Yes it is possible. And this can be done very easily. Until nw.js, which I will talk about (he just recently got to the surface and became so popular), what other solutions are there?

There is Adobe Flash ( http://www.adobe.com/products/flash.html ), Chrome apps https://www.google.com/chrome/webstore/apps-games.html ), Tide SDK (ex. Titanium Desktop - http://www.tidesdk.org/ ), App.js ( http://appjs.com/ ), Brackets Shell ( https://github.com/adobe/brackets-shell ), Tint ( https: //www.trueinteractions.com/tint2/docs ) and others.

All of them are trying to do the same thing, but when we start reading the documentation for them, it becomes very sad, because there are some rules of our own, their foundations. You first need to understand their philosophy, their API. To write some simple application you need to parse some examples of documentation, and it takes really a lot of time. Or maybe you will not use this technology?



With nw.js ( http://nwjs.io/ ) everything is much simpler. If you have ever written a web application, and have experimented or worked with Node.js, then in two hours you will be able to write a desktop application for three platforms that will work.

In my subjective opinion, there are two decent solutions on the market for this. This is nw.js, which we will talk about, and Electron ( http://electron.atom.io/ ).



This is, in fact, a follower of nw.js, it is developed by the Github developers who make Atom, the IDE Atom is written in Electron. It used to be called Atom Shell, and literally in April they renamed it Electron.

Today we will make a choice "by the stars", i.e. I went to Github, looked at which of them had more stars, more community, and you took one of them for yourself. In fact, Electron is very promising, so maybe in a year it’s worth thinking about switching to Electron. We must look at how it will develop. In any case, they have very few fundamental differences. Therefore, switching from nw.js to Electron in a year is not so difficult. And at the end I will tell you the fundamental difference between them.

The nw.js project used to be called node-webkit, it has a story.



In 2011, Roger Wang, a developer from China, had the idea to cross Node and webkit, to make a web application. He called it node-webkit, because the webkit was then a render engine of Chromium, now it is Blink. Years passed, the project developed, everything was fine, but by the present moment it had lost its name.

In April 2013, Chromium moved to Blink ( http://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html , i.e., the webkit was lost, and from January 2015, the project started using io.js https://groups.google.com/forum/#!msg/nwjs-general/V1FhvfaFIzQ/720xKVd0jNkJ ). There is already Node.js lost. Although Node.js may be back soon, judging by the news. Therefore, the project was renamed nw.js and laid in this nw such a sacred meaning - the native web. It is supported by Intel and gnor.net.

Main idea.

We have desktop applications. How are they fundamentally different from web applications? The fact that the machine that renders the interface, on it, basically, there are changes. Those. The file manager, which renders the interface, allows you to change files on the machine on which this application is running. In web applications, basically, everything is organized differently: there is a browser that renders something, and everything changes on a server that is somewhere far away. Therefore, in nw.js, developers wanted to bring web applications closer to desktop applications. How did they do it?



Nw.js has two parts: Chromium and io js.

What is Chromium? This is an open source browser that is very similar to Chrome, it is supported by Google, Opera software, Yandex, Nvidia - such big guys. It is based on Blink as a rendering engine, the javascript engine is V8.

Node.js, written in C ++, works at the level of the application layer protocols, it has access to some kind of network interactions, file system and other system chips. Those. Because of this, it is more used on servers and for automation of some kind.

Both of them use V8. The same V8. Do you know where this name comes from?



When the developers created the V8, they took as a basis the idea of ​​the engine ... V8 - because the valves are located with the letter V and there are 8 of them (valves). The V8 engine has long been used.

In 1902, this thing was called Arianet, in my opinion, and the V8 was already used in it:



And this is the 2015 Chevrolet Camaro and it also uses the V8.



If the browser-based V8 lives the same life, it will be very cool.

Let's go back to the V8. The main idea is to unite these two worlds and make them working on the same engine in the same context. Those. You can directly call Node.js functions from home, connect Node.js modules, pass objects by reference, work in a single context, have one event loop. More precisely, here Node.js runs on the V8 engine that Chromium has.

Let's give a small example.



We have fs in Node.js to work with the file system. We can look for changes in some kind of log file, and if they happen, we take a DOM element and draw the contents of this log file into it. Just on the server this is impossible, on the client this is also impossible, there is no access to the file system of the user. And in the nw.js dextup application, this will all work fine.

How did they do it?

There were two main problems: do it all in one work event loop, and so that it works in a single context. Those. There is no window and global, there is a global context in which there is both Node.js and browser javascript. Here you can read more - https://github.com/nwjs/nw.js/wiki/How-node.js-is-integrated-with-chromium .

We start the dive. How to start working with nw.js? You go to nwjs.io, download from there a file for your build platform, and then you can build your application on any principle.



Nobody tells you where to put html, where to css, you simply place the application as you want, the entire structure. The only thing you should have is package.json. This file is exactly the same as in any Node.js application, but it will have several additional fields.



This is the main file to start working with.

Many settings for window parameters, dependencies, which are needed for the node.

Then you can also send back the flags with which Chromium is launched, the flags with which Node is launched, and some other system settings that are enough.



Further, we will write such an application in our test case. We will have a div that has some content, add some CSS, and all we need to do is nw app. Where nw app is the path to the directory with your application. At the same time on the screen you will see something like this:



Those. The application will start, an icon will appear. This is very similar to the browser. In fact, this is the browser, it is just an ordinary Chromium.

But here you just want to make it look less like a browser, because it’s still a desktop application, and there’s a lot more to it from above.

There are a lot of settings for this, let's briefly go over some of them. You can remove the toolbar, it is in the config.



It will look something like this:



We can further remove the frame, i.e. That thing with the buttons.



It will be something like this:



Already more like something dextopic.

Then we can make it generally transparent, i.e. transparent:



At the same time, we will just have the text to hang above our desktop - no signs of the browser:



You can run the application in kiosk mod.



Kiosk mod is used for toys, mostly. Still well used for all terminals, info-kiosks, all kinds of large panels that display menus in McDonalds, etc. It is full-screen, it is very difficult to get out of it, it is released only by the described methods, or alt + tab, or ctrl + alt + del in Windows. Therefore, if you need in kiosk mod, it looks like this, i.e. Fully occupies your screen:



This is not FullScreen, no pane will not leave, if you will let the mouse down somewhere. For him, you will need to provide buttons in order to give the user to get out of all this beauty. Otherwise, the user will have to kill him in the processes.

Or you can even run the application in the background, without a window at all, it will be like this:



What else is there any beautiful buns?



Nw.js in the standard package gives you an API to manage some system interface elements. It is possible to create all sorts of menus, tray icons, notifications, you can work with the clipboard, with system shortcuts, i.e. not browser-based, when you have an application in focus, and if you clicked something, something will happen to you, and keyboard shortcuts at the system level. Those. you do not see the application, you clicked something, it appeared, or something did - a screenshot or something else. All this connects via require nw.gui. This thing goes to the standard delivery, it is not necessary to connect it from anywhere.

Briefly run through them. Context menus.



They are created very simply: write such Javascript - we need a menu, we need several items of this menu, we need one separator, i.e. the separator between the items, and on one of the menu items, we hang up "hello." It turns out the thing that we hang on the right button, and we will have such a system menu:



Those. it will look like this on a Mac, on Windows it will look absolutely Windows-like, on ubunt or another Linux, absolutely Linux-like.

Window menu.



Same story. Create the same menu, just give it the role of the menu bar. We get this menu with nested menu items:



Trey or menu bar, in other OS.



We also create an icon in the tray, we can hang some drop-down menus on it, there is an icon, the name, there are some checkboxes, drop-down lists, i.e. all this can also be done.



Moreover, all these events that will be called there will reach your browser window, and there you can do something, either in the node or in the DOM, it doesn't matter.

Shortcuts.



It is also very simple. You write with the text what combination of keys you are interested in, try to register it in the system, if such a combination of keys in the system already exists, it will tell you: “Sorry, Fail, you need to try something else”. If all is well, he will register it and begin to react to it. Those. all events when the user clicks on these keys will go here to the active.

Clipboard. Clipboard.



Same story. While they support only text-based clipboard, they promise to support with markup in the future too, but for now you can put something on the clipboard and get something from the clipboard. Those. you can already think of some application for yourself, where you press a shortcut, and your clipboard is sent somewhere to the cloud, or something else. Here the main principle - do no harm . Because nw.js removes a lot of security restrictions. You can delete user files, you can send them anywhere, you can spoil everything. Actually it's cool. Freedom is cool, not something that can spoil everything.

Data storage.

In applications, data storage can be divided into two categories: structured data, which we usually store in some databases, and some static files, i.e. some local resources of this application, pictures, video, audio, intermediate, which we need to store. As an example, if you are writing a desktop toy, then at least you need to store the results, the latest results, if you are writing an application, then the last open files, some local settings.



To store these static files nw.js date you such a variable App.dataPath ( https://github.com/nwjs/nw.js/wiki/App ), this is a directory, it will be different on each OS, but if you use it is this directory for storing your static content, then you can be calm, it will be stored well there, everything will be fine. It consists of the name of your application, so there will be no conflict between applications in this folder.

To store structured data, you can use everything that has already been created in Chromium (the last Chromium is at your fingertips), so Web SQL Database, IndexedDB, Web Storage, Local Storage, Session Storage, Application Cache, whatever. I can only advise: they are not very pleasant to use in their pure form, so tons of plugins were written in nw.js, I mentioned in my article a reference to where all these plugins are.

Debugging With debugging everything is also very good. There is such a way - you have such a gear in the toolbar:



A debugger opens, absolutely the same as in Chrom'e last. You are there to debug everything. No different from Chrom'a. If you want even more freedom, you can still run nw.js remote debugging port 1234, for example, and you have the same Chrome debugger open at that address.

There is the possibility of Livereload ( https://github.com/nwjs/nw.js/wiki/Livereload-nw.js-on-changes ), i.e. when you change the code, your application is automatically updated. They didn’t come up with anything new there, they use plug-ins, patches, which simply reload this window.

With the assembly of applications ( https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps ). If you come across nw.js for the first time, please do not try to do it all manually. Because the documentation will advise you something like this:



This is a documentation page, and when you read it, there are all sorts of dll, some Linux problems, something else. The first feeling is that everything, on this I finished working with nw.js. But in fact, there is a wonderful plugin called node-webkit-builder ( https://github.com/mllrsohn/node-webkit-builder ):



There, the whole thing is already described, automated and working. All you need to do is download it, run the nwbuild command with the path to your application, and you can still specify a lot of different checkboxes, for example, for which OS to build. At the same time, he will climb, pump out the latest build for all OSs, load it for himself, bring it all down, spread it out to you in daddies. Those. you will have linux 64, linux 32, windows 64, vidnovs 32, etc. All these daddies are already with ready-made files for execution. All you have to do is open them either under Windows, or under Linux, or under poppy.

What did I do? After running this command, the application looks like this on a poppy:



So on Windows:



True, there is no robot font in Windows, so the font went, but I just didn’t connect it.

And so it looks like under ubunta:



Those. Menus look the same as any Ubuntu menus.

I want to compare nw.js and Electron. Because Electron is increasingly gaining momentum. In fact, nw.js and Electron differ quite a bit.



There is such a story that Roger Wang told in one of the reports that when he was developing node-webkit at one of the stages Github developers were interested in him. And they began to ask some questions: what, how, why? And some of them had ideas on sharing this all. And his intern worked with him, i.e. next dude, who also writes something there, helps. So after some time, this was hired by Github, who began to write Electron. Then they made Atom Shell, then Atom, then Electron. Therefore, there are very few conceptual differences between them. There are differences, but for the final developer, they are very small.

The first is the entry point, i.e. in nw.js, we immediately open some index.html file and show it in the window. In Electron, you work more with Javascript, i.e. you do not immediately show any html. You in Javascript create this window, and then show it. These are probably all the differences. In Electron, they have different principles for building builds, which, in principle, we don’t care, because I don’t want to read all that documentation anyway. Modified against the original Chromium, i.e. the guys in Electron, who was the former Atom Shell, did not want to change Chromium, they somehow get out of it, in order not to patch Chromium at all and use the one that is. In nw.js, they patch it and remove some security settings and something else.

And one more difference - in context. In nw.js, the context is general, if you create many windows, it is different in Electron. In principle, for simple applications, this is not particularly important. More in terms of the developers of Electron, how they differ from nw.js (there is, of course, a bias towards Electron), you can read here - https://github.com/atom/electron/blob/master/docs/development/atom -shell-vs-node-webkit.md .

And a few good examples. Examples are not the most successful production applications, but they are just applications that are different in nature. Maybe you will push on some thoughts, ideas that would develop.



The first is Popcorn Time. An application that allows you to stream movies and TV shows from torrents.

Unlike such applications of this kind, it is absolutely user friendly, it does not tell you anywhere from which torrent and how it streams it, you come in, there are a lot of TV shows, you choose one of them and watch. Written in nw.js, works under poppy, windows and linux.

There are more system applications. This thing is such a mongo management studio, very much like php my admin only for mongo. Hey, such a gui for mongo.



There is a Light table editor, very similar to Sublime or Atom. They argue that he is much cooler, because he has some definite philosophy. I did not understand her, but there are adepts ...



There are such things - you can feel yourself as a radio host, stream your audio to the masses:



There are very similar clones of desktop applications, for example, showing your entire disk marked up like this:



You can see where the big files are located and delete them.



There are web application wrappers, i.e. There are some tutorials that ... in my opinion, this tutorial itself as a desktop application does little of what it does, it just takes content from the web and displays it in the application.

And here, the only thing that I found in Russian on nw.js, this thing for quick delivery of taxes:



I thought that in Russia no one gives up taxes, it turns out that even software is provided for this. And this piece began to be developed in 2013, it was designed for phones separately, for desktops separately and separately for terminals and info-kiosks. This version is for terminals, i.e.in the terminals you can also see applications developed on nw.js. Still, I was right that no one gives in taxes in Russia, so she bent in 2013 and then she had no destiny.

There are many more applications in their repository ( https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js ) they compile. If you write something good, some kind of additional marketing, maybe it will be you, you can place it in the repository there, and your application will be on this big list. The list is very large, there are about 100 applications.

I would like to draw some conclusions. Should I write applications on web technologies for desktop?



What I think is subjective, but I want to share.

First, it is the easiest cross-platform. Those.you practically don’t have to do anything, the tool itself will do everything for you, and you will need some complicated builds only if you do something very extraordinary. In typical cases, everything will be well built.

It works quite quickly. Of course, we can say that applications will work faster, which are written on IT-technologies, but if we take the ratios of work speed to money and resources spent on development, then perhaps nw.js will be far ahead.

The growing trend - everyone and everything is written on the web everywhere, for quadcopters, TVs, refrigerators and, including, for the desktop now, why not? Just write apps for yourself. Those.write such an application, for example, you have some kind of crunch, which builds something there, then tests it, and then puts it on production or styling. And you want to do it manually, not by some means, but manually. Usually you run some commands in the console. But you want it to be done, say, by a tester, or you want a layout designer who does not want to see your console at all. And for this you can write a simple desktop application with three buttons (it will take 20 minutes), which will launch the necessary commands in the shell when you click on these buttons.

Write applications for yourself. And it is cheap in all respects. It's cheap in training developers, because they don't need to be trained, they need to be given slides and that's it. Then it’s cheap from the point of view that you just need web developers, you don’t need any specific developers who will write applications for Linux or Mac.

If you have any questions, see also:

Contacts


»Blog http://html5.by/
» Twitter @ html5by and @nedudi
»VK Group http://vk.com/html5by
» FB Group http://facebook.com/html5by

— - FrontendConf .

— " - ", , FrontendConf .

Source: https://habr.com/ru/post/319888/

More articles:


All Articles