Cover image for Building Cross-Platform Desktop Applications with Electron

Building Cross-Platform Desktop Applications with Electron

Author Muhammed Jasim
Release Date: 2017/04/01
ISBN: 9781786464125
Topic:
0%
228
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Learn how to develop cross-platform desktop app from scratch with Electron and Node

About This Book

  • Build a solid foundation with Electron for an easier development experience
  • Use modern JavaScript frameworks and tools along with Electron to take your desktop applications to the next level
  • Extend the functionality of Electron through modules

Who This Book Is For

If you are a developer with prior experience of building front-end applications and you are keen on developing a cross-platform desktop application, then this book is for you. This book is also ideal for experienced JavaScript developers with a basic understanding of front-end development and Node.js development.

What You Will Learn

  • Explore various tools and libraries to build and debug an Electron application
  • Use popular JavaScript frameworks such as Angular and Typescript along with Electron to enhance your app
  • Work with the desktop UI development for Electron using Photon
  • Find out how to use various Electron APIs like Clipboard, Process, Shell, Image, File, Session, and Cookie
  • Integrate your application into different desktop environments with Electron API
  • Cache your network resources using service worker
  • Test the Electron application using Mocha and Spectron
  • See how to package and distribute an Electron application

In Detail

Though web applications are becoming increasingly popular, desktop apps are still important. The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML, and CSS, and this book will teach you how to create your first desktop application with Electron. It will guide you on how to build desktop applications that run on Windows, Mac, and Linux platforms.

You will begin your journey with an overview of Electron, and then move on to explore the various stages of creating a simple social media application. Along the way, you will learn how to use advanced Electron APIs, debug an Electron application, and make performance improvements using the Chrome developer tools. You'll also find out how to package and distribute an application, and more.

By the end of the book, you will be able to build a complete desktop application using Electron and web technologies. You will have a solid understanding of the common challenges that desktop app developers face, and you'll know how to solve them.

Style and approach

Covers everything you need to know about Electron with full examples and explanations to get you building desktop apps with Electron as quickly as possible.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book 
      3. Errata
      4. Piracy
      5. Questions
  2. Introducing Electron
    1. Why desktop applications?
    2. History of Electron
    3. Introducing Electron
      1. Why should I use Electron?
      2. Leveraging your existing skill set
      3. Goodbye sandbox security model
    4. Accessing operating system APIs
      1. Unlimited access to Node.js and NPM
      2. What do I need to know?
      3. Who uses Electron?
    5. Building a hello world application using Electron
      1. Installing Node.js
        1. Mac
        2. Linux - Ubuntu
      2. Installing Electron
      3. Writing the application
      4. Running the application
      5. Using Node.js inside the web pages
        1. How does Electron work?
      6. The browser/main process
      7. The renderer process
      8. Communication between renderer and browser
    6. Summary
  3. Building Your First Electron Application
    1. Introducing the sample application
      1. The technical stack
        1. Angular 2
        2. TypeScript
        3. Facebook Graph API
        4. Visual Studio code
        5. Bootstrap and Photon kit
        6. Webpack
      2. Bootstrapping the application
      3. Organizing files and directories
    2. Setting up the development environment
      1. Running the initial application
      2. Integrating Angular with Electron
      3. Configuring module bundler - webpack
      4. Configuring loaders
      5. Webpack plugins
      6. Bootstrapping Angular with Electron
      7. Configuring dev server
      8. Adding a menu bar to the application
      9. Adding a context menu to the renderer process
      10. Styling the application using Bootstrap
    3. Summary
  4. Tooling and Debugging
    1. Debugging an Electron application
      1. Debugging the main process
    2. Debugging with Visual Studio Code
      1. Setting up the launch configuration
      2. Debugging renderer processes
      3. Adding Chrome Developer Tools extensions
        1. Loading the developer tools extension manually
      4. Monitoring the application with Devtron
      5. Integrating task runners with VS Code
      6. Boosting development workflow
        1. Adding hot module replacement
        2. Integrating webpack dev server into the Electron shell
      7. Adding keyboard shortcuts to the application
      8. Controlling Electron behavior using environment variables
      9. Monitoring power state changes
      10. Submitting crash reports to the server
      11. Capturing the desktop using Electron API
    3. Summary
  5. Using Angular 2 with Electron
    1. Introducing the Facebook Graph API
      1. Setting up the Facebook application
      2. Configuring the Facebook SDK
      3. Creating the service
      4. Configuring Angular router
      5. Login to the Facebook API
      6. Getting user profile
      7. Creating the profile component
      8. Creating a tab component
    2. Implementing oAuth authentication with Electron
    3. Summary
  6. Crafting User Interface
    1. Introducing Photon kit
      1. Laying out the application
      2. The frameless window
      3. Draggable regions
      4. Laying out the application
        1. Sidebars
      5. Photon components
        1. Bars
      6. Toolbar and Actions
      7. Tabs
      8. Navs
      9. Tables
    2. Building a user interface with React desktop
      1. React desktop
        1. Buttons
        2. Windows
        3. Segmented Control
        4. NavPane
        5. The list view
      2. Awesome Electron
    3. Summary
  7. Using Node.js with Electron
    1. Managing data stores
      1. Using the Node MySQL driver
      2. Installing dependencies
      3. Creating a database service
    2. Accessing hardware
      1. Creating a native add-on
    3. Using TypeScript and ES2015 with Electron
    4. Summary
  8. Deep Dive into Electron API - 1
    1. Inter-process communication with IPC module
      1. IPCRenderer
      2. IPCMain
      3. Passing callbacks to the main process
      4. Sharing variables between modules
    2. Defining custom protocols
    3. Sessions and cookies
    4. Session
      1. Intercepting content download
      2. Emulating network using session API
      3. Intercepting permission requests
      4. Managing file download
    5. Native system dialogs
      1. Generic dialog boxes
    6. Working with clipboard
    7. Managing display and power sleep mode
    8. Monitoring power changes
    9. Networking from the main process
      1. Managing web requests
    10. Summary
  9. Exploring Electron API - 2
    1. Managing the web page using webContents
      1. Managing the page navigation
      2. Authenticating the web view requests
      3. Capturing the page snapshot
      4. Emulating device viewport inside the web view
      5. Printing and saving the web pages
      6. Embedding guest content using WebView tag
    2. Extended Node.js process 
    3. Customizing the browser window
      1. Managing multiple windows
      2. Loading POST requests
      3. Listening for APPCOMMANDs on a Windows platform
      4. Offscreen rendering
    4. Working with the shell
    5. Controlling the application life cycle using app module
      1. Setting up the default protocol client
      2. Managing the recent document list
    6. Summary
  10. Integrating with Desktop Environments
    1. Introduction to desktop integration
      1. Handling desktop notifications
    2. Managing task list, recent documents, and the dock menu
      1. Linux Unity launcher shortcuts
      2. Custom macOS dock menu
    3. Thumbnail toolbars
    4. Managing display properties
    5. Dealing with tray icons
    6. Managing application logs
    7. Running Electron application as Windows service
      1. Running Electron application as Linux daemons
    8. Universal Windows platform
      1. Developing with WinRT
      2. Using notification API 
      3. Packaging for Windows store in appx format
    9. Summary
  11. Dealing with Web Standards
    1. Service workers
      1. What is a service worker?
        1. The service worker life cycle
        2. Managing the service workers in Electron
          1. Creating HTTPS server
        3. Adding a JSON service
        4. Creating the service worker
        5. Managing the cache version
    2. Customizing the notification
      1. Storing database locally
    3. Summary
  12. Testing Electron Application
    1. Introduction to JavaScript testing
    2. Introduction to Spectron
      1. Accessing the Electron API
      2. Testing DOM tree
      3. Exploring Spectron API
        1. Accessing the webContents API
        2. Accessing the process object
        3. Accessing the renderer process logs
    3. Using ESNext in test cases
    4. Using Chai as Promised
    5. Summary
  13. Packaging and Distributing the Application
    1. Building and packaging the Electron application
    2. Packaging the Electron into asar archive 
      1. Generating the asar archive
      2. Rebranding the application
      3. Using Electron builder
    3. Automating the build process
      1. Creating the native installer
        1. Programmatic Usage
      2. Publishing the artifacts
      3. Auto updating the application
      4. Submitting to the App Store
        1. Windows App Store submission guide
        2. Mac App Store submission guide
      5. Continuous Integration
    4. Summary
3.144.109.102