mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

Standardize quick-start

Browse source
This commit is contained in:
Jessica Lord 2015-08-31 19:18:46 -07:00
parent 52916f70ed
commit 6a2bd80a9a
1 changed files with 31 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

56
docs/tutorial/quick-start.md
View file

@ -1,20 +1,21 @@
# Quick start # Quick Start
## Introduction Electron enables you to create desktop applications with pure JavaScript by
providing a runtime with rich native (operating system) APIs. You could see it
as a variant of the io.js runtime that is focused on desktop applications
instead of web servers.
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native APIs. You could see it as a variant of the io.js runtime which is focused on desktop applications instead of web servers. This doesn't mean Electron is a JavaScript binding to graphical user interface
(GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also
see it as a minimal Chromium browser, controlled by JavaScript.
This doesn't mean Electron is a JavaScript binding to GUI libraries. Instead, ### Main Process
Electron uses web pages as its GUI, so you could also see it as a minimal
Chromium browser, controlled by JavaScript.
### Main process
In Electron, the process that runs `package.json`'s `main` script is called In Electron, the process that runs `package.json`'s `main` script is called
__the main process__. The script that runs in the main process can display a GUI by __the main process__. The script that runs in the main process can display a GUI
creating web pages. by creating web pages.
### Renderer process ### Renderer Process
Since Electron uses Chromium for displaying web pages, Chromium's Since Electron uses Chromium for displaying web pages, Chromium's
multi-process architecture is also used. Each web page in Electron runs in multi-process architecture is also used. Each web page in Electron runs in
@ -24,28 +25,30 @@ In normal browsers, web pages usually run in a sandboxed environment and are not
allowed access to native resources. Electron users, however, have the power to use allowed access to native resources. Electron users, however, have the power to use
io.js APIs in web pages allowing lower level operating system interactions. io.js APIs in web pages allowing lower level operating system interactions.
### Differences between main process and renderer process ### Differences Between Main Process and Renderer Process
The main process creates web pages by creating `BrowserWindow` instances. Each `BrowserWindow` instance runs the web page in its own renderer process. When a `BrowserWindow` instance is destroyed, the corresponding renderer process The main process creates web pages by creating `BrowserWindow` instances. Each
`BrowserWindow` instance runs the web page in its own renderer process. When a
`BrowserWindow` instance is destroyed, the corresponding renderer process
is also terminated. is also terminated.
The main process manages all web pages and their corresponding renderer The main process manages all web pages and their corresponding renderer
processes. Each renderer process is isolated and only cares processes. Each renderer process is isolated and only cares
about the web page running in it. about the web page running in it.
In web pages, it is not allowed to call native GUI related APIs because managing In web pages, calling native GUI related APIs is not allowed because managing
native GUI resources in web pages is very dangerous and it is easy to leak resources. native GUI resources in web pages is very dangerous and it is easy to leak
If you want to perform GUI operations in a web page, the renderer process of the web resources. If you want to perform GUI operations in a web page, the renderer
page must communicate with the main process to request the main process perform those process of the web page must communicate with the main process to request that
operations. the main process perform those operations.
In Electron, we have provided the [ipc](../api/ipc-renderer.md) module for In Electron, we have provided the [ipc](../api/ipc-renderer.md) module for
communication between main process and renderer process. And there is also a communication between the main process and renderer process. There is also a
[remote](../api/remote.md) module for RPC style communication. [remote](../api/remote.md) module for RPC style communication.
## Write your first Electron app ## Write your First Electron App
Generally, an Electron app would be structured like this: Generally, an Electron app is structured like this:
```text ```text
your-app/ your-app/
@ -56,7 +59,7 @@ your-app/
The format of `package.json` is exactly the same as that of Node's modules, and The format of `package.json` is exactly the same as that of Node's modules, and
the script specified by the `main` field is the startup script of your app, the script specified by the `main` field is the startup script of your app,
which will run on the main process. An example of your `package.json` might look which will run the main process. An example of your `package.json` might look
like this: like this:
```json ```json
@ -81,7 +84,7 @@ var BrowserWindow = require('browser-window'); // Module to create native brows
require('crash-reporter').start(); require('crash-reporter').start();
// Keep a global reference of the window object, if you don't, the window will // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed. // be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null; var mainWindow = null;
// Quit when all windows are closed. // Quit when all windows are closed.
@ -102,7 +105,7 @@ app.on('ready', function() {
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Open the devtools. // Open the DevTools.
mainWindow.openDevTools(); mainWindow.openDevTools();
// Emitted when the window is closed. // Emitted when the window is closed.
@ -138,6 +141,7 @@ you'll probably want to try running your app locally to test it and make sure it
working as expected. working as expected.
### electron-prebuilt ### electron-prebuilt
If you've installed `electron-prebuilt` globally with `npm`, then you need only If you've installed `electron-prebuilt` globally with `npm`, then you need only
run the following in your app's source directory: run the following in your app's source directory:
@ -152,6 +156,7 @@ If you've installed it locally, then run:
``` ```
### Manually Downloaded Electron Binary ### Manually Downloaded Electron Binary
If you downloaded Electron manually, you can also just use the included If you downloaded Electron manually, you can also just use the included
binary to execute your app directly. binary to execute your app directly.
@ -177,6 +182,7 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/
it from [here](https://github.com/atom/electron/releases). it from [here](https://github.com/atom/electron/releases).
### Run as a distribution ### Run as a distribution
After you're done writing your app, you can create a distribution by After you're done writing your app, you can create a distribution by
following the [Application distribution](./application-distribution.md) guide following the [Application Distribution](./application-distribution.md) guide
and then executing the packaged app. and then executing the packaged app.