GitHub 如何基於 Node.js 和 Chromium 開發 Atom？

時間 2019-12-02

標籤 github 如何 node.js node chromium atom 欄目 Git 简体版

原文原文鏈接

看到回答裏, 多數都沒有回答到點子上, 還有些給了很是主觀的意見而沒有給出實際結論和分析過程.

題主的問題有四個:

1. Github 如何基於 Node.js 和 Chromium 開發 Atom?

Atom 是基於 Atom-Shell (atom/atom-shell · GitHub) 開發的, atom-shell 是一個將 Chromium 和 Node.js (在最近的版本中已經替換成了 io.js 了) 整合在一塊兒的 shell 框架. 那麼他是如何整合 node.js 和 chromium 的呢? Atom-Shell 在瀏覽器的底層和渲染層分別加入了 node.js 的事件循環, 由此在瀏覽器內核中驅動了 node.js. 之因此將渲染層和內核層的事件循環區分, 是爲了 CEF3 的渲染架構而這麼設計的, 而爲了可以讓渲染層之間, 以及渲染層和內核層之間通信, 採用 ipc 進行封裝, 具體的 ipc 實現我沒深刻去查看源代碼, 應該是直接走了 Chromium 的 IPC 接口.
相似的 Shell 技術還有 nw.js 和 bracket-shell. 可是這些 shell 技術都有差別, 具體的差別能夠閱讀這幾篇文檔:

atom-shell/atom-shell-vs-node-webkit.md at master · atom/atom-shell · GitHub
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
https://speakerdeck.com/zcbenz/node-webkit-app-runtime-based-on-chromium-and-node-dot-js

Github 的 Atom 就是在 Atom-Shell 的基礎上, 經過 coffee-script 寫頁面端的表現, 經過 node.js/io.js 的整合處理 io 層的需求. 而後經過 atom-shell 整合操做系統中一些 native 窗口的能力.

2. 有過來人能分享學習經驗?

學習經驗倒也談不上, 我基本上是閱讀了一遍 atom-shell 官方的文檔, 重點學習了一下如何使用 ipc 進行窗口間, 內核層之間的通信方式以及頁面編程相關的知識. 這個過程當中, 我以爲有幾個地方能夠系統學習:

1. 通信模型的創建:

爲了更好的進行 ipc 通信, 咱們須要一些有效的經驗模型來總結通信的方法, 爲此, 我找了兩個通信模型的文檔進行學習:

Getting Started with 'nanomsg'
http://zguide.zeromq.org/page:all

經過對 nanomsg, zero-mq 中提出的幾種通信方式的總結, 咱們漸漸地設計出符合咱們需求的消息通信編碼規範, 和通信類型.

2. CSS 排版, DOM 頁面渲染知識:

爲了可以讓我寫的 GUI 高效的在頁面中運轉, 我須要掌握更多的關於瀏覽器如何渲染 DOM, 如何解析 CSS 等瀏覽器渲染內核的知識, 爲此我閱讀了如下文檔:

How Browsers Work: Behind the scenes of modern web browsers (這是一篇基礎入門的好文章, 他讓我在短短1個禮拜內, 經過本身的編碼實踐和擴展閱讀理解了瀏覽器的大概的工做原理)
Getting Started With the WebKit Layout Code (這也是一篇很是好的文章, 他經過解析 Webkit 的底層 layout 代碼, 讓你明白整個瀏覽器是如何進行 css 排版工做的)
A Visual Method for Understanding WebKit Layout (這篇文章繼承上一篇, 經過實踐進一步理解 layout 的技術內容)
Rendering: repaint, reflow/relayout, restyle / Stoyan's phpied.com (這篇文章也是講關於 reflow 的底層細節)
Understanding the CSS Specifications (而後由於 css 的文檔自己太晦澀, 我一個初入門 web 前端編程的人一開始沒能讀懂, 因此我就先找到了這篇進行學習)
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (在那以後, 我進行了一些實踐, 差很少以爲能夠掌握了, 就通讀了一遍這篇文檔, 並經過少許編碼, 完成大部分 css2 的排版計算過程, 打通了我心中對於排版的諸多疑問)

這以後, 我又擴展閱讀了如下一些 css 草案:javascript

CSS Animations CSS3 Animation 草案
CSS Transitions CSS3 Transition 草案，transition和animaiton貌似有不少重合點，有待深究
Web Animations 1.0 Web Animation 草案
CSS Flexible Box Layout Module Level 1 CSS3 Flexbox 草案
CSS Grid Layout Module Level 1 CSS3 Grid Layout 草案
CSS Transforms Module Level 1 CSS3 Transform 草案，Transform 和 position 仍是有不一樣之處，兩個屬性並無過分冗餘
CSS Shapes Module Level 1 CSS3 Float Shape 草案，圖文混排方面，屬於進階需求

而後經過上面的幾輪實踐, 我又回過頭來學習瞭如下幾篇關於排版的知識點:php

Introduction to Layout in Mozilla 這是 Mozilla Gecko 引擎的 Layout 技術細節
David Baron's CSS Playground Mozilla 的開發者的Blog，裏頭有很是多技術詳解
David's Inline Box Model 這是上述開發者裏的一片關於 Inline Box 的詳解
The WebKit Open Source Project 這是 WebKit 中關於其技術細節的相關文檔。
CSS animations and transitions performance: looking inside the browser

大概前先後後花了約 4 個月時間, 完成了整個 web 渲染和排版的基礎知識.

3. Node.js/io.js 學習

Node.js 的學習我是在項目中持續進行的, 這期間因爲項目進度比較緊張, 我並無很好的作好各類學習筆記, 因此很差意思, 沒有特別多能夠分享的經驗.

3. 還有經過這種方式開發移動應用呢?

有一些 Hybrid 的應用經過類似的方法構建, 比較出名的有:

css

這方面我接觸的很少, 因此沒有太多的經驗能夠分享.

4. 基於 Node 開發類桌面應用有什麼建議?

我以爲仍是要從項目自己的需求出發點考慮, 若是你是一個 javascript 依賴較多的項目, 或者一個偏頁面應用的項目, 那麼基於 Node/Chromium 構建的桌面 APP 將給你帶來很是好的基礎結構, 讓你專一在開發自己.html

*********************************************************************************************************************************************************前端

題主沒必要把眼光侷限在 ATOM，對於通常的應用程序，我更推薦 XDK 使用的框架 nodw-webkit，也就是如今的 NW.js，這個框架作起來很是順手。

我不推薦 ATOM 所用的 atom-shell，緣由在於它比較難上手，特別是引入了 ipc 通信機制。若是你是作一些相似 CS 架構的應用，那麼 ipc 是你的得力助手。若是你只是作一些普通的桌面應用，ipc 會逼着你把簡單的任務複雜化，違反了 KISS 原則。並且 ipc 有不少坑，會成爲你開發中最浪費時間的部分。

下文統一介紹一下這個領域現成的技術框架和成功案例：

html5

atom-shell

atom 基於 atom-shell 開發而來，atom-shell 基於 node.js(io.js) 和 Chromium(CEF2) 開發而來。
atom-shell 表明案例可參考 Fireball 總設計師回答的這個帖子：還要多少年, 前端開發才能像客戶端開發那樣輕鬆？ - Johnny Wu 的回答

java

NW.js

NW.js 由 node-webkit 改名而來，技術底層和 atom-shell 是同樣的，比 atom-shell 還容易上手，用的人最多。node-webkit 是爲了支撐 Intel 自家的 XDK 而作的，誰會想到這樣的 IDE 神器居然是用 JavaScript 寫的？但也正是因爲這點，nw 以前的更新停滯了一段時間，因而被咱們無情拋棄了，這個項目最近彷佛從新活躍了起來。

看完上面的兩個框架和對應的案例，我想題主心中會有答案。此外相似的框架還有比較小衆的 brackets-shell 和 heX，分別支撐 brackets 和有道詞典的開發。

下面是吐槽時刻：

node

nodejs + chromium ≈ sb

爲何這麼說，先說≠的部分，若是你要在linux花30分鐘寫出一個界面酷炫功能簡單的小工具，nodejs+chromium（也就是node-webkit）是很好的選擇，在windows上是vb，要界面酷炫的話 http://vb.net/c# + wpf，mac也請退坑，默認的就夠好了。

誰都知道WPF和VB很好用，可是要跨平臺怎麼辦？想要跨平臺的話，用 node+web 再好不過了。

linux