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

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

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

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

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

总结

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

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

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

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

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

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