5个前端工程师必备的最佳开发工具分享

煜未然

煜未然

2016-02-16 22:27

图老师小编精心整理的5个前端工程师必备的最佳开发工具分享希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

过去几年一直不断地提到 Web 应用新世代的成长,这些 App 内容变得越来越丰富,带动了前端整体的复杂度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架,增强了所有 Web 的功能;同时,Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多,而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战,开发者已经创造更多工具使整体开发过程更加流畅,从测试框架到分析工具,这些成熟又有用的工具把最棒的体验带给我们的使用者。

就如同刚刚所提到的,我们喜欢能够帮助我们提供最棒品质的软体,同时也能使得生活变得更加简单方便,本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架:

Chrome dev tools

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

这是目前最好的前端开发工具!

Chrome 自从它诞生后,就已经大量投资在开发者工具软体,至今仍不断的在改善它,每一个发布会(每六周一次)都会伴随着它自己的全新开发功能。

这个开发工具是一个完整的多元软体套件,你可以实时编辑 DOM(HTML)/CSS,当进行一个深入的效能分析时,可以一步步找出 Javascript 的错误,甚至能增加终端机指令。感谢有它,近来解决了回报效能的问题。

DOM/CSS 编辑器是非常强大的工具,能即时回馈给你的团队,能够在 UI/UX 的新功能上很快地执行迴圈。

官方网站和 Google Developers YouTube 管道都是资讯的金矿,比如说,命令列的 API(应用程式介面,Application Programming Interface)包含非常多有用的指令,比如说从控制台功能中的复制指令,复制到剪贴簿上。

许多详细的使用手册同样在 HTML5 Rocks 里都能参考。如果你的好奇心很强,并且想了解浏览器究竟是如何运作的,那么你会在这些教学里学到很多东西,帮助你全面掌控开发周期。

除了上述的之外,最重要的是,透过网络工具你能知道现在在介面之下到底发生了什么事情,以及优化你的下载速度,时间轴会以更深入的角度来告诉你浏览器做了哪些事情。

如果你跟我们一样充满好奇心,你可以学到更多关于浏览器、Web 是如何运作的,如此一来,你就可以反过来完整的操控应用程式的生命周期。

以我个人观点来说,如果它们依照现在的路线持续发展下去,肯定会变成 Web 供应开发商最终的IDE(Integrated Developer Environment),最强大的放入整合发展空间。

Grunt

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

说到工作自动化,Grunt 是我们的首选。

它是 Javascript 跑任务的专家,针对一般的任务提供大量整合性的外挂程式,扩展程度仍很高,提供很多选项让你能够自由的写任何符合需求的工作内容。最棒的是,你能够将这些任务结合创造更强大而复杂的工作。Grunt 的范畴超出仅仅是自动化前端相关的工作,举例来说,当我们在开发时,我们利用它来测试 PHP:

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网
 
5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网
 
5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

我们同样也用它暂时解决在 Vagrant 中自动监测与保护的 rsync(Unix 下的一款应用软体)一些效能问题,这是近来才被引进的方法。Grunt 提供很广泛的外挂程式,从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。它的句法是一致且容易学习的,可以让琐碎的工作变得简单。

LiveReload

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

你有没有算过,每天平均有多少次会按键盘上的重新整理键呢?非常多,对吧!

LiveReload 是一个简单的 Web 协议,不论档案在哪时候被修改而触发事件,客户都能自行处理事情;客户端和伺服器端都能进入各种不同的实作。

说到 Chrome 的扩充功能,Chrome 商店就是一个很强大的例子。去体验看看吧,你一定能发现很多让生活变得更简单的东西。

以下几个是我们最喜欢的:

1. WhatFont:你可以透过它知道在任何网站上内容的字型是什么,当你在找最适合的文字编排时,或是重新调整美化你的字型风格时,它是非常好用的小工具。

2. Page ruler:另一个很好用的应用程式,主要是因为任何前端开发者,都对像素要求百分之百的完美。

3. Proxy SwitchySharp:说到找出在地化资讯错误最佳的工具就非它莫属,在地化资讯是哪些?比如说电话号码、预设货币等等。

想知道更多吗?在 Chrome App 中你能得到更多资讯!

Mocha/Chai/Sinon

测试测试,测试到你很想吐吗?这是很常发生的,因为需要一大堆引导指令,而且在前端开发的初始阶段没有设​​计好测试,那么后面的工作往往会变得非常困难。

很幸运的是,我们现在有很棒的测试架构,就和你已经在使用的其他语言一样,非常的有用和强大。两个主要的框架是 Jasmine 和 Mocha。

过去我两个都有使用过,最终选择了后者,Mocha。它最主要的优势在于,当你必须和非同步的编码一同运作的时候,在 Javascript 的发展中它最普遍使用的方法。比如说,举一个非常简单的例子,这里有两个不同的规格,一个由 Jasmine 写,另一个则是 Mocha/Chai:

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网
 
5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网
 
5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网
 
5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

Jasmine 的句法选择是预设的,并以官方的文档作说明,非官方的扩充功能增进了 Jasmine 非同步特色,提供和 Mocha 一样的功能。花一些时间,来了解这个范例以及观察 Mocha 的语法有多清楚。

不像 Jasmine,Mocha 只提供行为的测试架构,更多关于 BDD(Behavior-driven development),而不是假物件(mock,主要存在的目的是协助单元测试程式可以顺利进行)或是断言(assertion,放在程式中的一阶逻辑,如果一个结果为真或为假的逻辑判断式)架构,因为它整合专用架构非常棒,就像是 Chai 和 Sinon,几乎没什么不好的地方。Sinon 有完整的功能来 mock 假物件和 stub 假物件(用途和 mock 很接近)。

举例来说,你可以如何评估的方法,一直以来都使用 Sinon 的间谍类型(撷取自很杰出的文档):

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

Chai 的功能是在断言这方面是非常杰出的,以和平常的语言非常相似的语法,举例来说你可以看到以下的程式码,就知道它很清楚简单:

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

Karma

5个前端工程师必备的最佳开发工具分享,PS教程,图老师教程网

最后一个是 Karma,Karma(一个测试程式是否符合需求的测试工具)是 Javascript 的程式测试工具,由 AngularJS 的团队写的,现在你可以徜徉在 Mocha、Chai 和 Sinon 中写测试程式,何不同时用它们持续地测试、跑程式,给你实时的回馈呢?

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

Karma 可以让你从你的工作站到持续整合制造(CI,Continuous Integration)执行你的测试,它能同时发布到多个浏览器(Chrome、Firefox、IE 和 PhantomJS 等等),除此之外,还能跑你的测试来挑战它们,给予你对你的程式码最大的信心。

当然,我们甚至还没有提到任何文字编辑器,SublimeText 和 Vim 我们都有用,它们是我们生产力最最重要的基础。

然而在做开发的过程中,最真实的快乐就是你第一次写的程式进行监测然后得到结果,这是一种实时的成就感,然后接下来你就能将它们发布到浏览器上。

现在你已经非常有能力成为前端的忍者,在你的开发旅途中已经准备好要迎接每个挑战了。但如果您刚好是一名前端工程师,也欢迎您在下面和大家分享喜欢的工具。

展开更多 50%)
分享

猜你喜欢

5个前端工程师必备的最佳开发工具分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
5个前端工程师必备的最佳开发工具分享

5个前端工程师必备的最佳开发工具

设计创意
5个前端工程师必备的最佳开发工具

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

HP工程师经验分享(5)

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
HP工程师经验分享(5)

20个精心挑选新鲜好用的前端开发工具

设计创意
20个精心挑选新鲜好用的前端开发工具

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

WEB标准,Web前端工程师定位浅谈

Web开发
WEB标准,Web前端工程师定位浅谈

HP工程师经验分享(42)

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
HP工程师经验分享(42)

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

产品经理解读软件产品扁平化设计杂谈

产品经理解读软件产品扁平化设计杂谈

9个最新的手机移动设备jQuery插件分享

9个最新的手机移动设备jQuery插件分享
下拉加载更多内容 ↓