Cross-Platform Desktop Applications
Using Node, Electron, and NW.js
Paul B. Jensen
Foreword by Cheng Zhao
  • May 2017
  • ISBN 9781617292842
  • 312 pages
  • printed in black & white
ePub + Kindle available May 25, 2017

You will be shocked by how easy it is to write a desktop app!

From the Foreword by Cheng Zhao, Creator of Electron

Cross-Platform Desktop Applications guides you step-by-step through creating Node.js desktop applications with NW.js and Electron from GitHub.

Table of Contents detailed table of contents

Part 1 WELCOME TO NODE.JS DESKTOP APP DEVELOPMENT

1. Introducing Electron and NW.js

1.1. Why build Node.js desktop applications?

1.1.1. Desktop to Web and back

1.1.2. What Node.js desktop apps offer over web applications

1.2. The origins of NW.js and Electron

1.3. Introducing NW.js

1.3.1. A Hello World application in NW.js

1.3.2. What features does NW.js have?

1.4. Introducing Electron

1.4.1. How does Electron work and differ from NW.js?

1.4.2. A hello world application in Electron

1.4.3. What features does Electron have?

1.5. What apps can you make with NW.js and Electron?

1.5.1. Slack

1.5.2. LightTable

1.5.3. Game Dev Tycoon

1.5.4. Gitter

1.5.5. Macaw

1.5.6. Hyper

1.6. Summary

2. Laying the foundation for your first desktop application

2.1. What we’re going to build

2.1.1. Introducing Lorikeet, the file explorer

2.2. Creating the application

2.2.1. Installing NW.js and Electron

2.2.2. Creating the files and folders for the NW.js-powered app

2.2.3. Creating the files and folders for the Electron-powered app

2.3. Implementing the start screen

2.3.1. Displaying the user’s personal folder in the toolbar

2.3.2. Showing the user’s files and folders in the UI

2.4. Summary

3. Building your first desktop application

3.1. Exploring the folders

3.1.1. Refactoring the code

3.1.2. Handling double-clicks on folders

3.2.1. Adding the search field in the toolbar

3.2.2. Adding an in-memory search library

3.2.3. Hooking up the search functionality with the UI

3.3. Enhancing navigation in the app

3.3.1. Making the current folder path clickable

3.3.2. Getting the app to load at the folder path

3.3.3. Opening files with the default application

3.4. Summary

4. Shipping your first desktop application

4.1. Setting up the application for distribution

4.1.1. Creating the application icon

4.2. Packaging the app for distribution

4.2.1. Using a build tool for NW.js

4.2.2. Using a build tool for Electron

4.2.3. Setting the application icon on the built apps

4.3. Testing your application on multiple operating systems

4.3.1. Targeting Windows OSes

4.3.2. Targeting Linux OSes

4.3.3. Targeting Mac OS X

4.4. Summary

Part 2 DIVING DEEPER

5. Using Node.js within NW.js and Electron

5.1. What is Node.js?

5.1.1. Synchronous versus asynchronous

5.1.2. Streams as a first-class citizen

5.1.3. Events

5.1.4. Modules

5.2. Node Package Manager (npm)

5.2.1. Finding packages for your app

5.2.2. Tracking installed modules with package.json

5.2.3. Packaging your modules and apps with npm

5.3. Summary

6. Exploring NW.js and Electron’s internals

6.1. How does NW.js work under the hood?

6.1.1. Using the same instance of V8

6.1.2. Integrating the main event loop

6.1.3. Bridging the JavaScript context between Node and Chromium

6.2. How does Electron work under the hood?

6.2.1. Introducing libchromiumcontent

6.2.2. Electron’s components

6.2.3. How Electron handles running the app

6.3. How does Node.js work with NW.js and Electron?

6.3.1. Where Node.js fits into NW.js

6.3.2. Drawbacks of using Node.js in NW.js

6.3.3. How Node.js is used within Electron

6.4. Summary

Part 3 MASTERING NODE.JS DESKTOP APPLICATION DEVELOPMENT

7. Controlling how your desktop application is displayed

7.1. Window sizes and modes

7.1.1. Configuring window dimensions for an NW.js app

7.1.2. Configuring window dimensions for an Electron app

7.1.3. Constraining dimensions of window width and height in NW.js

7.1.4. Constraining dimensions of window width and height in Electron

7.2. Frameless windows and full-screen apps

7.2.1. Full-screen applications in NW.js

7.2.2. Full-screen applications in Electron

7.2.3. Frameless apps

7.2.4. Kiosk mode applications

7.3. Summary

8. Creating tray applications

8.1. Creating a simple tray application with NW.js

8.1.1. Adding menus to your tray icon

8.2. Creating a tray app with Electron

8.2.1. Building the initial app skeleton

8.3. Summary

9. Creating Application and context menus

9.1. Adding window menus

9.1.1. Creating menus for Mac OS apps with NW.js

9.1.2. Creating menus for Mac OS apps with Electron

9.1.3. Creating menus for Windows and Linux apps

9.1.4. Choosing which menu to render based on the OS

9.2. Context menus

9.2.1. Creating the context menu app in NW.js

9.2.2. How do context menus work in NW.js?

9.2.3. Giving menu items icons

9.2.4. Creating a contextual menu with Electron

9.2.5. Adding the context menu with Electron

9.3. Summary

10. Dragging and dropping files and crafting the UI

10.1. Dragging and dropping files onto the app

10.1.1. Dragging and dropping files to an app with NW.js

10.1.2. Implementing drag-and-drop with Electron

10.2. Mimicking the native look of the OS

10.2.1. Detecting the user’s OS

10.2.2. Using OS detection in NW.js

10.2.3. Using OS detection in Electron

10.2.4. Using CSS to match a user’s OS style

10.3. Summary

11. Using a webcam in your application

11.1. Photo snapping with the HTML5 Media Capture API

11.1.1. Inspecting the NW.js version of the app

11.1.2. Creating Facebomb with Electron

11.2. Summary

12. Storing app data

12.1. What data storage option should I use?

12.2. Storing a sticky note with the localStorage API

12.2.1. Creating the Let Me Remember app with Electron

12.2.2. Implementing the Let Me Remember app with NW.js

12.3. Porting a to-do list web app

12.3.1. Porting a TodoMVC web app with NW.js

12.3.2. Porting a TodoMVC app with Electron

12.4. Summary

13. Copying and pasting contents from the clipboard

13.1. Accessing the clipboard

13.1.1. Creating the Pearls app with NW.js

13.1.2. Creating the Pearls app with Electron

13.1.3. Setting other types of content to the clipboard with Electron

13.2. Summary

14. Binding on keyboard shortcuts

14.1. Creating the Snake game with NW.js

14.1.1. Implementing window focus keyboard shortcuts with NW.js

14.1.2. Creating global keyboard shortcuts with NW.js

14.2. Creating global shortcuts for the Snake game with Electron

14.3. Summary

15. Making desktop notifications

15.1. About the app you’ll make

15.2. Creating the Watchy app in Electron

15.3. Creating the Watchy app in NW.js

15.4. Summary

Part 4 GETTING READY TO RELEASE

16. Testing desktop applications

16.1. Approaches to testing applications

16.1.1. Test—Driven—Development

16.1.2. Behavior Driven Development

16.1.3. The different levels of testing

16.2. Unit Testing

16.2.1. Writing tests with Mocha

16.2.2. From pending test to passing test

16.3. Functional testing

16.3.1. Functional testing in practice

16.4. Testing Electron apps with Spectron

16.5. Integration Testing

16.5.1. Introducing Cucumber

16.5.2. Automatically testing your app with Cucumber and NW.js

16.5.3. Automatically testing your Electron app with Cucumber and Spectron

16.6. Summary

17. Improving the app performance with Debugging

17.1. Knowing what you're debugging

17.1.1. Identifying the location of the root cause

17.1.2. Debugging with the browser developer tools

17.2. Fixing bugs

17.2.1. Using Node.js' debugger to debug your app

17.2.2. Using the Developer Tools to debug your app

17.3. Resolving performance issues

17.3.1. Network Tab

17.3.2. Timeline Tab

17.3.3. Profiles Tab

17.4. Summary

18. Packaging the application for the wider world

18.1. Creating executables for your application

18.1.1. Creating an NW.js app executable for Windows

18.1.2. Creating an Electron app executable for Windows

18.2. Creating a setup installer for your Windows application

18.2.1. Creating a Windows setup installer with NW.js

18.2.2. Creating a Windows setup installer with Electron

18.3. Creating an NW.js app executable for Mac OS

18.3.1. Creating the mac executable app

18.3.2. Creating an Electron app executable for Mac OS

18.4. Creating executable apps for Linux

18.4.1. Creating NW.js standalone apps for Linux

18.4.2. Creating Electron standalone apps for Linux

18.5. Summary

About the Technology

Desktop application development has traditionally required high-level programming languages and specialized frameworks. With Electron and NW.js, you can apply your existing web dev skills to create desktop applications using only HTML, CSS, and JavaScript. And those applications will work across Windows, Mac, and Linux, radically reducing development and training time.

About the book

Cross-Platform Desktop Applications guides you step by step through the development of desktop applications using Electron and NW.js. This example-filled guide shows you how to create your own file explorer, and then steps through some of the APIs provided by the frameworks to work with the camera, access the clipboard, make a game with keyboard controls, and build a Twitter desktop notification tool. You'll then learn how to test your applications, and debug and package them as binaries for various OSs.

What's inside

  • Create a selfie app with the desktop camera
  • Learn how to test Electron apps with Devtron
  • Learn how to use Node.js with your application

About the reader

Written for developers familiar with HTML, CSS, and JavaScript.

About the author

Paul Jensen works at Starcount and lives in London, UK.


Buy
combo $49.99 pBook + eBook
eBook $39.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

Write-once/run-anywhere just became a real thing.

Stephen Byrne, Dell

The definitive guide to two paradigm-shifting JavaScript frameworks. Indispensable.

Clive Harber, Distorted Thinking

Packed full of examples that will help you write cross-platform desktop apps using JavaScript.

Jeff Smith, Ascension