MVC 模式前端應該寫模板嘛？

01-04

最近到了一家公司，團隊處於發展階段。當前公司的開發模式是先由前端根據原型圖與設計圖做出前端頁面，由技術經理制定的規則是前端按照後端需要將頁面分為 head、body、menu 和 foot 四部分，然後單獨分配一個控制器給他們測試頁面。前端頁面測試完成後再交給我們後端開發頁面。
前端只負責製作頁面，許多交互效果，比如 Ajax，提交動作等都是由後端來完成，還有一些諸如彈窗的效果都是先由前端獨立寫出一段彈層代碼再由後端整合進模板里，往往模板里寫了數百行的JS代碼，這讓我感覺網站代碼十分混亂。
其次，因為前端的頁面和我們後端的模板是分開的，當前端需要做出一些改動的時候他們是先在他們的頁面中先修改，然後再告訴我們該修改的部分，如果小改動還好，改動大的時候就十分混亂了，而且模板里還有大量由我們後端添加的 JS 代碼，修改起來往往產生很多衝突。而且因為前端和後端通常是同步進行開發，但因為後端的模板與前端的頁面之間的脫節，往往也造成了一些小麻煩。

起初我認為，模板應該完全交給前端來編寫，他們只要編寫簡單的模板語言以及按照我們後端提供的結構寫 Ajax 交互，那麼可以讓交互的工作完全由前端掌控而不至於太過於混亂，但是前端經理卻不這麼想，他認為應該讓前端與後端徹底分離，前端單純只做出頁面即可，甚至希望拋棄當前的做法讓前端僅僅做出一個純靜態的 HTML 而不需要根據後端規則對頁面進行切割，不過當時這個提議因為會加重後端工作量和開發時間而沒被採納。
想聽聽大家意見，前端應該寫模板嗎？

以大部分前端業內人士（包括我）的看法，模板（準確的說是表現層）應主要由前端負責，這意味著，不僅html/css是由前端做，js、ajax也應由前端來做。雖然仍然有不少公司中，有單獨的頁面重構（只做html/css），但總體上這種方式遭到了越來越多前端從業者的質疑和否定。

當然小豬算是一個例外。

前端與後端徹底分離, 難道不是指後端只給出介面和數據么...

我們的做法, 後端開發只與前端開發協商介面及數據格式並給出數據, 前端開發寫後端模板或者前端模板, 並完成所有ajax請求, 用戶交互.

製作一個純靜態的html頁面,私以為不叫前端.

趕緊跳槽吧。

你們公司沒前端，只有切圖的和程序員。

你被當作切圖的。

另外有興趣來阿里的話，可以私信發簡歷。

亂點來到這裡。

我覺得，如果你們的前端經理的觀念是前端只負責靜態demo輸出，認為前端開發就只是html+css+少量js，那麼，我認為你應該想辦法把這個經理幹掉，或撤退換一個項目。

我的觀點，在任何一個對用戶體驗有追求的互聯網項目中，前端團隊都必須接管所有展示層的業務，包括客戶端渲染的模板和服務端的view層，因為只有前端來接管著這些業務，才能更好地把web性能優化做到極致。

只要是前端的東西，後端不要過界，也就是說js的所有邏輯，後端不應該參與。誰過界，把他的手剁了，扔回去。

當然，純粹的靜態demo也是可以模塊化的，前些天回復了個話題，你可以參考。但我不太想去寫那個使用文檔。沒為什麼，覺得太簡單了，自己參悟吧。

grunt的怎麼進行靜態資源定位配置？ - 前端工程師

你說的這不完全叫後端，還是前端。

而你所做的，是前端的一部分，叫網頁重構，webrebuild，頁面重構師_百度百科

網頁重構負責編寫HTML和CSS，然後交給專業的前端去寫邏輯，重構一般不接觸JavaScript

但很多公司都沒有網頁重構，重構和前端都是一個人搞，一個人能做的事，幹嘛要雇兩個人。

相關資料：

2014 WebRebuild.ORG 「初心」年度交流會

騰訊CDC

新浪UED | 一個關注用戶體驗、關注工作流、關注作品質量的有愛團隊

來來來，告訴你們的前端經理，我完全認同他的觀點，前端就應該只寫HTML就行了，但是，但是，但是，這需要合適的技術來支持，市面上你們能看到的技術框架，都不是為前端設計的，都是該死的後端工程師為了他們一己之便利寫出來忽悠前端的。

所以，我們打著解放前端生產力的旗號就竄出來了，是的，用竄的，不服的來跟我一起竄，1，2，3。。。

前端開發與後台開發如何協作？ - 小豬的回答

如何評價Knot.js? - 小豬的回答

順便摘抄一段我在上邊那個回答下面回復的評論

小豬（作者）回復賀師俊
你猜測我們的設計是外包的，這是錯誤的，我們的設計是獨立的團隊不假，但是它是我們內部的團隊，只所以讓他們獨立，是因為我們認為engineer和designer是有區別的，一個好的engineer，幾乎不可能同時是一個好的designer，反之亦然，所以，不能夠也不應該讓他們混合工作。
======純吐槽=======
很多公司，包括facebook，試圖用全棧工程師來解決模板與數據邏輯的關聯工作，讓工程師來完成頁面部分的工作，我不得不說，當我們的設計師mm在觀摩山水，悲秋傷月的培養美學靈感的時候，我們正在寢室裡面揮汗如雨的打遊戲好不好，怎麼能指望我們這些摳腳大漢寫出一個讓人覺得漂亮的頁面來。。。
==================

所以，我們是特意構建了這樣的團隊結構，然後開始尋找技術解決方案，當然，從這個意義上講，你說的團隊架構反過來影響技術架構也是沒錯的。
賀師俊回復小豬（作者）
所以你雖然不是外包團隊，但是按你說的獨立團隊的情況，跟外包的做法也差不多了。其實我個人對這種配置是非常質疑的，因為我看過很多這樣配置得到糟糕結果的例子（不管是外包還是准外包性質的內部獨立團隊），不過沒看到你們實際的工作情況我也沒資格做評價就是。
豬（作者）回復賀師俊嗯，你看到的糟糕的情況是理所當然的，除了我們手上的這兩個框架，沒有其他任何框架能夠適合這種團隊結構，不然我們為啥自己做框架。至於說我們成不成功，我自我評價是amazing。現有的技術棧都是engineer導向的，強行剝離設計部分一定是撕破皮流血的結果。但換個角度說，你能夠看到很多失敗的案例，就說明這種結構是有需求的，所以大家才會去嘗試，我想，我們算是走對了路的一小撮。進一步的，由於現有的engnieer導向的技術棧無法良好的支持剝離設計，所以有經驗的技術主管都會避開這種團隊結構，從這一點說，分離設計的現實需求應該比我們看到的僅僅是失敗的案例要多得多。

團隊實力太差就這樣吧，典型學生時代開發感。。。。

團隊缺前端攻城獅，有的只是切圖的。趕快給jieyou投簡歷去體驗純粹的後端

感覺題主的問題不涉及前後端分離，只是一種工序。

他們的項目經理的要求是前端寫出 html文件，然後後台 copy paste 靜態的部分到他們的代碼里，然後把動態的替換成動態的代碼。動態的那些標識還是後台寫的。甚至文件都是兩份，一份靜態的，一份動態的。

這不是前後端分離，只是psd切圖後生成範例html 交給後端工程師去寫頁面罷了。

真正的MVC模板是應當內嵌後台的模板代碼，就是項目的一部分才對。

比如到正文的地方就是 {{CONTENT}} 標題就是 {{TITLE}} 這種。或者像 @小豬他們項目裡頭一樣使用一些位置標記，運行時綁定數據。前端和後端維護的是同一個文件。

而真正的前後端分離是，後端只提供介面，不涉及 html的渲染的。比如使用angular js 就是其中一種典型應用。

如果說前段開發懂一些腳本的概念，是可以做到改動不需要過多的後台參與的，提高開發效率的。但不是解放前端生產力，而是減少後端的工作量

職位是JAVA初級軟體開發工程師，做的就是JavaWeb工作，

編寫好各種代碼，提供Controller。

然後又要跑去做頁面的AJAX獲取數據，事件綁定，等等操作。

ui團隊只提供一個靜態頁面，還有一些簡單的操作事件(全選，單選，彈框)，最終還是讓後端的人去弄各種的JavaScript...

幹了一年了，寫JS比Java多，而發展是往後端去的，

問題過了好久，不知道你是否離開了這個公司，或者是否找到了心中的答案。

不過，我很願意把壓箱底的一篇好文章分享給你，Web 研發模式演變 · Issue #184 · lifesinger/blog

希望對你有用或者能進一步升華。

看了你的描述，我按照鏈接的文章中所講的，我覺得你問題中的公司這種開發模式，應該處於第二個階段，後端MVC階段。

你可以對號入座，仔細看看。

這種模式下，前端的工作比較少而簡單，開發調試不依賴後端開發環境。然而，後端就比較苦逼了，既要關注前端的技術和任務，同時要做好後端的本職工作，負擔繁重，而且在時間和精力有限的情況下，要同時做好這些工作並不是一件簡單的事情，對開發人員素質要求很高。

還有不好的地方，你問題裡面也講到了。

當然，後端的部分工作可以由前端來接管，比如，讓前端包辦後端模板，也就是MVC中的View可以讓前端來做。

不過，這樣前端工程師可能不願意了，多幹活不說，還需要學習後端模板語言，同時需要後端環境來開發和測試，需要了解和搭建後端環境。

前端君要寫 HTML，CSS，JS，

後端模板+前端模板，

最好寫一些單元測試，

如果能寫寫nodejs就更好了。

我一直覺得

前後端交互只依賴數據介面就好了。

看著都複雜，我司只有切圖的和其他的

你們還有設計師怕啥，我們直接照著原型圖寫頁面，然後給開發，最後全部工序完了，然後才是定頁面風格，排版，神馬的，傷筋動骨一周，上線