2015-04-06 61 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開發,你可以保持您的前端球員集中展示的數據,樣式和頁面的事件,而後端你們一直集中在增加新的功能,所以沒有人需要分心其他隊隊友只是因爲他們不知道如何從一邊工具工作,那對我來說值得我們節省的時間。