IT干货|Javascript百家齐放，前端工程师们你可要抓紧了，2017年应该学习的框架

近期 Web 平台取得了两个重大的进展：Web Assembly 字节码技术和 Service Workers 技术。它们打开了快速、高效的 Web 应用程序的大门，并且有效的弥补了编译本地应用上的差距。Service Workers 是针对Progressive Web App 的启动技术，它为 Web 平台提供了通知上的支持，将来也会有更多的 API.

Javascript 不管你喜欢还是不喜欢，它依然被定义为了未来，所谓的“js一统江湖”。随着Web技术的普及，js作为标准化已经进入了任何的设备当中，这更有可能完成当年Java未完成的梦想，能够运行在所有机器上。

在Web早期也没有一个所谓的前端工程师岗位，大家都是软件工程师。2016年 Javascript的火热已经衍生出了一个健壮的包含了 technologies, frameworks, libraries 的生态系统。 开源大潮下，在github上聚集了一群js爱好者，各种框架各种libraries层出不穷，哪一部分我应该多花时间在上面，哪个tech stacks是公司目前最需要的，又哪一些是最具有增长潜力的，什么技术目前最流行？。 JS越来越像Fashion领域有了自己的流行趋势。那2017年到底会哪些会大热呢？

React

React是脸谱开发的一种JavaScript框架（框架也不十分准确），它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。

尽管Angular1 还是在github中保持着更多的starred，但是从图中可以看出angular的增长率已经放缓，然而React的增长开始上升

也许从NPM下载中可以更清楚地看到差别

也许从NPM下载中可以更清楚地看到差别

当然，这些数字并不代表这些框架的实际用户数量，而是必须考虑到Angular1没有得到任何好的更新，因为它将被Angular2取代。更不用说，React不是一个框架，可以与AngularJS一起使用，所以两者不是真正的有可比性。

 尽管如此，在过去一年左右，React已经明显从JavaScript社区比AngularJS获得更多的爱。

看看图表，你可能会想：2017年世界上发生了什么？ React的npm下载次数似乎突然呈指数增长，这也是当React的GitHub星星开始赶上AngularJS的星星时。

好吧，Redux发生了。它的创始人Dan Abramov宣布，在ReactEurope2015在7月，Redux的简单通量实施似乎已经说服许多开发人员是时候采用React。在Redux之前，React已经经历了自己的起伏，而人们试图找出如何最好地实现“Flux”架构。

因此，在2016年的JavaScript前端“框架”趋势方面，React＆Redux将作为最热的堆栈。诸如Netflix，Dropbox和Yahoo!等已建立的公司也在其技术堆栈中采用了React。

尽管如此，Facebook的Relay将可能是强大的竞争者Redux在2017年。

Angular 2

Google和Microsoft合作开发了Angular 2框架，或者更具体地，Angular 2将使用由Microsoft开发的TypeScript构建，以使JavaScript成为一种更易于管理的语言。大型（大多数是非技术的）企业可能有兴趣了解Angular 2，特别是那些使用Microsoft的.NET框架的。自去年以来，微软也开始大力推动.NET，因为它开源了很多东西，并努力使开发人员更容易使用它的工具。

随着重写入Angular2，团队希望修复Angular 1应用程序的所有缩放问题，并且性能迄今令人印象深刻。此外，除了能够进行渲染，Angular 2将支持Web组件，Google认为这是Web开发的未来。

Vuejs

 不如引自尤雨溪大神的原话，更能解释的清楚：

“写 Vue.js 的缘由是因为我在快速原型开发的过程中试用了多个框架都没法完美满足需求。我做的原型大部分专注在界面的交互细节，而且都不是传统的应用，Angular 和 Ember 这样的全功能框架太过繁重而且灵活性不够，Backbone 在界面层根本没有数据绑定，而 Knockout 和 Ractive 在多个组件的嵌套和组合上都做得不是很理想。我想要一个轻量的库来来提供最简洁的 MVVM 数据绑定，并且提供可复用、可嵌套的组件机制。之所以要做 MVVM 数据绑定，是因为它可以使得界面变得由数据和状态驱动，视图的状态逻辑可以和具体的 DOM 操作良好的解耦。”

在今年我们也看到了 Vue.js2.0 版本的发布，它借鉴了 Angular，React 和 Ember 中好的想法，并且比前两个框架更轻量、更快速。目前VueJs攻城略地，占据了不少市场份额。

这是2016年，如果你是一个JavaScript开发人员，没有使你的应用程序ES2015兼容，那你一年都在做什么？

下面的搭配已经成为2016年下半年的主流了

但是，等待 - 对于编写符合ES6的应用程序，与Babel vs TypeScript有什么关系？ Babel主要将ES6代码转换为ES5，而TypeScript是JavaScript的一个超集，它向JavaScript添加了可选的静态类型，并编译为纯JavaScript。

虽然两者是用不同的目的创建的，因此不能完全比较，Babel支持Flow out of box，它还为JavaScript添加了静态类型检查，并由Facebook开发。Babel是第一个帮助弥补ES5和ES6应用程序之间差距的人，而TypeScript对ES6的支持在“进步性”方面赶上了Babel。从GitHub星星看，Babel貌似更多一些，更不要说大多数React开发人员似乎使用Babel + Webpack组合。

或者，很多函数式编程概念已经进入主流编程，但最近，随着复杂网络应用的兴起，“函数式编程范式”本身已经获得了新的关注。

现在，前端Web开发似乎都是关于反应式编程和函数式编程。通常，React + Redux是面向对象编程舒适的最适合初学者的解决方案。换句话说，React只需要开发人员对UI采取功能性方法，而Redux鼓励使用功能性方法来处理数据。一切还是做OOP风格。

然而，对于那些想要进入全功能反应编程，但仍然想坚持JavaScript，那么RxJS是一个学习的技能。 RxJS是一个JavaScript的reactive extension，可以用来替代Flux架构，虽然它可能对小而简单的应用程序过分，但它是需要进行大量复杂的流处理的Web应用程序的强大基础。 Netflix使用RxJS，Angular2依赖于RxJS的依赖性并促进使用RxJS。由于RxJS也是由Microsoft开发的，它适用于TypeScript，并且可以期望Microsoft继续改进RxJS。

尽管如此，RxJS据说有一个相当陡峭的学习曲线，所以一些开发人员只是放弃了在JavaScript中完成FRP，并提取可编译为JavaScript的函数式编程语言。

现在很多软件需要在不同平台（即移动和桌面）上同步数据。许多服务作为网络应用程序开始之前，它们移植到支持桌面应用程序以获得更好的用户体验，特别是因为Web应用程序开发更快，更容易更新。更何况，用户可以立即试用网络应用，而无需安装任何内容，这样就省去了桌面程序的一个步骤。

但是这个领域有两个主要的玩家：Nw.js（以前的node-webkit）和Electron。

虽然Nw.js较早出来，并且被认为更成熟，但似乎Electron以指数速率增长，而nw.js以相当线性的速率增长。

自从React Native发布以来，人们一直在预测2016年将是React Native的一年，它是使用Web技术的移动开发的未来，考虑如何使用它来构建跨平台应用程序。如果你关于React Native应用程序的性能，你会发现许多的赞美，尤其是当它与HTML5混合应用程序相比，因为它运行得更顺利。那么，是2016年的React Native？在炒作和兴趣方面，它肯定符合预期：

在Facebook宣布他们开源GraphQL之后，它已经吸引了许多JavaScript开发者涌入，尤其是因为Facebook在开源项目方面已经成为JavaScript的苹果：

GraphQL旨在排序替换REST API，但考虑如何无处不在的REST API，这是不太可能的情况：

到截止发稿时，React VR 已经进入了Pre-release阶段.

虚拟现实（VR）和增强现实（AR）已经存在了一段时间，而最终该技术已经成熟到足以提供引人注目的体验。Facebook（Oculus Rift），Google（Daydream）和 Microsoft（Windows Holographic）都有欢迎第三方开发者加入的虚拟现实平台。然而 VR 穿戴设备依然面临着艰巨的挑战。

新手们如何面对外来的JS潮流。那我们先从JavaScript＆DOM基础知识开始

(大神们直接略过)

目前Javascript 程序设计以 ECMAScript 5.1 为标准，在尝试使用JavaScript进行作业之前，您应该对JavaScript基础知识有一个很好的掌握：

函数和纯函数：你可能认为你已经掌握了很多函数，但JavaScript有一些技巧，你需要学习纯函数来获得函数式编程。简单说，纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

闭包：了解JavaScript的函数作用域的行为。

回调：回调是另一个函数用于在有结果就绪时发出信号的函数。你说，“做你的工作，做完后给我打电话。

Promise：Promise是处理未来价值的一种方式。当函数返回一个promise时，你可以在promise解析之后使用.then（）方法来附加回调函数

Ajax和服务器API调用：应用程序如何与网络通信。您应该知道如何与API通信。

ES6：当前版本的JavaScript是ES2016（aka ES7），但很多开发人员还没有正确学习ES6。这是过去的时间。

Functional programming basics：Functional programming通过组合数学函数来生成程序，避免共享状态和可变数据。多年以来，我看到一个没有大量使用函数式编程的生产JavaScript应用程序。是时候掌握了。

Generators＆async / await：在我看来，最好的方式来写异步代码看起来同步。它有一个学习曲线，但一旦你学会了，代码将更容易阅读。

Node＆Express：NodeJs, 不懂的话还是自己去查查吧 Express是Node最流行的框架。

Lodash：一个伟大的，模块化的JavaScript实用程序带，包含功能编程的好东西。从lodash / fp导入data-last功能模块。这里有一个小推荐，来自悉尼的天天大神和Steve大神写的 You Dont Need 系列https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

Babel :Babel：用于编译ES6以在旧版浏览器上工作。

Webpack：2016年成为了主流，最流行的标准JavaScript Bundler, Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些预设，打包为合适的格式以供浏览器使用。

Rollup：这是一款号称下一代 ES2015 模块打包工具（bundler），通过 Tree-shaking 技术，抽取式打包代码。vue 用 rollup 打包后比原先 webpack 打包的好了不知道多少倍，至少代码可读可调试了。

ESLint：早期捕获语法错误和样式问题。在代码审查和TDD后，你可以做第三件事，以减少代码中的错误。

Tern.js：类型推理工具的标准JavaScript，目前我最喜欢的类型相关的JavaScript工具 Tern.js提供了大部分的好处，几乎没有使用静态类型系统的JS的成本。

Yarn：类似于npm，但比NPM快许多许多。

TypeScript ：JavaScript的静态类型。完全可选，除非你学习Angular 2.