web-dev-qa-db-ja.com

バックエンドにJadeやEJSなどのテンプレートエンジンが必要なのはなぜですか？

Angularjs（1.x）に精通しており、ディレクティブでテンプレートを使用しています。

現在、私はnodejsを学習しており、コーステンプレートエンジンの一部として言及されています。それらをバックエンドで使用する利点は何ですか？

現在、私には用途がありません。

node.jspugtemplate-engineejs
19
brainmassage

HTMLにレンダリングする必要のあるデータ（データベースなど）がある場合は、テンプレートエンジンを使用してデータとテンプレートを取得し、HTMLにレンダリングできます（後でクライアントに提供されます）。

フロントエンドアプリが同じことを行い、サーバーからデータを取得するためにXHR呼び出しまたは類似のものを使用する場合、HTMLサーバー側にレンダリングすることは一般的に役に立ちません（代わりに、データはJSONとしてクライアントに送信されます）。

したがって、テンプレートエンジンを使用することが理にかなっているかどうかは、アプリ（フロントエンドとバックエンドの両方）の構造に依存します。

最初のHTMLがサーバー側でレンダリングされ、次にクライアント側が「引き継ぐ」ハイブリッドソリューションもあります。これは、たとえば、Reactがサポートするものです。サーバーとクライアントの両方で同じコンポーネントを使用でき、ページが開かれると、ユーザーは、完全にレンダリングされた初期ページを表示します（クライアント側が最初にバックエンドからデータを取得してからページをレンダリングする必要はありません）。

25
robertklep

実際には必要ありませんが、ページをよりダイナミックにする多くの機能があります。

たとえば、このコードを使用してHTMLだけをレンダリングできます

app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

ただし、エンジンを使用すると、データをテンプレートに送信できます。 http://expressjs.com/en/api.html#res.render

// pass a variable to the view
res.render('somePage', {
    title: 'Awesome title',
    userFriends: friendsList,
    name: 'loggedUserName'
});

そして今、フロントエンドテンプレート（この場合はEJB）に、送信したデータをhtmlに入力します。そのため、htmlが動的になり、各ページを各ユーザーごとに異なるようにすることができます。

<ul>
  <% for(var i=0; i<userFriends.length; i++) {%>
     <li><%= userFriends[i] %></li>
  <% } %>
</ul>

HTMLだけでは、多くの不要なAJAX呼び出しを行ってデータを取得し、htmlに追加する必要がありますが、これは悪い考えです。

お役に立てれば。

8
Mykola Borysyuk

それはほぼ2020です。テンプレートリテラルは、文字通り、テンプレートエンジンを置き換えることを目的としています。 https://medium.com/@PaulBrowne83/do-we-really-need-template-engines-anymore-214eb6bc112e

0
Paul Browne

ビューエンジンを使用すると、オプションを使用してHTMLをレンダリングできます。たとえば、 squirrelly を使用して、次のようなファイルを作成できます。

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
   {(userIsSignedIn){<!-- if the user is signed in, display username and description-->
    <p>{{username}} is {{description}}</p>
    }}

    {(!userIsSignedIn){<!--if user isn't signed in, ask them to sign in-->
    <p>Sign in to view this page</p>
    }}

  </body>
</html>

たとえば、Expressで動的ユーザープロファイルURLを聞いてから、動的コンテンツを返すことができます。

0
Ben Gubler