Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll

Build a Cross-Platform Desktop Application with Electron

Well done!

You have completed Build a Cross-Platform Desktop Application with Electron!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

What is Electron?

3:02 with Andrew Chalkley

Learn what Electron is and the benefits of using Electron over traditional desktop app development. Also, who is using Electron?

[MUSIC] 0:00
Hello world, Andrey here, lifelong learned developer and teacher here at tree house. 0:05
Welcome to this workshop on electron. 0:10
First off, what is Electron? 0:12
Electron is a way to build desktop applications on Windows, Mac OS and 0:14
Linux with HTML, CSS and JavaScript, Electron is known as a framework because 0:19
it comes bundled with a number of tools that help you build your application. 0:26
It has the latest version of the open source branch of Google Chrome called 0:31
Chromium this means you have access to dome APIs for your UI. 0:36
It also has the latest version of Node.js, so 0:40
you can use acme script 2015 syntax without transpiring. 0:43
Electron has a Node.js one time bundled with it. 0:49
You can use all the file and network higher modules built into node, 0:52
or even use third party npm modules that you know and love. 0:56
Finally, there are a few specific JavaScript APIs that electron has built in 1:01
for gluing your application together and 1:05
creating native UI components like tray icons, notifications and dialogs. 1:08
There are a number of benefits for using electron. 1:14
You only need one thing, not three working on a single code base. 1:17
If you can build a website, you can build a desktop app. 1:22
You don't need to know C++, C#, Swift or Objective C. 1:26
You're only developing for one version of chromium. 1:31
You know how painful is developing for multiple browsers. 1:34
Well, the same goes for different operating systems but it's even worse. 1:37
There's no standard for native UIs. 1:42
Having one browser allows you to focus on your application and not battle between 1:45
the differences in implementations the user interfaces on different platforms. 1:50
One you may not need to know any native code operating system specific 1:56
native components like menus, tray icons, notifications, and 2:00
dialogs can be triggered via an electron API, let's take a look 2:05
at some companies who use electron and the types of applications they're building. 2:10
GitHub, the company behind electron use it in their cross platform code editor, 2:16
Atom If you use the chat service slack on the desktop that's an electron app too. 2:20
Microsoft uses electron to create their cross platform text editor 2:27
Visual Studio code. 2:31
It has the IntelliSense you'd expect from a Microsoft IDE. 2:33
The web browser Brave from JavaScript inventor Brendan Eich is 2:37
an electron application. 2:42
WordPress.com, allows users to install desktop publications 2:43
to manage their blogs hosted on the service. 2:48
Project management platform base camp uses electron for that desktop applications 2:52
In the next video we're going to create an electron application ourselves. 2:57