2017前端技术大盘点

（点击上方公众号，可快速关注）

作者：laizimo

https://github.com/laizimo/zimo-article/issues/48

前言

临近2017的尾声，总是希望来盘点一下这一年中前端的发展。这一年，有一些新技术和新东西产生，同时，前端技术也慢慢的趋于稳固，自成一套体系。

正文

我们何处说起？自然是离不开那三驾马车。

三驾马车

自从2015年，react的问世，开始了三驾马车时代的先河。同时，jQuery也逐渐让出了其霸主的地位。后续的，angular开始了大型的改版，似乎想要追逐react的步伐。两种完全不同思路的体现，在前端开发的技术栈中发光发亮。同时，Vue就像一匹黑马一样，一路披荆斩棘，快速地进步着。

因此，从2017年开始，3架马车可以说是并驾齐驱。似乎需要看些对比数据，来表示它们目前的现状。(来自国外的数据)

可以看到react的深紫色是最多的，表示用户对于react还是十分满意的。虽然，早前的React收到了协议的影响，但是，这似乎并不影响它在开发者心目当中的地位。另外，react如此受欢迎的另一个重要原因就应该是React Native了吧。今年以来，React Native一直以两周一次的小版本更迭周期，迅速发展着。或许，2018年将会迎来最重大的正式版本1.0。(这个还是值得期待的。)

对于大多数开发者而言，学习了React的时候，对于它们学习React Native是有直接性质的帮助的，所以一般的国外开发者不会拒绝学习React这个框架的。

介绍完，React的情况，我们或许可以回望一下Angular的情况吧。

Angular可以说是一个最早问世的MVVM的框架。2009年，angular像一枚重磅炸弹一样，震撼了前端的开发者们。当时，W3C似乎还未推出正式的Web Component标准。React和Vue也还在襁褓之中安眠。可想而知，之后的几年Angular一直影响着后续前端的发展。但是，Angular有着许许多多的问题，也使得它在后续的框架之争中，处于下风。2016年9月正式推出的angular2，将angular引领向了另一种形式——以HTML为中心的框架。一套完整的体现，其中加入了TypeScript+RxJS等组合，可想而知，一套内容的学习成本相当之高，与React以JS为中心的思想完全不同。不过似乎这一次Google将框架的定位目标换成了企业，国内外在使用这套框架的往往是银行、证券类企业。不过，它的发展还是被看好的，毕竟它的背后可都是一群Google的顶尖开发工程师呢！！

最后，我们来了解一下三驾马车中的黑马——Vue。

从第一张图中，虽然React一直处于领导地位，但是，Vue2的使用，也将于其他两个框架持平快了。毕竟，在国内的前端环境中，Vue可以说是非常受欢迎的。(据说印度开发前端，会用Angular，中国人开发前端，会用Vue)不得不说的是，Vue与Weex的结合，虽然体验不及RN，但是有着阿里的技术支持，也将有希望突破吧。

PWA

如果在国外，你今年听到的热词一定会有PWA这个东西。前不久，Safari已经开始支持PWA了，那么也就意味着PWA的时代不会太远了。当然，国内实践PWA的公司也不占少数，例如饿了么、阿里等。从去年开始，对其有所耳闻，到今年Google开发者大会上的现场演示，相信更多的开发者对于这门技术的狂热。对于国内开发者而言，唯一不好的优势应该就是文档了。因为目前来说，大部分的文档都是以英文的形式存在于GitHub或者国外书籍中的。翻译过来的书，也不会这么快的速度问世，所以目前研究PWA的中文资料少之又少。

不过相信，它的发展在之后的一两年的是强而有力的。

国内的小程序

今年，在国内会被称为“小程序年”。从1月份开始，微信正式将公测了小程序。继而在7月份开始，支付宝也推出了相应的小程序。在国内，这样子的重大消息是不容忽视的。两大巨头之争，推动的是无与伦比的流量红利。基于小程序的开发，也将成为国内的前端的一大重点。将原用的整体化的内容，逐步分割成一个个小的模块，将至放入到微信这个大环境中去分享，最后起到一个引流的效果。回到技术的成面，小程序或许会有着与PWA一样的思想，将之前在移动端难以为继的Web端，放入到自家应用中，来确保它的长久与稳定。更多的是说，这两者起到了异曲同工的效果。同样的，这项技术，将在2018年持续发展下去，同时，也会有更多的前端投入到这项开发中去。

styled-components

这项技术，也是从上半年开始有所耳闻的。主要是作为react库的衍生物的形式出现的。它将css部分的代码以js的形式展现在代码中，那么之后只需要开发js就可以完成整个应用的开发了。同时，它还有一个好处，它的样式是基于组件的，所以可以做到复用，同时，往往js的变量在css中去使用时，是一个令人头疼的问题。而styled-components很好的解决了这个问题，因为它本身就是在组件中开发样式，js的变量依然可以被使用在css的部分代码中。这项技术也是可期的，因为越来越多的人在自己的react项目中开始了这项技术的尝试。

Rollup

这是啥？没错，又有一个模块打包工具来了。或许，大家熟知的更多的是webpack这个模块打包工具。今年的4月份，React做了一个大动作——在React的主分支上合并了一个PR，将当时的构建工具换成了Rollup。可想而知，这个东西将会是多么的重要。好奇的是，它与其他的不同之处吧！它是一款基于ES2015模块进行打包的打包器。在过去的打包工具(包括webpack在内)中，都是基于CommonJS的规范去进行模块的打包的，所以，过去很多库的前面总是会有一大堆webpack等自家的逻辑填充在开头。Rollup不同，他是后天生的，出生的基准点就表明它的高度将不限于此。但是，相对于巨头webpack来说，它或许在今年并未体现出它的优势，但是相信它会厚积薄发的。

建议：在开发应用时，使用webpack，在开发库时，可以考虑Rollup。

GraphQL

这个东西，或许在国内鲜有闻之。但是，它仍是一项不错的技术，同时在调查中，也体现出不俗的潜力，如图：

它是有Facebook开发的一款API查询语言，或将替代Rest在后端的地位。虽然，目前来说，其性能并不是特别的优秀，也会bug不断。但是，2018年或将是GraphQL的一年。那么，和前端又有什么关系呢？别忘了，我们手里还有一个利器NodeJS呢！能够用好它，对于你开发nodeJS，或许使用便利。

TypeScript

这一项由微软老大开发的语言，处处在弥补着JavaScript的缺陷。一出生，就打着“取代JavaScript”的旗号，发展的速度也是惊人的。当然了，W3C也在努力的推进着JavaScript的进步，之后的几年，应该会是着两门语言并驾齐驱的发展吧。因为开发人口众多，不可能走到谁取代谁的地步。

最后，贴出一张Stackoverflow上面的一项数据统计表吧！

图片来源：I just asked 23,000 developers what they think of JavaScript. Here’s what I learned.

总结

我们盘点了一年以来前端的发展，有着新技术不断被推出着，相信前端会发展的越来越好。因为在JSConf大会上，有人发言说，之后将会发展成“前端+云端”的组合。那么，也并不存在全栈类开发的说法了。前端开发的小伙伴加油吧！！我们共勉

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

淘口令：复制以下红色内容，再打开手淘即可购买

范品社，使用￥极客T恤￥抢先预览（长按复制整段文案，打开手机淘宝即可进入活动内容）