-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
266 lines (263 loc) · 15.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Essential information about Electron. Plainly.">
<meta name="author" content="Jessica Lord"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@jllord">
<meta name="twitter:title" content="Essential Electron">
<meta name="twitter:description" content="Concise plain-speak about Electron.">
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/1305617/17869520/85f7a4c0-6868-11e6-8152-be3852881347.png">
<title>Essential Electron</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1 id="essential-electron">Essential Electron</h1>
<p>Concise plain-speak about Electron.</p>
<table>
<thead>
<tr>
<th>Background</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#what-is-electron-">What is Electron?</a></td>
</tr>
<tr>
<td><a href="#why-is-this-important-">Why is this important?</a></td>
</tr>
<tr>
<td><a href="#how-even-">How, even?</a></td>
</tr>
<tr>
<td><a href="#what-s-developing-like-">What is developing like?</a></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Development</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#prereqs">Prereqs</a></td>
</tr>
<tr>
<td><a href="#two-processes">Two Processes</a></td>
</tr>
<tr>
<td><a href="#main-process">Main Process</a></td>
</tr>
<tr>
<td><a href="#renderer-process">Renderer Process</a></td>
</tr>
<tr>
<td><a href="#think-of-it-like-this">Think of it like this</a></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Development Cont'd</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#stay-in-touch">Stay in touch</a></td>
</tr>
<tr>
<td><a href="#put-it-all-together">Put it all together</a></td>
</tr>
<tr>
<td><a href="#quick-start">Quick start</a></td>
</tr>
<tr>
<td><a href="#packaging">Packaging</a></td>
</tr>
<tr>
<td><a href="#more-resources">More resources</a></td>
</tr>
</tbody>
</table>
<p>Read this in <a href="index-jp.html">Japanese</a>.</p>
<h2 id="what-is-electron-">What is Electron?</h2>
<p>Electron is a <span class="def">library</span> you can use to build desktop applications with <span class="def">JavaScript, HTML and CSS</span>. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores.</p>
<h3 id="next-why-is-this-important-why-is-this-important-">Next: <a href="#why-is-this-important-">Why is this important?</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>JavaScript, HTML and CSS</strong> Are web languages, meaning they are the building blocks of websites and browsers like Chrome know how to turn this code into the visual graphics you see.</li>
<li><strong>Electron is a library</strong> Electron is code that you can re-use and not have to write yourself. You use it to build your project on top of.</li>
</ul>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/apps">Apps built on Electron</a></li>
<li><a href="http://electron.atom.io/#get-started">Electron API Demos</a> (see what you can do with Electron)</li>
</ul>
<h2 id="why-is-this-important-">Why is this important?</h2>
<p>Typically, desktop applications for each operating system are written in each's <span class="def">native language</span>. That can mean having three teams writing three versions of your app. Electron enables you to write your app once and with web languages.</p>
<h3 id="next-how-even-how-even-">Next: <a href="#how-even-">How, even?</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>native (operating system) language</strong> These are languages that the major operating systems are (mostly) built with: Mac, Objective C; Linux, C; Windows, C++.</li>
</ul>
<h2 id="how-even-">How, even?</h2>
<p>Electron combines <span class="def">Chromium</span> and <span class="def">Node.js</span> with a set of custom <span class="def">APIs</span> for native operating system functions like open file dialogs, notifications, icons and more.</p>
<p><img src="imgs/components.png" alt="Electron components"></p>
<h3 id="next-what-is-developing-like-what-s-developing-like-">Next: <a href="#what-s-developing-like-">What is developing like?</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>API</strong> Application Program Interface describes the set of functions made available for you to use a library with.</li>
<li><strong>Chromium</strong> Created by Google, this is the open source library used by Google's browser Chrome.</li>
<li><strong>Node.js</strong> (or Node) A tool for writing JavaScript on servers, accessing filesystems and networks (your computer is also a server!).</li>
</ul>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="https://nodejs.org">Node.js</a></li>
<li><a href="http://chromium.org">Chromium</a></li>
<li><a href="http://electron.atom.io/blog/2016/08/08/electron-internals-using-node-as-a-library">Electron blog post: Using Node as a Library</a> (deep dive)</li>
<li><a href="http://electron.atom.io/docs/tutorial/electron-versioning/">Electron versioning</a></li>
</ul>
<h2 id="what-s-developing-like-">What's developing like?</h2>
<p>Developing with Electron is like building web pages that you can seamlessly <span class="def">use Node in</span>—or building a Node app in which you can build an interface with HTML and CSS. And you only need to design for <span class="def">one browser</span>, the <span class="def">latest Chrome</span>.</p>
<h3 id="next-prereqs-prereqs-">Next: <a href="#prereqs">Prereqs</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Use Node in</strong> That's not all! In addition to the full Node API everywhere, you can make use of the over 300,000 modules already written and hosted on npm, a package manager for Node.</li>
<li><strong>One browser</strong> Not all browsers are the same and web designers and developers often have to go the extra mile to make one site look the same on each.</li>
<li><strong>Latest Chrome</strong> Use over 90% of ES2015, the latest updates to JavaScript, as well as cool features like CSS Variables.</li>
</ul>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://caniuse.com/#home">Can I Use?</a> (see what each browser supports)</li>
<li><a href="http://blog.chromium.org">Updates to Chrome</a> (Chromium Blog)</li>
<li><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en">CSS Variables</a></li>
</ul>
<h2 id="prereqs">Prereqs</h2>
<p>Since Electron's two components are websites and JavaScript, you'll need experience in both of those before you begin. Check out some tutorials on HTML, CSS and JS and install Node on your computer.</p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Let's be real</strong>, learning to make websites and write Node are not overnight things but hopefully the links below can get you started.</li>
</ul>
<h3 id="next-two-processes-two-processes-">Next: <a href="#two-processes">Two Processes</a></h3>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="https://nodejs.org">Install Node</a> (chose the LTS version)</li>
<li><a href="http://nodeschool.io">NodeSchool Tutorials</a> (try learnyounode)</li>
<li><a href="http://jsforcats.com">JS for Cats</a> (by Max Ogden)</li>
<li><a href="http://learn.shayhowe.com/html-css">Learn to Code HTML & CSS</a> (by Shay Howe)</li>
<li><a href="https://css-tricks.com">CSS Tricks</a> (learn CSS best practices and tips)</li>
<li><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en">Mozilla Developer Network</a> (like a dictionary for websites and JavaScript)</li>
</ul>
<h2 id="two-processes">Two Processes</h2>
<p>Electron has two types of processes: Main and Renderer. There are <span class="def">modules</span> that work on each or in both of the processes. The main process is more behind-the-scenes while the renderer process is each of the windows in your app.</p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Modules</strong> Electron's APIs are grouped together based on what they do. For instance the <code>dialog</code> module has all the APIs for native dialogs like open file, save file and alerts.</li>
</ul>
<h3 id="next-main-process-main-process-">Next: <a href="#main-process">Main Process</a></h3>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="main-process">Main Process</h2>
<p>The main process, commonly a file named <code>main.js</code>, is the entry point to every Electron app. It controls the life of the app, from open to close. It also <span class="def">calls the native elements</span> and creates each new renderer process in the app. The full Node API is built in.</p>
<p><img src="imgs/main.png" alt="main process diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Calls the native elements</strong> Opening dialogs and other native operating system interactions are resource intensive so it's done in the main process, leaving the renderer process uninterrupted.</li>
</ul>
<h3 id="next-renderer-process-renderer-process-">Next: <a href="#renderer-process">Renderer Process</a></h3>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="renderer-process">Renderer Process</h2>
<p>The renderer process is a browser window in your app. Unlike the main process, there can be multiple of these and <span class="def">each is independent</span>. They can also be <span class="def">hidden</span>. Usually one is named <code>index.html</code>. They're like typical HTML files but in Electron you've got the whole Node API available here, too, unlike any web browser.</p>
<p><img src="imgs/renderer.png" alt="renderer process diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Each is independent</strong> every renderer process is a separate process, meaning a crash in one won't affect another.</li>
<li><strong>Hidden</strong> You can set a window to be hidden and use it to just execute code in the background.</li>
</ul>
<h3 id="next-think-of-it-like-this-think-of-it-like-this-">Next: <a href="#think-of-it-like-this">Think of it like this</a></h3>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/docs/api/">Electron APIs List</a></li>
</ul>
<h2 id="think-of-it-like-this">Think of it like this</h2>
<p>In Chrome (or another web browser) each tab and its web page is like a single renderer process in Electron. If you close all of the tabs, Chrome is still there, this is like your main process, and you can open a new window or quit the app.</p>
<p><img src="imgs/like-this.png" alt="Chrome comparison of the two processes"></p>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/docs/tutorial/quick-start/#differences-between-main-process-and-renderer-process">Differences between Main and Renderer Process</a></li>
</ul>
<h3 id="next-stay-in-touch-stay-in-touch-">Next: <a href="#stay-in-touch">Stay in touch</a></h3>
<h2 id="stay-in-touch">Stay in touch</h2>
<p>The main and renderer processes need to be able to communicate since they're both responsible for different tasks. For that there's <span class="def">IPC</span>, interprocess communication. Use it to pass messages between main and renderer processes.</p>
<p><img src="imgs/ipc.png" alt="IPC diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>IPC</strong> The main process and renderer process each have an IPC module to use.</li>
</ul>
<h3 id="next-put-it-all-together-put-it-all-together-">Next: <a href="#put-it-all-together">Put it all together</a></h3>
<h2 id="put-it-all-together">Put it all together</h2>
<p>Electron apps are like Node apps and use a <span class="def"><code>package.json</code> file</span>. It's there that you define which file is your main process and thus where Electron should start your app. Then that main process can create renderer processes and you'll use IPC to pass messages between the two.</p>
<p><img src="imgs/app-files.png" alt="Electron app components diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong><code>package.json</code> file</strong> This is a common file in Node apps which contains metadata about the project and a list of dependencies.</li>
</ul>
<h3 id="next-quick-start-quick-start-">Next: <a href="#quick-start">Quick start</a></h3>
<h2 id="quick-start">Quick start</h2>
<p>The Electron Quick Start repository is a bare-bones Electron app with the <code>package.json</code>, <code>main.js</code> and <code>index.html</code> you've learned about here—a great place to get started! Also, check out the boilerplates for templates with your framework of choice.</p>
<h3 id="next-packaging-packaging-">Next: <a href="#packaging">Packaging</a></h3>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="https://github.com/electron/electron-quick-start">Electron Quick Start</a></li>
<li><a href="http://electron.atom.io/community#boilerplates">Awesome Electron: Boilerplates</a></li>
</ul>
<h2 id="packaging">Packaging</h2>
<p>Once your app is built, you can package it with the <span class="def">command-line tool</span> <code>electron-packager</code> for Mac, Windows or Linux. Add scripts for this to your <code>package.json</code>. Check out resources below for getting your app in the Mac and Windows app stores.</p>
<h3 id="next-more-resources-more-resources-">Next: <a href="#more-resources">More resources</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>command-line tool</strong> This is a program that you interact with by passing commands to it in your terminal.</li>
</ul>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://github.com/electron-userland/electron-packager">electron-packager</a></li>
<li><a href="https://github.com/electron/electron-api-demos/blob/master/package.json#L15-L18">Electron API Demos packaging scripts</a></li>
<li><a href="http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/">Mac App Store Electron Guide</a></li>
<li><a href="http://electron.atom.io/docs/tutorial/windows-store-guide/">Windows App Store Electron Guide</a></li>
</ul>
<h2 id="more-resources">More resources</h2>
<p>The concepts here will get you pretty far, but there is of course more so here are other resources.</p>
<h3 id="resources-">Resources:</h3>
<ul>
<li><a href="http://electron.atom.io/docs/">Full Electron docs</a></li>
<li><a href="http://electron.atom.io/community/">Awesome Electron: tools, videos, components, meetups</a></li>
<li><a href="http://electron.atom.io/spectron/">Spectron</a> (Electron testing library)</li>
<li><a href="http://electron.atom.io/devtron/">Devtron</a> (Inspect your Electron app)</li>
</ul>
<footer>
<small>✌️ Made because of computers by <a href="https://www.twitter.com/jllord" target="_blank">@jllord</a>. <a href="https://github.com/jlord/essential-electron" target="_blank"> Open source on GitHub </a>.</small>
</footer>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31423721-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>