前端工作流有那些步驟？

從宏觀角度切換到微觀角度，我們來了解一個(gè)良好的原型設(shè)計(jì)流程的重要性，以確保你團(tuán)隊(duì)中的網(wǎng)站建設(shè)前端工程師都已經(jīng)做好邁向成功的準(zhǔn)備。這里的很多內(nèi)容都是跨界的，但是它們對前端工程師的開發(fā)效率和工作滿意度有著重要的影響。

現(xiàn)在，我們不能假設(shè)所有的工程師都有相關(guān)的經(jīng)驗(yàn)，因此前端工作流應(yīng)該在新人入職時(shí)就開始運(yùn)作。這樣一來，理解一個(gè)新人工作時(shí)需要的所有步驟很重要，包括初始坐下來面對代碼，用新筆記本電腦寫下他們?nèi)松幸淮斡行У拇a。

1.　必要的工具

所有新來的工程師的首要任務(wù)都是安裝必要的軟件和搭建代碼運(yùn)行的環(huán)境。這通常包括安裝和配置你喜歡的代碼編輯器、安裝一些 Adobe 公司的軟件，以及下載你常用的瀏覽器。在這些軟件跑起來之后，往往需要幾個(gè)步驟去安裝 Git 和配置服務(wù)器準(zhǔn)入。末尾，新人還需要整理各種各樣的網(wǎng)絡(luò)服務(wù)和密碼。

沒錯(cuò)，這看起來有點(diǎn)普通，但是這個(gè)流程越流暢，工程師們就能越快地進(jìn)入到實(shí)際的編碼工作中。

2.　本地部署

跟版本控制器打交道，往往是工程師上班時(shí)要做的首要的事，也是他下班前做的末尾一件事。這是一個(gè)授權(quán)他們訪問網(wǎng)站代碼和讓他們發(fā)布新代碼的工具。這個(gè)時(shí)候，他們可能需要克隆你的代碼到本地環(huán)境并且使其在他們的機(jī)器上運(yùn)作起來。這個(gè)步驟可以很簡單：

或者，這可能是個(gè)很長的流程，包括拉取多個(gè)代碼庫，安裝一個(gè)本地?cái)?shù)據(jù)庫，配置各種各樣的服務(wù)器設(shè)置，甚至修改計(jì)算機(jī)網(wǎng)絡(luò)和設(shè)置 VPN。不管你的流程是什么，一定要確保在 README.md 文件中說清楚，以及給出可以聯(lián)系的人或者資源，以防用戶對流程中的某些步驟存在疑問。

千萬不要低估這個(gè)流程所需花費(fèi)的時(shí)間！我曾經(jīng)參與過一些只需要幾分鐘就能配置起來的項(xiàng)目，我也聽過一些糟糕的故事：一位新的工程師花了幾個(gè)星期才使網(wǎng)站在本地環(huán)境跑起來。

所以，現(xiàn)在我們的工程師擁有了一個(gè)代碼編輯器、一個(gè)瀏覽器和一個(gè)本地可編輯的網(wǎng)站。那么，在他們開始工作之前，還需要什么呢？不妨給他們一些事情做？我們將在下一節(jié)介紹。

3.　編寫用戶故事

不管你叫它們?nèi)蝿?wù)、標(biāo)簽、故事還是作業(yè)，我們都需要通過溝通把人的想法和愿望提煉成一個(gè)可操作的和可檢驗(yàn)的要求。因?yàn)闆]有人會讀心術(shù)，所以我們需要編寫用戶故事，詳細(xì)地描述問題的緣由、建議的解決方案和必須滿足的需求點(diǎn)。

把所有的事情分解成小而簡單的需求，這種方式在前端開發(fā)中也是適用的。現(xiàn)在，既然從簡單的開發(fā)頁面進(jìn)入到了構(gòu)建設(shè)計(jì)系統(tǒng)的級別，我們就需要確保分解工作任務(wù)的方式能夠體現(xiàn)新的方法論思想。這意味著我們不需要再寫類似“更新‘關(guān)于我們’頁面”這樣的用戶故事。這一類需求通常包含一系列的排版和布局上的變更，還有可能包含類似“把用戶行動(dòng)召喚（call to action，CTA）按鈕內(nèi)邊距擴(kuò)大一倍”這樣的要求。以下解釋了為什么說這樣的用戶故事非常糟糕。

• 我們是否被問及，是改變所有 CTA 按鈕的內(nèi)邊距，還是只改變“關(guān)于我們”頁面的那一個(gè)？
• 如果我們不是要更新所有的 CTA 按鈕，那么除了“關(guān)于我們”之外，是否還有其他頁面需要采用這個(gè)大號的按鈕？
• 提出這個(gè)任務(wù)的人，是否有權(quán)做全站范圍的改動(dòng)？或者，假如我們改變了全部的 CTA 按鈕，但是正在為主頁編寫需求的人卻不希望使用這個(gè)新按鈕呢？
• 如果一個(gè)人正在更新“關(guān)于我們”頁面上的 CTA 按鈕，但另外一個(gè)人又被指派去改變“聯(lián)系我們”頁面上的 CTA 按鈕，會發(fā)生什么呢？
• 為什么對全局 CTA 按鈕的一個(gè)簡單調(diào)整，會跟一堆的局部和全局的變動(dòng)糅合在一起？

比起那些對單頁面進(jìn)行多處修改的任務(wù)，我們更應(yīng)該把前端開發(fā)任務(wù)的主旨放在對系統(tǒng)所做的改變上。與其編寫一個(gè)涉及一堆修改的大任務(wù)，不如來一個(gè)這樣的任務(wù)：“創(chuàng)建一個(gè)新的擁有 16px 內(nèi)邊距的 CTA 按鈕，用于代替所有內(nèi)部網(wǎng)頁中那些 8px 內(nèi)邊距的按鈕。”

很明顯，這樣的任務(wù)不是讓我們?nèi)ジ淖冊械?CTA 按鈕，而是創(chuàng)建一個(gè)新的組件。我們都知道，這樣的改變是可選的，只有我們回到“關(guān)于我們”頁面（另外一個(gè)任務(wù)），更新 HTML 去使用新的組件時(shí)，網(wǎng)站的內(nèi)容才會發(fā)生變化。

通過關(guān)注組件而非單頁面的內(nèi)容，我們可以保證優(yōu)先考慮的是設(shè)計(jì)系統(tǒng)，以及改動(dòng)對系統(tǒng)產(chǎn)生的影響。這樣的方式創(chuàng)建了一個(gè)更具彈性的系統(tǒng)，有助于避免多個(gè)頁面之間的沖突。

以上是日照網(wǎng)站建設(shè)公司（昊諾網(wǎng)絡(luò)公司）分享，如果大家喜歡想了解更多相關(guān)知識，請關(guān)注我們網(wǎng)站動(dòng)態(tài)！