終極CGFinal · 打造精彩的設計網站
當前位置: 主頁 > 概念作品 > 來試試吧!5個前端工程師必備的最佳開發工具吹奏

來試試吧!5個前端工程師必備的最佳開發工具吹奏

發布時間:2016-09-13 00:25內容來源:終極CGFinal 點擊:

過去幾年一直不斷地提到 Web 應用新世代的成長,這些 App 內容變得越來越豐富,帶動了前端整體的復雜度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是創造新 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個最佳開發工具


 

我們同樣也用它暫時解決在 Vagrant 中自動監測與保護的 rsync(Unix 下的一款應用軟體)一些效能問題,這是近來才被引進的方法。Grunt 提供很廣泛的外掛程式,從瀏覽檔案夾、診斷訊息、編譯程式到最簡化你的程式碼。它的句法是一致且容易學習的,可以讓瑣碎的工作變得簡單。

LiveReload

目前最好的!前端工程師必備的5個最佳開發工具

你有沒有算過,每天平均有多少次會按鍵盤上的重新整理鍵呢?非常多,對吧!

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個最佳開發工具


 

目前最好的!前端工程師必備的5個最佳開發工具


 

目前最好的!前端工程師必備的5個最佳開發工具


 

Jasmine 的句法選擇是預設的,并以官方的文檔作說明,非官方的擴充功能增進了 Jasmine 非同步特色,提供和 Mocha 一樣的功能;ㄒ恍⿻r間,來了解這個范例以及觀察 Mocha 的語法有多清楚。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
新浪斗地主官网 街机金蟾捕鱼游戏 pk10冠军四码规律破解 幸运农场开奖结果查询 为什么会有柬埔寨美女捕鱼 广东麻将中马顺序 填坑游戏有没有挂 欢乐捕鱼人赢话费安卓 中国传统麻将4399小游戏 e球彩总进球数 nba转播权