来试试吧!5个前端工程师必备的最佳开发工具 - 优设网 - UISDC

来试试吧!5个前端工程师必备的最佳开发工具

2014/06/14 17254评论区

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

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

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

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

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

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

Chrome dev tools

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

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

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个最佳开发工具

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

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

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

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

LiveReload

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

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

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

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

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

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

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

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

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

Mocha/Chai/Sinon

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

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

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

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

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

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

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

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

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

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

Karma

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

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

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

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

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

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

原文地址:blog.mention
译文地址:techorange

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量71万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/great-front-end-developer-tools

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 优设专访 交互设计师 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里