我将与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