六項使人興奮的 web 技術

1、Electron

Electron (GitHub) 讓你可以用 web 技術構建跨平臺的桌面應用。它有以下特性：

• 自動更新

• 崩潰報告

• Windows 安裝

• 調試和分析

• 原生菜單和通知

Electron 最初是被 GitHub 的做者 Atom 建立，如今已被多個公司使用，包括 Microsoft（見下文的 Visual Studio Code），Slack 和 Docker。

Electron 的架構包括 Node.js runtime 和嵌套的微型 Chromium 瀏覽器。Electron 應用在多個進程中運行：主進程運行的是應用的 package.json 聲明的 main 腳本。爲了顯示一個用戶界面，該腳本能夠打開 窗口。這些腳本的每個都運行在獨立的進程中（一個所謂的 渲染進程 ），就像 web 瀏覽器的 tab 標籤。

2、React Native

使用 React Native ，你能夠經過 React 來構建 iOS 原生應用和 Android 原生應用。Virtual DOM 保持不變，你仍然可使用 JSX 來建立它，但實際的 UI 是用原生的組件構建，例如 iOS 的 UITabBar 以及 Android 的 Drawer。你能夠經過 Flexbox 來佈局這些原生組件。

一方面，這意味着在 web、iOS、Android 這些不一樣的平臺上， UI 層會有些不一樣。另外一方面，若是你有這些原平生臺的經驗，你能夠很大程度地重用你的代碼。

一般，我對嘗試將一個平臺的原生語言移植到另外一個平臺是不看好的。但幾個月前， 一個 iOS 開發者評估 React 後說到：

我可能不再會用 Objective-C 或者 Swift 編寫 iOS 應用了。

若是你考慮到他用 React Native 編程以前，還要學習 JavaScript 和 React，會認爲這是很是了不得的。

另外一個 有趣的引述 ，Andy Matuschak（他「在 UIKit 團隊幫助構建 iOS 4.1–8」）說到：

做爲 UIKit 做者的一員，我很自信的說：React 的 UI 層 model 要比 UIKit 的優秀不少。React Native 值得關注。

3、Progressive web apps

有些方面，native 應用已遇上了 web（如 deep linking, indexing）。 Progressive web apps 並不真的是一項技術，只是現代 web 應用特色的一個術語。這意味着 web 應用在一些方面正在追趕原生應用，甚至有的方面正走在原生應用的前面：

• 漸進加強： 應用運行在儘量多的環境中。它會使用任何可用的服務，若是沒有可用的服務則會優雅降級。

• 響應用戶界面： 應用適應多種輸入方式（觸摸、 語言輸入等）和多種輸出方式（不一樣的屏幕尺寸、震動、音頻、盲文顯示等）。

• 鏈接性、獨立性：應用可在斷網以及間歇性斷網或低帶寬環境下很好地工做。

• 類應用 UI：應用採用原平生臺的 UI 元素，包括快速加載用戶界面（能夠經過 service workers 獲取重要的緩存資源）。

• 持續更新（「時新性」）：service worker API 定義一個進程用來將應用自動更新至新版。

• 安全通訊：應用使用 HTTPS 通訊來提供服務，阻止網絡劫持和攻擊。

• 應用發現：像 W3C 應用 manifest 元數據能使搜索引擎找到 web 應用。

• 推送與互動：推送通知的特性，主動讓用戶瞭解最新動態。

• 可本地安裝：在一些平臺上，你能夠安裝 web 應用使得它看起來像一個本地應用（將 icon 放在主屏，在應用程序切換器單獨列出，chrome 瀏覽器可選）。全部這些應用不用通過本地應用商店。

• 可鏈接性：經過 URL 能夠輕鬆分享應用，不用安裝便可運行。

我這說起 progressive web apps，是由於我喜歡上述全部的技術和技巧。但我不肯定 「progressive web apps」 與簡單的「現代 web 應用」有多大的區別。有一件事我很反對，就是 給 web 應用安裝時的 banner 提示 （這是它們的殺手級功能，畢竟它們不須要這個功能。）

擴展閱讀

• Progressive Web Apps (Google 的網站)
• Andrew Betts 寫的「 ‘Progressive apps’ are a bag of carrots 」。Andrew 對「progressive web apps」做爲一個單獨的技術持批評態度。該博客文章從 Progressive apps 的一些有趣的測試開始。

4、Visual Studio Code

Visual Studio Code 是一個介於完備的 IDE 和文本編輯器之間的 JavaScript 代碼編輯器。而且它是使用 JavaScript 基於 Electron 編寫的。2015，VSC 成爲 開源 項目並增長了 擴展 (一個經過 plugins 來擴展它的 API)。

5、Rollup

Rollup 是一個 模塊打包工具 ：它將多個 ES6 模塊轉化爲一個獨立的 打包文件 ，打包後的模塊能夠是 ES六、CommonJS、ES5…… 中的任一種格式。Rollup 爲 JavaScript 模塊帶來了兩大創新：

• 經過名叫 「tree-shaking」 的技術使打包的結果只包括實際用到的 exports。Three-shaking 的關鍵在於依賴 ES6 模塊的靜態結構。「靜態結構」意味着在編譯時他們是可分解的，而不用執行它們的任何代碼。有了這種死碼刪除是極好的，由於如今咱們能夠根據須要隨意地使模塊或大或小，而不用擔憂打包後的大小。

• 它證實了 ES6 模塊打包後是一種可用的 ES6 模塊格式。

擴展閱讀

• The Rollup Guide
• Tree-shaking with webpack 2 and Babel 6
• The future of bundling JavaScript modules

6、Web Assembly

Web Assembly 是靜態格式語言（源自 asm.js）的一種二進制格式，它可被輸入到（支持它的） JavaScript 引擎來建立快速的可執行文件。這是一種比字節碼要高級一些的語言，所以容易發展它。它運行在和JavaScript相同的語義空間，所以很方便集成它。asm.js 到底有多快？C++ 編譯成 Web Assembly 運行的時間比將 Web Assembly 編譯成原生代碼要快大約 70%。

Web Assembly 最終可能獲得 JavaScript OOP 的支持。到那時，它將真的成爲一個通用的 web 虛擬機。

擴展閱讀

• WebAssembly: a binary format for the web