Cross-Platform Desktop Applications: Using Node, Electron, and NW.js

by Paul Jensen

Overview

Summary

Cross-Platform Desktop Applications guides you step-by-step through creating Node.js desktop applications with NW.js and Electron from GitHub. Foreword by Cheng Zhao, creator of Electron.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

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.

Table of Contents

PART 1 - WELCOME TO NODE.JS DESKTOP APPLICATION DEVELOPMENT
1. Introducing Electron and NW.js
2. Laying the foundation for your first desktop application
3. Building your first desktop application
4. Shipping your first desktop application
PART 2 - DIVING DEEPER
5. Using Node.js within NW.js and Electron
6. Exploring NW.js and Electron's internals
PART 3 - MASTERING NODE.JS DESKTOP APPLICATION DEVELOPMENT
7. Controlling how your desktop app is displayed
8. Creating tray applications
9. Creating application and context menus
10. Dragging and dropping files and crafting the UI
11. Using a webcam in your application
12. Storing app data
13. Copying and pasting contents from the clipboard
14. Binding on keyboard shortcuts
15. Making desktop notifications
PART 4 - GETTING READY TO RELEASE
16. Testing desktop apps
17. Improving app performance with debugging
18. Packaging the application for the wider world

Product Details

ISBN-13:	9781617292842
Publisher:	Manning
Publication date:	05/15/2017
Edition description:	1st Edition
Pages:	312
Product dimensions:	7.40(w) x 9.40(h) x 1.30(d)

About the Author

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

Table of Contents

Foreword xvii

Preface xix

Acknowledgments xxi

About this book xxiii

About the author xxvii

About the cover xxviii

Part 1 Welcome to Node.js Desktop Application Development 1

1 Introducing Electron and NW.js 3

1.1 Why build Node.js desktop applications? 4

Desktop to web and back 4

What Node.js desktop apps offer over web apps 6

1.2 The origins of NW.js and Electron 7

1.3 Introducing NW.js 9

A Hello World app in AW.js 9

Wiat features does NW.js have? 14

1.4 Introducing Election 17

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

A Hello World app in Electron 18

What features does Electron have? 23

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

Slack 24

Light Table 25

Game Dev Tycoon 26

Gitter 27

Macaw 28

Hyper 29

1.6 Summary 30

2 Laying the foundation for your first desktop application 31

2.1 What we're going to build 31

Introducing Lorikeet, the file explorer 32

2.2 Creating the app 33

Installing NW.js and Electron 33

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

Creating the files and folders for the Electron-powered app 35

2.3 Implementing the start screen 38

Displaying the user's personal folder in the toolbar 38

Showing the user's files and folders in the UI 42

2.4 Summary 52

3 Building your first desktop application 54

3.1 Exploring the folders 55

Refactoring the code 55

Handling double-clicks on folders 58

3.2 Implementing quick search 62

Adding the search field in the toolbar 62

Adding an in-memory search library 63

Hooking up the search functionality with the UI 64

3.3 Enhancing navigation in the app 68

Making the current folder path clickable 68

Getting the app to load at the folder path 71

Opening files with their default application 71

3.4 Summary 74

4 Shipping your first desktop application 75

4.1 Setting up the app for distribution 76

Creating the app icon 76

4.2 Packaging the app for distribution 79

Using a build tool for NW.js 79

Using a build tool for Electron 80

Setting the app icon on the apps 81

4.3 Testing your app on multiple OSs 86

Targeting Windows OSs 86

Targeting Linux OSs 87

Targeting Mac OS 87

4.4 Summary 87

Part 2 Diving Deeper 89

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

5.1 What is Node.js? 92

Synchronous versus asynchronous 92

Streams as first-class citizens 95

Events 99

Modules 100

5.2 Node Package Manager (npm) 102

Finding packages for your app 103

Tracking installed modules with package.json 103

Packaging your modules and apps with npm 105

5.3 Summary 107

6 Exploring NW.js and Electron's internals 108

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

Using the same instance of V8 110

Integrating the main event loop 111

Budging the JavaScript context between Node and Chromium 112

6.2 How does Electron work under the hood? 112

Introducing libchromiumcontent 113

Electron's components 113

How Electron handles running the app 114

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

Where Node.js fits into NW.js 115

Drawbacks of using Node.js in NW.js 115

How Node.js is used within Electron 116

6.4 Summary 117

Part 3 Mastering Node.js Desktop Application Development 119

7 Controlling how your desktop app is displayed 121

7.1 Window sizes and modes 121

Configuring window dimensions for an NW.js app 122

Configuring window dimensions for an Electron app 123

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

Constraining dimensions of window width and height in Electron 126

7.2 Frameless windows and full-screen apps 128

Fullscreen applications in NW.js 128

Full-screen applications in Electron 131

Frameless apps 133

Kiosk mode applications 138

7.3 Summary 141

8 Creating tray applications 143

8.1 Creating a simple tray app with NW.js 144

Adding menus to your tray icon 145

8.2 Creating a tray app with Electron 149

Building the initial app skeleton 149

8.3 Summary 152

9 Creating application and context menus 153

9.1 Adding menus to your app 154

App window menus 154

Creating menus for Mac OS apps with NW.js 154

Creating menus for Mac OS apps with Electron 155

Creating menus for Windows and Linux apps 158

Choosing which menu to render based on the OS 164

9.2 Context menus 165

Creating the context menu app with NW.js 165

How do context menus work with NW.js? 169

Giving menu items icons 170

Creating a context menu with Electron 171

Adding the context menu with Electron 174

9.3 Summary 175

10 Dragging and dropping files and crafting the UI 176

10.1 Dragging and dropping files onto the app 176

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

Implementing drag-and-drop with Electron 180

10.2 Mimicking the native look of the OS 180

Detecting the user's OS 181

Using OS detection in NW.js 181

Using OS detection in Electron 182

Using CSS to match a user's OS style 183

10.3 Summary 186

11 Using a webcam in your application 187

11.1 Photo snapping with the HTML5 Media Capture API 187

Inspecting the NW.js version of the app 188

Creating Facehomb with Electron 194

11.2 Summary 198

12 Storing app data 199

12.1 What data storage option should I use? 199

12.2 Storing a sticky note with the locals to rage API 200

Creating the Let Me Remember app with Electron 201

Implementing the Let Me Remember app with NW.js 204

12.3 Porting a to-do list web app 206

Porting a TodoMVC web app with NW.js 207

Porting a TodoMVC app with Electron 208

12.4 Summary 209

13 Copying and pasting contents from the clipboard 210

13.1 Accessing the clipboard 211

Creating the Pearls app with NW.js 211

Creating the Pearls app with Electron 215

Setting other types of content to the clipboard with Electron 218

13.2 Summary 218

14 Binding on keyboard shortcuts 219

14.1 Creating the Snake game with NW.js 220

Implementing window focus keyboard shortcuts with NW.js 227

Creating global keyboard shortcuts with NW.js 229

14.2 Creating global shortcuts for the Snake game with Electron 231

14.3 Summary 233

15 Making desktop notifications 234

15.1 About the app you'll make 235

15.2 Creating the Watchy app in Electron 235

15.3 Creating the Watchy app in NW.js 239

15.4 Summary 242

Part 4 Getting Ready to Release 243

16 Testing desktop apps 245

16.1 Different approaches to testing apps 246

Test-driven-development (TDD) 246

Behavior-driven development (BDD) 247

Different levels of testing 248

16.2 Unit testing 249

Writing tests with Mocha 249

From pending test to passing test 251

16.3 Functional testing 255

Functional testing in practice 255

Testing with ChromeDriver and NW.js 256

16.4 Testing Electron apps with Spectron 256

16.5 Integration testing 258

Introducing Cucumber 258

Automatically testing your Electron app with Cucumber and Spectron 260

16.6 Summary 263

17 Improving app performance with debugging 264

17.1 Knowing what you're debugging 265

Identifying the location of the root cause 266

Debugging with the browser developer tools 267

17.2 Fixing bugs 270

Using Node.js's debugger to debug your app 271

Using NW.js's developer tools to debug your app 275

17.3 Resolving performance issues 279

Network tab 279

Timeline tab 280

Profiles tab 282

17.4 Debugging Electron apps 284

Introducing Devtron for debugging Electron apps 285

17.5 Summary 290

18 Packaging the application for the wider world 291

18.1 Creating executables for your app 292

Creating an NW.js app executable for Windows 292

Installing a virtual machine 292

Building a .exe of an NW.js app for Windows 293

Creating an Electron app executable for Windows 294

18.2 Creating a setup installer for your Windows app 296

Creating a Windows setup installer with NW.js 296

Creating a Windows setup installer with Electron 304

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

Creating the Mac executable app 306

Creating an Electron app executable for Mac OS 309

18.4 Creating executable apps for Linux 311

Creating NW.js standalone apps for Linux 312

Creating Electron standalone apps for Linux 313

18.5 Summary 315

Appendix A Installing Node.js 316

Index 317