Skip to content

Commit

Permalink
Lots more
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlord
jlord committed Aug 19, 2016
1 parent fadfcfe commit db7a3f0
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 20 deletions.
55 changes: 46 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,31 @@ <h1 id="essential-electron">Essential Electron</h1>
<tr>
<th>Background</th>
<th>Development</th>
<th>Development Cont&#39;d</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#what-is-electron-">What is Electron?</a></td>
<td><a href="#how-do-i-start-">How do I start?</a></td>
<td><a href="#stay-in-touch">Stay in touch</a></td>
</tr>
<tr>
<td><a href="#why-is-this-important-">Why is this important?</a></td>
<td><a href="#electron-s-two-processes">Electron&#39;s Two Processes</a></td>
<td><a href="#stay-in-touch">Put it all together</a></td>
</tr>
<tr>
<td><a href="#how-even-">How, even?</a></td>
<td><a href="#how-do-i-start-">Main Process</a></td>
<td><a href="#main-process">Main Process</a></td>
</tr>
<tr>
<td><a href="#what-is-developing-like-">What is developing like?</a></td>
<td><a href="#how-do-i-start-">Renderer Process</a></td>
<td><a href="#renderer-process">Renderer Process</a></td>
</tr>
<tr>
<td><a href="#what-is-developing-like-">WHAT GOES HERE</a></td>
<td><a href="#how-do-i-start-">Put it together</a></td>
<td></td>
<td><a href="#think-of-it-like-this">Think of it like this</a></td>
</tr>
</tbody>
</table>
Expand All @@ -66,7 +69,7 @@ <h3 id="definitions-">Definitions:</h3>
</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/electron-components.png" alt="Electron components"></p>
<p><img src="https://cloud.githubusercontent.com/assets/1305617/17800655/d501ab14-6599-11e6-89d2-e2f3f702cc71.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>
Expand All @@ -82,10 +85,11 @@ <h3 id="resources-">Resources:</h3>
<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>
</ul>
<h2 id="what-s-developing-like-">What&#39;s developing like?</h2>
<p>Developing with Electron is like building web pages that you can seamlessly use Node in—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>
<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-how-do-i-start-how-do-i-start-">Next: <a href="#how-do-i-start-">How do I start?</a></h3>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Use Node in</strong> That&#39;s not all! In additional 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>
Expand All @@ -96,7 +100,7 @@ <h3 id="resources-">Resources:</h3>
<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="how-do-i-start-">How do I start?</h2>
<p>Since Electron&#39;s two components are websites and Node you&#39;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>
<p>Since Electron&#39;s two components are websites and JavaScript, you&#39;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&#39;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>
Expand All @@ -123,16 +127,49 @@ <h3 id="resources-">Resources:</h3>
<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 is the entry point to every Electron app. It controls the life of the app, from start up to quit. It also does the heavy lifting <span class="def">executing native elements</span> and creating each new browser window, aka renderer process, that users will interact with.</p>
<p>The main process 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 browser window, aka renderer process, in the app. The full Node API is built in.</p>
<p><img src="https://cloud.githubusercontent.com/assets/1305617/17799473/ce14ba80-658f-11e6-9909-684dcbaa5d25.png" alt="main process diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Executing native elements</strong> Opening dialogs and other native operating system interactions is resource intensive so it&#39;s done in the main process, leaving the renderer process uninterrupted.</li>
<li><strong>Calls the native elements</strong> Opening dialogs and other native operating system interactions is resource intensive so it&#39;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 <span class="def">each browser window</span> that you create in your app. Each of these displays the web pages you create—but you&#39;ve got the whole Node API available here, too, unlike any other web browser.</p>
<p><img src="https://cloud.githubusercontent.com/assets/1305617/17799695/831d0314-6591-11e6-8ecc-897502da234f.png" alt="renderer process diagram"></p>
<h3 id="definitions-">Definitions:</h3>
<ul>
<li><strong>Each browser window</strong> is a separate renderer process, meaning a crash in one won&#39;t affect another.</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="https://cloud.githubusercontent.com/assets/1305617/17799606/d2d65f50-6590-11e6-9e57-59650efd2dcf.png" alt="Chrome comparison of the two processes"></p>
<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>
<h2 id="stay-in-touch">Stay in touch</h2>
<p>The main and renderer processes need to be able to communicate since they&#39;re both responsible for different tasks. For that there&#39;s <span class="def">IPC</span>: interprocess communication. Use it to pass messages between main and renderer processes.</p>
<p><img src="https://cloud.githubusercontent.com/assets/1305617/17799777/506c76b0-6592-11e6-836e-3e2a18aba087.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&#39;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&#39;ll use IPC to pass messages between the two.</p>
<p><img src="https://cloud.githubusercontent.com/assets/1305617/17800702/36c44c6c-659a-11e6-9185-434b6d3f3b1f.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-you-know-everything-about-electron-now-">Next: You know everything about Electron now!</h3>
<footer>
<small>✌️ Made because of computers by <a href="twitter.com/jllord" target="_blank">@jllord</a>. <a href="https://github.com/jlord/essential-electron" target="_blank"> Open source on GitHub </a>.</small>
</footer>
Expand Down
69 changes: 58 additions & 11 deletions index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

Concise plain-speak about Electron.

| Background | Development |
| Background | Development | Development Cont'd |
| --- | --- |
| [What is Electron?](#what-is-electron-) | [How do I start?](#how-do-i-start-) |
| [Why is this important?](#why-is-this-important-) | [Electron's Two Processes](#electron-s-two-processes) |
| [How, even?](#how-even-) | [Main Process](#how-do-i-start-) |
| [What is developing like?](#what-is-developing-like-) | [Renderer Process](#how-do-i-start-) |
| [WHAT GOES HERE](#what-is-developing-like-) | [Put it together](#how-do-i-start-) |
| [What is Electron?](#what-is-electron-) | [How do I start?](#how-do-i-start-) | [Stay in touch](#stay-in-touch) |
| [Why is this important?](#why-is-this-important-) | [Electron's Two Processes](#electron-s-two-processes) | [Put it all together](#stay-in-touch) |
| [How, even?](#how-even-) | [Main Process](#main-process) |
| [What is developing like?](#what-is-developing-like-) | [Renderer Process](#renderer-process) |
| | [Think of it like this](#think-of-it-like-this) |

## What is Electron?

Expand Down Expand Up @@ -36,7 +36,7 @@ Typically, desktop applications for each operating system are written in each's

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.

![Electron components](imgs/electron-components.png)
![Electron components](https://cloud.githubusercontent.com/assets/1305617/17800655/d501ab14-6599-11e6-89d2-e2f3f702cc71.png)

### Next: [What is developing like?](#what-s-developing-like-)

Expand All @@ -53,11 +53,12 @@ Electron combines <span class="def">Chromium</span> and <span class="def">Node.j

## What's developing like?

Developing with Electron is like building web pages that you can seamlessly use Node in—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>.
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>.

### Next: [How do I start?](#how-do-i-start-)

### Definitions:
- **Use Node in** That's not all! In additional 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.
- **One browser** 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.
- **Latest Chrome** Use over 90% of ES2015, the latest updates to JavaScript, as well as cool features like CSS Variables.

Expand All @@ -68,7 +69,7 @@ Developing with Electron is like building web pages that you can seamlessly use

## How do I start?

Since Electron's two components are websites and Node 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.
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.

### Definitions:
- **Let's be real**, learning to make websites and write Node are not overnight things but hopefully the links below can get you started.
Expand Down Expand Up @@ -97,12 +98,58 @@ Electron has two processes: Main and Renderer. There are <span class="def">modul

## Main Process

The main process is the entry point to every Electron app. It controls the life of the app, from start up to quit. It also does the heavy lifting <span class="def">executing native elements</span> and creating each new browser window, aka renderer process, that users will interact with.
The main process 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 browser window, aka renderer process, in the app. The full Node API is built in.

![main process diagram](https://cloud.githubusercontent.com/assets/1305617/17799473/ce14ba80-658f-11e6-9909-684dcbaa5d25.png)

### Definitions:
- **Executing native elements** Opening dialogs and other native operating system interactions is resource intensive so it's done in the main process, leaving the renderer process uninterrupted.
- **Calls the native elements** Opening dialogs and other native operating system interactions is resource intensive so it's done in the main process, leaving the renderer process uninterrupted.

### Next: [Renderer Process](#renderer-process)

### Resources:
- [Electron APIs List](http://electron.atom.io/docs/api/)

## Renderer Process

The renderer process is <span class="def">each browser window</span> that you create in your app. Each of these displays the web pages you create—but you've got the whole Node API available here, too, unlike any other web browser.

![renderer process diagram](https://cloud.githubusercontent.com/assets/1305617/17799695/831d0314-6591-11e6-8ecc-897502da234f.png)

### Definitions:
- **Each browser window** is a separate renderer process, meaning a crash in one won't affect another.

### Next: [Think of it like this](#think-of-it-like-this)

### Resources:
- [Electron APIs List](http://electron.atom.io/docs/api/)

## Think of it like this

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.

![Chrome comparison of the two processes](https://cloud.githubusercontent.com/assets/1305617/17799606/d2d65f50-6590-11e6-9e57-59650efd2dcf.png)

### Next: [Think of it like this](#think-of-it-like-this)

## Stay in touch

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.

![IPC diagram](https://cloud.githubusercontent.com/assets/1305617/17799777/506c76b0-6592-11e6-836e-3e2a18aba087.png)

### Definitions:
- **IPC** The main process and renderer process each have an IPC module to use.

### Next: [Put it all together](#put-it-all-together)

## Put it all together

Electron apps are like Node apps and use a <span class="def">`package.json` 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.

![Electron app components diagram](https://cloud.githubusercontent.com/assets/1305617/17800702/36c44c6c-659a-11e6-9185-434b6d3f3b1f.png)

### Definitions:
- **`package.json` file** This is a common file in Node apps which contains metadata about the project and a list of dependencies.

### Next: You know everything about Electron now!

0 comments on commit db7a3f0

Please sign in to comment.