原文： Looking back on 2015: six exciting web technologies

2015 年里，有很多与 web 平台相关的创新技术。下面的章节描述了六个我觉得非常赞的技术：

• Electron
• React Native
• Progressive web apps
• Visual studio code
• Rollup
• Web Assembly

这篇博客是“回顾 2014 的 5 项 web 平台技术” 的散漫的续集。

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 标签。

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 值得关注。

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 的一些有趣的测试开始。

Visual Studio Code

Visual Studio Code 是一个介于完备的 IDE 和文本编辑器之间的 JavaScript 代码编辑器。并且它是使用 JavaScript 基于 Electron 编写的。2015，VSC 成为开源项目并增加了扩展(一个通过 plugins 来扩展它的 API)。

Rollup

Rollup 是一个模块打包工具：它将多个 ES6 模块转化为一个独立的打包文件，打包后的模块可以是 ES6、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

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