Electron for Desktop Apps: The Complete Developer's Guide
4.7 (365 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,409 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Electron for Desktop Apps: The Complete Developer's Guide to your Wishlist.

Add to Wishlist

Electron for Desktop Apps: The Complete Developer's Guide

Use the Electron Framework to build compelling cross platform desktop applications with the latest web dev technologies
Bestselling
4.7 (365 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,409 students enrolled
Created by Stephen Grider
Last updated 6/2017
English
English
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn how to make native-feeling applications using web development technologies
  • Master the intricacies of development with Electron JS
  • Build applications that work well on both MacOS and Windows from a single codebase
  • Develop both traditional single-window apps and status tray-based apps
  • Understand how to integrate existing technologies like React and Redux into your Electron JS apps
  • Build a lucrative business with desktop apps, because there is so little competition in the marketplace
View Curriculum
Requirements
  • Basic understanding of Javascript
Description

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

I've built the course that I would have wanted to take when I was learning Electron. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who is the target audience?
  • Anyone who wants to create compelling native desktop applications
Students Who Viewed This Course Also Viewed
Curriculum For This Course
77 Lectures
07:55:44
+
Basics of Electron
4 Lectures 19:42
+
Handling Electron Projects
15 Lectures 01:39:05
App Overview
04:50

Getting Started
04:57

Starting and Stopping Electron
10:16

Loading HTML Docs
09:43

Selecting Videos
08:32

Sample Video - Download Me!
00:13

Reading File Details
10:19

Introduction to FFMPEG
06:33

OSX FFMPEG Installation
02:59

Windows FFMPEG Setup
00:05

Require Statements in the Browser
12:00

IPC Communication
09:13

Video Duration with FFProbe
06:12

Receiving IPC Events
10:18

Wrapup
02:55
+
Handling Menu Bars
16 Lectures 01:40:26
App Overview
03:37

App Boilerplate
01:23

Creating the MainWindow
06:08

Constructing Menu Bars
07:54

Menu Bar Gotchas
07:32

On Menu Click Functionality
06:08

Cross Platform Hotkeys
06:46

Creating Separate Windows
05:21

Another Electron Gotcha
04:53

Adding Polish to Electron
04:49

Restoring Developer Tools
14:08

IPC Between Windows
06:31

Garbage Collection with Electron
08:46

Role Shortcuts
07:33

Your Turn - Clearing Lists
02:29

Solution and Wrapup
06:28
+
Status Tray Applications
24 Lectures 02:21:46
App Boilerplate
05:13

What's This React Code?
06:07

BrowserWindow vs Tray
04:55

BrowserWindow Config
08:12

Creating Tray Icons
08:13

Toggling BrowserWindow Visibility
04:29

Detecting Visibility
02:54

The Positioning Bounds System
08:58

Setting Position with Bounds
07:25

Positioning of Windows
02:59

Object Oriented Programming with Electron
04:53

Basics of ES6 Classes
09:14

Subclassing
06:29

The TimerTray Subclass
08:59

Finishing TimerTray Refactor
08:47

Setting Tooltips
02:46

More on Garbage Collection
03:38

Building Context Menus
06:16

Controlling Window Focus
04:19

Hiding Dock Icons
01:36

MainWindow Class
11:36

IPC Between React and Electron
04:01

Displaying Text on the Tray
06:23

Background Throttling
03:24
+
Combining Electron with React and Redux
18 Lectures 01:54:53
App Overview
05:16

App Challenges
07:02

BrowserWindow Creation
05:32

Starting up Electron with Webpack
04:42

Overview of React and Redux
10:26

Receiving a List of Videos
07:21

Video Metadata
05:00

Handling Async Bulk Operations with Promises
07:22

Fetching Metadata in Promises
08:24

Refactoring for Multiple Videos
07:38

Wrapup on Metadata
07:00

Output Paths
12:05

Batch Video Conversion
07:38

Handling Conversion Completion
05:31

Detecting Conversion Progress
06:11

Opening Folders with Shell
03:44

Wrapup
03:35

RallyCoding
00:26
About the Instructor
Stephen Grider
4.7 Average rating
42,695 Reviews
98,080 Students
12 Courses
Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.