Cross-platform Desktop Application Development: Electron, Node, NW.js, and React

Dmitry Sheiko

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781788299299
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en JavaScript

Build powerful cross-platform desktop applications with web technologies such as Node, NW.JS, Electron, and ReactAbout This Book• Build different cross-platform HTML5 desktop applications right from planning, designing, and deployment to enhancement, testing, and delivery• Forget the pain of cross-platform compatibility and build efficient apps that can be easily deployed on different platforms.• Build simple to advanced HTML5 desktop apps, by integrating them with other popular frameworks and libraries such as Electron, Node.JS, Nw.js, React, Redux, and TypeScript Who This Book Is ForThis book has been written for developers interested in creating desktop applications with HTML5. The first part requires essential web-master skills (HTML, CSS, and JavaScript). The second demands minimal experience with React. And finally for the third it would be helpful to have a basic knowledge of React, Redux, and TypeScript.What You Will Learn• Plan, design, and develop different cross-platform desktop apps• Application architecture with React and local state• Application architecture with React and Redux store• Code design with TypeScript interfaces and specialized types• CSS and component libraries such as Photonkit, Material UI, and React MDL• HTML5 APIs such as desktop notifications, WebSockets, WebRTC, and others• Desktop environment integration APIs of NW.js and Electron• Package and distribute for NW.JS and ElectronIn DetailBuilding and maintaining cross-platform desktop applications with native languages isn't a trivial task. Since it's hard to simulate on a foreign platform, packaging and distribution can be quite platform-specific and testing cross-platform apps is pretty complicated.In such scenarios, web technologies such as HTML5 and JavaScript can be your lifesaver. HTML5 desktop applications can be distributed across different platforms (Window, MacOS, and Linux) without any modifications to the code.The book starts with a walk-through on building a simple file explorer from scratch powered by NW.JS. So you will practice the most exciting features of bleeding edge CSS and JavaScript. In addition you will learn to use the desktop environment integration API, source code protection, packaging, and auto-updating with NW.JS.As the second application you will build a chat-system example implemented with Electron and React. While developing the chat app, you will get Photonkit. Next, you will create a screen capturer with NW.JS, React, and Redux.Finally, you will examine an RSS-reader built with TypeScript, React, Redux, and Electron. Generic UI components will be reused from the React MDL library. By the end of the book, you will have built four desktop apps. You will have covered everything from planning, designing, and development to the enhancement, testing, and delivery of these apps.Style and approachFilled with real world examples, this book teaches you to build cross-platform desktop apps right from scratch using a step-by-step approach.

Creating a File Explorer with NW.js-Planning, Designing, and Development

Nowadays, when speaking of HTML5 desktop application development, one implies either NW.js or Electron. The first one has a shorter learning curve, which makes it a better choice for the beginning. Our first application will be a File Explorer. This sort of software is traditionally considered as a classical desktop application. I believe that you will find it exciting to build a File Explorer with HTML, CSS, and JavaScript. This chapter requires no skills in JavaScript frameworks, as we will use none. All you need is a basic knowledge of HTML, CSS, and plain JavaScript (including Node.js).

So, what are we up to? We will plan and sketch the project. We will set up the development environment and create a static prototype and run it with NW.js. We will implement the basic functionality, making it ready to be enhanced in Chapter 2, Creating a File Explorer with NW.js Enhancement and Delivery.

The application blueprint

By File Explorer, I mean a small program that allows navigating through the filesystem and performs basic operations on the files, which can be expressed with the following user stories:

• As a user, I can see the content of the current directory
• As a user, I can navigate through the filesystem
• As a user, I can open a file in the default associated program
• As a user, I can delete a file
• As a user, I can copy a file in the clipboard and paste it later in a new location
• As a user, I can open the folder containing the file with the system file manager
• As a user, I can close the application window
• As a user, I can minimize the application window
• As a user, I can maximize and restore the application window
• As a user, I can change the application language

It would be easier to perceive it in a visual form, wouldn't it? Wireframes come in handy here. Wireframe is a skeletal framework of the application that depicts the arrangement of the application's content, including UI elements and navigation system. Wireframe has no real graphics, typography, or even colors. It shows schematically, what the application does. As you know, drawing with a pencil on a paper is possible, but it is not the best way to create a wireframe; what we need is a prototyping tool. Today, there are plenty of solutions on the market. Here, I use an impressive, but affordable tool called WireframeSketcher (http://wireframesketcher.com/). It allows you to sketch web, desktop, and mobile applications (just what we need). It also has a rich mock-up gallery of stencils, widgets, icons, and templates that makes prototyping fast and easy. Besides, the wireframes look nice in a sketchy style:

What we can see on the wireframe is often called a Holy Grail Layout. In our case, the header serves as the window title bar. There, we keep our controls for window actions such as close, maximize, and minimize. Besides that, in the title bar, we display the path to the current directory. In the sidebar, we have our filesystem navigation. The main section contains a table that represents files of the current directory. It has columns--Name, Size, and Modified. A right-click on a file opens a context menu with available file operations. The footer comprises the application title and a language selector combo box.

Setting up an NW.js project

NW.js is an open source framework for building HTML, CSS, and JavaScript applications. You can also see it as a headless browser (based on Chromium https://www.chromium.org/) that includes Node.js runtime and provides desktop environment integration API. Actually, the framework is very easy to start with. What we need is just a start page HTML file and project manifest file (package.json).

To see it in action, we will create a project folder named file-explorer at an arbitrary location. The choice of the folder location is up to you, but I personally prefer to keep web projects in /<username>/Sites on Linux/macOS and %USERPROFILE%Sites on Windows.

As we enter the directory, we create placeholder folders for JavaScript and CSS sources (js and assets/css):

We also place a start page HTML (index.html) that consists of just a few lines:

 ./index.html
<!DOCTYPE html>
<html>
 <body>
 <h1>File Explorer</h1>
 </body>
</html> 

As you can guess, we shall see just this text--File Explorer-- when feeding this file to a browser.

Now, we need the Node.js manifest file (package.json). Node.js, embedded in the framework, will use it to resolve dependency package names when called with a require function or from an npm script. In addition, NW.js takes from it the project configuration data.

Why not create the manifest file and populate it with dependencies using the npm tool?

Node Package Manager

Nowadays, Node Package Manager (npm) is one of the most demanded gadgets in the web developer tool belt. It's a command-line utility connected with the corresponding online repository of packages and is capable of package installation, version management, and dependency management. So, when we need a package (library, framework, and module), we will check whether it's available in the npm repository and run npm to bring it into our project. It not only downloads the package, it also resolves its dependencies and does it pretty smartly. Furthermore, npm is pretty handy as an automation tool. We can set various command-line tasks to refer any of the locally installed packages by name. The npm tool will find the executable package among installed packages and run it.

The npm tool is distributed together with Node.js. So, you can find an installer for Windows or for macOS on the Node.js download page (https://nodejs.org/en/download). It is also available as an APT package, so you can install it for Linux with the apt-get tools:

 sudo apt-get install npm 

If you have already installed npm, ensure that it's up to date:

 sudo npm install npm@latest -g 

As I have already said, we can install packages with npm-- for example, NW.js. If we want to do it globally, we will run the following command:

 sudo npm install nw --global 

Alternatively, we can run the following command:

 sudo npm i nw -g 

This will download the latest build of NW.js in {prefix}/lib/node_modules/ and place the executable file in {prefix}/bin. It adds the binary to the PATH environment variable, so one can call nw in any location in the shell.

{prefix} In order to find out what {prefix} is one ca...