1
00:00:00,000 --> 00:00:05,177
[MUSIC]

2
00:00:05,177 --> 00:00:10,140
Hello world, Andrey here, lifelong learned
developer and teacher here at tree house.

3
00:00:10,140 --> 00:00:12,900
Welcome to this workshop on electron.

4
00:00:12,900 --> 00:00:14,880
First off, what is Electron?

5
00:00:14,880 --> 00:00:19,778
Electron is a way to build desktop
applications on Windows, Mac OS and

6
00:00:19,778 --> 00:00:26,230
Linux with HTML, CSS and JavaScript,
Electron is known as a framework because

7
00:00:26,230 --> 00:00:31,550
it comes bundled with a number of tools
that help you build your application.

8
00:00:31,550 --> 00:00:36,115
It has the latest version of the open
source branch of Google Chrome called

9
00:00:36,115 --> 00:00:40,905
Chromium this means you have
access to dome APIs for your UI.

10
00:00:40,905 --> 00:00:43,997
It also has the latest version of Node.js,
so

11
00:00:43,997 --> 00:00:49,117
you can use acme script 2015
syntax without transpiring.

12
00:00:49,117 --> 00:00:52,557
Electron has a Node.js
one time bundled with it.

13
00:00:52,557 --> 00:00:56,927
You can use all the file and
network higher modules built into node,

14
00:00:56,927 --> 00:01:01,217
or even use third party npm
modules that you know and love.

15
00:01:01,217 --> 00:01:05,947
Finally, there are a few specific
JavaScript APIs that electron has built in

16
00:01:05,947 --> 00:01:08,087
for gluing your application together and

17
00:01:08,087 --> 00:01:14,290
creating native UI components like
tray icons, notifications and dialogs.

18
00:01:14,290 --> 00:01:17,390
There are a number of benefits for
using electron.

19
00:01:17,390 --> 00:01:22,760
You only need one thing,
not three working on a single code base.

20
00:01:22,760 --> 00:01:26,380
If you can build a website,
you can build a desktop app.

21
00:01:26,380 --> 00:01:31,660
You don't need to know C++,
C#, Swift or Objective C.

22
00:01:31,660 --> 00:01:34,720
You're only developing for
one version of chromium.

23
00:01:34,720 --> 00:01:37,840
You know how painful is developing for
multiple browsers.

24
00:01:37,840 --> 00:01:42,540
Well, the same goes for different
operating systems but it's even worse.

25
00:01:42,540 --> 00:01:45,450
There's no standard for native UIs.

26
00:01:45,450 --> 00:01:50,560
Having one browser allows you to focus on
your application and not battle between

27
00:01:50,560 --> 00:01:56,050
the differences in implementations the
user interfaces on different platforms.

28
00:01:56,050 --> 00:02:00,300
One you may not need to know any
native code operating system specific

29
00:02:00,300 --> 00:02:05,065
native components like menus,
tray icons, notifications, and

30
00:02:05,065 --> 00:02:10,460
dialogs can be triggered via
an electron API, let's take a look

31
00:02:10,460 --> 00:02:14,820
at some companies who use electron and the
types of applications they're building.

32
00:02:16,150 --> 00:02:20,880
GitHub, the company behind electron use
it in their cross platform code editor,

33
00:02:20,880 --> 00:02:26,630
Atom If you use the chat service slack on
the desktop that's an electron app too.

34
00:02:27,990 --> 00:02:31,920
Microsoft uses electron to create
their cross platform text editor

35
00:02:31,920 --> 00:02:33,740
Visual Studio code.

36
00:02:33,740 --> 00:02:37,940
It has the IntelliSense you'd
expect from a Microsoft IDE.

37
00:02:37,940 --> 00:02:42,380
The web browser Brave from
JavaScript inventor Brendan Eich is

38
00:02:42,380 --> 00:02:43,690
an electron application.

39
00:02:43,690 --> 00:02:48,480
WordPress.com, allows users to
install desktop publications

40
00:02:48,480 --> 00:02:52,110
to manage their blogs
hosted on the service.

41
00:02:52,110 --> 00:02:57,660
Project management platform base camp uses
electron for that desktop applications

42
00:02:57,660 --> 00:03:01,860
In the next video we're going to create
an electron application ourselves.