根据 JavaScript 框架的优点和主要特点对许多 JavaScript 框架进行细分。

大约十年前，JavaScript 社区开始见证一场 JavaScript 框架的激战。在本文中，我将介绍其中最著名的一些框架。值得注意的是，这些都是开源的 JavaScript 项目，这意味着你可以在 开源许可证 下自由地使用它们，甚至为它们的源代码和社区做出贡献。

不过，在开始之前，了解一些 JavaScript 开发者谈论框架时常用的术语，将对后续的内容大有裨益。

我们已经清楚了常用的术语，下面我们来探索一下开源的 JavaScript 框架有哪些。

为了说明情况，下面是每个框架的 NPM 包下载量的公开数据，感谢 npm trends。

ReactJS

ReactJS 是由 Facebook 研发的，它虽然在 Angular 之后发布，但明显是当今 JavaScript 框架的领导者。React 引入了一个虚拟 DOM 的概念，这是一个抽象副本，开发者能在框架内仅使用他们想要的 ReactJS 功能，而无需重写整个项目。此外，React 项目活跃的开源社区无疑成为增长背后的主力军。下面是一些 React 的主要优势：

• 合理的学习曲线 —— React 开发者可以轻松地创建 React 组件，而不需要重写整个 JavaScript 的代码。在 ReactJS 的 首页 查看它的优点以及它如何使编程更容易。
• 高度优化的性能 —— React 的虚拟 DOM 的实现和其他功能提升了应用程序的渲染性能。请查看 ReactJS 的关于如何对其性能进行基准测试，并对应用性能进行衡量的相关 描述。
• 优秀的支持工具 —— Redux、Thunk 和 Reselect 是构建良好、可调式代码的最佳工具。
• 单向数据绑定 —— 模型使用 Reach 流，只从所有者流向子模块，这使得在代码中追踪因果关系更加简单。请在 ReactJS 的 数据绑定页 阅读更多相关资料。

谁在使用 ReactJS？Facebook 自从发明它，就大量使用 React 构建公司首页，据说 Instagram 完全基于 ReactJS 库。你可能会惊讶地发现，其他知名公司如 纽约时报、Netflix 和 可汗学院 也在他们的技术栈中使用了 ReactJS。

更令人惊讶的是 ReactJS 开发者的工作机会，正如在下面 Stackoverflow 所做的研究中看到的，嘿，你可以从事开源项目并获得报酬。这很酷！

Stackoverflow 的研究显示了对 ReactJS 开发者的巨大需求——来源：2017 年开发者招聘趋势——Stackoverflow 博客

ReactJS 的 GitHub 目前显示超过 13,000 次提交和 1,377 位贡献者。它是一个在 MIT 许可证下的开源项目。

Angular

就开发者数量来说，也许 React 是现在最领先的 JavaScript 框架，但是 Angular 紧随其后。事实上，开源开发者和初创公司更乐于选择 React，而较大的公司往往更喜欢 Angular（下面列出了一些例子）。主要原因是，虽然 Angular 可能更复杂，但它的统一性和一致性适用于大型项目。例如，在我整个职业生涯中一直研究 Angular 和 React，我观察到大公司通常认为 Angular 严格的结构是一种优势。下面是 Angular 的另外一些关键优势：

• 精心设计的命令行工具 —— Angular 有一个优秀的命令行工具（CLI），可以轻松起步和使用 Angular 进行开发。ReactJS 提供命令行工具和其他工具，同时 Angular 有广泛的支持和出色的文档，你可以参见 这个页面。
• 单向数据绑定 —— 和 React 类似，单向数据绑定模型使框架受更少的不必要的副作用的影响。
• 更好的 TypeScript 支持 —— Angular 与 TypeScript 有很好的一致性，它其实是 JavaScript 强制类型的拓展。它还可以转译为 JavaScript，强制类型是减少错误代码的绝佳选择。

像 YouTube、Netflix、IBM 和 Walmart 等知名网站，都已在其应用程序中采用了 Angular。我通过自学使用 Angular 来开始学习前端 JavaScript 开发。我参与了许多涉及 Angular 的个人和专业项目，但那是当时被称为 AngularJS 的 Angular 1.x。当 Google 决定将版本升级到 2.0 时，他们对框架进行了彻底的改造，然后变成了 Angular。新的 Angular 是对之前的 AngularJS 的彻底改造，这一举动带来了一部分新开发者也驱逐了一部分原有的开发者。

截止到撰写本文，Angular 的 GitHub 页面显示 17,781 次提交和 1,133 位贡献者。它也是一个遵循 MIT 许可证的开源项目，因此你可以自由地在你的项目或贡献中使用。

VueJS

VueJS 是一个非常有趣的框架。它是 JavaScript 框架领域的新来者，但是在过去几年里它的受欢迎程度显著增加。VueJS 由 尤雨溪 创建，他是曾参与过 Angular 项目的谷歌工程师。该框架现在变得如此受欢迎，以至于许多前端工程师更喜欢 VueJS 而不是其他 JavaScript 框架。下图描述了该框架随着时间的推移获得关注的速度。

这里有一些 VueJS 的主要优点：

• 更容易地学习曲线 —— 与 Angular 或 React 相比，许多前端开发者都认为 VueJS 有更平滑的学习曲线。
• 小体积 —— 与 Angular 或 React 相比，VueJS 相对轻巧。在 官方文档 中，它的大小据说只有约 30 KB；而 Angular 生成的项目超过 65 KB。
• 简明的文档 —— VueJS 有全面清晰的文档。请自行查看它的 官方文档。

VueJS 的 GitHub 显示该项目有 3,099 次提交和 239 位贡献者。

MeteorJS

MeteorJS 是一个自由开源的 同构框架，这意味着它和 NodeJS 一样，同时运行客户端和服务器的 JavaScript。Meteor 能够和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。

Meteor 被高通、马自达和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多个应用程序使用。您可以其在官方网站上查看更多案例。

Meteor 的一些主要功能包括：

• 在线数据 —— 服务器发送数据而不是 HTML，并由客户端渲染。在线数据主要是指 Meteor 在页面加载时通过一个 WebSocket 连接服务器，然后通过该链接传输所需要的数据。
• 用 JavaScript 开发一切 —— 客户端、应用服务、网页和移动界面都可以用 JavaScript 设计。
• 支持大多数主流框架 —— Angular、React 和 Vue 都可以与 Meteor 结合。因此，你仍然可以使用最喜欢的框架如 React 或 Angular，这并不防碍 Meteor 为你提供一些优秀的功能。

截止到目前，Meteor 的 GitHub 显示 22，804 次提交和 428 位贡献者。这对于开源项目来说相当多了。

EmberJS

EmberJS 是一个基于 模型-视图-视图模型（MVVM） 模式的开源 JavaScript 框架。如果你从来没有听说过 EmberJS，你肯定会惊讶于有多少公司在使用它。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都将 EmberJS 作为公司的技术栈之一。你可以通过查询 EmberJS 的官方页面 来发掘所有使用 EmberJS 的应用和客户。

Ember 虽然和我们讨论过的其他框架有类似的好处，但这里有些独特的区别：

• 约定优于配置 —— Ember 将命名约定标准化并自动生成结果代码。这种方法学习曲线有些陡峭，但可以确保程序员遵循最佳实践。
• 成熟的模板机制 —— Ember 依赖于直接文本操作，直接构建 HTML 文档，而并不关心 DOM。

正如所期待的那样，作为一个被许多应用程序使用的框架，Ember 的 GitHub 页面显示该项目拥有 19,808 次提交和 785 位贡献者。这是一个巨大的数字！

KnockoutJS

KnockoutJS 是一个独立开源的 JavaScript 框架，采用 模板-视图-视图模型（MVVM） 模式与模板。尽管与 Angular、React 或 Vue 相比，听说过这个框架的人可能比较少，这个项目在开发者社区仍然相当活跃，并且有以下功能：

• 声明式绑定 —— Knockout 的声明式绑定系统提供了一种简洁而强大的方式来将数据链接到 UI。绑定简单的数据属性或使用单向绑定很简单。请在 KnockoutJS 的官方文档页面 阅读更多相关信息。
• 自动 UI 刷新。
• 依赖跟踪模板。

Knockout 的 GitHub 页面显示约有 1,766 次提交和 81 位贡献者。与其他框架相比，这些数据并不重要，但是该项目仍然在积极维护中。

BackboneJS

BackboneJS 是一个具有 RESTful JSON 接口，基于 模型-视图-主持人 Model-View-Presenter （MVP）设计范式的轻量级 JavaScript 框架。

这个框架据说已经被 Airbnb、Hulu、SoundCloud 和 Trello 使用。你可以在 Backbone 的页面 找到上面所有这些案例来研究。

BackboneJS 的 GitHub 页面显示有 3,386 次提交和 289 位贡献者。

Svelte

Svelte 是一个开源的 JavaScript 框架，它生成操作 DOM 的代码，而不是包含框架引用。在构建时而非运行时将应用程序转换为 JavaScript 的过程，在某些情况下可能会带来轻微的性能提升。

Svelte 的 GitHub 页面显示，截止到本文撰写为止，该项目有 5,729 次提交和 296 位贡献者。

AureliaJS

最后我们介绍一下 Aurelia。Aurelia 是一个前端 JavaScript 框架，是一个现代 JavaScript 模块的集合。Aurelia 有以下有趣的功能：

• 快速渲染 —— Aurelia 宣称比当今其他任何框架的渲染速度都快。
• 单向数据流 —— Aurelia 使用一个基于观察的绑定系统，将数据从模型推送到视图。
• 使用原生 JavaScript 架构 —— 可以用原生 JavaScript 构建网站的所有组件。

Aurelia 的 GitHub 页面显示，截止到撰写本文为止该项目有 788 次提交和 96 位贡献者。

这就是我在查看 JavaScript 框架世界时发现的新内容。我错过了其他有趣的框架吗？欢迎在评论区分享你的想法。

via: https://opensource.com/article/20/5/open-source-javascript-frameworks

作者：Bryant Son 选题：lujun9972 译者：stevending1st 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

用开源工具让你的终端窗口在 Mac 上漂亮起来。

你是否曾经厌倦了在你的 macOS 电脑上看到同样老式的终端窗口？如果是这样，使用开源的 Oh My Zsh 框架和 Powerlevel10k 主题为你的视图添加一些点缀。

这个基本的逐步教程将让你开始定制你的 macOS 终端。如果你是一个 Linux 用户，请查看 Seth Kenlon 的指南 为 Zsh 添加主题和插件 以获得深入指导。

步骤 1：安装 Oh My Zsh

Oh My Zsh 是一个开源的、社区驱动的框架，用于管理你的 Z shell （Zsh） 配置。

Oh My Zsh 是在 MIT 许可下发布的。使用以下命令安装：

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

步骤 2：安装 Powerlevel10k 字体

Powerlevel10k 是一个 MIT 许可的 Zsh 主题。在安装 Powerlevel10k 之前，你需要为你的终端安装自定义字体。

到 Powerlevel10 GitHub 页面，在 README 中 搜索 “fonts”。安装自定义字体的步骤会根据你的操作系统而有所不同。这只需要简单地点击-下载-安装的系列操作。

步骤 3：安装 Powerlevel10k 主题

接下来，运行以下命令安装 Powerlevel10k：

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

完成后，用文本编辑器，比如 Vim，打开 ~/.zshrc 配置文件，设置行 ZSH_THEME="powerlevel10k/powerlevel10k，然后保存文件。

步骤 4：完成 Powerlevel10 的设置

打开一个新的终端，你应该看到 Powerlevel10k 配置向导。如果没有，运行 p10k configure 来调出配置向导。如果你在步骤 2 中安装了自定义字体，那么图标和符号应该正确显示。将默认字体更改为 MeslowLG NF。

当你完成配置后，你应该会看到一个漂亮的终端。

就是这些了！你应该可以享受你美丽的新终端了。

via: https://opensource.com/article/21/4/zsh-mac

作者：Bryant Son 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

设置一个本地开发环境，或者直接用这些工具尝试容器编排平台。

Kubernetes 是一个开源的容器编排平台。它由 Google 开发，为自动化部署、扩展和管理容器化应用提供了一个开源系统。虽然大多数人在云环境中运行 Kubernetes，但在本地运行 Kubernetes 集群不仅是可能的，它还至少有两个好处：

• 在决定使用 Kubernetes 作为主要平台部署应用之前，你可以快速试用它。
• 在将任何东西推送到公共云之前，你可以将其设置为本地开发环境，从而实现开发环境和生产环境之间的分离。

无论你的情况如何，将本地 Kubernetes 环境设置为你的开发环境都是推荐的选择，因为这种设置可以创建一个安全而敏捷的应用部署流程。

幸运的是，有多个平台可以让你尝试在本地运行 Kubernetes，它们都是开源的，并且都是 Apache 2.0 许可。

• Minikube 的主要目标是成为本地 Kubernetes 应用开发的最佳工具，并支持所有适合的 Kubernetes 特性。
• kind 使用 Docker 容器“节点”运行本地 Kubernetes 集群。
• CodeReady Containers（CRC）用来管理为测试和开发目的优化的本地 OpenShift 4.x 集群。
• Minishift 通过在虚拟机 （VM） 内运行单节点的 OpenShift 集群，帮助你在本地运行 OpenShift 3.x 集群。

Minikube

Minikube 是在本地计算机上运行 Kubernetes 环境的最知名、最流行的选择。无论你使用什么操作系统，Minikube 的文档都会为你提供一个简单的安装指南。一般来说，安装 Minikube 只需运行两条命令：

$ curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-PLATFORM-amd64
$ sudo install minikube-PLATFORM-amd64 /usr/local/bin/minikube

Minikube 可在 Linux、macOS 或 Windows 上快速设置本地 Kubernetes 集群，其功能如下：

• 支持最新的 Kubernetes 版本（包括 6 个以前的小版本）
• 跨平台（Linux、macOS、Windows）
• 以虚拟机、容器或裸机的形式部署
• 支持多个容器运行时（CRI-O、containerd、Docker）
• 用于快速推送镜像的 Docker API 端点
• 负载均衡器、文件系统挂载、FeatureGates 和其他高级功能
• 用于轻松安装 Kubernetes 应用的附加组件

因为 Minikube 是一个开源项目，你可以对它的源代码做贡献。

kind

kind 的开发者将其描述为“一个使用 Docker 容器‘节点’运行本地 Kubernetes 集群的工具”。它是为测试 Kubernetes 而设计的，但也可能用于本地开发或持续集成。

kind 支持：

• 多节点（包括高可用性）集群
• 从源码构建 Kubernetes 版本
• Make/Bash/Docker 或 Bazel，以及预发布构建
• Linux、MacOS 和 Windows

此外，kind 是一个经过云原生计算基金会（CNCF）认证的 Kubernetes 合规安装程序。因为它是开源的，你可以在它的 GitHub 仓库中找到 kind 的源码。

CodeReady Container （CRC）

如果你想在本地尝试最新版本的 OpenShift，可以尝试红帽的 CodeReady Containers （CRC）。CRC 将一个最小的 OpenShift 4.x 集群带到你的本地计算机上，为开发和测试目的提供一个最小的环境。CRC 主要针对开发者的桌面使用。

你可以在 GitHub 上找到 CodeReady Container 的源码，也是在 Apache 2.0 许可下提供的。

Minishift

Minishift 项目帮助你在本地用 OKD 在虚拟机内的单节点 OpenShift 集群运行一个版本的 OpenShift。你可以用它来尝试 OpenShift，或者在你的本地主机上为云开发。

和这个列表中的其他工具一样，Minishift 也是开源的，你可以在 GitHub 上访问它的源码。

为人服务的 Kubernetes

正如你所看到的，有几种方法可以在本地环境中试用 Kubernetes。我有遗漏么？欢迎留言提问或提出建议。

via: https://opensource.com/article/20/11/run-kubernetes-locally

作者：Bryant Son 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

使用 Docsify 创建文档网页并发布到 GitHub Pages 上。

文档是帮助用户使用开源项目一个重要部分，但它并不总是开发人员的首要任务，因为他们可能更关注的是使他们的应用程序更好，而不是帮助人们使用它。对开发者来说，这就是为什么让发布文档变得更容易是如此有价值的原因。在本教程中，我将向你展示一个这样做的方式：将 Docsify 文档生成器与 GitHub Pages 结合起来。

默认情况下，GitHub Pages 会提示用户使用 Jekyll，这是一个支持 HTML、CSS 和其它网页技术的静态网站生成器。Jekyll 可以从以 Markdown 格式编码的文档文件中生成一个静态网站，GitHub 会自动识别它们的 .md 或 .markdown 扩展名。虽然这种设置很好，但我想尝试一下其他的东西。

幸运的是，GitHub Pages 支持 HTML 文件，这意味着你可以使用其他网站生成工具（比如 Docsify）在这个平台上创建一个网站。Docsify 是一个采用 MIT 许可证的开源项目，其具有可以让你在 GitHub Pages 上轻松创建一个有吸引力的、先进的文档网站的功能。

开始使用 Docsify

安装 Docsify 有两种方法：

1. 通过 NPM 安装 Docsify 的命令行界面（CLI）。
2. 手动编写自己的 index.html。

Docsify 推荐使用 NPM 方式，但我将使用第二种方案。如果你想使用 NPM，请按照快速入门指南中的说明进行操作。

从 GitHub 下载示例内容

我已经在该项目的 GitHub 页面上发布了这个例子的源代码。你可以单独下载这些文件，也可以通过以下方式克隆这个存储库。

git clone https://github.com/bryantson/OpensourceDotComDemos

然后 cd 进入 DocsifyDemo 目录。

我将在下面为你介绍这些代码，它们克隆自我的示例存储库中，这样你就可以理解如何修改 Docsify。如果你愿意，你也可以从头开始创建一个新的 index.html 文件，就像 Docsify 文档中的的示例一样：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

探索 Docsify 如何工作

如果你克隆了我的 GitHub 存储库，并切换到 DocsifyDemo 目录下，你应该看到这样的文件结构：

index.html 是 Docsify 可以工作的唯一要求。打开该文件，你可以查看其内容：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
  <title>Docsify Demo</title>
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      el: "#app",
      repo: 'https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo',
      loadSidebar: true,
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

这本质上只是一个普通的 HTML 文件，但看看这两行：

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
... 一些其它内容 ...
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

这些行使用内容交付网络（CDN）的 URL 来提供 CSS 和 JavaScript 脚本，以将网站转化为 Docsify 网站。只要你包含这些行，你就可以把你的普通 GitHub 页面变成 Docsify 页面。

<body> 标签后的第一行指定了要渲染的内容：

<div id="app"></div>

Docsify 使用单页应用（SPA）的方式来渲染请求的页面，而不是刷新一个全新的页面。

最后，看看 <script> 块里面的行：

<script>
    window.$docsify = {
      el: "#app",
      repo: 'https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo',
      loadSidebar: true,
    }
</script>

在这个块中：

• el 属性基本上是说：“嘿，这就是我要找的 id，所以找到它并在那里呈现。”
• 改变 repo 值，以确定当用户点击右上角的 GitHub 图标时，会被重定向到哪个页面。
• 将 loadSideBar 设置为 true 将使 Docsify 查找包含导航链接的 _sidebar.md 文件。

你可以在 Docsify 文档的配置部分找到所有选项。

接下来，看看 _sidebar.md 文件。因为你在 index.html 中设置了 loadSidebar 属性值为 true，所以 Docsify 会查找 _sidebar.md 文件，并根据其内容生成导航文件。示例存储库中的 _sidebar.md 内容是：

<!-- docs/_sidebar.md -->


* [HOME](./)

* [Tutorials](./tutorials/index)
  * [Tomcat](./tutorials/tomcat/index)
  * [Cloud](./tutorials/cloud/index)
  * [Java](./tutorials/java/index)

* [About](./about/index)

* [Contact](./contact/index)

这会使用 Markdown 的链接格式来创建导航。请注意 “Tomcat”、“Cloud” 和 “Java” 等链接是缩进的；这意味着它们被渲染为父链接下的子链接。

像 README.md 和 images 这样的文件与存储库的结构有关，但所有其它 Markdown 文件都与你的 Docsify 网页有关。

根据你的需求，随意修改你下载的文件。下一步，你将把这些文件添加到你的 GitHub 存储库中，启用 GitHub Pages，并完成项目。

启用 GitHub 页面

创建一个示例的 GitHub 存储库，然后使用以下 GitHub 命令检出、提交和推送你的代码：

$ git clone 你的 GitHub 存储库位置
$ cd 你的 GitHub 存储库位置
$ git add .
$ git commit -m "My first Docsify!"
$ git push

设置你的 GitHub Pages 页面。在你的新 GitHub 存储库中，点击 “Settings”：

向下滚动直到看到 “GitHub Pages”：

查找 “Source” 部分：

点击 “Source” 下的下拉菜单。通常，你会将其设置为 “master branch”，但如果你愿意，也可以使用其他分支：

就是这样！你现在应该有一个链接到你的 GitHub Pages 的页面了。点击该链接将带你到那里，然后用 Docsify 渲染：

它应该像这样：

结论

通过编辑一个 HTML 文件和一些 Markdown 文本，你可以用 Docsify 创建一个外观精美的文档网站。你觉得怎么样？请留言，也可以分享其他可以和 GitHub Pages 一起使用的开源工具。

via: https://opensource.com/article/20/7/docsify-github-pages

作者：Bryant Son 选题：lujun9972 译者：wxy 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

这些开源工具可以最大化延长运行时间并且在最大程度上减少问题。

我一直对 Web 开发和软件体系结构很感兴趣，因为我喜欢看到一个工作系统的宏观视图。无论是构建一个移动应用程序还是一个 Web 应用程序，都必须连接到互联网，在不同的模块中交换数据，这意味着你需要 Web 服务。

如果选择云系统作为应用程序的后端，则可以利用更强大的计算能力，因为后端服务将会在水平和垂直方向上进行扩展并编排不同的服务。但无论你是否使用云后端，建造一个灵活、稳定、快速又安全的容错系统是必不可少的。

要了解容错系统，让我们以脸书、亚马逊、谷歌和奈飞为例。数以亿计的用户会同时接入这些平台并通过对等网络和用户-服务器网络传输大量数据，你可以肯定这其中还存在许多的带有不法目的的恶意用户，例如黑客攻击和拒绝服务（DoS）攻击。即使如此，这些平台无需停机也可以全年无休地运转。

虽然机器学习和智能算法是这些系统的基础，但它们实现持续的服务而不停机一分钟的事实值得称赞。它们昂贵的硬件设备和巨大的数据中心当然十分重要，但是支持服务的精密软件设计也同样重要。而且容错系统是一个构建如此精密系统的法则之一。

生产过程中导致错误的两种行为

这是考虑容错系统的另一种方法。当你在本地运行应用程序服务时，每件事似乎都很完美。棒极了！但当你提升服务到生产环境时，一切都会变得一团糟。在这种情况下，容错系统通过解决两个问题来提供帮助：故障停止行为和拜占庭行为。

故障停止行为

故障停止行为是运行中系统突然停止运行或者系统中的某些部分发生了故障。服务器停机时间和数据库不可访问都属于此种类型。举个例子，在下图中，由于服务 2 无法访问，因此服务 1 无法与服务 2 进行通信。

但是，如果服务之间存在网络问题，也会出现此问题，如下图所示：

拜占庭行为

拜占庭行为是指系统在持续运行，但并没有产生预期行为（例如：错误的数据或者无效的数据）。

如果服务 2 的数据（值）已损坏则可能会发生拜占庭故障，即使服务看起来运行得很好，比如下面的例子:

或者，可能存在恶意的中间人在服务之间进行拦截，并注入了不需要的数据：

无论是故障停止和拜占庭行为，都不是理想的情况，因此我们需要一些预防或修复它们的手段。这里容错系统就起作用了。以下是可以帮助你解决这些问题的 8 个开源工具。

构建容错系统的工具

尽管构建一个真正实用的容错系统涉及到深入的“分布式计算理论”和复杂的计算机科学原理，但有许多的软件工具（其中许多是开源软件）通过构建容错系统来减轻不良后果的影响。

断路模式：Hystrix 和 Resilience4j

断路模式是一种技术，它有助于在服务失败时返回准备好的虚拟回应或者简单回应。

奈飞开源的 Hystrix 是断路模式中最流行的应用。

我之前工作过的很多家公司都在用这款出色的工具。令人意外的是，奈飞宣布将不再更新 Hystrix（是的，我知道了）。相反，奈飞建议使用另一种支持 Java 8 和函数式编程的 Resilence4j 之类的替代解决方案，或者类似于 Adaptive Concurrency Limit 的替代解决方案。

负载均衡：Nginx 和 HaProxy

负载均衡是分布式系统中最基本的概念之一，要想拥有一个生产质量的环境，必须有负载均衡的存在。要理解负载均衡器，首先我们需要明白冗余的概念。每个生产级的 Web 服务都有多个服务器在某个服务器宕机时提供冗余来接管和维持服务。

想想现代飞机：它们的双引擎提供冗余，使它们即使在一个引擎着火的情况下也能安全的着陆。（这也有助于大多数商用飞机拥有最先进的自动化系统）。但是，拥有多引擎（或者多服务器）也意味着必须存在一些调度机制在故障发生时有效地对系统进行路由。

负载均衡器是一种通过平衡多个服务节点来优化大流量事务的设备或者软件。举个例子，当数以千计的请求涌入时，负载均衡器可以作为中间层在不同的服务器间进行路由和平均分配流量。如果一台服务器宕机，负载均衡器会将请求转发给其它运行良好的服务器。

有许多可用的负载均衡器，但其中最出名的两个就是 Nginx 和 HaProxy。

Nginx 不仅仅是一个负载均衡器，它还是 HTTP 和反向代理服务器、邮件代理服务器和通用 TCP/UDP 代理服务器。Groupon、Capital One、Adobe 和 NASA 等公司都在使用它。

HaProxy 也很受欢迎，因为它是一个免费的、非常快且可靠的解决方案，它为基于 TCP 和 HTTP 的应用程序提供高可用性、负载平衡和代理。许多大型网络公司，包括 Github、Reddit、Twitter 和 Stack Overflow 都使用 HaProxy。是的，Red Hat Enterprise Linux 同样支持 HaProxy 设置。

参与者模型：Akka

参与者模型是一种并发设计模式，当作为基本计算单位的“参与者”接收到消息时，它会分派责任。一个参与者可以创建更多的参与者，并将消息委派给他们。

Akka 是最著名的参与者模型实现之一。该框架同时支持基于 JVM 的 Java 和 Scala。

使用消息队列的异步、非阻塞 I/O：Kafka 和 RabbitMQ

多线程开发在过去很流行，但是现在已经不鼓励这种做法了，取而代之的是异步的、非阻塞的 I/O 模式。对于 Java，这一点在 EnterpriseJavaBean（EJB）规范中得到了明确的规定：

“企业 bean 一定不能使用线程同步原语来同步多个实例的执行。”

“企业 bean 不得试图去管理线程。企业 bean 不得试图启动、停止、挂起或恢复线程，或者去更改线程的优先级或者名称。企业 bean 不得试图管理线程组。”

如今，虽然还有其他做法，如流 API 和参与者模型，但像 Kafka 和RabbitMQ 之类的消息队列为异步和非阻塞 I/O 功能提供了开箱即用的支持，同时它们也是功能强大的开源工具，通过处理并发进程可以替代线程。

其他的选择：Eureka 和 Chaos Monkey

用于容错系统其它有用的工具包括奈飞的 Eureka 之类的监控工具，以及像 Chaos Monkey 这样的压力测试工具。它们旨在通过在较低环境中的测试，如集成（INT）、质量保障（QA）和用户接受测试（UAT）来早早发现潜在问题以防止在转移到生产环境之前出现潜在问题。

你在使用什么开源工具来构建一个容错系统呢？请在评论中分享你的最爱。

via: https://opensource.com/article/19/3/tools-fault-tolerant-system

作者：Bryant Son 选题：lujun9972 译者：chenmu-kk 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

探索开源 CSS 框架，找到适合你的项目的框架。

当大多数人想到 Web 开发时，通常会想到 HTML 或 JavaScript。他们通常会忘记对网站的欣赏能力有更大影响的技术： 级联样式表 cascading style sheets （简称 CSS）。据维基百科的说法，CSS 既是网页中最重要的部分，也是最常被遗忘的部分，尽管它是万维网的三大基石技术之一。

本文将探讨九种流行的、强大的、开源的框架，是这些框架让构建漂亮的网站前端的 CSS 开发变得简单明了。

Bootstrap

Bootstrap 无疑是最流行的 CSS 框架，它是所有前端 Web 设计的开端。Bootstrap 由 Twitter 开发，提供了可用性、功能性和可扩展性。

Bootstrap 还提供了大量的例子来帮助你入门。

使用 Bootstrap，你可以将不同的组件和布局拼接在一起，创造出有趣的页面设计。它还提供了大量详细的文档。

Bootstrap 的 GitHub 仓库有超过 19000 个提交和 1100 个贡献者。它基于 MIT 许可证，所以（和这个列表中的所有框架一样）你也可以加入并贡献。

PatternFly

PatternFly 是由 Red Hat 开发的一个开源的（MIT 许可证）CSS 框架。PatternFly 采取了与 Bootstrap 不同的方法：Bootstrap 是为任何对创建一个漂亮网站感兴趣的人而设计的，而 PatternFly 主要针对企业级应用开发者，它提供的组件，如条形图、图表和导航，对于创建强大的、指标驱动的仪表盘非常有吸引力。事实上，Red Hat 在其产品（如 OpenShift）的设计中也使用了这个 CSS 框架。

除了静态 HTML 之外，PatternFly 还支持 ReactJS 框架，ReactJS 是 Facebook 开发的一个流行的 JavaScript 框架。

PatternFly 有许多高级组件，如条形图、图表、模态窗口和布局等，适用于企业级应用。

PatternFly 的 GitHub 页面列出了超过 1050 个提交和 44 个贡献者。PatternFly 得到了很多人的关注，欢迎大家踊跃贡献。

MDC Web

凭借其大获成功的安卓平台，谷歌以一个名为 Material Design 的概念制定了自己的标准设计准则。Material Design 标准旨在体现在所有谷歌的产品中，这些标准也可以面向大众，并且在 MIT 许可证下开源。

Material Design 有许多“用于创建用户界面的交互式构建块”的组件。这些按钮、卡片、背景等可用于创建网站或移动应用程序的任何类型的用户界面。

维护人员为不同的平台提供了详尽的文档。

还有分步教程，其中包含用于实现不同目标的练习。

Material 组件的 GitHub 页面承载了面向不同平台的存储库，包括用于网站开发的 Material Web 组件（MDC Web）。MDC Web 有超过 5700 个提交和 349 个贡献者。

Pure

Bootstrap、Patternfly 和 MDC Web 都是非常强大的 CSS 框架，但是它们可能相当的笨重和复杂。如果你想要一个轻量级的 CSS 框架，它更接近于自己编写 CSS，但又能帮助你建立一个漂亮的网页，可以试试 Pure.css。Pure 是一个轻量级的 CSS 框架，它的体积很小。它是由 Yahoo 开发的，在 BSD 许可证下开源。

尽管体积小，但 Pure 提供了建立一个漂亮网页的很多必要的组件。

Pure 的 GitHub 页面显示它有超过 565 个提交和 59 个贡献者。

Foundation

Foundation 号称是世界上最先进的响应式前端框架。它提供了先进的功能和教程，用于构建专业网站。

该框架被许多公司、组织甚至政客使用，并且有大量的文档可用。

Foundation 的 GitHub 页面显示有近 17000 个提交和 1000 个贡献者。和这个列表中的大多数其他框架一样，它也是在 MIT 许可证下提供的。

Bulma

Bulma 是一个基于 Flexbox 的开源框架，在 MIT 许可证下提供。Bulma 是一个相当轻量级的框架，因为它只需要一个 CSS 文件。

Bulma 有简洁明快的文档，让你可以很容易地选择你想要探索的主题。它也有很多网页组件，你可以直接拿起来在设计中使用。

Bulma 的 GitHub 页面列出了 1400 多个提交和 300 多个贡献者。

Skeleton

如果连 Pure 都觉得太重了，那么还有一个叫 Skeleton 的更轻量级框架。Skeleton 库只有 400 行左右的长度，而且这个框架只提供了开始你的 CSS 框架之旅的基本组件。

尽管它很简单，但 Skeleton 提供了详细的文档，可以帮助你马上上手。

Skeleton 的 GitHub 列出了 167 个提交和 22 个贡献者。然而，它不是很活跃，它的最后一次更新是在 2014 年，所以在使用之前可能需要一些维护。由于它是在 MIT 许可证下发布的，你可以自行维护。

Materialize

Materialize 是一个基于 Google 的 Material Design 的响应式前端框架，带有由 Materialize 的贡献者开发的附加主题和组件。

Materialize 的文档页面非常全面，而且相当容易理解。它的组件页面包括按钮、卡片、导航等等。

Materialize 是 MIT 许可证下的开源项目，它的 GitHub 列出了超过 3800 个提交和 250 个贡献者。

Bootflat

Bootflat 是由 Twitter 的 Bootstrap 衍生出来的一个开源 CSS 框架。与 Bootstrap 相比， Bootflat 更简单，框架组件更轻量级。

Bootflat 的文档几乎像是受到了宜家的启发 —— 它显示的是每个组件的图片，没有太多的文字。

Bootflat 是在 MIT 许可证下提供的，其 GitHub 页面包括 159 个提交和 8 个贡献者。

你应该选择哪个 CSS 框架？

对于开源的 CSS 框架，你有很多选择，这取决于你想要的工具功能有多丰富或简单。就像所有的技术决定一样，没有一个正确的答案，只有在给定的时间和项目中才有正确的选择。

尝试一下其中的一些，看看要在下一个项目中使用哪个。另外，我有没有错过任何有趣的开源 CSS 框架？请在下面的评论中分享你的反馈和想法。

via: https://opensource.com/article/20/4/open-source-css-frameworks

作者：Bryant Son 选题：lujun9972 译者：wxy 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出