Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 8 hours on-demand video
  • 3 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Electron Framework

Electron for Desktop Apps: The Complete Developer's Guide

Use the Electron Framework to build compelling cross platform desktop applications with the latest web dev technologies
Rating: 4.6 out of 54.6 (2,733 ratings)
16,428 students
Created by Stephen Grider
Last updated 1/2021
English
English [Auto], Portuguese [Auto], 
30-Day Money-Back Guarantee

What you'll learn

  • 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
Curated for the Udemy for Business collection

Course content

6 sections • 77 lectures • 7h 55m total length

  • Preview01:41
  • Why Does Electron Exist?
    Preview03:19
  • How Does Electron Work?
    Preview09:17
  • History of Electron
    05:25

  • App Overview
    04:50
  • Getting Started
    04:57
  • Starting and Stopping Electron
    10:16
  • Loading HTML Docs
    09:43
  • Selecting Videos
    08:32
  • Sample Video - Download Me!
    00:12
  • Reading File Details
    10:19
  • Introduction to FFMPEG
    06:33
  • OSX FFMPEG Installation
    02:59
  • Windows FFMPEG Setup
    00:05
  • Require Statements in the Browser
    12:00
  • IPC Communication
    09:13
  • Video Duration with FFProbe
    06:12
  • Receiving IPC Events
    10:18
  • Wrapup
    02:55

  • App Overview
    03:37
  • App Boilerplate
    01:23
  • Creating the MainWindow
    06:08
  • Constructing Menu Bars
    07:54
  • Menu Bar Gotchas
    07:32
  • On Menu Click Functionality
    06:08
  • Cross Platform Hotkeys
    06:46
  • Creating Separate Windows
    05:21
  • Another Electron Gotcha
    04:53
  • Adding Polish to Electron
    04:49
  • Restoring Developer Tools
    14:08
  • IPC Between Windows
    06:31
  • Garbage Collection with Electron
    08:46
  • Role Shortcuts
    07:33
  • Your Turn - Clearing Lists
    02:29
  • Solution and Wrapup
    06:28

  • App Boilerplate
    05:13
  • What's This React Code?
    06:07
  • BrowserWindow vs Tray
    04:55
  • BrowserWindow Config
    08:12
  • Creating Tray Icons
    08:13
  • Toggling BrowserWindow Visibility
    04:29
  • Detecting Visibility
    02:54
  • The Positioning Bounds System
    08:58
  • Setting Position with Bounds
    07:25
  • Positioning of Windows
    02:59
  • Object Oriented Programming with Electron
    04:53
  • Basics of ES6 Classes
    09:14
  • Subclassing
    06:29
  • The TimerTray Subclass
    08:59
  • Finishing TimerTray Refactor
    08:47
  • Setting Tooltips
    02:46
  • More on Garbage Collection
    03:38
  • Building Context Menus
    06:16
  • Controlling Window Focus
    04:19
  • Hiding Dock Icons
    01:36
  • MainWindow Class
    11:36
  • IPC Between React and Electron
    04:01
  • Displaying Text on the Tray
    06:23
  • Background Throttling
    03:24

  • App Overview
    05:16
  • App Challenges
    07:02
  • BrowserWindow Creation
    05:32
  • Starting up Electron with Webpack
    04:42
  • Overview of React and Redux
    10:26
  • Receiving a List of Videos
    07:21
  • Video Metadata
    05:00
  • Handling Async Bulk Operations with Promises
    07:22
  • Fetching Metadata in Promises
    08:24
  • Refactoring for Multiple Videos
    07:38
  • Wrapup on Metadata
    07:00
  • Output Paths
    12:05
  • Batch Video Conversion
    07:38
  • Handling Conversion Completion
    05:31
  • Detecting Conversion Progress
    06:11
  • Opening Folders with Shell
    03:44
  • Wrapup
    03:35

  • Bonus!
    00:14

Requirements

  • Basic understanding of Javascript

Description

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:

  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 FFMPEG CLI tool.  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.

Who this course is for:

  • Anyone who wants to create compelling native desktop applications

Featured review

Jacob Senteney
Jacob Senteney
11 courses
4 reviews
Rating: 4.5 out of 5a year ago
Great course, though a little bit outdated at this point. I wouldn't mind seeing an update on what's changed in electron since this course was made. I also would have liked to see some sort of explanation on how to bundle an electron app.

Instructor

Stephen Grider
Engineering Architect
Stephen Grider
  • 4.7 Instructor Rating
  • 277,788 Reviews
  • 731,761 Students
  • 29 Courses

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.