Electron 的本质
qiumw
8年前
<p>本文将简明扼要地讲解 Electron。</p> <table> <thead> <tr> <th>Background</th> <th>Development</th> <th>Development Con't</th> </tr> </thead> <tbody> <tr> <td>What is Electron</td> <td>Prereqs</td> <td>Stay in touch</td> </tr> <tr> <td>Why is this important</td> <td>Two Processes</td> <td>Put it all Together</td> </tr> <tr> <td>How,even?</td> <td>Main Process</td> <td>Packaging</td> </tr> <tr> <td>What is developing like?</td> <td>Renderer Process</td> <td>More resources</td> </tr> <tr> <td>/</td> <td>Think of it like this</td> <td>/</td> </tr> </tbody> </table> <h2><strong>Electron 是什么？</strong></h2> <p>Electron 是一个能让你通过 <strong>JavaScript、HTML 和 CSS</strong> 构建桌面应用的 <strong>库</strong> 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行，当然它们也能上架到 Mac 和 Windows 的 app stores。</p> <p>Next：为什么它如此重要？</p> <p>定义：</p> <ul> <li> <p>JavaScript、HTML 和 CSS都是 Web 语言，这就意味着它们都是组成网站的一部分，浏览器（如 Chrome）能将这些代码转为可视化图像。</p> </li> <li> <p>Electron 是一个库：Electron 对底层代码进行抽象和封装，让开发者能在此之上构建项目。</p> </li> </ul> <p>相关资源：</p> <h2><strong>为什么它如此重要？</strong></h2> <p>通常来说，桌面应用都需要用每个操作系统对应的原生语言进行开发。这意味着需要拥有3个团队为这个应用编写3个相应的版本。Electron 则允许你通过 web 语言编写一次即可。</p> <p>Next：它由什么组成？</p> <p>定义：</p> <ul> <li> <p>原生（操作系统）语言，用于开发主流操作系统的应用的原生语言如下（大多数情况下）：Mac 对应 Objective C、Linux 对应 C、Windows 对应 C++。</p> </li> </ul> <h2><strong>它由什么组成？</strong></h2> <p>Electron 结合了 <strong>Chromium</strong> 、 <strong>Node.js</strong> 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等）。</p> <p><img src="https://simg.open-open.com/show/a4b3738d573bc91eb0b9085922cdc150.png"></p> <p>Next：开发体验如何？</p> <p>定义：</p> <ul> <li> <p>API：应用程序接口描述了开发者对于此库可调用功能。</p> </li> <li> <p>Chromium：Google 创造的一个开源库，并用于 Google 的浏览器 Chrome。</p> </li> <li> <p>Node.js（Node）：一个用于在服务器运行 JavaScript 的工具，它拥有文件系统和网络的权限（你的电脑也可以是一台服务器！）。</p> </li> </ul> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4958867323246690255" rel="nofollow,noindex">Node.js</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725476292343021" rel="nofollow,noindex">Chromium</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725476381485475" rel="nofollow,noindex">Electron blog post: Using Node as a Library</a> （深入了解）</p> </li> <li> <p><a href="/misc/goto?guid=4959725476467456442" rel="nofollow,noindex">Electron versioning</a></p> </li> </ul> <h2><strong>开发体验如何？</strong></h2> <p>基于 Electron 的开发，就好像开发一个网页一样，而且能够无缝地 <strong>使用 Node</strong> 。或者说：就好像构建一个 Node app，并通过 HTML 和 CSS 构建界面。另外，你只需为一个浏览器（ <strong>最新的 Chrome</strong> ）进行设计。</p> <p>Next：具备条件（开发方面）</p> <p>定义：</p> <ul> <li> <p>使用内置的 Node：这还不是全部！除了 Node API，你还可以使用托管在 npm 上，超过 300,000 个的模块。</p> </li> <li> <p>一个浏览器：并非所有浏览器都提供同样的样式，因此 web 设计师和开发者时常不得不花费更多的精力去让一个网站在不同的浏览器上看起来一致。</p> </li> <li> <p>最新的Chrome：可使用超过 90% 的 ES2015 特性和其它很酷的特性（如 CSS 变量）。</p> </li> </ul> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725476542001342" rel="nofollow,noindex">Can I Use?</a> （查看每个浏览器对特性的支持程度）</p> </li> <li> <p><a href="/misc/goto?guid=4959725476628467620" rel="nofollow,noindex">Updates to Chrome</a> （Chromium 博客）</p> </li> <li> <p><a href="/misc/goto?guid=4959725476709430182" rel="nofollow,noindex">CSS Variables</a></p> </li> </ul> <h2><strong>具备条件（开发方面）</strong></h2> <p>因为 Electron 应用的两个组成部分是网站（译者注：UI）和 JavaScript（译者注：功能），所以在基于 Electron 开发前，你需要拥有这两方面的经验。你可以搜索 HTML、CSS 和 JS 的教程，并在你的电脑上安装 Node。</p> <p>定义：</p> <ul> <li> <p>让编程桌面程序成为现实：学会如何搭建一个网站和编写 Node 应用并不是一朝一夕的事情，但你可以将下面的资源链接作为你的入门教程。</p> </li> </ul> <p>Next：两个进程</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4958867323246690255" rel="nofollow,noindex">Install Node</a> （选择长期支持版本（LTS））</p> </li> <li> <p><a href="/misc/goto?guid=4958848389388831159" rel="nofollow,noindex">NodeSchool Tutorials</a> （试一试 learnyounode）</p> </li> <li> <p><a href="/misc/goto?guid=4958823446082244181" rel="nofollow,noindex">JS for Cats</a> (by Max Ogden)</p> </li> <li> <p><a href="/misc/goto?guid=4959725476853412738" rel="nofollow,noindex">Learn to Code HTML & CSS</a> (by Shay Howe)</p> </li> <li> <p><a href="/misc/goto?guid=4959633168860543590" rel="nofollow,noindex">CSS Tricks</a> （学习 CSS 的最佳实践和技巧）</p> </li> <li> <p><a href="/misc/goto?guid=4959725476968096662" rel="nofollow,noindex">Mozilla Developer Network</a> （好比一本关于网站和 JavaScript 的字典）</p> </li> </ul> <h2><strong>两个进程</strong></h2> <p>Electron 有两个种进程：主进程和渲染进程。有些模块会工作在其中一个进程上，而有些会在两个进程之上。主进程更多地充当幕后角色，而渲染进程则是应用的每个窗口（window）。</p> <p>定义：</p> <ul> <li> <p>模块：Electron 的 API 是根据它们的功能进行分组。例如： dialog 模块拥有所有原生 dialog 的 API，如打开文件、保存文件和弹窗。</p> </li> </ul> <p>Next：主进程</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477042107872" rel="nofollow,noindex">Electron APIs List</a></p> </li> </ul> <h2><strong>主进程</strong></h2> <p>主进程，通常是一个命名为 main.js 的文件，该文件是每个 Electron 应用的入口。它控制了应用的生命周期（从打开到关闭）。它能 <strong>调用原生元素</strong> 和创建新的（多个）渲染进程，而且整个 Node API 是内置其中的。</p> <p><img src="https://simg.open-open.com/show/7d64aeb1a1edc70ffa3c12216bbcfbff.png"></p> <p>定义：</p> <ul> <li> <p>调用原生元素：打开 diglog 和其它操作系统交互均是资源密集型操作（译者注：出于安全考虑，渲染进程是不能直接调用本地资源的），因此都需要在主进程完成（不涉及渲染进程）。</p> </li> </ul> <p>Next：渲染进程</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477042107872" rel="nofollow,noindex">Electron APIs List</a></p> </li> </ul> <h2><strong>渲染进程</strong></h2> <p>渲染进程是应用的一个浏览器窗口。与主进程不同，它能存在多个（译者注：一个 Electron 应用只能有一个主进程）并且是 <strong>相互独立的</strong> 。它们也能 <strong>隐藏的</strong> 。它通常被命名为 index.html 。它们就像典型的 HTML 文件，但在 Electron 中，它们能获取完整的 Node API 特性。因此，这也是它与其它浏览器不同的地方。</p> <p><img src="https://simg.open-open.com/show/17bcf86b771d5d4741b095b0d1cc642f.png"></p> <p>定义：</p> <ul> <li> <p>相互独立：每个渲染进程都是独立的，这意味着就算某个崩溃了，而不会影响其余的渲染进程。</p> </li> <li> <p>隐藏的：你可以设置一个窗口是隐藏的，然后让它只在背后执行代码。</p> </li> </ul> <p>Next：把它想象成这样</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477042107872" rel="nofollow,noindex">Electron APIs List</a></p> </li> </ul> <h2><strong>把它们想象成这样</strong></h2> <p>在 Chrome（或其它浏览器）中的每个标签页（tab） 和其内的页面，就好比 Electron 中的一个单独渲染进程。如果你关闭所有标签页，Chrome 依然存在，这好比 Electron 的主进程，而且你能打开一个新的窗口或关闭这个应用。</p> <p><img src="https://simg.open-open.com/show/f02a72d7a77212b0709d7ccf7893b0f6.png"></p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477145563028" rel="nofollow,noindex">Differences between Main and Renderer Process</a></p> </li> </ul> <p>Next: 相互通讯</p> <h2><strong>相互通讯</strong></h2> <p>尽管主进程和渲染进程都有各自的任务，但它们之间也有需要协同完成的任务。因此它们之间需要通讯。 <strong>IPC</strong> 就为此而生，它提供了进程间的通讯。利用它能在主进程与渲染进程之间传递信息。</p> <p><img src="https://simg.open-open.com/show/66f7a004e4b3bba77b5160baff2d4cae.png"></p> <p>定义：</p> <ul> <li> <p>IPC：主进程和渲染进程都有一个 IPC 模块。</p> </li> </ul> <p>Next：汇成一句话</p> <h2><strong>汇成一句话</strong></h2> <p>Electron 应用就像 Node 应用，它也使用一个 package.json <strong>文件</strong> 。该文件能定义哪个文件作为主进程，并因此让 Electron 知道从何启动你的应用。然后主进程能创建渲染进程，并能使用 IPC 让两者间进行消息传递。</p> <p><img src="https://simg.open-open.com/show/e1c49ce6386c571237a70be4ab064bfb.png"></p> <p>定义：</p> <ul> <li> <p>package.json <strong>文件</strong> ： 这是一个常见的 Node 应用文件，它包含了关于项目的元数据和一系列依赖。</p> </li> </ul> <p>Next：快速开始</p> <h2><strong>快速开始</strong></h2> <p>Electron Quick Start 代码库是一个 Electron 应用的基本骨架，拥有 package.json 、 main.js 和 index.html 。该项目是你了解和学习 Electron 的好开头！当然，查看下面相关资源中的 Boilerplates，可在里面选择适用你的模板。</p> <p>Next: 打包</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477319588806" rel="nofollow,noindex">Electron Quick Start</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725477403012818" rel="nofollow,noindex">Awesome Electron: Boilerplates</a></p> </li> </ul> <h2><strong>打包</strong></h2> <p>一旦你的应用构建完成，你可以通过 <strong>命令行工具</strong> electron-packager 对其打包成适用于 Mac、Windows 和 Linux 的应用。当然，你可以在 package.json 添加该命令行。查看下面的相关资源，学习如何将应用发布到 Mac 和 Windows 的应用商城。</p> <p>Next：更多资源</p> <p>定义：</p> <ul> <li> <p>命令行工具：这是一个在终端（terminal）中通过输入命令进行交互的程序。</p> </li> </ul> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477486564540" rel="nofollow,noindex">electron-packager</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725477567829112" rel="nofollow,noindex">Electron API Demos packaging scripts</a></p> </li> <li> <p><a href="/misc/goto?guid=4959674951992611864" rel="nofollow,noindex">Mac App Store Electron Guide</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725477685958919" rel="nofollow,noindex">Windows App Store Electron Guide</a></p> </li> </ul> <h2><strong>更多资源</strong></h2> <p>这里提供更多的相关资料，以便你更深入全面地学习 Electron。</p> <p>Resources:</p> <p>相关资源：</p> <ul> <li> <p><a href="/misc/goto?guid=4959725477755412587" rel="nofollow,noindex">Full Electron docs</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725477843580102" rel="nofollow,noindex">Awesome Electron: tools, videos, components, meetups</a></p> </li> <li> <p><a href="/misc/goto?guid=4959725477930277716" rel="nofollow,noindex">Spectron</a> (Electron testing library)</p> </li> <li> <p><a href="/misc/goto?guid=4959725478001445521" rel="nofollow,noindex">Devtron</a> (Inspect your Electron app)</p> </li> </ul> <p> </p> <p> </p> <p>来自：https://segmentfault.com/a/1190000007503495</p> <p> </p>