electron學習系列一

 https://electronjs.org/

1: About Electron
--------------------------------------------------------------------------
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Electron是由Github開發,使用Html,CSS,Javascript構件跨平臺桌面應用的一個開源庫.Electron經過將Chromium和Node.js合併到同一個環境中,並將其打包爲Linux,Mac,Windows系統下的應用來實現這一目的.

--1:Electon is platform
--2:Using html+css+javascript
--3:Build cross-platform desktop apps


History
--GitHub
--Atom

Apps bulid on Electon
https://electronjs.org/apps
a)Visual Studio Code
--Help->Toggle Developer Tools
b)Skype
c)Atom
d)WhatsApp
...

2:How does electron work
--------------------------------------------------------------------------

Electron platform=Chromium+Node

1:Chromium Core
--provide html+css+javascript runtime environment
2:Node.JS
--functon exection, eg.read and write local file

--Built-in Browser
Base on Chromium Core, best support H5+Css3

 

3:Electron Quick start (Hello world)
--------------------------------------------------------------------------
package.json
main.js

nmp init -y package.json
nmp install electron

install the devDependencies in package.json

nmp run start

electron module is Built-in by Electron.
using electon.app to contrl application
using electron.BrowseWindow

\node_modules\electron\dist\electron.exe

4:Election Processes
--------------------------------------------------------------------------
Main process
renderer process
IPC

5:Electron API
--------------------------------------------------------------------------
https://github.com/electron/electron-api-demos/releases
app
BrowserWiondow
{with,height,transparent,backgroundColor,frame,drag...}
ipcMain
ipcRenderer
remote(在渲染進程中使用主進程模塊。)

6:Election Debug

7:Learning Web--------------------------------------------------------------------------https://electronjs.org/