前端 JavaScript 的未来如何？ 译文

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

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

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

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

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

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

　　lonic/Stencil

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

　　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%。

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

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

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

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

　　总结

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

     文章出处:The Future of JavaScript in the Front End World