Go from Web Developer to Desktop Applications Developer by learning
to use the entire Electron API from scratch.
This course is suitable for BOTH complete Electron beginners and existing Electron developers looking to advance to the next level.
An invaluable skill for any Web Developer to expand their career opportunities.
This course will provide a very practical and concise approach to learning Electron from scratch.
You will be able to start building real-world desktop applications immediately.
Content and Overview
With 45 concise and practical lectures, this course will provide a COMPLETE understanding of Electron and it's full API.
The course starts by setting up the Electron development environment and covers some useful tools to aid in the development process.
The main body of the course then covers the 3 individual sections of the Electron API in great detail, with very practical individual lessons on each API module.
Once the API is covered, the course looks at some useful features and techniques, also demonstrating how Electron integrates with Native HTML5 APIs.
Finally you'll build a real-world application which covers a large chunk of the Electron API in real-world scenarios. The project lessons is divided into 8 individual videos and will take you step-by-step to a complete, distribution-ready desktop application.
Upon completion of this course you will have the practical skills to immediately start building high quality desktop applications for Mac, Windows & Linux.
This course is to the point and everything is demonstrated in the most simple, yet practical ways, to get you become an advanced Electron Developer.
An introduction to this course covering:
An overview of lessons' structure, Electron documentation and coding style used in this course.
A first look at installing the Electron command line tools and compiling/running the electron-quick-start app.
A step-by-step look at how an Electron app starts, creates app windows and loads content into those windows.
This lesson will provide you with a clear understanding of what happens when we compile and run an Electron app and demonstrates the 2 processes that comprises the app.
A quick tutorial on using the Electron-Reload module for live reloads of the Electron browserWindow (renderer process) for a faster and more automated development environment.
Learn to compile native Node modules for Electron on Mac.
Learn to compile native Node modules for Electron on Windows.
This lesson covers installing Windows build tools and rebuilding modules using electron-rebuild.
Learn how to install the Devtron extension for the standard Chrome Developer tools in Electron's BrowserWindow.
Electron.app controls the application lifecycle and is key to having apps that truly native.
This lecture will teach you how to listen for app events and invoke actions such as quitting the app or even preventing it from quitting.
Electron.BrowserWindow is responsible for managing the web contents (HTML files) that gets loaded into the app.
In this video we'll see how to manage & control content loading for a truly native user experience.
An Electron app can consist of multiple BrowserWindows and the Electron API allows us to create relationships between these windows.
In this lesson we'll see how to create those relationships and also how to create modal child windows.
Some applications will require a cleaner looking BrowserWindow without the native system elements like menu bars.
In this lesson we'll see how to create these minimal windows and define how the user can interact with them.
This lesson is a broad overview of some of the important, or interesting, Electron.BrowserWindow methods. It covers both static methods and instance methods.
A short tutorial on using the Electron-Window-State package to manage and persist the BrowserWindow state between sessions.
Learn to use the BrowserWindow.webContents object to take full control of the contents loaded into the BrowserWindow instance.
This lesson includes a selection of important topics such as:
And a general overview of the more generic or self-explanatory methods & events.
Understand the context in which an Electron session exists and how to create & attach custom sessions to specific BrowserWindow instances.
An quick look at using the Cookies class to read & write cookies on a session instance.
Manage app downloads with the downloadItem object on the will-download session event.
This lesson will show you how to manage download state and set predefined download locations.
The Electron Dialog module provides easy access to native system dialogs including:
Learn how to create and customise these dialogs for a completely native solution to user input.
Understand the concept of accelerator strings to define keyboard shortcuts and implement them using the globalShortcut class.
Accelerator strings is an important part of Electron and will come in use when creating Menus also.
The Menu class will enable you to create rich, native application menus.
This lesson will teach you how to create menus and then populate them with menu items, using the menuItem class and also how to simplify menu creation through the use of menu templates.
This is a follow up lesson on using the the Menus & Menu Items to create context menus on from the webContents' context-menu event, triggered by a user right clicking the app content.
Create context menus in the application's notification area. e.g. MacOS menu bar icons.
The powerMonitor class is used to monitor power-state changes to the user's machine.
These state changes include:
A crossover lesson, covering Inter-Process Communication. The IPC modules allow Electron's Main process and Renderer Process's to communicate. Learn how to use these modules synchronously or asynchronously and organise data exchanges via custom channels.
Simplify common IPC use-cases with the remote module. Learn how to use this module and understand how it works internally.
See how to reference Electron-generated browser windows from the window.open method. This lesson will teach you how to:
Manage basic rendering of the webContents via the webFrame module.
See how to:
Display and manage external content securely within an Electron BrowserWindow using the webView tag.
Learn about Electron's unique extensions to the global Node process object.
Use the modified process to invoke app crashes & hangs, check process memory usage and more.
Pass both local and remote files to default system apps instead of handling them inside the Electron app.
Learn to perform copy & paste commands on the system clipboard.
Use offscreen webContents with hidden BrowserWindows to perform tasks on a renderer process in the background.
Get notified of changes to a users connection status using the HTML5 navigator object.
Implement the HTML5 Battery Status API to get real-time feedback on the users battery status.
An overview of the bookmarking application we'll be building, including features & initial setup.
Create the main BrowserWindow and add a modal input for submitting new items.
Pass a newly added bookmark item to an offscreen BrowserWindow via IPC messaging, to retrieve the bookmark's thumbnail image and title.
Listen for newly retrieved items via an IPC response message and add the items to the main BrowserWindow HTML.
Also implement simple storage to persist newly added items.
Implement item navigation and selection, using the keyboard arrow keys and mouse.
Create a BrowserWindowProxy object when opening an item and pass that item's details to the BrowserWindow for rendering in a secure <webview> tag.
Add a button to the reader window for deleting items and persisting changes.
Add a complete menu with platform specific menu items and full keyboard control over bookmark items.
Learn to use the electron-packager module to package the project application into a standalone executable with custom icons and asar archived project files.
Stackacademy provides high-quality Courses for Developers, with learning-efficiency as the #1 priority.
My name is Ray Viljoen,
I have 9 years experience as a Full Stack Developer and have real world experience building, maintaining & improving a wide range of applications.
My courses are concise, teaches practical skills and is designed to also serve as usable future reference material.