Cross-Platform Desktop Applications
With Node, Electron, and NW.js
Paul B. Jensen
  • MEAP began July 2015
  • Publication in February 2017 (estimated)
  • ISBN 9781617292842
  • 451 pages (estimated)
  • printed in black & white

Cross-Platform Desktop Applications guides you step-by-step through creating Node.js desktop applications with NW.js and Electron from GitHub. For web designers and developers wanting to create desktop applications for all OSes without having to learn a new language, this is the book for you.

You'll begin by seeing how the 2 main desktop application frameworks go about creating applications, and get a view of real-world examples like Slack. You'll be guided through the process of creating your own desktop applications with both frameworks. Once you have an idea of how to use the frameworks, you'll be able to build a File Explorer application from concept right through to standalone executables for Mac OS X, Windows, and Linux.

Next, you'll find out how to use the rich APIs of both NW.js and Electron to take advantage of Operating System features like crafting a native user interface for your application, building tray applications, accessing the web camera, microphone, clipboard and reading/writing files on the computer. You'll learn how to create desktop notifications and integrate your application more closely into the user's operating system.

We will then show you how you can make automated tests for your desktop application, debug performance issues that you might run into, and then when your app is ready for the world, package it for multiple Operating Systems and even for ChromeBooks, and sell your application on the Mac and Windows app stores.

By the end of the book you'll have the knowledge, skills, and inspiration to create your own cross-platform desktop applications.

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. How does NW.js work under the hood?

1.5.1. Using the same instance of V8

1.5.2. Integrating the main event loop

1.5.3. Bridging the Javascript context between Node and Chromium

1.6. How does Electron work under the hood?

1.6.1. Introducing libchromiumcontent

1.6.2. Electron’s components

1.6.3. How Electron handles running the application

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

1.7.1. Slack

1.7.2. LightTable

1.7.3. Game Dev Tycoon

1.7.4. Gitter

1.7.5. Macaw

1.7.6. Where to use a desktop app versus a web app

1.8. Summary

2. Beginning 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

2.2.2. Installing Electron

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

2.2.4. 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. What is IO.js?

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

5.3.1. Where Node.js fits into NW.js

5.3.2. Caveats of using Node.js in NW.js

5.3.3. How Node.js is used within Electron

5.4. Node Package Manager (NPM)

5.4.1. Finding packages to use and install for your application

5.4.2. Tracking installed modules with package.json

5.4.3. Packaging your modules and applications with npm

5.5. Summary

6. Controlling how your desktop application is displayed

6.1. Window sizes and modes

6.1.1. Configuring window dimensions for an NW.js app

6.1.2. Configuring window dimensions for an Electron app

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

6.1.4. Constraining dimensions of window width and height in Electron

6.2. Frameless windows and full-screen apps

6.2.1. Full-screen applications in NW.js

6.2.2. Full-screen applications in Electron

6.2.3. Frameless apps

6.2.4. Kiosk mode applications

6.3. Tray applications

6.3.1. Creating a simple tray application

6.3.2. Adding menus to your tray icon

6.3.3. Creating a Tray application in Electron

6.4. Summary

7. Crafting the Application's User Interface

7.1. Adding Menus to the app

7.1.1. Window/Toolbar menus

7.1.2. Creating menus for mac os x apps in NW.js

7.1.3. Creating menus for Mac OS X apps with Electron

7.1.4. Creating menus for Windows and Linux apps

7.1.5. Choosing which menu to render based on the OS

7.2. Contextual menus

7.2.1. Creating the contextual menu app in NW.js

7.2.2. How do contextual menus work in NW.js?

7.2.3. Giving menu items icons

7.2.4. Creating a contextual menu in Electron

7.3. Dragging and dropping files into the app

7.3.1. Dragging and dropping files in an NW.js application

7.3.2. Implementing Drag and Drop in Electron applications

7.4. Mimicking the native look of the OS

7.4.1. Detecting the user’s operating system

7.4.2. Using OS detection in NW.js

7.4.3. Using OS detection in Electron

7.4.4. Using CSS to style the app to fit with the operating system

7.5. Summary

8. Working closer with the Operating System

8.1. Accessing the webcam

8.1.1. Photo Snapping with the HTML5 media capture API

8.2. Storing data for your application

8.2.1. What data storage option should I use?

8.2.2. Storing a post-it note with the LocalStorage API

8.2.3. Porting a TODO list web app

8.3. Moving data between applications

8.3.1. Accessing the Clipboard

8.3.2. Setting other types of content to the Clipboard in Electron

8.4. Keyboard shortcuts

8.4.1. Creating the Snake game in NW.js

8.4.2. Implementing window focus keyboard shortcuts in NW.js

8.4.3. Creating global keyboard shortcuts in NW.js

8.4.4. Creating global shortcuts for the Snake game in Electron

8.5. Desktop notifications

8.5.1. Creating the Watchy app in Electron

8.5.2. Creating the Watchy app in NW.js

8.6. Summary

Part 3 MASTERING NODE.JS DESKTOP APPLICATION DEVELOPMENT

9. Testing desktop applications

9.1. Approaches to testing applications

9.1.1. Test—Driven—Development

9.1.2. Behavior Driven Development

9.1.3. The different levels of testing

9.2. Unit Testing

9.2.1. Writing tests with Mocha

9.2.2. From pending test to passing test

9.3. Functional testing

9.3.1. Functional testing in practice

9.4. Testing Electron apps with Spectron

9.5. Integration Testing

9.5.1. Introducing Cucumber

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

9.5.3. Automatically testing your Electron app with Cucumber and Spectron

9.6. Summary

10. Improving the app performance with Debugging

10.1. Knowing what you're debugging

10.1.1. Identifying the location of the root cause

10.1.2. Debugging with the browser developer tools

10.2. Fixing bugs

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

10.2.2. Using the Developer Tools to debug your app

10.3. Resolving performance issues

10.3.1. Network Tab

10.3.2. Timeline Tab

10.3.3. Profiles Tab

10.4. Summary

11. Packaging the application for the wider world

11.1. Creating executables for your application

11.1.1. Creating an NW.js app executable for Windows

11.1.2. Creating an Electron app executable for Windows

11.2. Creating a setup installer for your Windows application

11.2.1. Creating a Windows setup installer with NW.js

11.2.2. Creating a Windows setup installer with Electron

11.3. Creating an NW.js app executable for Mac OS X

11.3.1. Creating the mac executable app

11.3.2. Creating an Electron app executable for Mac OS X

11.4. Creating executable apps for Linux

11.4.1. Creating NW.js standalone apps for Linux

11.4.2. Creating Electron standalone apps for Linux

11.5. Summary

About the Technology

Node.js has provided 2 very capable frameworks for creating desktop applications with HTML, CSS, and Javascript. NW.js (sponsored by Intel and Gnor Tech) and Electron from GitHub have given web designers and developers the ability to use the same skills and code that they use for web applications to build desktop applications. Not only that, because the applications can be built to run across Windows, Mac OS X, and Linux, developers have to make only one version of the application for all of the major desktop platforms.

What's inside

  • Discover how NW.js and Electron differ in building desktop apps
  • Build an app and package it for Windows, OS X and Linux
  • Build a File Explorer, photo selfie app, realtime Tweet notifier, and a 2D platform game
  • Automate the testing of your desktop applications
  • Create Tray apps, native-looking UIs, desktop notifications, copy clipboard data, and more
  • Spot and fix performance bottlenecks with developer debugging tools
  • Create Chromebook applications
  • Sell your desktop app via the Mac, Windows and Ubuntu app stores, as well as the Steam store

About the reader

Written for web designers and developers familiar with HTML, CSS, and JavaScript. No desktop app development experience required.

About the author

Paul Jensen is the founder of Anephenix, a Node.js consultancy. He is also the Lead Developer of the SocketStream web framework, and the creator of Dashku, a realtime dashboard solution.


Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Buy
  • MEAP combo $49.99 pBook + eBook
  • MEAP eBook $39.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks