在開始寫Code之前？

Published in

I am Mike

Jan 10, 2018

大家好，我是Mike，目前是一個小小前端，今天要來分享一些我平常寫前端專案的些許經驗，就如同我寫的標題，在拿到專案需求要開始寫代碼之前，你應該要想是不是應該要轉行，噢！不是......是在每個專案開發時都會使用第三方工具或套件來輔助我們開發專案，甚至現在前端業界的技術根本是一個大混戰，不管是框架，套件，工具每一個都讓人多到不知道怎麼選擇，今天就要在這邊跟大家分享一些我平常使用這些工具的優劣，讓大家對於如何選擇一個適合工具有初步的認識，成為稱職的工具人（誤！

●開發環境

Nodejs：關於環境的部分我想在現在前端業界來說脫離不了的就是nodejs了，由於透過nodejs能開發的平台不僅限於web，連App，桌面應用程式，硬體驅動，都可以做得到。
npm＆yarn：現代前端開發各種套件管理都透過npm或yarn去下載然後安裝引入使用，安裝nodejs之後就等同於安裝好了npm，如果想用紗可以透過npm安裝，不過目前我個人用npm居多，之前試過幾次yarn裝了套件之後有時候會出現不可預期的錯誤，用npm裝就不會，所以後來還是改用npm。

●前端自動化工具

Gulp：對於自動化工具來說可以算是相當輕便然後好理解，透過js去撰寫編譯指令跟配置，可以清楚地並方便地完成客制化許多工作，目前拿來使用Server服務啟用，編譯SASS，編譯ES6，壓縮圖片大小等工作，在一些小型專案上面非常適合，不過gulp 4.0更新後就宣布不再繼續更新gulp了，所以在未來gulp的使用量會漸漸消失。
Webpack：目前業界市佔率最高的自動化工具，不管是編譯或是打包還是服務器服務，可以說是相當全面，唯一不同的是它的入門門檻比較高，webpack的配置要透過loader工具轉換，再透過簡單的正則表達式去配置，一開始接觸可能會覺得沒有gulp方便，可是當WebPack使用習慣後會發現很多東西真的非常方便，我目前使用比較多也是用的WebPack來完成專案，反倒是因為每個指令都要自己寫的情況下，我比較喜歡的WebPack配置方式，大專案來說一定非的WebPack莫屬。
Parcel：新出來的自動化工具，號稱零配置，不用像webpack或是gulp去寫編譯指令，目前試用的感覺還不錯，比起gulp來說更適合新手上手來寫專案，不過如果要加入一些babel或是PostCSS的功能還是要寫一些配置的設定，不過都還算簡單，有在考慮是否取代Gulp來執行些比較簡單的專案。

●JavaScript預處理

Babel：現在的JavaScript可以說是一年就提一個規格草案，目前出到ES10，不過我們的瀏覽器可沒有辦法這麼快的就支援這些新的功能的JS，所以我們需要透過編譯的方式把新的語法轉換成瀏覽器的可以支援的ES5，Babel有支援許多前端自動化工具的使用，所以可以透過上述的那些工具來轉換。
JavaScript ES6：現在我的工作上面90％的代碼都已經轉換成ES6來進行開發.ES6提供了許多方便的語法，讓我們在寫js的時候可以不用寫的很冗長，最棒的是class語法讓js可實現物件導向架構（雖然背後還是原形鏈）。學習Reactjs的時候，你就會發現React組件就是用ES6 class下去建構的。學會ES6也有助於學習其他框架。

●CSS預處理

SASS＆SCSS：我想現在的前端應該沒有人沒聽過或用過SASS的人吧，強大的巢狀式結構可以讓撰寫CSS更方便，可以透過組件式的管理將CSS共用，更有架構的去寫CSS，引入變數跟mixin的概念，讓寫CSS就像在寫程式一般，更容易地去建構較為複雜的架構，早期的SASS是建立在Ruby的環境上，不過現在nodejs環境上也有了。
Stylus：跟在SASS之後推出的一個新的CSS預處理，完全建立在nodejs的環境上去執行，編譯速度更快，功能也跟SASS一模一樣，也提供了需要多原本SASS沒有的功能，是個不錯的選擇。

●DOM操作

jQuery：前端界無人不知無人不曉的老大哥，簡單的語法跟操作，還有龐大的套件生態圈，讓新手可以快速的做出頁面效果，讓新手前端跟前端設計大量的使用。
原生JavaScript：許多有經驗的前端工程師漸漸不使用jquery為操作dom的選擇，回到根本使用原生js來進行操作，jquery相對來說太大包，資源太重，但如果需要某個jquery的功能，可能除了自己寫以外會去找其他比較輕量的替代方案，簡單的案子已經捨棄的jquery來作為選取DOM的第一選擇，除非是客戶要求或是教學上面才會使用。

●非同步處理

Ajax（jquery）：串接api時常會使用到功能，包含錯誤處理跟回傳格式都處理好，只要幾段簡單的語法就可以簡單完成非同步處理。
Axios：捨棄jquery後自然沒有Ajax可以使用，Axios就是拿來取代jquery的Ajax的替代方案，一樣可以達到非同步處理功能，而且又輕量，我目前都用Axios。
Fetch：javascript提供的原生處理非同步的api，不用仰賴其它套件，不支援IE XD

●前端框架

Vuejs：非常適合第一次學習，然後可以直接上手專案的框架，在完整的架構下面學習vue的模板語法，可以快速且完成之前可能用jquery要寫很多行的但是用vue只要短短幾行就能完成的功能，而且在團隊上面的配合也可以很密切，在框架的架構跟規範下，團隊寫出來的功能邏輯都是照著框架規範走，互相維護可以說是相當的方便啊，如果要入門框架真心覺得選VUE就對了。
Reactjs：FaceBook所開發跟維護的一套超強框架，現在各家人力銀行打開紛紛都要會React，好像不能就不能應徵前端工程師一樣，跟Vue一樣都是資料導向的架構，在這個年代學習React就像是在學的javascript一樣，React不像Vue的有自己的模板語法，它的操作都是在JavaScript的架構下寫JSX去建構它，它目前有著比Vue更大的生態圈，非常值得學習。
Angular：三大框架中歷史最悠久，經歷1，2，4目前到了版本5，在google光環之下有為數不少的愛用者與傳教士，深受微軟MVP的喜愛與推薦，不過我個人不推薦給剛入門的人使用。

●動畫工具

TweenMax：從as3.0時代轉到js時代都不離不棄的一套龐大且全面的動畫工具，除了dom的動畫操作以外，也同時支援canvas動畫的支援，非常強大的一款工具，目前很多動畫都靠它呢。
Tween.js：捨棄jquery後要做動畫除了龐大的TweenMax外，你也可以選擇這個較為輕量的動畫工具，簡單的動畫功能已經可以完成許多網頁上的動畫需求，正所謂殺雞焉用牛刀，如果畫面的動態不麻煩的話試試看用它吧。
Popmotion：2018年展露頭角的動畫工具，可以說是跟以往你看到的動畫工具的使用是完全不一樣的，捨棄了一般常見的動畫工具使用的架構，在Web動畫方面有了很多的創新，目前還沒正式投入專案製作中，不過絕對值得關注。
CSS3：目前Web上面70％左右的動畫我覺得都可以靠Css3對dom添加Class來達成，有時候實在沒有必要載入其他的操作dom的工具例如jquery，CSS3在行動裝置上面效能好很多。

●2D Canvas遊戲開發

Createjs：是一個各方面設計上都覺得不錯的canvas框架，Createjs總共拆成4個部分easeljs，tweenjs（跟Tween.js是不一樣的），soundjs，preloadjs四大塊，除了easeljs外其他幾個部分也都可以實際應用在除了canvas外的應用，它的其中一個亮點是可以搭配Adobe Animate CC這套軟體來製作動畫，匯出再給工程師使用，可以說是非常方便開發快速，不需要工程師自己去用代碼寫出動畫，把動畫素材交給設計師負責，由工程師來控制動畫跟寫遊戲邏輯就好，剛入門的canvas的人我很推這套框架，尤其是它的開發團隊以前是寫AS3 0.0的，所以在設計API上面也參考AS3.0的API設計方式，對我這種剛開始從flash轉canvas的人來說真的很親切，對於動畫操作很多的案子我第一個就是選Createjs。
Pixijs：是一款效能極好，不管是在遊戲或是畫面處理上面都很優異的canvas框架，走webgl，支援Retina Display，API的設計也很貼近as3.0（笑，許多團隊選用它的理由也是因為它的更新頻繁，許多遊戲框架的底層也是用Pixijs去建構，實際用過後對於程式設計師來說Pixijs真的是效能的第一考量。
Phaserjs：一款做canvas遊戲一定會知道，以Pixijs為底層建構，包含box2d物理引擎跟其它很多功能的框架，做大型遊戲的第一首選，不過它容量真的太龐大了，如果對於簡單的遊戲不太適合。

●3D網頁

Threejs：在web上面要呈現3d的首選框架，Threejs透過webgl在畫布上將3d的世界搬上瀏覽器，可以完整呈現3維世界，從模型，貼圖，燈光，動畫一應俱全，以前只能透過其他軟體輸出在透過第三方套件Unity player或Flash Player來呈現，但是當這兩個平台也都停止維護更新後，現在就是webgl的時代了，雖然現在支援webgl的瀏覽器很多了，但是不支援的我們就不管它了XD
A-Frame：用Threejs為底層，在順應現現時代的潮流所出現的專門製作Web VR所誕生的新鮮框架，我個人覺得入門比Threejs好入門，不管是在資源的管理或是物件的呈現更貼近3D軟體的製作觀念，而且不用太考慮VR兩個鏡頭的偏移，A-Frame都幫你做好好了，只要專心在VR互動上面就好，但是A-Frame的支援度目前都要比較新的瀏覽器才可以，所以使用前記得更新手機的瀏覽器。

●桌面應用程式

Electron：透過nodejs用開發web的方式來開發桌面應用程序，還有可以用Chrome的開發者工具來調試，跨窗口跟mac平台，覺得是一款非常棒的開發框架，開發桌面應用程式就跟寫網頁一樣，Electron提供許多api，可以快入達成一般桌面應用程式才做到的功能。

●資料處理

Lodash：可以說是一款專門為了資料處理所誕生的工具，不管是複雜的陣列，物件，在它所提供的語法糖下，可以更簡短的去完成資料的重組跟取出，非常方便。

●Git版本控管

Github：身為一個工程師需要有效率的管理自己跟團隊的程式碼，可以利用Github管理程式碼，版本控管，Code review等等，來減少程式碼的錯誤或是誤刪code的情況發生，非常的方便，不過Github是開源的，也就是公開的，所以專案如果私人的話需要額外付費，但是還是很推薦去申請一個自己的Github帳號。

●社群服務API

FaceBook：常常活動網頁需要串接分享，撈取使用者資料。
Line：網頁分享至聊天室。
YouTube：控制內嵌YouTube影片的控制，可以利用YouTube提供的api控制影片或客製播放器造型等等。
Google Map：網頁地圖的顯示。

●其他常用的第三方套件

Swiper.js：可以完全不依賴jquery就可以快速在頁面上完成幻燈片效果，大量的api跟詳細的文件，可以滿足你所有的需求，目前沒遇過它做不到的，支援RWD，超好用的。
Hammer.js：在手機上面判斷手指動作，判斷精準，功能也很多。
js.Cookie：在前端頁面用最直覺簡單的方式操作Cookie。
Aos.js：使用最簡單的視差滾動套件，內建超多種動畫模式，只要相對應的html標籤寫上動畫模式，就可以迅速完成視差滾動網頁。
Animated-scroll-to：捨棄jquery後如果想要用animate scrollTop怎麼辦？Animated-scroll-to就是來取代這個功能的，不妨試試看吧，比jquery簡單多了。
Device.js：用來判斷使用者目前所使用的裝置是哪一個，提供多種裝置給你判斷，判斷裝置我常常用這個小工具去判斷。
Hexo：可以利用github當作資料儲存空間來建立部落格。
Vue-infinite-loading：基於Vue框架的無限捲動組件，可以快速的幫你實現像是Fb的動態牆般的捲動資料載入。
Vue-multiselect：基於Vue框架的下拉選單標籤選擇器，可以優美的選擇多個tag跟組合資料。

本文所提到的框架或是工具都只有個大概，並不是全部，例如說不管Vue或React背後都有其他的延伸架構例如Vuex或是Redux等，在這邊只是做個大概的介紹跟見解。

結尾

選擇適合的開發框架跟工具沒有一定哪個就是對的錯的，依照專案的屬性跟大小來判斷，我個人是用不到我就不會載入太大包的東西，基本上是選擇不依賴jquery的跟擴充性彈性大的工具或套件，這時候選擇一個適合的工具或套件就成了一門學問，我參與過許多活動案跟平台案，兩個類型跟規模完全是天差地遠，也因此在這邊歸納了一些參考跟心得，有興趣的人就看看吧XD

之後有其他心得跟想法我會繼續再補充上來。