Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Cross-platform Desktop Application Development: Electron, Node, NW.js, and React
  • Toc
  • feedback
Cross-platform Desktop Application Development: Electron, Node, NW.js, and React

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

By : Sheiko
1 (1)
close
Cross-platform Desktop Application Development: Electron, Node, NW.js, and React

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

1 (1)
By: Sheiko

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.
Table of Contents (9 chapters)
close

What this book covers

Chapter 1, Creating a File Explorer with NW.js - Planning, Designing, and Development, shows that development starts with the blueprint of the file explorer application. We set up a development environment for NW.js and get a crash course on npm, which we will use to install any additional software, and build and run applications. We develop a static prototype of the application. On the way, we learn the best practices for writing maintainable CSS and get a brief introduction to ES2015.

Chapter 2, Creating a File Explorer with NW.js - Enhancement and Delivery, covers the extension and finalization of the application. For that, we master desktop environment integration APIs such as the clipboard, context menu, and tray. We provide file explorer with support for multiple languages and locales. We make it respond to command-line options. We examine pre-production aspects such as code protection, packaging, and autoupdate.

Chapter 3, Creating a Chat System with Electron and React - Planning, Designing, and Development, teaches us how to develop a chat system with Electron and React so, we get an introduction to both of them. We configure the Webpack bundler to transpile React components with JSX syntax. In addition, we make it process CSS files requested as modules. Thus, we can load the assets of the Electron-dedicated library Photonkit. We add the DevTool React extension in Electron and come up with a static prototype at the end of the chapter.

Chapter 4, Creating a Chat System with Electron and React - Enhancement, Testing, and Delivery, covers bringing the application to life. We use the Electron API and React state to implement windowing functions. We learn to use the WebSocket API to provide the chat with bidirectional communication. We examine the unit testing of views and services, and explore Electron-specific packaging, distribution, and autoupdates.

Chapter 5, Creating a Screen Capturer with NW.js, React, and Redux - Planning, Design, and Development, explains how to build a screen capturer based on global application state driven by Redux. In development, we use ready-made React components from the Material UI library. At the end of the chapter, we have a static prototype.

Chapter 6, Creating a Screen Capturer with NW.js - Enhancement, Tooling, and Testing, outlines how to make the application take screenshots and record screencasts. We learn to use WebRTC APIs to get the video stream. We make it generate a still frame image for screenshots and capture the video stream in a file for screencasts. We use the Notification API to inform the user about actions performed, regardless of what window is in focus. We make capturing actions available via global keyboard shortcuts.

Chapter 7, Creating RSS Aggregator with Electron, TypeScript , React, and Redux - Planning, Design, and Development, prepares us to develop a RSS aggregator. For that application, we take advantage of static typing with TypeScript and so, learn the essentials of programming languages. We build a static prototype with the React components of the React MDL library.

Chapter 8, Creating RSS Aggregator with Electron, TypeScript, React, and Redux - Development, explores how to develop the application. On the way, we will learn to use asynchronous actions, and access the store from React components and from services. We will also examine the peculiarities of rendering guest content in Electron.

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete