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

Merge branch 'NKMR6194-master'

Browse source
This commit is contained in:
Cheng Zhao 2015-04-20 19:40:37 +08:00
commit 2814dc316a
1 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,29 +2,29 @@
## Introduction ## Introduction
Generally, atom-shell enables you to create desktop applications with pure Generally, Electron enables you to create desktop applications with pure
JavaScript by providing a runtime with rich native APIs. You could see it as 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 a variant of the io.js runtime which is focused on desktop applications
instead of web servers. instead of web servers.
It doesn't mean atom-shell is a JavaScript binding to GUI libraries. Instead, It doesn't mean Electron is a JavaScript binding to GUI libraries. Instead,
atom-shell uses web pages as its GUI, so you could also see it as a minimal Electron uses web pages as its GUI, so you could also see it as a minimal
Chromium browser, controlled by JavaScript. Chromium browser, controlled by JavaScript.
### The main process ### The main process
In atom-shell 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 runs in the main process can display GUI by __the main process__. The script runs in the main process can display GUI by
creating web pages. creating web pages.
### The renderer process ### The renderer process
Since atom-shell uses Chromium for displaying web pages, Chromium's Since Electron uses Chromium for displaying web pages, Chromium's
multi-processes architecture is also used. Each web page in atom-shell runs in multi-processes architecture is also used. Each web page in Electron runs in
its own process, which is called __the renderer process__. its own process, which is called __the renderer process__.
In normal browsers web pages usually run in a sandboxed environment and are not In normal browsers web pages usually run in a sandboxed environment and are not
allowed access to native resources. In atom-shell users have the power to use allowed access to native resources. In Electron users have the power to use
io.js APIs in web pages and it is therefore possible to interact with low level io.js APIs in web pages and it is therefore possible to interact with low level
operating system features. operating system features.
@ -44,14 +44,13 @@ native GUI resources in web pages is very dangerous and easy to leak resources.
If you want to do GUI operations in web pages, you have to communicate with If you want to do GUI operations in web pages, you have to communicate with
the main process to do it there. the main process to do it there.
In atom-shell, 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 main process and renderer process. And 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 atom-shell app ## Write your first Electron app
Generally, an atom-shell app would be structured like this (see the Generally, an Electron app would be structured like this:
[hello-atom](https://github.com/dougnukem/hello-atom) repo for reference):
```text ```text
your-app/ your-app/
@ -93,7 +92,7 @@ app.on('window-all-closed', function() {
app.quit(); app.quit();
}); });
// This method will be called when atom-shell has done everything // This method will be called when Electron has done everything
// initialization and ready for creating browser windows. // initialization and ready for creating browser windows.
app.on('ready', function() { app.on('ready', function() {
// Create the browser window. // Create the browser window.
@ -123,7 +122,7 @@ Finally the `index.html` is the web page you want to show:
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script> We are using node.js <script>document.write(process.version)</script>
and atom-shell <script>document.write(process.versions['electron'])</script>. and Electron <script>document.write(process.versions['electron'])</script>.
</body> </body>
</html> </html>
``` ```
@ -133,18 +132,18 @@ Finally the `index.html` is the web page you want to show:
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 execute the packaged app. You can also just use the downloaded and then execute the packaged app. You can also just use the downloaded
atom-shell binary to execute your app directly. Electron binary to execute your app directly.
On Windows: On Windows:
```cmd ```cmd
$ .\atom-shell\atom.exe your-app\ $ .\electron\electron.exe your-app\
``` ```
On Linux: On Linux:
```bash ```bash
$ ./atom-shell/atom your-app/ $ ./electron/electron your-app/
``` ```
On OS X: On OS X:
@ -153,5 +152,5 @@ On OS X:
$ ./Electron.app/Contents/MacOS/Atom your-app/ $ ./Electron.app/Contents/MacOS/Atom your-app/
``` ```
`Electron.app` here is part of the atom-shell's release package, you can download `Electron.app` here is part of the Electron's release package, you can download
it from [here](https://github.com/atom/electron/releases). it from [here](https://github.com/atom/electron/releases).