建站
咨詢
售后
建站咨詢
新聞中心
一位前端開發(fā)者分享她的工作流與理想工具集選項。每個新項目總會帶來一段令人興奮的旅程，但糟糕的規(guī)劃也可能毀掉這一切。人們往往將前端開發(fā)工作流程視為繁瑣且優(yōu)先級較低的任務，但由此帶來的后果往往會在生命周期當中出現(xiàn)。
創(chuàng)新互聯(lián)建站服務項目包括巨鹿網(wǎng)站建設、巨鹿網(wǎng)站制作、巨鹿網(wǎng)頁制作以及巨鹿網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，巨鹿網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到巨鹿省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
事實上，工程技術的本質(zhì)就是提升產(chǎn)品水準、從以往錯誤中總結(jié)經(jīng)驗，而后制定出一套精簡的實施流程。我們應當將這些原則運用到流程當中，從而在項目開始時即建立起可供每位開發(fā)者使用的規(guī)則、工具與技術選項。如此一來，產(chǎn)品本身亦將更加靈活、可擴展且易于維護。
作為一名前端工程師，我總會在開始新項目前確保工作流程的明確性與組織性。下面，我將與大家分享自己的整個設計過程。
1. 設置一套任務運行器
有些朋友可能不太熟悉任務運行器，這實際上就是一種用于自動執(zhí)行重復任務的軟件。其適合處理的任務包括JavaScript壓縮、文件連接、復制文件/目錄、執(zhí)行腳本以及編譯CSS文件。任務運行器通常立足于命令行，允許開發(fā)者“觀察”特定文件或者目錄的變化，而后在適當時運行任務。
在這方面，我個人推薦Grunt與Gulp。關于二者孰優(yōu)孰劣的問題，恐怕很大程度上取決于使用習慣。Grunt以配置為核心，較為笨拙緩慢，但卻易于上手且擁有龐大的技術社區(qū)。Gulp需要更為復雜的操作流程，但速度卻更好。
下面來看二者的優(yōu)劣總結(jié)：
Grunt
+ 易于上手
+通過配置實現(xiàn)更高控制水平
+發(fā)展歷史更久，社區(qū)規(guī)模更大，插件選項更多
–非流式文件I/O使其速度較慢
Gulp
+ 需要配置的部分較少
+ 處理速度更快
+流式機制，允許異步文件處理
+ 代碼編寫需求更低
–API較為有限
Grunt與Gulp都運行在Node.js之上，因此團隊中的每位開發(fā)者都需要首先安裝Node.js。
另外一種適合由任務運行器負責的任務為編譯模板語言，例如Jade。
2. 定義CSS流程
接下來，大家需要選擇一種CSS方法，答案可以是BEM、SMACSS或者Atomic CSS。具體選擇同樣取決于您的個人喜好。我自己使用的是BEM，其易于學習且能夠在大型團隊中用于高效處理各類應用組件。
在決定了CSS的編寫規(guī)則之后，大家應當考慮如何編寫CSS代碼。結(jié)合當下趨勢，大家都在利用Sass或者Less編寫更為簡潔的CSS代碼。然而，CSS4很可能在不久的將來徹底取代這些“語言”。
考慮到預處理機制會給構(gòu)建流程增加額外的時間投入，因此應當討論其是否必要。例如，如果大家選擇使用BEM，則可能不再需要使用Sass或者Less中的嵌套功能優(yōu)勢。
使用Compass等Sass庫能夠顯著提升Sass的功能性，引入包括sprite-map生成、跨瀏覽器混合、文件讀取以及數(shù)學輔助函數(shù)等，這一切都能讓開發(fā)者在其CSS中實現(xiàn)更多效果。不過需要注意，使用Sass與Compass的前提是要求每位開發(fā)者預先安裝Ruby。
另外，大家可以利用postcss等JS插件對CSS進行后處理。作為可擴展插件，postcss允許大家自動根據(jù)瀏覽器支持需求添加瀏覽器前綴、檢查CSS、壓縮文件并生成sprite等。我也在使用postcss，這里向大家強烈推薦。
3. 制定JavaScript規(guī)則
這也是開始新項目中最令人興奮的部分，正確處理亦能夠切實降低后續(xù)的技術債務。大家可以整理出一些嚴格的要求，包括JS如何編寫、使用哪套框架以及設計模式等。
編寫哪種風格的JavaScript？ES 5、ES 6+、TypeScript還是其它？
這是個大問題，而且往往很難找到惟一的正確答案。
ES5
ES5的優(yōu)勢在于，它能夠幫助所有開發(fā)者更為順暢地使用JavaScript，面對易于理解的結(jié)構(gòu)并掌握如何使用各類動態(tài)語言特性。對于經(jīng)驗豐富的開發(fā)者而言，其不會帶來任何學習曲線，且全部主流JS MVC框架皆能夠支持ES5。
當然，其***缺陷在于迫使開發(fā)者繼續(xù)編寫平淡無奇的陳舊JavaScript代碼。其冗長、松散且面向?qū)ο蟮膫鹘y(tǒng)語言特色使其無法吸引使用C#、Java以及Ruby等語言的開發(fā)者。根據(jù)我的個人經(jīng)驗，JavaScript會給新手軟件開發(fā)者帶來陡峭的學習曲線。
“Undefined不是函數(shù)？？這是什么意思？？！”——每位軟件開發(fā)者肯定都有過這樣的疑問。
ES6+
ES6代表著JavaScript的未來——或者會是ES7？總之，利用現(xiàn)代語言標準編寫代碼以應對未來需求絕對是個正確的選擇。ES6提供一系列***吸引力的語言特性：類、接口、Lambda函數(shù)、模塊導入/導出功能以及其它多種能夠在“真正的”編程語言中發(fā)現(xiàn)的元素。
ES6的缺點在于，大家仍然需要將代碼轉(zhuǎn)譯為ES5以獲得更為廣泛的瀏覽器、服務器與操作系統(tǒng)支持。這雖然不是什么大問題，且相信能夠在不久的將來得到解決，但就目前來講其仍在構(gòu)建流程中增加了額外的步驟。另外，其確實會帶來學習曲線，但這同時也是提升開發(fā)團隊技能水平的好機會。
TypeScript
TypeScript是微軟針對JavaScript自身不足給出的解決辦法。其優(yōu)勢包括ES6+中包含的一切提升，同時亦面向Visual Studio提供工具，且受到Angular v2的大力支持。TypeScript旨在通過添加更多現(xiàn)代語言特性以實現(xiàn)JavaScript的可擴展性，同時幫助開發(fā)者更輕松地立足.NET開發(fā)環(huán)境。
在缺點方面，大家仍然需要將TypeScript轉(zhuǎn)譯為ES5，且面對相關學習曲線。
而這就引發(fā)了下一個問題。
我們該使用哪套JavaScript框架？
目前市面上的JavaScript框架不計其數(shù)，因此我們幾乎很難確定下惟一***的一款。相反，我們在這里選擇了最出色的三種，分別為Angular、Ember與Backbone。三者皆擁有相對悠久的發(fā)展歷史，因此成熟度更高且具備規(guī)模可觀的社區(qū)資源庫。另外，三者分別采用區(qū)別明顯的方式構(gòu)建應用程序。下面來看它們的優(yōu)缺點：
Angular
Angular v2是我個人的首先方案，其具備與Angular v1相同的出色體驗，我也期待著能在下一個項目中使用其***版本。
+ 極高的原型設計與構(gòu)建速度
+ 為TypeScript與Dart提供說明文檔
+ 可輕松配合Jasmine與Karma實現(xiàn)測試驅(qū)動型開發(fā)
+ 大量獨有功能
– 大量獨有功能
– 要求開發(fā)者必須遵循Angular獨有的方式進行開發(fā)
Ember
良好的中間性選項。
+ 組件驅(qū)動型特性
+ 獨有功能少于Angular，但多于Backbone
+ 使用handlebars模板引擎
+ CLI
+ 可經(jīng)由CLI輕松實現(xiàn)測試
Backbone
老派而又純粹的框架
+ 幾乎不具備任何獨有功能
+ 可對設計模式、代碼樣式以及架構(gòu)進行全面控制
+ 部分***影響力的應用與網(wǎng)站皆運行于Backbone之上
+ 可選擇您偏好的模板引擎
+ 基本上屬于簡潔版HTML，無需額外屬性
– 要求使用大量樣板代碼
– 不存在依賴性，但可配合Marionette等視圖框架提升使用體驗
– 總體代碼編寫量要求更高，但亦可借此實現(xiàn)更佳優(yōu)化
– 自帶測試環(huán)境
總結(jié)
通過以上探討，下面我來匯總自己理想中的***前端開發(fā)流程：
- Grunt負責任務運行
- Sass負責CSS預處理
- Postcss負責后處理
- 編寫TypeScript
- 利用 AngularJS進行構(gòu)建
【譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為.com】
分享名稱：如何設計理想的新項目前端開發(fā)流程？
本文路徑：http://m.5511xx.com/article/cohopsd.html
