Best Resources to Learn Electron

Electron is among the most popular open-source frameworks for developing and designing cross-browser and cross-platform interactive and dynamic apps. It’s the central GUI framework behind WordPress Desktop, GitHub Desktop, Light Table, Atom, and Visual Studio Code.

With Electron, you can develop desktop GUI apps using technologies. You don’t need to learn various languages because you can build websites and apps using CSS, JavaScript, and HTML. Electron combines the Node.js runtime and Chromium rendering engine.

Electron apps consist of the renderer processes and browser processes. The browser process operates the app logic and launches different renderer processes. Both processes are capable of running with Node.js integration. 

Tutorials and Courses

Here are the best tutorials and courses to learn Electron.

  1. Official Documentation – Learn about every aspect of working with Electron, from installing the dev environment on any OS to API Structure.
  2. Essential Electron – If you want to know what is Electron and what it can do, read this overview.
  3. Master Electron: Desktop Apps using HTML, JavaScript & CSS – This course is ideal for both beginners and experienced Electron developers. You will learn everything you need to know about Electron, including its parts, features, and techniques for using Electron API modules. The course contains 45 practical and concise lectures, so it’s perfect for those with a good understanding of JavaScript, HTML, and CSS. It also covers all sections of the Electron API. The course also demonstrates how the open-source framework works with Native HTML5 APIs. By the end of the course, you will learn how to create an 8-step Electron project. The lessons are divided into 8 different videos, which will teach you how to build a distribution-ready desktop app for Linux, Mac, and Windows.
  4. Electron for Desktop Apps: The Complete Developer’s Guide – In this course, you will learn the history and theory behind Electron, how to build native-feeling apps that work on Windows and macOS from one codebase, and master Electron JS. You will also learn how to build both status tray-based applications and traditional single-window applications and how to integrate technologies such as Redux and like into Electron JS apps. The course will teach you how to develop 4 different applications with increasing difficulty.
  5. Projects in Electron: Learn Electron Framework Building Apps – The project-based course will teach you how to install and set up an Electron and how you can use it by developing 5 separate projects with this framework. These projects include a Tic Tac Toe Game, Pomodoro Clock, Weather App, Currency Converter, and Body Mass Index.
  6. Cross-Platform Desktop Applications – This course is a step-by-step guide that teaches you how to develop cross-platform apps using Electron, JavaScript, and Node. You will learn how to include OS-specific features in your apps, such as menus, Chromium tools, clipboards, and file systems. The course also covers data storage, testing, and performance optimization.
  7. Electron Fundamentals – This course covers everything about Electron and how you can use it to build desktop apps using your existing web tech skills. It covers the Electron APIs and features and how you can use them to your advantage. You will also learn how to share and package up the app you have developed.
  8. Image Editor Application With Electron – This tutorial will show you how to create an app that can edit images. You will learn about the basics of how to create an electron application, customize the toolbar area of the application, use dialog windows with Electron, and use AngularJS in an Electron application.
  9. Creating screenshots of your app or the screen – In this tutorial, you’ll learn how to use desktop capture to capture a screenshot from different areas on the Desktop.

IDEs and Code Editors

Any code editor which supports HTML5, CSS, and JavaScript can work well with Electron

Boilerplates / Themes

  • electron-boilerplate – This project contains only the bare minimum of tooling and dependencies to provide you with a simple-to-understand and extensible base.
  • electron-react-boilerplate – Electron React Boilerplate uses Electron, React, Redux, React Router, Webpack, and React Hot Loader for rapid application development (HMR).
  • generator-electron – This boilerplate prepares many features, including cross-platform builds, Silent auto-updates, app, and contextual menu, user-friendly handling of unhandled errors, and many more.
  • descjop – A Leiningen template(Clojure/ClojureScript Project) for Web-based desktop application with Electron (atom-shell). 
  • electron-vue – An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack. 
  • electron-next-skeleton – Build your app with Electorn + Next.js.
  • Photon – The fastest way to build beautiful Electron apps using simple HTML and CSS.

Tools

  • Spectron – An open-source framework for easily writing integration tests for your Electron app.
  • Devtron – Devtron is an open-source tool to help you inspect, monitor, and debug your Electron app. Built on top of the amazing Chrome Developer Tools.

Blog Posts

Electron (formerly known as Atom Shell) is an open-source software framework that allows for the development of desktop GUI applications using web technologies. Electron has revolutionized the way developers write graphical user interface (GUI) applications. It enables them to use web technologies like...

Hot Reloading is a beloved feature of developers. It allows changes in source code to be instantly reflected in the output/browser without restarting the application. Electron does not provide any built-in hot reloading module. However, Electron can still use this...

Leave a Comment

Your email address will not be published. Required fields are marked *


Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close