Book Overview & Buying
Table Of Contents

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

Enabling DevTools extensions

I believe that you had no problems when running the last example. Yet, when we need to trace an issue in a React application, it can be tricky, as DevTools shows us what is happening to the real DOM; however, we want to know about the virtual one also. Fortunately, Facebook offers an extension for DevTools called React Developer Tools (http://bit.ly/1dGLkxb).

We will install this extension with electron-devtools-installer (https://www.npmjs.com/package/electron-devtools-installer). This tool supports a number of DevTools extensions including a few React-related: React Developer Tools (REACT_DEVELOPER_TOOLS), Redux DevTools Extension (REDUX_DEVTOOLS), React Perf (REACT_PERF). We will pick only the first one for now.

First we install the package: