前端工程師開發工具推薦

前端工程師開發工具推薦

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

過去幾年一直不斷地提到Web 應用新世代的成長,這些App 內容變得越來越豐富,帶動了前端整體的複雜度大幅增加,像是  Backbone(藉由提供模型)、AngularJS  和  EmberJS  框架都是創造新App非常好的框架,增強了所有Web的功能;同時,Web程式語言Javascript在普及度和成熟度上已經進步了非常多,而且還能和  NodeJS  在後端協同工作。
但為了能持續面對複雜度的新挑戰,開發者已經創造更多工具使整體開發過程更加流暢,從測試框架到分析工具,這些成熟又有用的工具把最棒的體驗帶給我們的使用者。
就如同剛剛所提到的,我們喜歡能夠幫助我們提供最棒品質的軟體,同時也能使得生活變得更加簡單方便,本文要分享給大家最棒的工具和框架:

1.Chrome dev tools


這是目前最好的前端開發工具!
Chrome 自從它誕生後,就已經大量投資在開發者工具軟體,至今仍不斷的在改善它,每一個發布會(每六週一次)都會伴隨著它自己的全新開發功能。
這個開發工具是一個完整的多元軟體套件,你可以實時編輯DOM(HTML)/CSS,當進行一個深入的效能分析時,可以一步步找出Javascript的錯誤,甚至能增加終端機指令。感謝有它,近來解決了回報效能的問題。
DOM/CSS 編輯器是非常強大的工具,能即時回饋給你的團隊,能夠在UI/UX 的新功能上很快地執行迴圈。
官方網站和Google Developers YouTube管道都是資訊的金礦,比如說,命令列的API(應用程式介面,Application Programming Interface)包含非常多有用的指令,比如說從控制台功能中的複制指令,複製到剪貼簿上。
許多詳細的使用手冊同樣在 HTML5 Rocks 裡都能參考。如果你的好奇心很強,並且想了解瀏覽器究竟是如何運作的,那麼你會在這些教學裡學到很多東西,幫助你全面掌控開發週期。
除了上述的之外,最重要的是,透過網絡工具你能知道現在在介面之下到底發生了什麼事情,以及優化你的下載速度,時間軸會以更深入的角度來告訴你瀏覽器做了哪些事情。
如果你跟我們一樣充滿好奇心,你可以學到更多關於瀏覽器、Web 是如何運作的,如此一來,你就可以反過來完整的操控應用程式的生命週期。
以我個人觀點來說,如果它們依照現在的路線持續發展下去,肯定會變成Web供應開發商最終的IDE(Integrated Developer Environment),最強大的放入整合發展空間。

2. Grunt 

說到工作自動化,Grunt 是我們的首選。
它是Javascript 跑任務的專家,針對一般的任務提供大量整合性的外掛程式,擴展程度仍很高,提供很多選項讓你能夠自由的寫任何符合需求的工作內容。最棒的是,你能夠將這些任務結合創造更強大而復雜的工作,Grunt 的範疇超出僅僅是自動化前端相關的工作,舉例來說,當我們在開發時,我們利用它來測試PHP:

 terminal = require ( 'color-terminal' )
log = ( error , stdout , stderr , cb ) ->
 if error
 terminal . color ( 'red' ). write stdout
 else
 terminal . color ( 'green' ). write stdout
 cb ()
module . exports = ( grunt ) ->
 grunt . loadNpmTasks 'grunt-contrib-watch'
 grunt . loadNpmTasks 'grunt-shell'
 grunt . initConfig
 testFilepath : null
 watch :
 php :
 options :
 event : 'changed'
 spawn : false
 files : [
 'foo/bar/**/*.php'
 'foo/bar/**/*Test.php'
 ]
 tasks : 'shell:phpunit'
 shell :
 phpunit :
 options :
 callback : log
 command : 'echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>'
 grunt . event . on 'watch' , ( action , filepath , ext ) ->
 regex = new RegExp ( "foo/bar/([a-z0-9]+)/([a-z0-9/]+)" , "i" )
 if filepath . match regex
 if filepath . indexOf ( 'Test' ) is - 1
 testFilepath = filepath . replace regex , "foo/bar/$1/Tests/$2Test"
 else
 testFilepath = filepath
 grunt . config 'testFilepath' , testFilepath

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

3.LiveReload

你有沒有算過,每天平均有多少次會按鍵盤上的重新整理鍵呢?非常多,對吧!
LiveReload 是一個簡單的 Web協議,不論檔案在哪時候被修改而觸發事件,客戶都能自行處理事情;客戶端和伺服器端都能進入各種不同的實作。
說到Chrome 的擴充功能,Chrome 商店就是一個很強大的例子。去體驗看看吧,你一定能發現很多讓生活變得更簡單的東西。
以下幾個是我們最喜歡的:

1. WhatFont:你可以透過它知道在任何網站上內容的字型是什麼,當你在找最適合的文字編排時,或是重新調整美化你的字型風格時,它是非常好用的小工具。
2. Page ruler:另一個很好用的應用程式,主要是因為任何前端開發者,都對像素要求百分之百的完美。
3. Proxy SwitchySharp:說到找出在地化資訊錯誤最佳的工具就非它莫屬,在地化資訊是哪些?比如說電話號碼、預設貨幣等等。

想知道更多嗎?在 Chrome App 中你能得到更多資訊!

4.Mocha/Chai/Sinon

測試測試,測試到你很想吐嗎?這是很常發生的,因為需要一大堆引導指令,而且在前端開發的初始階段沒有設計好測試,那麼後面的工作往往會變得非常困難。
很幸運的是,我們現在有很棒的測試架構,就和你已經在使用的其他語言一樣,非常的有用和強大。兩個主要的框架是 Jasmine 和 Mocha。
過去我兩個都有使用過,最終選擇了後者,Mocha。它最主要的優勢在於,當你必須和非同步的編碼一同運作的時候,在Javascript 的發展中它最普遍使用的方法。比如說,舉一個非常簡單的例子:

 terminal = require ( 'color-terminal' )
Q = require ( 'q' );
var AsyncProcess = ( function () {
    function AsyncProcess () {}
    AsyncProcess . prototype . process = function () {
        var deferred ;
        deferred = Q . defer ();
        setTimeout (( function () {
            deferred . resolve ( 42 );
        }), 100 );
        return deferred . promise ;
    };
    return AsyncProcess ;
})();
exports . AsyncProcess = AsyncProcess ;

這裡有兩個不同的規格,一個由Jasmine寫,另一個則是Mocha/ Chai:

 terminal = require ( 'color-terminal' )
AsyncProcess = require ( './async-process' ). AsyncProcess
describe ( 'AsyncProcess' , function () {
    var asyncProcess ;
    beforeEach ( function () {
        asyncProcess = new AsyncProcess ();
    });
    it ( 'should process 42' , function () {
        var done = false ;
        var processed = null ;
        deferred = asyncProcess . process ();
        deferred . then ( function ( result ) {
            done = true ;
            processed = result ;
        });
        waitsFor ( function () {
            return done ;
        }, "the async process to complete" , 10000 );
        runs ( function () {
            expect ( processed ). toEqual ( 42 );
        });
    });
});
 terminal = require ( 'color-terminal' )
AsyncProcess = require ( './async-process' ). AsyncProcess ;
Chai = require ( 'chai' );
Chai . should ();
describe ( 'AsyncProcess' , function () {
    var asyncProcess ;
    beforeEach ( function () {
        asyncProcess = new AsyncProcess ();
    });
    it ( 'should process 42' , function ( done ) {
        deferred = asyncProcess . process ();
        deferred . then ( function ( processed ) {
            processed . should . be . equal ( 42 );
            done ();
        });
    });
});

Jasmine 的句法選擇是預設的,並以官方的文檔作說明,非官方的擴充功能增進了Jasmine 非同步特色,提供和Mocha 一樣的功能。花一些時間,來了解這個範例以及觀察Mocha 的語法有多清楚。
不像Jasmine,Mocha只提供行為的測試架構,更多關於 BDD(Behavior-driven development),而不是假物件(mock,主要存在的目的是協助單元測試程式可以順利進行)或是斷言(assertion,放在程式中的一階邏輯,如果一個結果為真或為假的邏輯判斷式)架構,因為它整合專用架構非常棒,就像是Chai和 Sinon,幾乎沒什麼不好的地方。Sinon有完整的功能來mock假物件和stub假物件(用途和mock很接近)。
舉例來說,你可以如何評估的方法,一直以來都使用Sinon 的間諜類型(擷取自很傑出的文檔):

 terminal = require ( 'color-terminal' )
// Function under test
function once ( fn ) {
    var returnValue , called = false ;
    return function () {
        if (! called ) {
            called = true ;
            returnValue = fn . apply ( this , arguments );
        }
        return returnValue ;
    };
}
it ( "calls the original function" , function () {
    var spy = sinon . spy ();
    var proxy = once ( spy );
    proxy ();
    assert ( spy . called );
});

Chai 的功能是在斷言這方面是非常傑出的,以和平常的語言非常相似的語法,舉例來說你可以看到以下的程式碼,就知道它很清楚簡單:

 terminal = require ( 'color-terminal' )
foo . should . be . a ( 'string' );
foo . should . equal ( 'bar' );
foo . should . have . length ( 3 );
tea . should . have . property ( 'flavors' ). with . length ( 3 );

5.Karma

Karma(一個測試程式是否符合需求的測試工具)是Javascript的程式測試工具,由AngularJS 的團隊寫的,現在你可以徜徉在Mocha、Chai和Sinon中寫測試程式,何不同時用它們持續地測試、跑程式,給你實時的回饋呢?
Karma可以讓你從你的工作站到持續整合製造(CI,Continuous Integration)執行你的測試,它能同時發佈到多個瀏覽器(Chrome、Firefox、IE和 PhantomJS 等等),除此之外,還能跑你的測試來挑戰它們,給予你對你的程式碼最大的信心。
 

6.WebStorm


WebStorm是一款強大的HTML5/JavaScript Web前端開發工具,被廣大JS開發者譽為「Web前端開發神器」。WebStorm 8全新特性中包括對AngularJS的支持,能夠高效準確地智能感知Angular語法、指令。WebStorm還完美支持Spy-js,合併了這款JavaScript調試利器,大大提高了開發者們的工作效率。

7.Sublime Text 3


Sublime Text 很贊的代碼編輯器,介面設置非常人性化,左邊是代碼縮略圖,右邊是代碼區域,你可以在左邊的代碼縮略圖區域輕鬆定位程序代碼的位置,高亮色彩功能非常方便編程工作,不過現在很多編輯器都可以這樣用。

8.Eclipse


Eclipse的本身只是一個框架平台,但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟體很難具有的靈活性。許多軟體開發商以Eclipse為框架開發自己的IDE。Eclipse最初是由IBM公司開發的替代商業軟體Visual Age for Java的下一代ide開發環境,2001年11月貢獻給開源社區,現在它由非營利軟體供應商聯盟Eclipse基金會(Eclipse Foundation)管理。

9.Visual Studio Code 


Visual Studio Code 在早期版本就將原始碼公開在 GitHub,也是 GitHub 上成長最快速的開源專案之一。基本上主要功能的開發還是由 Microsoft 來主導,但包括 Roadmap、Issues 管理等等都是公開在 GitHub 上的。因為開源的關係,有許多 bug 也都是由社群開發者所貢獻修復,我也曾經在上面發過 PR 並且被接受,而且很快的在下一個版本就被納入了。
 
然而在做開發的過程中,最真實的快樂就是你第一次寫的程式進行監測然後得到結果,這是一種實時的成就感,然後接下來你就能將它們發佈到瀏覽器上。
現在你已經非常有能力成為前端的忍者,在你的開發旅途中已經準備好要迎接每個挑戰了。
 


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

給你最好的網頁設計Gogoshark

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。