diff --git a/index.html b/index.html index 5526b84..80bfb96 100644 --- a/index.html +++ b/index.html @@ -20,28 +20,31 @@

Essential Electron

Background Development +Development Cont'd What is Electron? How do I start? +Stay in touch Why is this important? Electron's Two Processes +Put it all together How, even? -Main Process +Main Process What is developing like? -Renderer Process +Renderer Process -WHAT GOES HERE -Put it together + +Think of it like this @@ -66,7 +69,7 @@

Definitions:

How, even?

Electron combines Chromium and Node.js with a set of custom APIs for native operating system functions like open file dialogs, notifications, icons and more.

-

Electron components

+

Electron components

Next: What is developing like?

Definitions:

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 one browser, the latest Chrome.

+

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 one browser, the latest Chrome.

Next: How do I start?

Definitions:

@@ -96,7 +100,7 @@

Resources:

  • CSS Variables

    • 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:

    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 executing native elements 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 calls the native elements and creates each new browser window, aka renderer process, in the app. The full Node API is built in.

    +

    main process diagram

    Definitions:

    Next: Renderer Process

    Resources:

    +

    Renderer Process

    +

    The renderer process is each browser window 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

    +

    Definitions:

    + +

    Next: Think of it like this

    +

    Resources:

    + +

    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

    +

    Next: 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 IPC: interprocess communication. Use it to pass messages between main and renderer processes.

    +

    IPC diagram

    +

    Definitions:

    + +

    Next: Put it all together

    +

    Put it all together

    +

    Electron apps are like Node apps and use a package.json file. 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

    +

    Definitions:

    + +

    Next: You know everything about Electron now!

    diff --git a/index.md b/index.md index a3f4a3e..ed6e885 100644 --- a/index.md +++ b/index.md @@ -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? @@ -36,7 +36,7 @@ Typically, desktop applications for each operating system are written in each's Electron combines Chromium and Node.js with a set of custom APIs 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-) @@ -53,11 +53,12 @@ Electron combines Chromium and 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 one browser, the latest Chrome. +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 one browser, the latest Chrome. ### 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. @@ -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. @@ -97,12 +98,58 @@ Electron has two processes: Main and Renderer. There are 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 executing native elements 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 calls the native elements 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 each browser window 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 IPC: 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 `package.json` file. 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!