electron/docs/api/synopsis.md

96 lines
2.5 KiB
Markdown
Raw Normal View History

2014-05-05 06:49:05 +00:00
# Synopsis
2016-04-22 17:30:49 +00:00
> How to use Node.js and Electron APIs.
All of [Node.js's built-in modules](https://nodejs.org/api/) are available in
2015-08-29 05:46:31 +00:00
Electron and third-party node modules also fully supported as well (including
the [native modules](../tutorial/using-native-node-modules.md)).
2014-05-05 06:49:05 +00:00
2015-04-16 03:31:12 +00:00
Electron also provides some extra built-in modules for developing native
2015-09-04 20:44:40 +00:00
desktop applications. Some modules are only available in the main process, some
2015-09-01 22:42:10 +00:00
are only available in the renderer process (web page), and some can be used in
2015-08-29 05:46:31 +00:00
both processes.
2015-11-12 14:24:11 +00:00
The basic rule is: if a module is [GUI][gui] or low-level system related, then
it should be only available in the main process. You need to be familiar with
2018-04-09 20:58:10 +00:00
the concept of [main process vs. renderer process](../tutorial/application-architecture.md#main-and-renderer-processes)
scripts to be able to use those modules.
2014-05-05 06:49:05 +00:00
2015-08-29 05:46:31 +00:00
The main process script is just like a normal Node.js script:
2014-05-05 06:49:05 +00:00
```javascript
const {app, BrowserWindow} = require('electron')
let win = null
2014-05-05 06:49:05 +00:00
app.on('ready', () => {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL('https://github.com')
})
2014-05-05 06:49:05 +00:00
```
2015-11-12 14:24:11 +00:00
The renderer process is no different than a normal web page, except for the
extra ability to use node modules:
2014-05-05 06:49:05 +00:00
```html
<!DOCTYPE html>
<html>
2015-11-12 14:24:11 +00:00
<body>
<script>
const {app} = require('electron').remote
console.log(app.getVersion())
2015-11-12 14:24:11 +00:00
</script>
</body>
2014-05-05 06:49:05 +00:00
</html>
```
2018-04-09 20:58:10 +00:00
To run your app, read [Run your app](../tutorial/first-app.md#running-your-app).
2015-11-12 14:24:11 +00:00
## Destructuring assignment
As of 0.37, you can use
2016-03-06 07:28:39 +00:00
[destructuring assignment][destructuring-assignment] to make it easier to use
built-in modules.
```javascript
const {app, BrowserWindow} = require('electron')
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
```
If you need the entire `electron` module, you can require it and then using
destructuring to access the individual modules from `electron`.
2015-11-12 14:24:11 +00:00
```javascript
const electron = require('electron')
const {app, BrowserWindow} = electron
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
2015-11-12 14:24:11 +00:00
```
This is equivalent to the following code:
```javascript
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadURL('https://github.com')
})
```
2015-11-12 14:24:11 +00:00
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
2016-03-06 07:28:39 +00:00
[destructuring-assignment]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment