2017年前端开发工具趋势

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

01谎言,该死的谎言,统计数字和调查问卷

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

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

全球性的统计结果

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

开发人员知识

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

83% 的受访者有两年或两年以上的前端技术经验,只有 5% 的受访者不到一年前端经验:

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

意见和偏见

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

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

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

02CSS

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

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

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

CSS 预处理器

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

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

近 70% 的受访者尝试过 Less ,19% 的受访者尝试了 Stylus 。80% 从未听说过 Rework。

CSS 命名方案

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

最受欢迎的选择是 BEM ,占40%,其次是 CSS模块(CSS Modules)(16%),OOCSS(15%)和 SMACSS(13%)。

其它CSS工具

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

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

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

03JavaScript

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

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

库和框架

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

框架情况更令人困惑:

  • 已有 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% 。

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 。

04你在2017年应该使用什么?

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

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

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

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

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

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

【我有一个前端学习交流QQ群:328058344  如果你在学习前端的过程中遇到什么问题,欢迎来我的QQ群提问,群里每天还会更新一些学习资源。禁止闲聊,非喜勿进。】

时间: 2024-08-01 08:15:20

2017年前端开发工具趋势的相关文章

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

一个前端开发工具

最近一直在琢磨着做一个前端开发工具,自身需求如下: 1. 开源 2. 基于Jquery和bootstrap 3. 所见即所得 4. 良好的扩展性 5. WinForm程序 昨天搭了一个框架出来,发现比我想像的工作量还要大一些. 本来我个人的人生哲学是“知难而退”,可是又想想出来混了这么多年,用了人家多少代码,是该还的时候了,尽早的事儿. 所以下定决心,准备坚持一下. 没钱就不能干点活了,什么社会啊?

sublime+emmet前端开发工具

Sublime简直神一样的存在! 逗的了python,耍的了json,玩得起HTML,撩的了CSS.反正目前能用到几种代码的都能用它编辑. 上手容易,界面清晰,简洁方便,可扩展性强.eclipse,dw什么的启动起来实在慢.而且黑色背景很炫酷.还有各种惊喜随时等你去发现. 恩,说正事,今天开始接触D3.js,本来打算安装myeclipse+tomcat的(用不习惯DW这种半自动的前端开发工具,没开发过很复杂的网站,所以都是前端后台都在eclipse上做,虽然前端大部分都是找模板修改一下),突然意

便捷的前端开发工具

便捷的前端开发工具 说到工具?那是可是不得了的东西,它是人类文明进步的基石.人类,从石器时代发展到现代社会,也是工具,从石具到现代高科技的演变过程史!当然啦!我们现在互联网时代,前端开发,也是离不开工具的.使用工具是为了创造更好的工具,为了更高的效率.那作为前端爱好者或前端开发者们,你们知道哪些前端开发工具吗?享受了它们的便捷了吗?今天,我就给大家介绍几个开发者工具吧! CSS检查工具-CKStyle 之前的几篇文章给大家介绍有关CSS有关的知识点,想必有不少人已经遇到过有关CSS压缩或检查的问

常用前端开发工具合集

1.Firebug http://getfirebug.com/最流行的前端开发工具 2.HttpWatch http://www.httpwatch.com/集成在IE和Firefox上的监听HTTP和HTTPS的工具 3.Fiddler http://www.fiddler2.com/fiddler2/Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理 4.HttpFox https://addons.mozilla.org/eu/firefox/addon/664

五个值得尝试的前端开发工具

在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加. 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案.同时,Javascript的应用也越来越常广泛,而且它还能和Node.JS在后端协同工作,快速搭建易于扩展的网络应用.实际上,为了应对前端开发复杂度所带来的挑战,开发人员创建了许多工具来简化开发流程.从测试框架,到分析工具,前端开发工具已经非常成熟了,正是得益于这些有用的工具才

前端开发工具集合

收集的一些轻量级非常实用的前端开发小工具: CSS3相关 CSS3样式生成器:http://www.css88.com/tool/css3Preview/ CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/ CSS3动画制作工具Sencha Animator:http://www.sencha.com/products/animator/ 背景色alpha透明工具:http://www.linxz.de

WEB前端开发工具总结

前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. webstorm针对前端er. 他们的详细对比: http://www.36ria