Electron in Action
Desktop applications are great, but it's painful and time consuming to use different languages and frameworks for each platform. You could build web applications, but they can't access file systems or native APIs. Electron can help. Electron is a framework for building cross-platform desktop applications with web technologies. It combines Google Chrome's content module with Node.js, letting you use your web development skill set to build applications that run natively on all major platforms.
Electron in Action guides you, step-by-step, as you learn to build desktop applications that run on Windows, OSX, and Linux. You'll begin by getting the big picture of Electron, what it is, and how it works. Then you'll learn to use OS-specific features like the file system, menus, and clipboards as you build your first desktop project, a notes application. Along the way, you'll debug errors and diagnose performance bottlenecks with Chrome's developer tools, package your application as a standalone executable for each OS, and even distribute it to app stores. By the end, you'll be ready to build your own professional desktop applications using the web tools and technologies you already know.
"Finally, JavaScript really can do it all, from client to server!"
~ William Wheeler
"Electron in Action does an amazing job at providing everything you need to start developing with cross platform desktop applications."
~ Raq Khan
"Great for developers familiar with web technologies and want to venture into desktop development."
~ Jimmy Qiu
Table of Contents detailed table of contents
Part 1: Getting Started with Electron
1. Introducing Electron
1.1. What is Electron?
1.1.1. What is the Chromium Content Module?
1.1.2. What is Node.js?
1.2. Who is using Electron?
1.3. What do I need to know?
1.4. Why should I use Electron?
1.4.1. Leveraging your existing skill set
1.4.2. Access to native operating system APIs
1.4.3. Enhanced privileges and looser restrictions
1.4.4. Accessing Node from the browser context
1.4.5. Offline First
1.5. How does Electron work?
1.5.1. The main process
1.5.2. Renderer processes
1.6. Electron vs. NW.js
1.7. Summary
2. Your first Electron application
2.1. Building a Bookmark List Application
2.1.1. Structuring Our Electron Application
2.1.2. package.json
2.1.3. Downloading and Installing Electron in Our Project
2.2. Working with the Main Process
2.3. Creating a Renderer Process
2.3.1. Loading Code from the Renderer Process
2.3.2. Requiring Files in the Renderer Process
2.3.3. Adding Styles in the Renderer Process
2.4. Implementing the User Interface
2.4.1. Making Cross-Origin Requests in Electron
2.4.2. Parsing Responses
2.4.3. Storing Responses With Web Storage APIs
2.4.4. Displaying Request Results
2.4.5. The Unhappy Path
2.4.6. An Unexpected Bug
2.5. Summary
Part 2: Building Cross-Platform Applications with Electron
3. Building a Notes Application
3.1. Defining our application
3.2. Laying the foundation
3.3. Bootstrapping the application
3.3.1. Implementing the user interface
3.3.2. Gracefully Displaying the Browser Window
3.4. Implementing the base functionality
3.5. Debugging an Electron application
3.5.1. Debugging renderer processes
3.5.2. Debugging the main process
3.5.3. Debugging the main process with Visual Studio Code
3.6. Summary
4. Using Native File Dialogs and Facilitating Inter-Process Communication
4.1. Triggering Native File Dialogs
4.2. Reading Files Using Node
4.2.1. Scoping the File Open Dialog
4.2.2. Implementing Dialog Sheets in macOS
4.3. Facilitating Inter-Process Communication
4.3.1. Introducing the remote module
4.4. Triggering the Open File Function Using Inter-Process Communication
4.4.1. Understanding the CommonJS Require System
4.4.2. Requiring Functionality from Another Process
4.5. Sending Content from the Main to the Renderer Process
4.5.1. Sending the File Contents to the Renderer Contents
4.6. Summary
5. Working with Multiple Windows
5.1. Creating and Managing Multiple Windows
5.1.1. Communicating Between the Main Process and Multiple Windows
5.1.2. Passing a Reference to the Current Window to the Main Process
5.2. Improving the User Experience of Creating New Windows
5.3. Integrating with macOS
5.4. Summary
6. Working with Files
6.1. Keeping Track of the Current File
6.1.1. Updating the Window Title Based on the Current File
6.1.2. Determining If the Current File Has Changed
6.1.3. Enabling the Save and Revert Buttons in the User Interface
6.1.4. Updating the Represented File on macOS
6.2. Keeping Track of Recently Opening Files
6.3. Saving Files
6.3.1. Exporting the Rendered HTML Output
6.3.2. Common Paths
6.3.3. Saving Files from the Renderer Process
6.3.4. Saving the Current File
6.3.5. Reverting Files
6.4. Opening Files Using Drag and Drop
6.4.1. Ignoring Dropped Files Everywhere Else
6.4.2. Providing Visual Feedback
6.4.3. Opening Dropped Files
6.5. Watching Files for Changes
6.6. Prompting the User Before Discarding Changes
6.7. Summary
7. Building Application and Context Menus
7.1. Replacing and Replicating the Default Menu
7.1.1. macOS and the Case of the Missing Edit Menu
7.1.2. The Hidden Cost of Replacing Electron's Default Menu
7.1.3. Implementing the Edit and Window Menus
7.1.4. Defining Menu Item Roles and Keyboard Shortcuts
7.1.5. Restoring the Application Menu on macOS
7.1.6. Adding a Help Menu
7.2. Adding Application-Specific Menu Functionality
7.2.1. Handling the Edge Case of Having No Focused Window
7.3. Building Context Menus
7.4. Summary
8. Further Operating System Integration and Dynamically Enabling Menu Items
8.1. Using the Shell Module from the User Interface in the Renderer Process
8.2. Using the Shell Module in the Application Menu
8.2.1. Additional Features of Electron's Shell Module
8.3. Accessing the Shell Module from a Context Menu
8.3.1. Deciding Between Putting Functionality in a Menu or in the User Interface
8.3.2. Deciding Between Putting Functionality in the Application or Context Menu
8.4. Disabling Menu Items When Appropriate
8.4.1. Dynamically Enabling and Disabling Menu Items in the Context Menu
8.4.2. Dynamically Enabling and Disabling Menu Items in the Application Menu
8.5. Summary
9. Introducing the Tray Module
9.1. Creating an Application with the Tray Module
9.1.1. Using the Correct Icon for macOS and Windows
9.1.2. Supporting Dark Mode in macOS
9.1.3. Reading from the Clipboard and Storing Clippings
9.2. Reading to and Writing from the Clipboard
9.2.1. Writing to the Clipboard
9.2.2. Handling Edge Cases
9.3. Registering Global Shortcuts
9.3.1. Checking Registrations and Unregistering Global Shortcuts
9.4. Displaying Notifications
9.5. Switching Menubar Icons when Pressed in macOS
9.6. Completed Code
9.7. Summary
10. Building Applications with the Menubar Library
10.1. Starting an Application with Menubar
10.2. Adding Clippings to the User Interface
10.3. Working with Clippings in the Application
10.3.1. Preventing Memory Leaks Using Event Delegation
10.3.2. Removing a Clipping
10.3.3. Writing to the Clipboard
10.4. Publishing Clippings
10.4.1. Setting Up Request
10.5. Displaying Notifications and Registering Global Shortcuts
10.5.1. Registering Global Shortcuts
10.5.2. Solving for the Edge Case that Occurs if the Window Has Never Been Shown
10.6. Adding a Secondary Menu
10.7. Completed Code
10.8. Summary
11. Using native Node.js modules
12. Using transpilers and frameworks
13. Testing and continuous integration
Part 3: Deploying Electron Applications
14. Building applications for deployment
15. Releasing and updating applications
16. Deploying to the Mac App Store
What's inside
- Building and updating Electron applications
- Leveraging native operating system APIs that aren't available to traditional browser applications
- Build an application deployable on OS X, Windows, and Linux
- Using third-party frameworks such as Ember, Angular, and React with Electron
- Deploying to the Mac App Store
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
FREE domestic shipping on three or more pBooks