2017 年前端工具趋势

╰半橙微兮° 2022-09-29 06:12 152阅读 0赞

你有两年以上的前端开发经验吗？你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗？你的 JavaScript 知识是否融汇贯通，你是否喜欢使用 Gulp ， npm 和 jQuery ？如果是这样，根据 [Ashley Nolan 的前端问卷调查][Ashley Nolan]，你是一个典型的前端开发工程师。

## 谎言，该死的谎言，统计数字和调查问卷 ##

> 愚人码头注：谎言，该死的谎言，统计数字（英文：Lies, damned lies, and statistics），是一句著名的西方谚语。主要描述数字的说服能力，特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告，以及人们倾向于贬低那些不支持其立场的统计结论。 [维基百科][Link 1]

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时，本次问卷调查收到了5,254份答复，这是比大多数民意调查更具有样本价值。但是，调研结果是否代表真相还是应该抱审慎态度。。。

### 全球性的统计结果 ###

这次问卷调查是全球性的，但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。

### 开发人员知识 ###

本次问卷调查呼吁经验丰富的开发人员对调研问题有深刻理解并且有时间，有兴趣去完成本次调查。

83％ 的受访者有两年或两年以上的前端技术经验，只有 5％ 的受访者不到一年前端经验：

![1488322795q1.jpg][]

具备较低前端技能的开发人员不太可能完成本次问卷调查，因此结果可能会相应偏离。

### 意见和偏见 ###

受访者被要求判断自己的水平。有些人可能比较谦虚，有些有选择困难综合症。有些人可能高估了自己的水平，因为他们可能是一群新手程序员团队中唯一前端开发人员。自我偏见的偏差可以被平均，但没有办法证明。

### 过去的行为不代表未来的趋势 ###

调查结果突显了开发人员已经使用的工具。这并不意味着这些工具是有用的，可以节省时间或将在将来的项目中使用。

## CSS ##

63％的开发人员将他们自己的CSS知识评为高级或专家水平：

![1488323057q22.png][]

虽然 CSS 是一个看似简单的 属性 和 值 的键值对集合，但是 CSS 是众所周知地难以掌握。 CSS3引入了一系列新效果，  
并且越来越难以掌握所有的知道。例如，我对新的 [CSS网格模块][CSS] 知之甚少，还有当开发 [Flexbox 布局][Flexbox]时常常需要翻阅手册（或随机尝试性的使用各种属性和值）！

> 愚人码头注：推荐阅读 [CSS3 Flexbox属性可视化指南 ][CSS3 Flexbox]

10％的受访者承认不到一年的开发经验，却声称已经掌握高级的CSS知识！我怀疑他们很快就会意识到，懂的越多，意味着不懂的也就越多！

### CSS 预处理器 ###

超过 63％ 的受访者使用 [Sass][] – 无可争议的预处理器冠军。8％的受访者还使用 [PostCSS][]，虽然它通常与其他预处理器结合使用以提供有用的功能 – 如[AutoPrefixer][]（ 65％ 的受访者采用）。

近 14％ 的受访者不使用预处理器，而更喜欢使用原始 CSS 代码。当你认为它是最简单的（和最好的）开始前端开发的方式时，这个比例似乎有点低。如果 86％ 的开发人员使用 CSS 预处理器，我预计[平均每个网站的CSS文件请求应该低于7.2个][CSS_7.2]。

近 70％ 的受访者尝试过 [Less][] ，19％ 的受访者尝试了 [Stylus][] 。80％ 从未听说过 [Rework][]。

### CSS 命名方案 ###

46％ 的受访开发人员使用命名方案，但是对于那些将 CSS 水平自我评价为高级或专家级别的人来说，这一比例上升到 57％ 。

最受欢迎的选择是 [BEM][] ，占40％，其次是 [CSS模块（CSS Modules）][CSS_CSS Modules]（16％），[OOCSS][]（15％）和 [SMACSS][]（13％）。

### 其它CSS工具 ###

当前 39％ 的项目中正在使用 [Modernizr][] 。这似乎令人惊讶，因为它的主要用途是兼容大部分已经被弃用的旧版本IE。（[Microsoft已于2016年1月停止支持IE10及以下版本。][Microsoft_2016_1_IE10]）

14％ 的受访者使用 [Stylelint][] 来检查CSS有效性。这似乎很低，但最流行的IDE和编辑器有一些类似的 CSS 检查，所以可能没有必要。

23％ 的开发人员不使用任何CSS工具或命名方案。

## JavaScript ##

如果你认为 CSS 的各种工具已经很混乱了，欢迎来到迷人的 JavaScript 世界！

JavaScript 开发人员比较谦虚，51％ 的受访者认为自己的JavaScript 知识达到了高级或专家水平：

![1488323201q101.png][]

### 库和框架 ###

尽管有相关性的质疑，超过 99％ 的开发人员在某些时候使用 [jQuery][]，并且 31％ 的受访者认为对很多项目来说 jQuery 是必要的。70％ 的受访者在当前项目中继续使用 jQuery ，这与 [W3Techs 观察到的数据相似][W3Techs]：

![1488323311q13.jpg][]

框架情况更令人困惑：

*  已有 38％ 的现有项目采用了[React][]。然而，只有 29％ 的开发人员使用它感到舒适，18％ 的受访者认为它是必要的。只有0.1%的网站被发现正在使用React，但请记住，调查结果是从前端开发人员收集的 – 而不是所有的Web开发人员。
 *  有 25% 的项目使用 [Angular][] 1，虽然只有8%的人认为它是不可替代。Angular 2则相对受冷落，只比8%多一点。只有3%的人在多数项目中使用它。
 *  [Vue.js][] 已经被 10％ 的项目采用，但少于 6％ 的开发人员对框架感到舒适，3％ 认为它是必要的。

对于明年的问卷调查，这个问题可能有用：“你是否放弃了一个框架或者在项目中切换框架？

尽管有大量的JavaScript专家，只有 21％ 的人认为框架不是必须的，并乐意编写原生代码。这是一个令人担忧的统计数据吗？30％ 的开发人员认为他们的框架抽象技能集可以满足他们的全部需求？

### 任务执行器和模块打包工具 ###

[Gulp][]是最大的赢家，接近 44％ 的开发人员在使用。然而，更简单的 [npm scripts][] 脚本在2016年增加了 23％ ，达到 26％ 。

> 愚人码头注：可以查看两篇文章：[为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts][Gulp _ Grunt _ npm Scripts] 和 [为什么使用 npm Scripts 构建项目][npm Scripts]

[Grunt][] 已经失去了优势，跌落到 12％。另外，9％ 的受访者选择了不使用任务运行器。

那些使用模块打包工具在2016年增加了 20％，达到 68％ 。 [Webpack][] 是最为流行，占 31％ ，[Browserify][] 为 11％ ，[RequireJS][] 为 8％ 。

我很惊讶，“其他”模块打包工具占不到 4％，当有几个任务运行器插件可以更简单的管理依赖关系，例如 [gulp-deporder][] 。也许因为每个开发人员都在使用JavaScript 转译器…

### ES6到ES5的转译器 （transpilers） ###

62％ 的开发人员正在使用诸如 [Babel][] 之类的工具，将简洁的 ES6 代码转换为旧版浏览器支持的 ES5 代码。  
31％ 的人听说过可能性，但没有使用工具，和 7％ 从未听说过这个词。

这个数字似乎相当高。Internet Explorer 和老的应用程序不支持最新的 JavaScript 语法，但是如果您要编写 ES6 代码，为什么还要支持他们呢？  
如果你确实需要支持 IE11 及以下版本，编写 ES5 代码不是更容易吗？

### 其他JavaScript工具 ###

41％的开发人员使用 [ESLint][] ， 19％ 使用 [JSLint][] 和 14％ 使用 [JSHint][] 来检查他们的代码的有效性 – 例如缺少括号，省略分号，格式缩进等。

23％的受访者不使用代码检查工具 – 虽然，也有可能他们依靠他们的文本编辑器或 IDE 来发现最严重的语法错误。

使用测试工具的用户在一年中增长了 12％ ，达到了 52％ 。  
历史上，JavaScript 测试一直是一个挑战。  
诸如测试驱动开发（TDD）等技术可以捕获逻辑问题，但不能解决异步事件遇到的问题，例如当 UI 在特定浏览器中执行某种意外操作时。  
幸运的是，行为驱动开发（BDD）的可能性已经出现，以检查在真实的浏览器中的活动，并使前端测试更具可行性。 最流行的系统有：

*  [Mocha][] – TDD/BDD (23%)
 *  [Jasmine][] – BDD (17%)
 *  [QUnit][] – TDD (4%)
 *  [Jest][] – TDD/BDD (3%)
 *  [Ava][] – TDD/BDD (2%)

最后，有 94% 的受访者使用 [npm][] – Node.js 的包管理器。出乎意料，有 32% 曾经使用过 [TypeScript][] 。

## 你在2017年应该使用什么？ ##

关于 CSS，Sass 的知识，PostCSS 和 BEM 很明显是必要的。也就是说，开发的多样性很广。我建议你研究一些预处理器和命名方案，以便了解每个工具可以实现什么 – 即使是你选择不使用它们。

JavaScript 方面的工具不太好说。有一些明显的特征和趋势：

*  [Node.js][] 和 npm 将变得至关重要，因为你采用的工具记得上都是 Node.js 和 npm 实现管理的。
 *  [Gulp][Gulp 1] 和/或 [Webpack][Webpack 1] 也值得尝试一下。
 *  了解ES6，即使您仍然在向后兼容的 ES5 项目上工作。

我从不羡慕那些尝试为新项目选用类库或框架的人。从调研结果来看，jQuery是明显是最受欢迎的。然而随着 IE 的消亡，jQuery 的跨浏览器支持变得没那么重要，并且许多功能已经和浏览器原生 API 和 CSS 重复。

你可以选择一个框架，如 React，因为它很受欢迎 – 但这并不代表它就适用于你的应用。即使 React 将最终被更好，更优秀的东西取代。

我的建议：从[众多框架中挑选某一个][Link 2]之前，先学习HTML，CSS，JavaScript 和浏览器开发的基础知识。无论 JavaScript 社区如何评价哪些工具集，这些知识将终生受用。也许有一天，你甚至会编写出一个高大上的工具，也成为各种框架中的一员。

感谢 Ashley Nolan 的[前端工具调查][Ashley Nolan]和结果分析。

英文原文：[https://www.sitepoint.com/front-end-tooling-trends-2017/][https_www.sitepoint.com_front-end-tooling-trends-2017]

转载：http://www.css88.com/archives/7175

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 3]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Ashley Nolan]: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
[Link 1]: https://zh.wikipedia.org/wiki/%E8%B0%8E%E8%A8%80%EF%BC%8C%E8%AF%A5%E6%AD%BB%E7%9A%84%E8%B0%8E%E8%A8%80%EF%BC%8C%E7%BB%9F%E8%AE%A1%E6%95%B0%E5%AD%97
[1488322795q1.jpg]: http://css88.b0.upaiyun.com/css88/2017/03/1488322795q1.jpg
[1488323057q22.png]: http://css88.b0.upaiyun.com/css88/2017/03/1488323057q22.png
[CSS]: https://www.w3.org/TR/css-grid-1/
[Flexbox]: https://www.w3.org/TR/css-flexbox-1/
[CSS3 Flexbox]: http://www.css88.com/archives/5744
[Sass]: http://sass-lang.com/
[PostCSS]: http://postcss.org/
[AutoPrefixer]: https://github.com/postcss/autoprefixer
[CSS_7.2]: http://httparchive.org/trends.php?s=All&minlabel=Jan%201%202016&maxlabel=Dec%202%202016
[Less]: http://lesscss.org/
[Stylus]: http://stylus-lang.com/
[Rework]: https://github.com/reworkcss/rework
[BEM]: http://getbem.com/
[CSS_CSS Modules]: https://github.com/css-modules/css-modules
[OOCSS]: http://oocss.org/
[SMACSS]: https://smacss.com/
[Modernizr]: https://modernizr.com/
[Microsoft_2016_1_IE10]: https://www.microsoft.com/en-gb/windowsforbusiness/end-of-ie-support
[Stylelint]: https://github.com/stylelint
[1488323201q101.png]: http://css88.b0.upaiyun.com/css88/2017/03/1488323201q101.png
[jQuery]: https://jquery.com/
[W3Techs]: https://w3techs.com/technologies/overview/javascript_library/all
[1488323311q13.jpg]: http://css88.b0.upaiyun.com/css88/2017/03/1488323311q13.jpg
[React]: https://facebook.github.io/react/
[Angular]: https://angularjs.org/
[Vue.js]: https://vuejs.org/
[Gulp]: http://gulpjs.com/
[npm scripts]: https://docs.npmjs.com/misc/scripts
[Gulp _ Grunt _ npm Scripts]: http://www.css88.com/archives/7041
[npm Scripts]: http://www.css88.com/archives/7025
[Grunt]: http://gruntjs.com/
[Webpack]: https://webpack.github.io/
[Browserify]: http://browserify.org/
[RequireJS]: http://requirejs.org/
[gulp-deporder]: https://www.npmjs.com/package/gulp-deporder
[Babel]: https://babeljs.io/
[ESLint]: http://eslint.org/
[JSLint]: http://www.jslint.com/
[JSHint]: http://jshint.com/
[Mocha]: https://mochajs.org/
[Jasmine]: https://jasmine.github.io/
[QUnit]: https://qunitjs.com/
[Jest]: https://facebook.github.io/jest/
[Ava]: https://github.com/avajs/ava
[npm]: https://www.npmjs.com/
[TypeScript]: https://www.typescriptlang.org/
[Node.js]: https://nodejs.org/
[Gulp 1]: https://www.sitepoint.com/introduction-gulp-js/
[Webpack 1]: https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/
[Link 2]: https://dayssincelastjavascriptframework.com/
[https_www.sitepoint.com_front-end-tooling-trends-2017]: https://www.sitepoint.com/front-end-tooling-trends-2017/
[Link 3]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/26237cc6d3774ec2a76c59c7d9851c68.png