1

私たちのチームには、ソフトウェア開発者 (PHP、SQL) と Web デザイナー (HTML、CSS、JS、Foundation、Bootstrap) がいます。

典型的なシナリオ: ソフトウェア開発者がビジネス ロジックを実装し、設計は別の人が行います。

問題: フロントエンドのデザインに変更があるたびに、デザイナーは新しいデザインを開発者に送信する必要があり、開発者は変更を追跡してソースを修正する必要があります。

質問: デザイナーが Twig テンプレートを直接操作し、バックエンド開発者の助けなしに (可能であれば Symfony と LAMP のインストールなしで) HTML/CSS/JS に変更を適用できるようにするために、どのようなツール/アプローチが利用できますか?

またはより高いレベルで - Symfony 2 でバックエンドとフロントエンドの開発を分離するためのベストプラクティスは何ですか?

4

5 に答える 5

5

または、より高いレベルで - バックエンドとフロントエンドの開発を分離するためのベストプラクティスは何ですか?

フロントエンド チームがテンプレートで作業し、マークアップを送信すると、バックエンド開発者がデータで装飾します。これが通常の方法です。

しかし：

「バックエンド」作業を「フロントエンド」作業から完全に分離するための最善の方法は、それを実行することです。:

ビューを提供する代わりに、必要に応じてデータを提供するバックエンド ロジック (Web サービス / API) を作成し、json オブジェクトなどの読み取り可能な形式のデータのみを含むクリーンな本文で応答を送信します。

次に、フロントエンドの開発者は、対応する要求を Web サービスに送信してデータを取得し、テンプレートを装飾することができます。

あなたがしなければならない唯一のことは、彼らが作業しているテンプレートのデータを提供する URL と、その URL を要求するときに彼らが受け取ると予想される出力/フォーマットを提供することです。サーバーが動作していれば、ビューのテスト/作成中に応答をモックできます。

個人的な意見: シンプルなアプリケーションでも、このアプローチは素晴らしいと思います。

なんで？

バックエンドを Web サービス / API として作成すると、簡単に拡張できます。ある時点でアプリケーションがサード パーティ アプリケーションによって使用されるか、ネイティブ モバイル アプリケーション バージョンなどを作成したいだけです。その場合は、何も書き直す必要はありません。

小史

Web ページを提供するはずだった巨大なプロジェクトを見たことがありますが、それが人気になり、Web 自体よりもサードパーティからの使用が多くなり、その準備ができていませんでした。彼らは Web サービスの開発を終了し、サード パーティ アプリの機能の半分を使用し、Web サービス レイヤーに追加した各機能に対して、より多くのコードやテストなどを使用しました。

さあ、まだ書いていますか？

Web 開発について言えば、フロントエンドの担当者はページのデータ、スタイル、およびイベントの表示に集中し、バックエンドの担当者は新機能の追加に専念できるため、反対側のチームの注意をそらす必要はありません。一方のツールがどのように機能するかはわかりませんが、私にとっては節約された時間の価値があります.

于 2015-05-29T04:12:49.333 に答える
3

私がお勧めできる唯一の「ベスト プラクティス」は、Web デザイナーと話し合い、彼らのニーズを理解することです。

TWIG はほぼ純粋な HTML であるため

これは単純に間違っています。TWIG は HTML のように見えるかもしれませんが、すべてはデータに関するものです。実際のデータではなく、ブラウザで次のようなデータが表示されることを喜んでいるかどうか、設計者に尋ねてください。

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

どういうわけか、それが彼らにとってうまくいくとは思いません。

TWIG を実際の HTML に変換できるツールがどこかにあると思いますが、何をデータとして使用すればよいのでしょうか? バックエンドのデータと一致しない場合、問題が発生します。

ソース管理システムだけでなく、 composer update の使用方法を開発者に教える必要があることをお勧めします。データベースは問題になりません。バックエンドの人々が最新の状態に保つことができる単一のデザイナー データベースをどこかに置くことができます。他の誰かが LAMP スタックをインストールして構成できます。

デザイナーが特定のプロジェクトに必要とするソフトウェアを完全にロードする仮想デザイナー マシン (おそらく vagrant を使用) をセットアップすることもできます。開発者も、これらの仮想マシンが役立つと思うかもしれません。

もう 1 つのアプローチは、核オプションです。TWIG を使用しないでください。バックエンドは Web API になり、データのみを処理します。バックエンドで生成された html はまったくありません。設計者はフロント エンドを完全に制御できるようになりました。少し急進的かもしれませんが、業界が向かっている方法のようです。

于 2015-04-06T14:13:51.740 に答える
0

フロントエンドの作業をバックエンドから完全に分離し、デザイナーと開発者は別の部門に分かれており、redmine のチケットで接続されていますが、通信する必要はありません。また、ほとんどの場合、彼らの仕事は他の人と相互作用しません。

Out ソリューションは java/javascript に基づいています。単純に、表と裏の分離に関する問題に対処するために独自のフレームワークを開発しました。現在、この問題には 2 つの独立したフレームワークがあります。1 つは Java によるサーバー側レンダリング用で、もう 1 つはクライアント JavaScript MVVM フレームワークである javascript によるクライアント側レンダリング/バインディング用です。

最初に、私たちのフレームワークの基本的な考え方は、すべてのテンプレート レンダリング ロジックを html テンプレートから分離することです。したがって、html テンプレートは、バックエンドの侵入のない真の純粋な html ファイルです。

2 番目のステップでは、デザイナーはバックエンド ロジックを考慮せずに、独立した 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 を使用してクライアントの双方向バインディングを実行することもできます。

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 に答える
0

Symfony 2 でバックエンドとフロントエンドの開発を分離する「ベスト プラクティス」はありません。これは、それ自体がビジネス ロジックをビューから分離する MVC パターンを使用するためです。すべてのビューは 1 つのディレクトリに集められ、デザイナーが行う唯一の仕事はデータを表示することです。コントローラーとすべてのバックエンドのものは別の場所に集められ、それらには見えません。

symfony は義務ではありません (ただし、ここでやりたいことには完璧なツールです) が、MVC パターンを実装するフレームワークを選択することをお勧めします。これからもずっとメンテナンスできるように。

于 2015-04-16T11:31:37.973 に答える
0

Twig は、「データ」の Symfony コントローラーに関連しています。

デザイナーが twig テンプレートの html 部分を変更したい場合は、テンプレートに直接変更できます。特定のデータに関連する要素を追加したい場合は、バックエンド開発者と協力してコントローラー コードを更新し、このデータをバックエンドからフロントエンド部分に入力する必要があります。

symfony を使用してデータ (フロントエンドからの多くの AJAX リクエストに基づく JSON) のみを提供する場合、デザイナーは symfony コードを使用せずに、ローカル インストールでインターフェースとモック JSON データを単独で使用できると思います。

于 2015-04-06T09:59:01.197 に答える