electron 单独写

Electron (formerly known as Atom Shell[4]) is an open-source framework created by Cheng Zhao, and now developed by GitHub.[5] It allows for the development of desktop GUI applications using front and back end components originally developed for web applications: Node.js runtime for the backend and Chromium for the frontend.

简介

  • 三块: package.json (metadata), main.js (code) and index.html (graphical user interface).
  • package.json包含内容:
    • “name”, the application name
    • “version”, the application version string
    • “main”, the name of the main script file of the application
  • package.json是一个npm文件.
  • npm是js package manager

进一步

发现node.js是基础

历史

http://cheng.guru/blog/2016/05/13/from-node-webkit-to-electron-1-0.html

node-webkit

  • https://github.com/nwjs/nw.js/tree/webkitgtk
  • js
var nwebkit = require('nwebkit')
nwebkit.init({'url' : 'index.html'}, function () {
  nwebkit.context.runScript('')
})
  • html
<html><body>
<p id="output"></p>
<script>
require('fs').readdir('.', function (err, files) {
  var result = ''
  files.forEach(function (filename) { result += filename + '<br/>' } )
  document.getElementById('output').innerHTML = result
});
</script>
</body></html>

CEF

replace WebKit with the Chromium Embedded Framework, You can find the code at the cef branch of node-webkit. In order to make async Node.js functions to work, there was a patch to replace the Chromium’s message loop with libuv, the IO library used by Node.js

content shell

which is a minimal browser implementation inside Chromium project. I got the minimal browser working with Node.js integrated, I then published a new release for it, e.g. node-webkit v0.2.1.

在node-webkit中这个方案被采纳了.

framework

  • First I added a packaging system for node-webkit, the idea was stolen from the game engine LÖVE framework. It is compressing your app into ZIP archive and appending it to node-webkit’s executable file, and when the app is started node-webkit extracts the app from its executable file and then loads the app.

  • adding fields in the package.jsonto specify window’s attributions, adding a toolbar to the window, adding extensions to DOM elements, removing browser’s security model, extending DOM elements to allow interacting with native filesystem
  • One of the most difficult and interesting challenge was to support Node.js native modules, I patched Chromium to expose symbols of V8 and OpenSSL, patched Node.js to fix symbols conflicting between NSS and OpenSSL, provided custom node.lib for building native code on Windows, and figured out how to build native modules for node-webkit.
  • After publishing node-webkit v0.2.5, things had been mostly stable.

API

  • The final solution I took in node-webkit was to wrap the GUI modules with IPC messages, so every time users interactive with GUI in renderer process, messages will be sent to the browser process and the actual work will be done there.

atom-shell

  • Technically Electron was rewritten from node-webkit v0.3.6, the last version published by me before I stopped developing node-webkit, which had been a completely different project from what node-webkit originally was.
  • First, node-webkit’s architecture was not suitable for multi-windows apps,
  • There were some major differences between atom-shell and node-webkit. atom-shell allows running JavaScript in the main process, which is critical for serious apps that need to manage app’s lifetime themselves.
  • Also atom-shell separates the building of Chromium into online servers, so developers do not have to build the whole Chromium on the local machine. This makes the development much easier and faster, and allows developers with slow machines to contribute to atom-shell.
  • And finally, I improved the way of integrating Node.js into Chromium, so we no longer needed to patch lots of places of Chromium, and got rid of all crashes caused by Node.js integration.

差异

三点:

  1. app窗口
    1. nw.js在浏览器窗口中打开app窗口,
    2. electron 直接建立一个浏览器窗口作为app窗口, 类似node的运行时直接构建在V8上面, 因此, electron的api更为底层, 以致于测试浏览器使用了phantomjs
  2. 编译, electron直接使用了libchromiumcontent
  3. 整合
    1. nw.js使用的是给chromium打patch的方法.
    2. electron使用了平台的消息环, 在node_bindings中实现.
  4. 多文档
    1. nw.js 发明了一套多文档处理.
    2. electron使用了node的multi-context.

安装

npm install --verbose to see the download progress
cnpm install electron -g #安装electron的命令行工具

参考

  • 凡事先看wiki: https://en.wikipedia.org/wiki/Electron_(software_framework)
  • youtube上面有cheng zhao的视频
  • 作者的13篇blog(其中一篇是日文), 1-2h(加上查相关资料)就可以看完: http://cheng.guru
  • 官网: https://github.com/electron/electron
  • 官网: https://electronjs.org
  • Chromium Embedded Framework
  • nw.js: https://github.com/nwjs/nw.js
  • nw.js: https://nwjs.io
  • content-module: https://www.chromium.org/developers/content-module
  • 细节参考
    • nw.js: https://github.com/nwjs/nw.js/tree/webkitgtk
    • http://cheng.guru/blog/2016/05/13/from-node-webkit-to-electron-1-0.html
    • cheng zhao的最后的版本: https://github.com/nwjs/nw.js/commits/v0.3.6
  • 实现参考
    • https://www.brave.com