过去六年来，后端架构生态系发展欣欣向荣。他们已经学了许多关于构筑和保护小型应用领域的科学知识。他们看见了许多新设想的出现。其中一些新设想发生改变了他们构筑 Web 应用领域的方式，而其他设想被弃置，即使它起不出什么作用。
在这个过程中，他们看见许多炒和武装冲突的看法，优先选择两个架构显得举步维艰。当您为长年保护两个应用领域的组织挑选出架构时，着实举步维艰。
在责任编辑中，我想叙述他们对什么样构筑当代 Web 应用领域的认知的演进，并提出一种什么样在多种不同技术中展开优先选择的方式。
在已经开始前，我想先简述一下，返回第二个使构筑应用软体领域更像程式设计的库。 Backbone.js 于 2010 年 10 月正式发布，2013 年 3 月达到 1.0 版。它是第二个广为采用的选用数学模型与快照之间相分离的 JavaScript 库。
s 的 Model 表示统计数据和业务方法论。它促发快照层的变化。当发生改变该事件促发的这时候，显示数学模型统计数据的快照负责管理将该更动应用领域于 DOM。Backbone 无人知晓您必选 HTML 模版的方式，需要合作开发人员另行撰写 render 表达式化解什么样预览 View 到 DOM。
在 Backbone 1.0 问世的这时候，Angular.js 被正式发布并已经开始普及化。它不像 Backbone 那般着重于数学模型，而要着重于使快照做的更快。
Angular.js 选用了校对数学模型以使 HTML 梅利尼的设想。它容许采用命令将犯罪行为转化成到 HTML 原素中。您可以将数学模型与快照展开存取，因此当模版发生改变的这时候，快照会离线。
Angular.js 的盛行度快速增长，即使你很难将 Angular.js 加进到任何项目中，因此上手单纯。许多合作开发人员被 Angular.js 所招揽，即使它是由 Google 合作开发的，这突显 Angular.js 与生俱来的可靠度。
大约在同一时间，Web 组件规范承诺使合作开发人员可以创建与其上下文分离的，因此易于与其他组件展开组合的可重用组件。
Web Components 规范是由四个独立的规范组合而成的。
HTML 模版 — 为组件提供 HTML 标记
自定义原素 — 提供了一种创建自定义 HTML 原素的机制
Shadow DOM — 将组件的内部与渲染它的上下文隔展开离
HTML 导入 — 使将 Web 组件加载到页面中成为可能
Google 的两个团队创建了两个补丁库，为当时所有浏览器提供 Web Components 支持。这个库被称为 Polymer，并于 2013 年 11 月开源。
Polymer 是第二个使通过组合组件构筑交互式应用领域成为可能的库。早期采用者受益于可组合性，但发现性能问题还是需要用架构来化解。
同时，一小群合作开发人员受到 Ruby on Rails 思想的启发，希望创建两个基于约定的社区驱动的开源架构来构筑小型 Web 应用领域。
他们已经开始基于 SproutCore 2.0 展开合作开发。SproutCore 2.0 是两个基于 MVC 的架构，在数学模型、控制器和快照之间有明显的分隔。这个新架构叫做 Ember.js。
创建基于约定的架构的第二个挑战是找到小型 Web 应用领域的通用模式。 Ember.js 团队查看了小型 Backbone 应用领域，以找到相似之处。
他们发现应用领域的某些部分是一致的，而其他部分会有些改动。在这种地方就需要嵌套快照。
他们还将 URL 视为 Web 应用领域架构中的关键角色。他们结合了嵌套快照的设想和 URL 的重要性，创建两个路由系统，作为入口点进入应用领域并控制初始视图呈现。
Ember.js 的原素 —— 原文 Ember JS 深入介绍
Ember 社区在 Ember.js 核心团队的领导下，于 2013 年 8 月正式发布了 Ember.js 1.0。它具有 MVC 架构，强大的路由系统和可校对模版的组件。像 Angular.js 和 Polymer 一样，Ember.js 主要依靠双向存取来保持快照与状态同步。
在 2014 年的年中，两个新的库已经开始引起合作开发人员的注意。Facebook 为他们的平台创建了两个架构，并以 “React” 的命名正式发布。
在其他的架构都依赖于对象突变和属性存取的这时候，React 引入了将诸如纯表达式和组件参数之类的组件作为表达式参数来处理的设想。
组件是返回 DOM 的表达式 —— 原文https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components
当两个参数的值发生改变时，组件的 render 表达式被调用并返回两个新的组件树。 React 将返回的组件树与虚拟 DOM 树展开比较，以确定什么样预览真实的DOM。这种重新渲染所有内容并将结果与虚拟 DOM 展开比较的技术经实践证明是非常有效的。
原文: React.js Reconciliation
Angular.js 合作开发人员面临着 Angular.js 变更检测机制引发的性能问题。Ember 社区正在学习什么样化解保护依赖于双向存取和观察者模式的小型应用领域的挑战。
React 主攻的是 Polymer 所未能化解的问题。React 显示了什么样提高组件架构的性能。 React 在基准测试中打败了 Ember 和 Angular.js。一些较有尝试新技术精神的 Backbone 合作开发人员将 React 作为快照加进到其应用领域中，以化解他们遇到的性能问题。
为了应对 React 的威胁，Ember 核心团队制定了一项计划，将 React 提出的设想纳入 Ember 架构。他们认识到需要提升向后兼容性，并创建了两个版升级的途径，容许现有应用领域升级到包含新 的 React-inspired 渲染引擎的 Ember 版。
在 4 个次要版的预览过程中，Ember.js 已弃用 Views，将社区迁移到基于 CLI 的构筑过程，并将基于组件的架构作为 Ember 应用领域合作开发的基础。逐渐对架构展开重要的重构的过程被称为“稳定无停滞”，成为 Ember 社区的基本宗旨。
当 Ember 正在向 React 学习时，React 社区正在选用由 Ember 推广的路由。 小型 React 应用领域是采用 React Router 撰写的，该路由器是从用于 Ember 路由的 router.js 分支发展而来的。
Ember 对他们构筑当代 Web 应用领域最大的贡献之一是他们在采用命令行工具作为构筑和部署 Web 应用领域的默认界面上的领导力和普及化。此工具称为 EmberCLI。它启发了 React 的 create-react-app 和 AngularCLI。现在的每个 Web 架构都提供了两个命令行工具来简化 Web 应用领域的合作开发。
在 2015 年上半年，Angular.js 的核心团队得出结论，他们的架构正在进入两个进化的死胡同。Google 需要两个合作开发人员可以用来构筑强大的应用领域的工具，而 Angular.js 不能成为这个工具。他们已经开始研究两个新的架构，这将是 Angular.js 的精神继承者。 Angular.js 是在谷歌不是很支持的情况下盛行起来的，而这个新架构则与 Angular.js 不同，得到了 Google 的全力支持。Google 分出了超过 30 多位合作开发人员，来合作开发这个被称为 Angular.js 精神继承者的架构。
新架构的范围远远大于 Angular.js。Angular 团队将新架构称为平台，即使他们计划提供专业合作开发人员构筑 Web 应用领域所需的一切。像 Ember 和 React 一样，Angular 采用基于组件的架构，但它是使 TypeScript 成为其默认程式设计语言的第二个架构。
具有 TypeScript 的 Angular 组件 —— https://github.com/johnpapa/angular-tour-of-heroes/blob/master/src/app/heroes.component.tsTypeScript 提供类、模块和接口。它支持可选的静态类型检查，它对 Java 和 C＃ 的合作开发人员来说是两个非常棒的语言。具有 Visual Studio Code 编辑器对 TypeScript 代码提供了很棒的智能支持功能。
对 Angular Apps 的智能支持 —— 原文：http://rafaelaudy.github.io/simple-angular-2-app/
Angular 是高度结构化和以公共标准为基础的，然而仍然存在配置机制的问题。它有两个强大的路由器。Angular 团
在 2017 年 5 月，Polymer 2.0 改进了存取系统，减少了对 heavy polyfills 的依赖，并与最新的 JavaScript 标准保持一致。新版引入了一些突破性变化，并为用户升级到新版提供了详细的计划。新的 Polymer 配备了两个命令行工具来帮助构筑和部署 Polymer 项目。
截至 2017 年 6 月，所有顶级架构都将组件架构作为合作开发范例。每个架构都提供路由作为将应用领域分解为方法论块的一种手段。所有架构都可以采用像 Redux 这样的状态管理技术。React、Ember 和 Angular 都容许服务器端渲染 SEO 和快速初始启动。
那么你怎么知道用什么工具来构筑两个当代的 Web 应用领域呢？我建议你看看各个组织的人口统计统计数据，以确定哪个架构最适合。
React 是两个类似于一大张拼图中的一块的库。React 提供两个轻量级的快照层，并将其留给合作开发人员优先选择其余的架构。盒子里没有任何东西，所以你的团队可以完全控制你采用的一切。如果你有两个经验丰富的 JavaScript 合作开发人员团队，他们对于功能程式设计和不可变统计数据结构都很满意，那么 React 是两个不错的优先选择 React 社区在采用 Web 技术方面处于创新的前沿。如果你的组织需要采用相同的代码库来跨平台，那么你应该知道 React 容许你采用 React Native 撰写本地的 Web，采用 ReactVR 撰写 VR 设备。
Angular 是两个非常适合有 Java 或 C＃ 背景的企业合作开发人员的平台。TypeScript 和 Intellisense 的支持将使这些合作开发人员感觉到非常熟悉。虽然 Angular 是新的，但它已经有许多第三方组件库了，公司可以立即购买并立即已经开始采用。Angular 团队承诺要快速迭代架构，使之更快，且不会再次破坏向后兼容性。Angular 可用于采用 NativeScript 构筑高性能原生应用领域。
Ember.js 是两个优化小团队和技能水平较高的独立合作开发人员的生产力架构。其对配置上的约定，为新合作开发人员和组织长年保护小型项目提供了极好的起点。承诺的“稳定无停滞”已被证明是保护小型应用领域的有效方式，而不需要在最佳实践发生改变时展开重写。稳定性、成熟度和致力于创造共享代码，促生了两个生态系，这个生态系使得大多数合作开发的简易程度让人惊讶。如果您正在寻找两个长年项目的可靠架构，Ember 是两个很好的优先选择。
Polymer 是两个对于希望创建单一样式指南，和要在整个组织中采用的组件集合的小型组织而言特别适合的架构。该架构提供可比较的合作开发工具。如果你想将一些当代化的功能应用领域在你的程序上，而不需要撰写大量 JavaScript，那么 Polymer 是你们很不错的优先选择。
他们正在了解什么样为浏览器构筑应用领域，并汇集好的设想。 所有架构的制作者都非常关心采用他们的库的人。 问题是哪个社区和生态系是你的组织和用例的最佳优先选择。
我希望这篇文章有助于揭示当代网络生态系的发展，并帮助您构筑下一代当代 Web 应用领域。
译者：LeviDing
译文：https://github.com/xitu/gold-miner/blob/master/TODO/building-modern-web-applications-in-2017.md
原文：https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341
长按下方图片
