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 process. 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 aspects of working wit Electron, from installing 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’s 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 it 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 image. You will learn about basics of how to create an electron application, customize the toolbar area of the application, use dialog windows with electron, use AngularJS in an Electron application.
  9. Creating screenshots of your app or the screen – In this tutorial, you’ll learn how to use desktopCapture to capture a screenshot from different areas in the Desktop.

IDEs and Code Editors

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

  • Visual Studio Code – Electron Highlighter Syntax is the extension you need. It is a dark UI and syntax theme for VS Code. 
  • Atom – Support for Electron app development can be easily added by adding an electron package.

Boilerplates / Themes

  • electron-boilerplate – This project contains only bare minimum of tooling and dependencies to provide you with 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 integrations 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.

Our Tutorials

  • Most Popular Electron Apps
    Electron (formerly known as Atom Shell) is an open-source software framework which allows for the development of desktop GUI applications using web technologies. With the statement "If you can build a website, you...
  • How to set up hot reload in Electron
    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...

Leave a Comment

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

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