Electron for Desktop Apps: The Complete Developer’s Guide
-
Basics of Electron
-
Handling Electron ProjectsApp Overview0sGetting Started0sStarting and Stopping Electron0sClarification on Toggling Developer ToolsLoading HTML Docs0sSelecting Videos0sSample Video – Download Me!0sReading File Details0sIntroduction to FFMPEG0sOSX FFMPEG Installation0sWindows FFMPEG SetupImportant BrowserWindow UpdateRequire Statements in the Browser0sIPC Communication0sVideo Duration with FFProbe0sReceiving IPC Events0sWrapup0sUpdating Your Project for Best Security Practices
-
Handling Menu BarsApp Overview0sApp Boilerplate0sImportant BrowserWindow UpdateCreating the MainWindow0sConstructing Menu Bars0sMenu Bar Gotchas0sDarwin Conditional Required UpdateOn Menu Click Functionality0sCross Platform Hotkeys0sCreating Separate Windows0sAnother Electron Gotcha0sAdding Polish to Electron0sRestoring Developer Tools0sIPC Between Windows0sRequired Update for Closing a WindowGarbage Collection with Electron0sRole Shortcuts0sYour Turn – Clearing Lists0sSolution and Wrapup0sUpdating Your Project for Best Security Practices
-
Status Tray ApplicationsApp Boilerplate0sWhat’s This React Code?0sBrowserWindow vs Tray0sBrowserWindow Config0sSmall Update for Tray IconCreating Tray Icons0sToggling BrowserWindow Visibility0sDetecting Visibility0sThe Positioning Bounds System0sSetting Position with Bounds0sPositioning of Windows0sObject Oriented Programming with Electron0sBasics of ES6 Classes0sSubclassing0sThe TimerTray Subclass0sFinishing TimerTray Refactor0sSetting Tooltips0sMore on Garbage Collection0sBuilding Context Menus0sControlling Window Focus0sHiding Dock Icons0sMainWindow Class0sIPC Between React and Electron0sDisplaying Text on the Tray0sBackground Throttling0s
-
Combining Electron with React and ReduxApp Overview0sStarter Project FilesApp Challenges0sBrowserWindow Creation0sStarting up Electron with Webpack0sOverview of React and Redux0sReceiving a List of Videos0sVideo Metadata0sHandling Async Bulk Operations with Promises0sFetching Metadata in Promises0sRefactoring for Multiple Videos0sWrapup on Metadata0sRequired Update for the convertVideos Action CreatorOutput Paths0sBatch Video Conversion0sHandling Conversion Completion0sDetecting Conversion Progress0sOpening Folders with Shell0sWrapup0s
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:
- 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.
- 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
- 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.
- 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.
What's included
- 8 hours on-demand video
- 20 articles
- 56 downloadable resources
- Access on mobile and TV
- Certificate of completion