Book Overview & Buying
Table Of Contents
Feedback & Rating

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

By : Sheiko

1 (1)

Buy this Book

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

1 (1)

By: Sheiko

Buy this Book

Overview of this book

Building 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.

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

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

The application blueprint

Setting up an NW.js project

Node Package Manager

An HTML prototype

Fulfilling the functional requirements

Handling windowing actions

Writing a service to navigate through directories

Writing view modules

Summary

Creating a File Explorer with NW.js – Enhancement and Delivery

Internationalization and localization

Context menu

System clipboard

Menu in the system tray

Command-line options

Native look and feel

Source code protection

Packaging

Autoupdate

Summary

Creating a Chat System with Electron and React – Planning, Designing, and Development

Application blueprint

Electron

React

Electron meets React

Enabling DevTools extensions

Static prototype

Summary

Creating a Chat System with Electron and React – Enhancement, Testing, and Delivery

Revitalizing the title bar

Utilizing WebSockets

Implementing chat services

Bringing functionality to the components

Writing unit-tests

Packaging and distribution

Deployment and updates

Summary

Creating a Screen Capturer with NW.js, React, and Redux – Planning, Design, and Development

Application blueprint

Setting up the development environment

Static prototype

Comprehending redux

Introducing the application state

Summary

Creating a Screen Capturer with NW.js: Enhancement, Tooling, and Testing

Tooling Redux

Redux DevTools

Unit-testing Redux

Taking a screenshot

Recording a screencast

Taking advantage of the system tray

Registering global keyboard shortcuts

Summary

Creating RSS Aggregator with Electron, TypeScript , React, and Redux: Planning, Design, and Development

Application blueprint

Welcome to TypeScript

Setting up the development environment for TypeScript

Creating static prototype

Summary

Creating RSS Aggregator with Electron, TypeScript, React, and Redux: Development

Creating a service to fetch RSS

Creating a service to manage feed menu

Actions and Reducers

Connecting to the store

Consuming store from the components

Creating router service

Summary

Customer Reviews

1 (1)

5 star

4 star

3 star

2 star

1 star

100%

Menu in the system tray

All three platforms available for our application have a so-called system notification area, which is also known as the system tray. That's a part of the user interface (in the bottom-right corner on Windows and top-right corner on other platforms) where you can find the application icon even when it's not present on the desktop. Using the NW.js API (http://docs.nwjs.io/en/latest/References/Tray/), we can provide our application with an icon and drop-down menu in the tray, but we do not have any icon yet. So, I have created the icon.png image with the text Fe and saved it in the application root in the size of 32x32px. It is supported on Linux, Windows, and macOS. However, in Linux, we can go with a better resolution, so I have placed the 48x48px version next to it.

Our application in the tray will be represented by TrayService:

./js/View/Tray...