OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Electron for Desktop Apps

The Complete Developer's Guide

Stephen Grider

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?

Read more

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 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 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.

Enroll now

What's inside

Learning objectives

  • 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

Syllabus

Basics of Electron
How to Get Help
Course Resources
Join Our Community!
Read more
Why Does Electron Exist?
How Does Electron Work?
History of Electron
Handling Electron Projects
App Overview
Getting Started
Starting and Stopping Electron
Clarification on Toggling Developer Tools
Loading HTML Docs
Selecting Videos
Sample Video - Download Me!
Reading File Details
Introduction to FFMPEG
OSX FFMPEG Installation
Windows FFMPEG Setup
Important BrowserWindow Update
Creating Separate Windows
Require Statements in the Browser
IPC Communication
Video Duration with FFProbe
Receiving IPC Events
Wrapup
Updating Your Project for Best Security Practices
Handling Menu Bars
App Boilerplate
Creating the MainWindow
Constructing Menu Bars
Menu Bar Gotchas
Darwin Conditional Required Update
On Menu Click Functionality
Cross Platform Hotkeys
Another Electron Gotcha
Adding Polish to Electron
Restoring Developer Tools
IPC Between Windows
Required Update for Closing a Window
Garbage Collection with Electron
Role Shortcuts
Your Turn - Clearing Lists
Solution and Wrapup
Status Tray Applications
What's This React Code?
BrowserWindow vs Tray
BrowserWindow Config
Small Update for Tray Icon
Creating Tray Icons
Toggling BrowserWindow Visibility
Detecting Visibility
The Positioning Bounds System
Setting Position with Bounds
Positioning of Windows
Object Oriented Programming with Electron
Basics of ES6 Classes
Subclassing
The TimerTray Subclass
Finishing TimerTray Refactor
Setting Tooltips
More on Garbage Collection
Building Context Menus
Controlling Window Focus
Hiding Dock Icons
MainWindow Class
IPC Between React and Electron
Displaying Text on the Tray
Background Throttling
Combining Electron with React and Redux
Required Flag for Boilerplate Installation
App Challenges
BrowserWindow Creation
Starting up Electron with Webpack
Overview of React and Redux
Receiving a List of Videos
Video Metadata
Handling Async Bulk Operations with Promises
Fetching Metadata in Promises
Refactoring for Multiple Videos
Wrapup on Metadata
Required Update for the convertVideos Action Creator
Output Paths
Batch Video Conversion
Handling Conversion Completion
Detecting Conversion Progress
Opening Folders with Shell
Extras
Bonus!

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Offers hands-on learning opportunties
You will learn about using React and Redux with Electron
Develops some of the essential skills for computer science professionals
Provides a clear overview of Electron, its features, and its origin
It is led by Stephen Grider, who is known for his expertise
Teaches skills that are relevant to the current job market

Save this course

Save Electron for Desktop Apps: The Complete Developer's Guide to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Electron for Desktop Apps: The Complete Developer's Guide with these activities:
Review JavaScript fundamentals
Strengthen your foundation in JavaScript, which is essential for building Electron JS applications, ensuring a smoother learning experience.
Browse courses on JavaScript
Show steps
  • Review core JavaScript concepts such as variables, data types, and control flow.
  • Practice writing simple JavaScript programs.
  • Complete online JavaScript exercises or quizzes.
  • Build a small JavaScript project to apply your refreshed skills.
Join an Electron JS study group
Engage with other learners to discuss Electron JS concepts, share knowledge, and work on projects together, fostering a deeper understanding.
Browse courses on Collaborative Learning
Show steps
  • Find an existing Electron JS study group or create your own.
  • Attend regular study sessions.
  • Participate in discussions and ask questions.
  • Collaborate on projects with other group members.
  • Share resources and materials with the group.
Follow a tutorial on Electron JS best practices
Enhance your understanding of effective Electron JS development practices, leading to cleaner, more efficient, and maintainable code.
Browse courses on Best Practices
Show steps
  • Find a tutorial that covers Electron JS best practices.
  • Set aside time to work through the tutorial.
  • Implement the recommended practices in your own Electron JS projects.
  • Evaluate the impact of the best practices on your code quality.
Two other activities
Expand to see all activities and additional details
Show all five activities
Write a blog post about Electron JS
Explain the concepts and benefits of using Electron JS for desktop app development, showcasing your understanding of the technology.
Browse courses on Desktop App Development
Show steps
  • Choose a specific topic related to Electron JS.
  • Research and gather information on the topic.
  • Write a draft of your blog post.
  • Edit and revise your blog post.
  • Publish your blog post on a relevant platform.
Build a desktop app for a specific problem
Apply your knowledge of Electron JS to create a practical solution to a real-world problem, showcasing your ability to design, develop, and deploy desktop applications.
Browse courses on Problem-Solving
Show steps
  • Identify a problem that can be solved with a desktop app.
  • Design the interface and functionality of your app.
  • Develop and implement your app using Electron JS.
  • Test and debug your app thoroughly.
  • Deploy your app to users and gather feedback.

Career center

Learners who complete Electron for Desktop Apps: The Complete Developer's Guide will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Electron for Desktop Apps: The Complete Developer's Guide.
Building Desktop Apps with Ionic 4 and Electron 5
Most relevant
macOS 10 Development Fundamentals
Most relevant
Managing macOS Apps and Processes
Most relevant
Building Blazor Hybrid Apps
Most relevant
Electron Fundamentals
Most relevant
Fundamentals of Building .NET 5 Desktop Applications
Most relevant
Apple Device Support: App Management
Most relevant
Ionic 5: Getting Started
Most relevant
Uno 3 Platform Fundamentals
Most relevant
Course image
Effort
8 total hours
Via
Udemy
Instructor
Stephen Grider
Language
English
Good to know
Offers hands-on learning opportunties
You will learn about using React and Redux with Electron
Develops some of the essential skills for computer science professionals
Provides a clear overview of Electron, its features, and its origin
It is led by Stephen Grider, who is known for his expertise
Teaches skills that are relevant to the current job market
Share and help others discover this course
Facebook LinkedIn X Reddit Link Email
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser