我將與PHP分享我們的解決方案/實踐,它將前端作品與後端完全分開,我們的設計師和開發人員在不同部門分離,他們通過redmine的門票相連,但他們不在大多數情況下需要彼此溝通,而且在大多數情況下,他們的工作也不會與他人互動。
輸出解決方案是基於Java/JavaScript的,只是我們開發了自己的框架,約從後分離前的問題進行打擊。目前我們有兩個獨立的框架來解決這個問題,一個是Java的服務器端渲染,另一個是客戶端渲染/綁定的JavaScript,一個客戶端JavaScript MVVM框架。
起初,我們的框架的基本思路是從HTML模板分離所有的模板呈現邏輯,所以我們的HTML模板是真正的純HTML文件,無需任何後端入侵。
第二步,我們的設計師將完成其對獨立的HTML文件的作品,而不考慮後端邏輯。然後同時,我們的後端人員將通過分離的java/js源代碼編寫後端渲染/邏輯。
假設我們有一個HTML文件中像下面:
<div><input name="name"></div>
<div><span id="name-preview"></span></div>
我們將執行的Java服務器端呈現如下:
Render.create()
.add("[name=name]", "value", user.name)
.add("#name-preview", user.name);
此外,我們可以通過在客戶端執行的2路綁定javascript如下:
Aj.init(function($scope){
$scope.data = {};
$scope.snippet("body").bind($scope.data, {
name:[
Aj.form({name: "name"}), //bind the $scope.data.name to input[name=name] in 2-way
"#name-preview" //bind the $scope.data.name to #name-preview in 1-way
]
});
});
正如在上面的例子中,我們使用普通的css選擇器來描述是我們想要呈現/綁定我們的價值觀的地方和方式。
在事實上,在我們的實踐中,超過90%的前端重構就不需要從後端側的幫助。即使在我們的後端人員必須修復已損壞的渲染/綁定的左側10%的情況下,修復會變得非常簡單,因爲我們只需要在大多數情況下更改目標css選擇器。最後,雖然我們通過Java實現了我們的服務器端框架,但我們相信它可以移植到任何其他語言,如PHP,ruby,python等。
服務器端框架:
https://github.com/astamuse/asta4d
客戶端框架:
https://github.com/astamuse/asta4js
前端開發者應該知道一點後端和反向 – 2015-04-06 11:24:29
@Paziツ號都有着很多共同的概念,但賣方沒有必要知道一個產品是如何被創建,只有規範,以及如何把它放在正確的地方,這樣客戶就會被它吸引。 – ecarrizo 2015-05-29 04:37:52