どちらが最速ですか？ ERB vs. HAML vs. Slim

class Constants
    NOTES = '[
        {
            "title": "Walk the dog",
            "description": "Bla bla",
            "tasks": [{
                "title": "Task #1"
            },
            {
                "title": "Task #2"
            },
            {
                "title": "Task #3"
            }]
        },
        ...
        {
            "title": "Walk the dog",
            "description": "Bla bla",
            "tasks": [{
                "title": "Task #1"
            },
            {
                "title": "Task #2"
            },
            {
                "title": "Task #3"
            }]
        }
    ]
    '
end

より多くの音符要素の省略記号を変更してください。さらに、他の各コントローラーでロジックを複製することを忘れないでください。

ERBビューの作成

次に、例のビューを作成します。これを行うには、 views / notes_erbに移動します フォルダを作成し、他の2つのファイルを作成します： note.html.erb およびtask.html.erb 。ビュー、パーシャル、レイアウトを含む例を作成するのに役立ちます。

このようにして、私たちの例がRailsエンジンを最も探索したことを保証します。必ず両方のviews/ notes_hamlと同等のファイルを作成してください およびviews/ notes_slim 。

index.html.erbから始めましょう コード：

<style>
h2 {
    text-align: center;
}

table, td, th {
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 80%;
  margin: auto;
}

th, td {
  padding: 15px;
}
</style>
<h2>List of Notes</h2>
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Tasks</th>
        </tr>
    </thead>
    <tbody>
        <%= render partial: 'notes_erb/note', collection: @notes %>
    </tbody>
</table>

ここには特別なことは何もありません。部分的な_note.html.erbをインポートしていることに注意してください ファイル、およびコレクションを渡す パラメータ： @notes 以前にコントローラーで作成されました。

ちなみに、メモの内容は次のとおりです。

<tr>
  <td>
    <span><%= note.title %></span>
  </td>
  <td>
    <span><%= note.description %></span>
  </td>
  <td>
    <ul>
      <%= render partial: 'notes_erb/task', collection: note.tasks %>
    </ul>
  </td>
</tr>

タスクにアクセスするもう1つの部分があります 今回は配列します。

_task.html.erbのコンテンツ 次のとおりです：

<li><%= task.title %></li>

HAMLの見解

あるエンジンから別のエンジンへの構文が非常に似ていることに気付くでしょう。変化するのは、それぞれの冗長性だけです。たとえば、SLIMはその中で最もクリーンなものです。

3つのファイルのコードを見てください：

# Content of index.html.haml
:css
  h2 {
      text-align: center;
  }

  table, td, th {
    border: 1px solid #ddd;
    text-align: left;
  }

  table {
    border-collapse: collapse;
    width: 80%;
    margin: auto;
  }

  th, td {
    padding: 15px;
  }

%h2 List of Notes
%table
  %thead
    %tr
      %th Title
      %th Description
      %th Tasks

  %tbody
    = render partial: 'notes_haml/note', collection: @notes

# Content of _note.html.haml
%tr
  %td
    %span= note.title


  %td
    %span= note.description


  %td
    %ul
      = render partial: 'notes_haml/task', collection: note.tasks

# Content of _task.html.haml
%li= task.title

非常に似ていますね

SLIMの見解

最後に、SLIMの見解があります。これが他の2つとの最大の違いです。全体の構造がより明確になります：

# index.html.slim
css:
  h2 {
      text-align: center;
  }

  table, td, th {
    border: 1px solid #ddd;
    text-align: left;
  }

  table {
    border-collapse: collapse;
    width: 80%;
    margin: auto;
  }

  th, td {
    padding: 15px;
  }

h2 List of Notes
table
  thead
    tr
      th Title
      th Description
      th Tasks

  tbody
    = render partial: 'notes_haml/note', collection: @notes

# _note.html.slim
tr
  td
    span= note.title


  td
    span= note.description


  td
    ul
      = render partial: 'notes_haml/task', collection: note.tasks

# _task.html.slim
li= task.title

また、レイアウトをそれぞれのエンジン構文に変換する必要があります。 ビュー/レイアウトの下に2つの新しいファイルを作成する必要があります フォルダ： application.html.haml およびapplication.html.slim 。

その仕事は宿題としてあなたに任せます。ただし、難しい場合は、記事の最後にあるGitHubプロジェクトのリンクで私のバージョンを参照できます。

$ hey https://localhost:3000/notes_erb/index

Summary:
  Total:        9.3978 secs
  Slowest:      9.1718 secs
  Fastest:      0.0361 secs
  Average:      1.2714 secs
  Requests/sec: 21.2816

$ hey https://localhost:3000/notes_haml/index
Summary:
  Total:        10.8661 secs
  Slowest:      10.2354 secs
  Fastest:      0.1871 secs
  Average:      1.4735 secs
  Requests/sec: 18.4058

$ hey https://localhost:3000/notes_slim/index

Summary:
  Total:        11.3384 secs
  Slowest:      10.7570 secs
  Fastest:      0.0437 secs
  Average:      1.5406 secs
  Requests/sec: 17.6392

$ hey -n 1200 https://localhost:3000/notes_erb/index

Summary:
  Total:        52.2586 secs
  Slowest:      19.2837 secs
  Fastest:      0.0389 secs
  Average:      0.6960 secs
  Requests/sec: 22.9627

$ hey -n 1200 https://localhost:3000/notes_haml/index
Summary:
  Total:        61.7637 secs
  Slowest:      18.5290 secs
  Fastest:      0.0442 secs
  Average:      0.8557 secs
  Requests/sec: 19.4289

$ hey -n 1200 https://localhost:3000/notes_slim/index

Summary:
  Total:        63.1625 secs
  Slowest:      19.9744 secs
  Fastest:      0.0874 secs
  Average:      0.7959 secs
  Requests/sec: 18.9986