2015-04-06 99 views
1

我们的团队中有软件开发人员(PHP,SQL)和网页设计师(HTML,CSS,JS,Foundation,Bootstrap)。在Symfony2框架中分离前端开发

一个典型的场景:软件开发人员在设计由另一个人完成时实现业务逻辑。

问题:每当前端设计发生变化时,设计人员必须向开发人员发送新设计,他们必须跟踪更改并修改源代码。

问题:有什么工具/方法可以让设计人员直接使用Twig模板,并在没有后端开发人员帮助的情况下对HTML/CSS/JS应用更改(如果可能,无需安装Symfony和LAMP)?

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

+0

前端开发者应该知道一点后端和反向 – 2015-04-06 11:24:29

+0

@Paziツ号都有着很多共同的概念,但卖方没有必要知道一个产品是如何被创建,只有规范,以及如何把它放在正确的地方,这样客户就会被它吸引。 – ecarrizo 2015-05-29 04:37:52

回答

0

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

如果您的设计师想要修改树枝模板的html部分,他们可以直接进入模板。 如果他们想要添加与特定数据相关的其他元素,应该与后端开发人员一起工作,以更新控制器代码并将这些数据从后端填充到前端部分。

如果您使用symfony仅提供数据(基于大量来自前端的AJAX请求的JSON),我认为设计人员可以在不使用symfony代码的情况下单独使用接口和模拟JSON数据在本地安装。

+0

感谢您的回复,丶!如果设计人员只更新视图,没有任何数据修改,那就好了。你能提出任何工具吗?教授设计师整个Symfony体系结构(包括模式更新,作曲家等)并不那么容易。 :)我希望有一个解决方案,设计师不必学习所有后端特定的事情。因为TWIG几乎是纯粹的HTML。 – 2015-04-06 10:41:58

+0

我使用PHPStorm编辑一切(控制器,视图等)。支持Twig(也可以使用插件来扩展支持)。 – 2015-04-06 10:48:01

2

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

因为嫩枝几乎是纯HTML

这是完全错误的。 TWIG可能看起来像HTML,但它都是关于数据的。问问你的设计师,如果他们会很乐意看到这样的浏览器,而不是实际的数据:

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

不知怎的,我只是不认为这会为他们工作。

我想可能有一个工具在那里可以将TWIG转换为真正的HTML,但使用什么数据?如果它与后端数据不匹配,则会出现问题。

我建议你将需要教你的开发人员如何使用作曲家更新以及源代码管理系统。数据库不应该是一个问题。您可以在一个后端人员可以随时更新的地方安装一个设计器数据库。其他人可以安装和配置LAMP堆栈,您甚至可以设置虚拟设计器机器(可能与流浪者一起),该设备将完全装载设计人员为特定项目所需的任何软件。您的开发人员也可能会发现这些虚拟机也很有用。

另一种方法是核选项。不要使用TWIG。你的后端变成了web API,只处理数据。没有后端生成HTML。您的设计师现在可以完全控制前端。也许有点激进,但它似乎是行业走向的方式。

+0

我认为这是Symfony框架的一个严重缺陷 - 无法在MVC层中清晰地分离View部分。尽管Symfony贡献者在文档中声明了这一点:)应该有一种方法,设计师可以在不触摸模型和控制器层的情况下使用HTML。对于小型的“登陆页面”类型的网站来说,它很好 - 设计师设计和切片,开发者采用HTML并创建Twig。但是对于一个不存在的生存系统 - 我们每周都会对HTML/CSS进行5次以上的更改。在设计师和开发人员之间同步变化只是一场噩梦。 – 2015-04-07 15:09:50

+1

设计师当然可以更改他们想要的所有html(或树枝)。这是如何快速查看其变化的结果,这是这里的问题。与解决问题相比,安装LAMP堆栈的努力似乎微不足道。正如我在我的答案的最后一部分所说的那样,删除对php和树枝的视图层依赖关系的方式是不要在视图图层中使用php或树枝。 – Cerad 2015-04-07 16:30:43

+0

我也有兴趣听到任何符合您要求的系统(不管平台)。 – Cerad 2015-04-07 16:32:56

0

没有“最佳实践”,以不同的后端和前端开发的Symfony 2,仅仅是因为它使用了MVC模式,这本身从视图分离提供商家的逻辑。所有视图都集中在一个目录中,而设计人员唯一的工作就是显示数据。控制者和所有后端的东西都聚集在其他地方,对他们来说是不可见的。但是我建议你选择一个实现MVC模式的框架,因为它是最简洁的开发方式,并确保你的代码从现在开始很长一段时间。

0

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

4

或者更高的层次上 - 什么是分离后端的最佳做法 和前端开发?

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

但是:

,你可以采取完全独立于“前端”工作中的“后台”工作是做的最好的办法。 :

创建您的后端逻辑以根据需要(Web服务/ API)提供数据,而不是提供视图,以仅包含可读格式数据的干净主体发送响应,如json对象。

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

,你需要做的唯一的事情就是为他们提供,将为他们正在工作的模板中的数据的URL,并预期输出/格式,他们将请求URL时,可以接受,所以他们甚至不需要任何服务器工作,他们可以在测试/创建视图时嘲笑你的响应。

个人意见: 我认为,即使是简单的应用程序,这种方法也很棒。

为什么?

如果您将后端创建为Web服务/ API,那么可以很容易地扩展它,在某些时候您的应用程序将被第三方应用程序使用,或者您只是想创建本机移动应用程序版本, 管他呢。如果是这种情况,你不需要不写任何东西。

简史

我已经看到了本应该成为一个网页,然后将它变成populars巨大proyects,并将其与第三方不是网络本身更多的使用结束,并没有做好这样的准备。他们结束了开发一个Web服务,其中一半的功能用于第三方应用程序,并且为他们添加到Web服务层的每个功能他们使用了更多的代码,更多的测试等。

来吧,还在写作?

谈到Web开发,你可以保持您的前端球员集中展示的数据,样式和页面的事件,而后端你们一直集中在增加新的功能,所以没有人需要分心其他队队友只是因为他们不知道如何从一边工具工作,那对我来说值得我们节省的时间。