Web開發之四：前後端開發模式探討
阿新 • • 發佈：2019-01-01
在去年一年的開發過程中，基於開發中MVC的分層模式，我們在實際的專案中嘗試了前後端分離的開發模式，並在幾個專案中都堅持了下來，雖然堅持了，但不能說明實際的效果很好，或者解決了我們專案開發中存在的問題。就像做軟體維護一樣，經常會解決一個Bug，又引入多個Bug，在新的開發模式下，主要存在以下幾個新問題，而這些暴露出來的問題，也進一步說明了，理想和現實總是有差距的。
1）前後端人員配比不合適。目前比例是1:1，可實際工作量卻不是1:1的關係，開發進度的瓶頸就在這裡。
2）前後端開發步調不對，前端總是等著後端人員把程式碼都測試完才開始前端實現，其實可以先去做很多工作的，沒有必要一定等後端工作的完成。
3）後端人員在測試完成之後，基本無事可做，要麼閒下來，要麼參與到自己並不熟練的前端開發中，程式碼質量不高。
4）專案開發初期，基於介面所做的工作不夠細緻，不夠明確，因此，在這個階段所產出的約定很脆弱，在後期不得不頻繁的調整，導致後期的開發很糾結。後端人員不得不頻繁的更改業務實現。
上面所提到的問題，既有溝通協作的問題，也有專案資源分配的問題，也有技術人員水平及熟練程度的問題。經過學科測評專案的開發，幾個人對前後端分離的開發模式又有個新的認識，自己也反思總結了我們前後端開發的流程，自我感覺對這個流程也有了更深刻的理解，但不知道下個專案實際操作起來，會如何。
不管實際如何，還是先來說說理論吧。流程，通俗來講，就是許多人，在做一系列的事情時，怎樣相互協調，安排好這一系列事情的先後順序，有什麼事先的約定，需要達到怎樣的預期目標。
理想狀態下的Web前後端開發流程：
第一步：出原型
第二步：出靜態頁
第三步：定UI元件事件（根據原型和需求，確定UI需要提供哪些UI事件，或者JS呼叫），哪些需要用ajax實現等等。
第四步：定呼叫介面。這是非常重要的一個環節。在這個環節中,
1) 根據原型確定主要是有哪些Action參與，或者需要建立哪些Action
2) 討論Action中需要哪些service方法。
3）確定頁面與伺服器端交換資料的介面、方式、格式、各類出錯場景以及出錯提示等，前端人員要考慮好前端的互動方式，實現方式，在這個過程中有向前設計的意識。同時要與後端開發人員溝通，看是否有問題，都要學會站在對方的角度上去看問題。我們在這個過程中容易忽略資料交換格式、出錯場景(異常)等。
介面的約定是個關鍵，在這個階段，不要怕浪費時間，只有多溝通，多思考，儘量的讓前後端約定更豐滿一些。因為她越豐滿，後面的糾結就越少。
第五步：前後端同時基於介面開始做開發工作。
1）前端實現UI----開始html編寫UI事件和JS呼叫、表單校驗等，編寫後可以只執行頁面效果。
2）後端開始實現service方法，進行業務邏輯和資料訪問層程式碼的編寫，編寫測試用例，針對service方法進行測試。資料持久層的程式碼使用ibatis的程式碼自動生成工具來做。
在這個階段，前端開發人員可以忽略資料，而只做前端的互動效果，這是完全可行的。後端人員需要重點完成單元測試工作，保證自己的程式碼是高可用的。
第六步：後端因為程式碼的自動生成，所以開發速度會相對更快，因此，在後端完成業務處理之後，前端可能還在開發期，這時候，後端人員可以開始進行額外工作
1）初始化測試資料的準備，為下一步的前端整合測試做準備。
2）伺服器搭建的準備
第七步：前端開發完畢，開始進行前後端程式碼的整合、進行整合測試。
備註：在這七步的流程之中，還有許多需要注意的細節，列舉幾點吧：
1）團隊配合與溝通，這是一切工作的基礎。這開發的過程中，涉及到集中角色。專案經理、專案主控、設計人員、後端開發人員、前端開發人員、UI設計師、需求人員。而在進入開發階段之後，一定要注意幾個溝通：設計人員與開發人員的溝通，保證開發人員理解了設計的思路。前端人員與UI設計師的溝通，保證UI設計的無誤。前端人員與後端人員的溝通，保證在介面編寫時思路的一致。一個人的思路是有限的，考慮問題的全面性也是有限的，溝通的過程需要強調主動性。
2）多站在對方的角度考慮。信任是團隊協作的基礎。而信任來自己自己程式碼的質量，自己設計的質量。從自己做起，不要只是說我只關心什麼什麼，可以溝通清楚自己需要的是什麼，擔心的是什麼，學會站在對方的角度上去看問題。
3）專案中總有那麼一些檔案，是前後端開發人員都會修改的，如action.xml等。這些敏感檔案，修改前以及修改完畢都要互相通知下，要養成update前先從vss上refresh的習慣。如果出現衝突，最好能夠一起解決，或者及時告知，避免再次衝突。
4）以目前公司的人力配置和以往專案開發的實際來看，前後端人員可以調整到1:2或者1:3,因為後端的程式碼大多數可以自動生成，工作量會減少很多。前端開發人員數 >= 設計人員數+後端人員數 > 專案負責人數。
這就是我理想中的Web開發流程，當然，這是理想的情況，因為專案開發不可能都按照這個來走，流程本身就是把雙刃劍。而且，想達到這麼理想的狀態，對專案的資源支撐、需求穩定、UI設計、程式設計師水平都需要有高的要求，但是，在當前情況下，這應該是符合現狀的前後端分離的開發模式。隨著前端技術水平的越來越高，前端不斷壯大之後，我們會做的更好。
1）前後端人員配比不合適。目前比例是1:1，可實際工作量卻不是1:1的關係，開發進度的瓶頸就在這裡。
2）前後端開發步調不對，前端總是等著後端人員把程式碼都測試完才開始前端實現，其實可以先去做很多工作的，沒有必要一定等後端工作的完成。
3）後端人員在測試完成之後，基本無事可做，要麼閒下來，要麼參與到自己並不熟練的前端開發中，程式碼質量不高。
4）專案開發初期，基於介面所做的工作不夠細緻，不夠明確，因此，在這個階段所產出的約定很脆弱，在後期不得不頻繁的調整，導致後期的開發很糾結。後端人員不得不頻繁的更改業務實現。
上面所提到的問題，既有溝通協作的問題，也有專案資源分配的問題，也有技術人員水平及熟練程度的問題。經過學科測評專案的開發，幾個人對前後端分離的開發模式又有個新的認識，自己也反思總結了我們前後端開發的流程，自我感覺對這個流程也有了更深刻的理解，但不知道下個專案實際操作起來，會如何。
不管實際如何，還是先來說說理論吧。流程，通俗來講，就是許多人，在做一系列的事情時，怎樣相互協調，安排好這一系列事情的先後順序，有什麼事先的約定，需要達到怎樣的預期目標。
理想狀態下的Web前後端開發流程：
第一步：出原型
第二步：出靜態頁
第三步：定UI元件事件（根據原型和需求，確定UI需要提供哪些UI事件，或者JS呼叫），哪些需要用ajax實現等等。
第四步：定呼叫介面。這是非常重要的一個環節。在這個環節中,
1) 根據原型確定主要是有哪些Action參與，或者需要建立哪些Action
2) 討論Action中需要哪些service方法。
3）確定頁面與伺服器端交換資料的介面、方式、格式、各類出錯場景以及出錯提示等，前端人員要考慮好前端的互動方式，實現方式，在這個過程中有向前設計的意識。同時要與後端開發人員溝通，看是否有問題，都要學會站在對方的角度上去看問題。我們在這個過程中容易忽略資料交換格式、出錯場景(異常)等。
介面的約定是個關鍵，在這個階段，不要怕浪費時間，只有多溝通，多思考，儘量的讓前後端約定更豐滿一些。因為她越豐滿，後面的糾結就越少。
第五步：前後端同時基於介面開始做開發工作。
1）前端實現UI----開始html編寫UI事件和JS呼叫、表單校驗等，編寫後可以只執行頁面效果。
2）後端開始實現service方法，進行業務邏輯和資料訪問層程式碼的編寫，編寫測試用例，針對service方法進行測試。資料持久層的程式碼使用ibatis的程式碼自動生成工具來做。
在這個階段，前端開發人員可以忽略資料，而只做前端的互動效果，這是完全可行的。後端人員需要重點完成單元測試工作，保證自己的程式碼是高可用的。
第六步：後端因為程式碼的自動生成，所以開發速度會相對更快，因此，在後端完成業務處理之後，前端可能還在開發期，這時候，後端人員可以開始進行額外工作
1）初始化測試資料的準備，為下一步的前端整合測試做準備。
2）伺服器搭建的準備
第七步：前端開發完畢，開始進行前後端程式碼的整合、進行整合測試。
備註：在這七步的流程之中，還有許多需要注意的細節，列舉幾點吧：
1）團隊配合與溝通，這是一切工作的基礎。這開發的過程中，涉及到集中角色。專案經理、專案主控、設計人員、後端開發人員、前端開發人員、UI設計師、需求人員。而在進入開發階段之後，一定要注意幾個溝通：設計人員與開發人員的溝通，保證開發人員理解了設計的思路。前端人員與UI設計師的溝通，保證UI設計的無誤。前端人員與後端人員的溝通，保證在介面編寫時思路的一致。一個人的思路是有限的，考慮問題的全面性也是有限的，溝通的過程需要強調主動性。
2）多站在對方的角度考慮。信任是團隊協作的基礎。而信任來自己自己程式碼的質量，自己設計的質量。從自己做起，不要只是說我只關心什麼什麼，可以溝通清楚自己需要的是什麼，擔心的是什麼，學會站在對方的角度上去看問題。
3）專案中總有那麼一些檔案，是前後端開發人員都會修改的，如action.xml等。這些敏感檔案，修改前以及修改完畢都要互相通知下，要養成update前先從vss上refresh的習慣。如果出現衝突，最好能夠一起解決，或者及時告知，避免再次衝突。
4）以目前公司的人力配置和以往專案開發的實際來看，前後端人員可以調整到1:2或者1:3,因為後端的程式碼大多數可以自動生成，工作量會減少很多。前端開發人員數 >= 設計人員數+後端人員數 > 專案負責人數。
這就是我理想中的Web開發流程，當然，這是理想的情況，因為專案開發不可能都按照這個來走，流程本身就是把雙刃劍。而且，想達到這麼理想的狀態，對專案的資源支撐、需求穩定、UI設計、程式設計師水平都需要有高的要求，但是，在當前情況下，這應該是符合現狀的前後端分離的開發模式。隨著前端技術水平的越來越高，前端不斷壯大之後，我們會做的更好。