六项使人兴奋的 web 技术

时间 2019-11-12

标签使人兴奋 web 技术栏目 HTML 繁體版

原文原文链接

1、Electron

Electron (GitHub) 让你可以用 web 技术构建跨平台的桌面应用。它有以下特性：html

自动更新react
崩溃报告webpack
Windows 安装git
调试和分析github
原生菜单和通知web

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

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 来布局这些原生组件。json

一方面，这意味着在 web、iOS、Android 这些不一样的平台上， UI 层会有些不一样。另外一方面，若是你有这些原平生台的经验，你能够很大程度地重用你的代码。react-native

一般，我对尝试将一个平台的原生语言移植到另外一个平台是不看好的。但几个月前，一个 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 模块格式。

扩展阅读

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