前端 JavaScript 的未来前景到底如何？

英文原文：The Future of JavaScript in the Front End World

如果你近几年一直在从事前端开发，你一定知道已经存在太多的东西让人难以做出选择。新的框架和库随时都在涌现。全世界的公司都面临着一大难题：为了实现数字化，到底该选择什么样的技术栈才算正确。除了面对这个巨大的挑战，同时还要紧跟最新的技术趋势。

即使对某些专注于前端的开发人员，也存在选择个人技术栈的时候。而这个事情可能还优先于选择正确或错误的方法来解决问题。

随着竞争的演化，最快、最高性能和最易用的框架和库被不断的发明出来，人们不禁想问：JavaScript 世界何时能归集到几个主流技术栈上来？JavaScript 未来是什么样子？AI 对这项技术到底会产生什么样的推动？

JavaScript 的背景和流行度

JavaScript 自 1995 年诞生以来，已经成为 Web 领域最受欢迎的语言。过去十年中，JS 语言的使用率一直在增长，未见衰落。

根据 StackOverflow 的年度调查，69.8% 的受访者和 71.5% 的专业开发者使用 JavaScript。随着可以使用 Web 的流行设备越来越多，争夺最佳“一站式”解决方案的竞争愈演愈烈。这对于了解 JS 或者正准备学 JS 的人来说是个非常好的消息。而对于那些没接触过前端的人来说，我建议他们去作些尝试以获得（哪怕最基本的）JS 经验。 下面这句话概括得非常好：

“可以预见，这 [JavaScript] 可能是开发者最需要提升的技能”

框架和 Web 组件 —— 可预见的未来

经历了过近十年的框架之战，脱颖而出的“三大框架”开始稳步引领未来。React、Vue 和 Angluar 目前最重要的 JavaScript 框架和库。我会在本文中按照他们的流行程度排序，并确信他们在未来继续领先。

React

React 由 Facebook 创建并长期支持，深受开发者喜爱，可以用来构建和维护像 POC 这样的产品或大型企业应用产品。目前很多像 Instagram、Netflix、沃尔玛、WhatsApp 这样领先公司都在使用 React。React 的优势在于其基于组件的构架、受益于虚拟 DOM 的超强性能，极快的学习曲线等。它有着庞大的社区支持，在开者中非常流行。

Vue

Vue 由 尤雨溪（Evan You）创建，受到阿里巴巴采用。人们一旦发现 Vue，就会迅速喜欢上它。发生这种情况的原因在于，Vue 最初就设计来帮助开发经验不足的程序员。其目的是帮助他们专注于创建功能界面，而不需要太操心代码。这使得 Vue 门槛极低，非常容易学习。此外，尤雨溪，前谷歌员工，发现 Angular 中存在一些繁琐或者可以改进的东西，便把这些改进应用到了 Vue 当中。当 React 发布的时候，他也学习 React 并针对其缺点对 Vue 进行了改善，使 Vue 逐渐发展成为了现在最具前途的框架之一。Vue 支持声明式渲染，异步 DOM 更新，双向数据绑定，严格遵守 Web 组件规范，并简单集成了 HTML 模板。

Angular

由谷歌构建和支持，并应用于Youtube，Paypal，Google Maps等。目前，Angular已经是企业实施的首选。最新的发布版Angular 6，带来了两个主要亮点。使用lvy渲染器的promise类可加快在应用程序中的渲染速度，并且允许在Angular之外使用Angular组件的元素，例如在Vue或React中。使用Elements包，你可以创建Angular组件，将它们发布成HTML网页可立即使用的Web组件。对于面向对象程序设计的后端和Java后端来说，Anglar更易于学习。

除框架外，我们最近看到了web组件的兴起，但是它们到底是什么？为什么会这么重要？

在一个正遭受框架疲劳的社区，Web组件是自HTML5以来获得能力的最重要的事情。但是它们是什么？‘Web组件是一个新的强大的W3C 标准，已经被所有的主流浏览器认可而且可以在我们的App中使用（需要使用填充工具）’。它附加到DOM中，可以减小web程序，可重用和模块化组件，解耦任何框架，但却是纯粹使用HTML，CSS和JS来构建的。

Web组件具有较小的包，无须发送自定义的组件实现。它们的可重用性受到称赞。由于web组件内置于浏览器中，对浏览器原生支持，所以它们可被用于任何地方，任何框架，或根本没有框架的地方。最后，它们因简洁而受到喜爱。如果你不想的话，你可以不需要去学习一些框架。如果你已经有JS和DOM API的基础，那么你就可以使用web组件了。

lonic/Stencil

Ionic是一个功能强大的框架无关库，用于构建可直接访问本机设备功能的移动和渐进式Web应用程序。随着最新的lonic 4的发布，通过允许开发人员在Angular之外使用它，Stencil的引入将会使其更强大和更高效。怎么做到的？Stencil是一个Web组件编译器，可以构建快速而小巧的现代Web组件。通过使用Web组件而不是像React或Angular这种特定于框架的组件来创建UI组件，我们可以在任何支持它们的框架中重用这些组件，或者单独使用它们。

Polymer

Polymer是一个由Google开发的JS库，用于Google Earth 和 Youtube。它使用web组件来构建web应用，并提供将封装的JS， CSS， 和 HTML组装为自定义元素的能力，它是利用浏览器的原生技术，而不是依赖于JS库。

然而， Polymer 还没有成熟，而且存在一些问题。第一，因为它生成DOM，所以任何交互或者DOM操作都会使用基本JavaScript， 这将增加更多的模板代码，导致组织和管理大型应用变得更具有挑战性。这也是一个提出React和其他库的原因。第二，Polymer 为字符串中的变量创建占位符，以此来提升性能，同时还解决了将其转换成一个字符串的问题，虽然只是将它转成一个对象。但是因为这些占位符不属于Web组件规范，如果使用了这些占位符，就已经将应用直接捆绑到 Polymer 上了。最后几个问题是：下载整个库和Polyfills，而且缺乏服务端渲染。

AI会怎样改变前端开发——在遥远（或者可能并不遥远）的未来

除了库和框架，AI和机器学习会如何影响前端开发？这是很多人提出的问题，但是已经有少数公司率先提出了这个问题。他们使用了不同的技术，期望能颠覆一个经历了不同框架和库周期的领域。方法分为两种。

一种是旨在通过从线框图和Sketch文件生成初始代码或生成整个前端输出来帮助开发者。它帮助开发者将注意力放到更重要的开发部分，例如应用逻辑和构建特性。它加速了设计阶段和修改的迭代。这种公司包括从Airbnb ，它最近构建的AI可以将sketch文件转换成源码，到Uizard，它使用深度学习/ML(神经网络)来训练对图形界面快照然后将其翻译为一些源码。使用Uizard令人印象深刻的是；一个文本到GUI渲染器可以运行在多个平台如iOS， Android 和 基于Web的界面，而且算法迄今为止精确度达到了77%。

然后是微软的Ink to Code应用，也是一个对它的尝试，在Windows 商店提供了软件的免费下载。最后，Supernova，是一个创业公司，其使命就是建立一个工具来加快手机设计师和开发者的应用开发流程，Supernova Sutdio的macOS应用，可以将Sketch创建的手机app设计自动转换到原生UI代码，旨在弥补原型设计和前端开发之间的差距。

另一种是将AI更进一步，让机器来做整个前端的编码。BAYOU，是一个由军方和Google资助的Rice大学项目，它使用了一个深度学习工具，从根本上来说就像一个代码的搜索引擎。通过读取1500个Android应用的源码（约1亿行Java代码），BAYOU的神经网络现在是一个可以编写其他软件的AI。

那么Web-Assembly在这里又处于何种位置？将来的一种可能

相比解释型语言JS，WebAssembly能以二进制形式直接运行在所有的浏览器上。一直以来这个术语（WebAssembly）在开发者社区广为流传，相信不久的将来，作为JavaScript的补充，它将得到极大地推广。

为什么这么说呢？因为WebAssembly减少了TTI（底层交互时间）从而在性能上使web应用变的更快，同时前端开发所选择的语言也更加多样化。这样开发人员就可以通过他们最擅长的语言来构建部分应用，同时提升运行速度，剩余部分则通过JS实现。

总结

我们知道，在今天的前端世界里，React、Vue和Angular三大框架一直居于主导地位，尤以Vue最被看好。然而，了解了这些框架的前世今生，对于一个全新的框架--其不仅在速度和性能上拥有出色的表现，同时还解决了市面上所有框架所面临的问题，我们也不会感到很惊讶。

然而，我认为今天所出现的各种技术都将融为一体，在这里将用到web组件、WebAssembly及AI技术--为应用开发提供端到端解决方案，其目的就是搭建出一个开发人员易上手且包含完整解决方案的框架。

为了更好地利用与共享应用的核心部分，他们将通过web组件的形式来构建。

WebAssembly将在应用中起到加速的作用，为应用提供更快、更好地性能表现。

不管是在起始阶段的编码、减少不必要的样本还是在代码质量的最终审核上，AI技术都将加快整体的开发进程。

难道上面的答案就是我要讲的“具体”框架？或者只是web组件？或者是其他的技术叠加？或许将来不只是依赖于某种技术，而是更多地来自于我们的实践方法？比如通过 micro front ends，不同的团队工作于不同的栈中。难道我们在这个技术领域所选择的“组织化架构”就是答案？请在下面的评论写出你的想法，让我知道！