Learning Electron- Build Desktop Apps using JS+HTML+CSS

Learning Electron: Build Desktop Apps using JS+HTML+CSS, available at $44.99, has an average rating of 3.7, with 75 lectures, based on 25 reviews, and has 4160 subscribers.

You will learn about Build Cross Platform Desktop Applications for Mac, Windows and Linux Understand the near-entire Electron API in detail. Mastering the Basics fo Electron Framework Develop both traditional single-window apps and status tray-based apps Get an Understanding about how Electron works Debug Electron Application Testing Electron Application This course is ideal for individuals who are Anyone who wants to create compelling native desktop applications It is particularly useful for Anyone who wants to create compelling native desktop applications.

Enroll now: Learning Electron: Build Desktop Apps using JS+HTML+CSS

Summary

Title: Learning Electron: Build Desktop Apps using JS+HTML+CSS

Price: $44.99

Average Rating: 3.7

Number of Lectures: 75

Number of Published Lectures: 75

Number of Curriculum Items: 75

Number of Published Curriculum Objects: 75

Original Price: $174.99

Quality Status: approved

Status: Live

What You Will Learn

Build Cross Platform Desktop Applications for Mac, Windows and Linux

Understand the near-entire Electron API in detail.

Mastering the Basics fo Electron Framework

Develop both traditional single-window apps and status tray-based apps

Get an Understanding about how Electron works

Debug Electron Application

Testing Electron Application

Who Should Attend

Anyone who wants to create compelling native desktop applications

Target Audiences

Anyone who wants to create compelling native desktop applications

Electron helps us develop cross-platform applications by using existing web technologies. You don’t need specific skills, for most cases, to develop apps with Electron. If you are a web developer and are interested in developing an app with Electron, then make sure you check out tutorials that will follow this article in this series.

If you want your application to be available for all the platforms we talked about, you need to deploy your app using different technologies. This is very manual and time-consuming. Now, if we talk about Electron, it is obvious that this is a JavaScript-based framework. Because all the platforms support web technologies, Electron helps in developing cross-platform apps easier. Popular applications that use Electron include Visual Studio Code, Slack, and Atom Editor.

Electron Features

Security

You don’t need to think much when migrating your existing application to Electron as the application we are creating is a desktop application and data stays locally in the system. Because of this, you can ensure data security. In case you need to store data in the cloud, check whether your cloud network has enough security functions beforehand to avoid any unwanted surprises.

Low-Level Accessibility

Before starting out, you also have to check whether all the functionalities you are providing for your desktop application are also available in Electron. In my experience, Electron provides enough control to have the extended interactive features in your application, such as Keyboard Shortcuts. It also provides low-level accessibility to the hardware and operations system components.

Hardware Accessibility

Developers can get complete access to the all hardware level access APIs expose over the JavaScript/Plugin. There is no need to compromise for the feature if you want to migrate to Electron.

Performance

Electron thrives in this aspect. If proper care is taken while developing (load only what you need), Electron?can show some great gains in the terms of performance when compared to native applications. Electron saves a lot of time and provides more options to play with or develop by having a single code base for all the major platforms. These are the major problems when we deal with the native development of applications, which are all effectively solved by Electron.

However, a lot of people say that Electron?is very memory hungry. I agree with this statement, but only if you develop the applications without proper care.

Code and App Management

As a Product Owner, you don’t need to maintain different teams for each platform and you will be relieved from the hassle of re-explaining your requirements with different teams. It will also reduce the auditing work to make sure the product has the same functionality across platforms.

As a developer, you need not worry about different codebases. If you encounter a bug on any platform, you can fix it at the code base. The bug will never show up on other platforms. However, you should still keep an eye on the OS level functionalities.

Reusability

Because we are using a single code base, it means we can use this for both web applications and desktop applications. We are, in a way, also reusing the base code across different platforms since we “code once, distribute everywhere.”

Production

The more known frameworks we use, the more support we get. This, in turn, gives us more open source libraries we can reuse and the decreased time to production but with more features.

Deployment/Build

This is one of the interesting aspects of Electron. There is an electron-packager module available that helps us bundle the whole code base into the respective packages. Although people debate that Electron takes a lot of memory, as I said, Electron needs a little care during development to avoid this.

UI/UX

With web technologies, you are open to multiple technologies that provide great User Interface (UI) and User Experience (UX) to all your users with great comfort. Also, you can be sure that you are providing the same experience to all your users across different platforms.

Cost and Time

You will save a lot of development time and money because,?for the tech stack we use, there are a lot of developers who can do it for less and achieve good results. You can save a lot of time using the single code base and any developer can work on anything.

History of Electron

When we talk about any technology we need to talk a little about the history behind it. Let’s briefly look at the history of Electron.

Electron was founded by Cheng Zhao, during the development of Atom a cross-platform text editor released in?July?2013. It was made open source, developed, and supported by GitHub using C++, JavaScript, Objective C, and Python. It was intended to make cross-platform development easier for Atom creation.

Course Curriculum

Chapter 1: Getting Started with Electron

Lecture 1: Hello world in Electron

Lecture 2: Loading Html file in Electron MainBrowserWindow

Lecture 3: Generate file path to display web page

Lecture 4: Load Content on BrowserWindow after rendering web page

Lecture 5: BrowserWindow Properties

Lecture 6: BrowserWindow title and alwaysOnTop property

Lecture 7: Create Frameless window to Remove title and toolbar

Lecture 8: Create Transparent Window

Chapter 2: Custom Menu in Electron

Lecture 1: Create Custom Menu

Lecture 2: Define Keyboard Shortcuts and MenuItem Roles

Lecture 3: Add Styling to Fix background text color warning

Lecture 4: Types of MeuItem

Lecture 5: Build MacOS Application Menu

Lecture 6: Reload app on file changes using electron-reload

Lecture 7: Create a View Menu Item

Lecture 8: Create a window Menu Item

Lecture 9: Create a Custom Menu

Chapter 3: Inter Process Communication(IPC)

Lecture 1: Communicate synchronously between main and renderer process

Lecture 2: Communicate Asynchronously between main and renderer process

Chapter 4: Working with Dialog Module

Lecture 1: Open File Dialog to select files and directories

Lecture 2: Add additional options for FileDialog

Lecture 3: Open the File in NodeJs using fs.open()

Lecture 4: Reading Writing and deleting the File

Lecture 5: Watch for changes on file

Lecture 6: Creating, Reading and Deleting Directory

Lecture 7: Choose a File from PC using File Save Dialog

Lecture 8: MessageBox Dialog

Lecture 9: Adding custom Icons in showMessageBox Dialog

Chapter 5: WebContents, Capture Screen, Print Pdf

Lecture 1: Understanding webContents API

Lecture 2: Capture the snapshot of the BrowserWindow and save as a PNG File

Lecture 3: Prints windows web page as PDF

Chapter 6: Dock Icon on MacOs

Lecture 1: Update Image associated with Dock Icon

Lecture 2: Make Dock Icon Bounce

Lecture 3: Change Dock Icon and set badge

Lecture 4: Make System Alert sound using shell module

Lecture 5: Open Files in Finder and External Browser

Chapter 7: Detect Online and Offline Status

Lecture 1: Detect online and offline inside rendererjs

Lecture 2: Pros and Cons of Renderer-Only Solutions

Lecture 3: Detect online or offline status using electron-online

Chapter 8: Todo App with Electron, HTML, CSS and Javascript

Lecture 1: Getting setup with Main Window

Lecture 2: Adding Bootstrap in Electron Application

Lecture 3: File Structure for Todo App

Lecture 4: Setup DataStore

Lecture 5: Iterate all Todos and display them in MainBrowserWindow

Lecture 6: Create new Menu Item and open a new Browser Window

Lecture 7: Save new Record in DataStore

Lecture 8: Delete Record from DataStore

Chapter 9: Debugging Electron Application

Lecture 1: Create Menu Item to debug Electron Application

Lecture 2: Debug Electron Main process in Vs Code

Lecture 3: Debug Electron app using Devtron

Chapter 10: Testing Electron Application with Spectron, Mocha, and Chai

Lecture 1: Testing setup with Spectron, Mocha, and Chai

Lecture 2: Testing Spectron BrowserWindow Api

Lecture 3: Testing BrowserWindow size

Lecture 4: Testing inter process communication with main process and renderer process

Chapter 11: Bonus: Vuejs Basics

Lecture 1: Getting started with Vue

Lecture 2: Create template as the markup for the Vue Instance

Lecture 3: Bind properties of vue instance using data

Lecture 4: Create method to interacts with Vue app

Lecture 5: Use computed properties to cache calculations

Lecture 6: Execute Javascript expressions in Template Bindings

Lecture 7: Conditional rendering using v-show directive

Lecture 8: Conditional rendering using v-if, v-else, and v-else-if directive

Lecture 9: Mapping an Array to Elements with v-for

Lecture 10: Array Change detection

Lecture 11: Using Vue.set and splice method to replace an Item from Array

Lecture 12: Using v-for to iterate properties of an Object

Lecture 13: Computed properties in vue

Lecture 14: The data object, methods, or computed properties

Lecture 15: Watch a property of data object through watcher

Lecture 16: Watching properties of Objects in the Data object

Lecture 17: Handling click event using v-on:click

Lecture 18: Passing Arguments to Event Handler

Lecture 19: Event Modifiers and Key Modifiers

Lecture 20: Form Input Bindings

Chapter 12: Learning Path to become a full-stack developer

Lecture 1: Learning Path to Become a FullStack Developer

Instructors

Haider Malik
Fullstack Developer/Entrepreneur/Author

Rating Distribution

1 stars: 2 votes

2 stars: 3 votes

3 stars: 6 votes

4 stars: 5 votes

5 stars: 9 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!