1

我们的团队中有软件开发人员（PHP、SQL）和网页设计师（HTML、CSS、JS、Foundation、Bootstrap）。

典型场景：软件开发人员实现业务逻辑，而设计由另一个人完成。

问题：每当前端设计发生变化时，设计人员必须将新设计发送给开发人员，他们必须跟踪变化并修改源代码。

问题：有哪些工具/方法可以让设计人员直接使用 Twig 模板，并在没有后端开发人员帮助的情况下应用对 HTML/CSS/JS 的更改（如果可能，无需安装 Symfony 和 LAMP）？

或者在更高的层次上——在 Symfony 2 中分离后端和前端开发的最佳实践是什么？

4

5 回答 5

5

或者在更高层次上——分离后端和前端开发的最佳实践是什么？

前端团队可以在模板中工作并向您发送标记，然后后端开发人员将用数据装饰它，这通常是这样做的。

但：

将“后端”工作与“前端”工作完全分开的最佳方法就是这样做。：

创建您的后端逻辑以按需提供数据（Web 服务/API），而不是提供视图，而是发送带有干净主体的响应，该主体仅包含可读格式的数据，例如 json 对象。

然后前端开发人员可以向Web服务发出相应的请求以获取数据并用它来装饰他们的模板。

您唯一需要做的就是向他们提供将为他们正在工作的模板提供数据的 URL，以及他们在请求该 url 时将收到的预期输出/格式，因此他们甚至不需要任何工作的服务器，他们都可以在测试/创建视图时模拟您的响应。

个人观点： 我认为即使是简单的应用，这种方法也很棒。

为什么？

如果您将后端创建为 Web 服务/API，那么扩展它会很容易，在某些时候您的应用程序将被第三方应用程序使用，或者您只想创建一个本地移动应用程序版本，或其他任何东西。如果是这种情况，您无需重新编写任何内容。

简史

我见过应该为网页提供服务的大型项目，然后它变得流行起来，最终第三方的使用量超过了网络本身，并且没有为此做好准备。他们最终开发了一个 Web 服务，为第三方应用程序提供了一半的功能，并且对于他们添加到 Web 服务层的每个功能，他们使用了更多的代码、更多的测试等等。

来吧，还在写吗？

谈到 Web 开发，您可以让您的前端人员专注于显示页面的数据、样式和事件，而后端人员则专注于添加新功能，因此没有人需要因为对方团队不这样做而分散他们的注意力不知道一个工具是如何工作的，这对我来说值得节省的时间。

于 2015-05-29T04:12:49.333 回答
3

我可以推荐的唯一“最佳实践”是与网页设计师交谈并了解他们的需求。

因为 TWIG 几乎是纯 HTML

这完全是错误的。TWIG 可能看起来像 HTML，但它都是关于数据的。问问你的设计师他们是否愿意在浏览器中看到这样的东西而不是实际数据：

List of Products
{% for product in products %}
{% endfor %}

不知何故，我只是认为这对他们不起作用。

我想可能有一个工具可以将 TWIG 转换为真正的 HTML，但是用作数据呢？如果它与后端数据不匹配，则会出现问题。

我建议您需要教您的开发人员如何使用 composer update 以及您的源代码控制系统。数据库应该没有问题。您可以在某个地方拥有一个后端人员可以保持最新的设计师数据库。其他人可以安装和配置 LAMP 堆栈，

您甚至可以设置虚拟设计师机器（可能带有 vagrant），这些机器将完全加载您的设计师在特定项目中所需的任何软件。您的开发人员可能会发现这些虚拟机也很有用。

另一种方法是核选择。不要使用树枝。你的后端变成了一个 web api，只处理数据。根本没有后端生成的 html。您的设计师现在可以完全控制前端。也许有点激进，但它似乎确实是该行业正在走向的方式。

于 2015-04-06T14:13:51.740 回答
0

Twig 与“数据”的 Symfony 控制器有关。

如果您的设计人员想要修改 twig 模板的 html 部分，他们可以直接在模板中进行。如果他们想添加与特定数据相关的其他元素，则应与后端开发人员合作，以更新控制器代码并将此数据从后端填充到前端部分。

如果您使用 symfony 仅提供数据（基于来自前端的大量 AJAX 请求的 JSON），我认为设计人员可以在本地安装中单独使用接口和模拟 JSON 数据，而无需使用 symfony 代码。

于 2015-04-06T09:59:01.197 回答
0

Symfony 2 中没有分离后端和前端开发的“最佳实践”，仅仅是因为它使用 MVC 模式，它本身将业务逻辑与视图分离。您的所有视图都收集在一个目录中，您的设计师唯一的工作就是显示数据。控制器和所有后端的东西都聚集在其他地方，对他们来说是不可见的。

Symfony 不是一项义务（尽管它是您想要在这里做的事情的完美工具），但我建议您选择一个实现 MVC 模式的框架，因为它是最简洁的开发方式，并确保您的代码从现在起很长一段时间内都可以维护。

于 2015-04-16T11:31:37.973 回答
0

我将分享我们在PHP之外的解决方案/实践，它将前端工作与后端完全分开，我们的设计师和开发人员分开在不同的部门，他们通过redmine的票连接，但他们不需要沟通在大多数情况下是相互的，而且他们的工作在大多数情况下也不会与他人互动。

Out 的解决方案是基于 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);

我们也可以通过javascript执行客户端2路绑定，如下所示：

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-05-29T02:44:04.103 回答