Electron for Desktop Apps: The Complete Developer’s Guide

Electron for Desktop Apps: The Complete Developer’s Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 8 Hours | 1.00 GB

Use the Electron Framework to build compelling cross platform desktop applications with the latest web dev technologies

Take your web dev skills out of the browser! This course will teach you the topics you need to make a #1 best-selling desktop app.

What is Electron?

Electron is an elegant solution for writing desktop-based apps using existing web technologies you already know, like HTML, CSS, and Javascript. Electron is used for ultra-popular apps like Atom, Slack, and Discord.

Who builds desktop apps?!

In the last 10 years there has been a tremendous shift from desktop to mobile, true, but the result is that there is a huge opportunity to create desktop apps, as all other developers have shifted over to building mobile! You can easily get into the front page on the MacOS store with an app you spend a few days building – this would never happen on mobile! The last app you’ll build in this course can be easily tweaked into a front-page app.

What Will You Build?

All of my courses are ‘learn-by-doing’: no boring endless lectures with Powerpoints, only live, interactive coding examples. In this course we’ll build four separate apps with increasing complexity, each of which will profile different features of Electron. By putting each concept into a real app, you’ll get a better idea of when to use each unique and powerful feature.

Both MacOS and Windows supported!

Apps you’ll build:

  1. Video File Analyzer. Learn how to manipulate the underlying OS with this first app, in which you’ll build a tool to analyze video files, supported by the FFMPEG CLI tool. This app will get you familiar with Electron, along with an understanding of how to build a basic app.
  2. Cross Window Todo List: Ok, yep, a todo app, I know, but you’ll learn how to manipulate multiple windows with Electron, along with customizing the top menu bar. Additional emphasis is placed on cross platform experiences between MacOS and Windows
  3. System Tray Timer. Build a classic system-tray based app – this is the type of app that exists as an icon by the clock on your desktop. You’ll learn how to add a ton of polish to common Electron apps, which will make your users assume that they’re using a fully native experience.
  4. Video File Converter. Make an app that can convert video files to any other format. Existing apps with the exact same feature set sell for $10 on the MacOS store. This tool is amazingly useful, and is something that I use daily myself!

Here’s what we’ll learn:

  • Learn the theory and history behind Electron
  • Build complex desktop applications using repeatable processes
  • Assemble both classic desktop apps and ‘tray-based’ apps
  • Add polish to your Electron apps, making them feel more native
  • Sidestep the common pitfalls associated with Electron
Table of Contents

Basics of Electron
1 How to Get Help
2 Why Does Electron Exist?
3 How Does Electron Work?
4 History of Electron

Handling Electron Projects
5 App Overview
6 Getting Started
7 Starting and Stopping Electron
8 Loading HTML Docs
9 Selecting Videos
10 Sample Video – Download Me!
11 Reading File Details
12 Introduction to FFMPEG
13 OSX FFMPEG Installation
14 Windows FFMPEG Setup
15 Require Statements in the Browser
16 IPC Communication
17 Video Duration with FFProbe
18 Receiving IPC Events
19 Wrapup

Handling Menu Bars
20 App Overview
21 App Boilerplate
22 Creating the MainWindow
23 Constructing Menu Bars
24 Menu Bar Gotchas
25 On Menu Click Functionality
26 Cross Platform Hotkeys
27 Creating Separate Windows
28 Another Electron Gotcha
29 Adding Polish to Electron
30 Restoring Developer Tools
31 IPC Between Windows
32 Garbage Collection with Electron
33 Role Shortcuts
34 Your Turn – Clearing Lists
35 Solution and Wrapup

Status Tray Applications
36 App Boilerplate
37 What’s This React Code?
38 BrowserWindow vs Tray
39 BrowserWindow Config
40 Creating Tray Icons
41 Toggling BrowserWindow Visibility
42 Detecting Visibility
43 The Positioning Bounds System
44 Setting Position with Bounds
45 Positioning of Windows
46 Object Oriented Programming with Electron
47 Basics of ES6 Classes
48 Subclassing
49 The TimerTray Subclass
50 Finishing TimerTray Refactor
51 Setting Tooltips
52 More on Garbage Collection
53 Building Context Menus
54 Controlling Window Focus
55 Hiding Dock Icons
56 MainWindow Class
57 IPC Between React and Electron
58 Displaying Text on the Tray
59 Background Throttling

Combining Electron with React and Redux
60 App Overview
61 App Challenges
62 BrowserWindow Creation
63 Starting up Electron with Webpack
64 Overview of React and Redux
65 Receiving a List of Videos
66 Video Metadata
67 Handling Async Bulk Operations with Promises
68 Fetching Metadata in Promises
69 Refactoring for Multiple Videos
70 Wrapup on Metadata
71 Output Paths
72 Batch Video Conversion
73 Handling Conversion Completion
74 Detecting Conversion Progress
75 Opening Folders with Shell
76 Wrapup
77 RallyCoding