Phoenix 1.6.0 已發布

克里斯·麥考德於 2021 年 8 月 26 日發表

---

很榮幸地宣布 Phoenix 1.6.0 已在新的 LiveView 0.16 版本基礎上推出！此版本帶來許多重大新增功能、提升品質的改善、錯誤修正和一些淘汰功能。使用下列指令，即可取得 rc phx.new 產生器

$ mix archive.install hex phx_new 1.6.0

新的驗證和寄件信件產生器

感謝 José Valim 和 Aaron Renner 的努力，Phoenix 1.6 附有新的 phx.gen.auth 指令，用於在您的應用程式中設定完整的驗證解決方案。您可以在 José 在 Dashbit 部落格的貼文中，閱讀驗證產生器的背後設計決策。現在，Phoenix 也預設包含 swoosh，用於寄件信件支援和新的 phx.gen.notifier 任務，用於產生通知以發送電子郵件，以及用於本地端開發的開發人員信箱。

新的 LiveView HEEx 引擎

除了產生器之外，Phoenix LiveView 0.16 也剛剛推出，附有新的 HTML 引擎 (HEEx，~H)，用於 HTML 意識範本編譯，您會看到它用在未來所有 Phoenix 產生的 HTML 檔案之中（phx.new、phx.gen.html、phx.gen.live 等）。新的引擎不僅確保合適的 HTML，還提供語法便利性，用於渲染元件，例如 <.form for={@user} id="user-form">。這個新引擎要感謝 Marlus Saraiva 的傑出工作，他從他美妙的 Surface 函式庫中抽取功能，該函式庫建立了 Phoenix LiveView 之上的功能。我們期待看到每個專案可以持續創新並分享，我們努力發展新的引擎功能。有了 HTML 引擎和函式元件，我們建立了一個共享和可重複使用元件的動態生態系統的基礎。您可以 takip HEEx 路線圖，以了解我們的功能計畫。現在，以下是 Phoenix LiveView 文件中關於 HEEx 的快速摘要，讓大家了解進度

注意：HEEx 需要 Elixir >= 1.12.0，才能在錯誤訊息中提供正確的檔案：行：欄資訊。較早期的 Elixir 版本會運作，但會顯示不正確的錯誤訊息。

HEEx 是 EEx 的 HTML 意識和元件友善延伸，它提供

• 內建處理 HTML 屬性
• 一個 HTML 類型的符號，用於注入函式元件
• 編譯時驗證範本的結構
• 最小化透過網路線傳輸的資料量

範例

~H"""
<div title="My div" class={@class}>
  <p>Hello <%= @name %></p>
  <MyApp.Weather.city name="Kraków"/>
</div>
"""

語法

HEEx 建構於 Embedded Elixir (EEx) 之上，後者為一種範本語法，使用 <%= ... %> 來內插結果。在本節中，我們將探討 HEEx 範本中的基本建構及其語法延伸。

內插

HEEx 和 EEx 範本都使用 <%= ... %> 來內插 HTML 標籤主體內的程式碼

<p>Hello, <%= @name %></p>

同樣地，條件式和其它塊狀 Elixir 建構也受支援

<%= if @show_greeting? do %>
  <p>Hello, <%= @name %></p>
<% end %>

請注意，我們不會在關閉標籤中包含等號 = (因為關閉標籤不輸出任何東西)。

HEEx 和 Elixir 內建的 EEx 之間有一個重要的差異。 HEEx 使用特定註解來內插 HTML 標籤和屬性。讓我們來看看。

HEEx 延伸：定義屬性

由於 HEEx 必須分析和驗證 HTML 結構，因此使用 <%= ... %> 和 <% ... %> 的程式碼內插僅限於 HTML/組件節點的主體（內部內容），而不能應用於標籤內。

例如，下列語法無效

<div class="<%= @class %>">
  ...
</div>

請改為

<div class={@class}>
  ...
</div>

對於多個動態屬性，您可以使用相同的符號，但不必將表達式指定給任何特定屬性。

<div {@dynamic_attrs}>
  ...
</div>

{ ... } 內部的表達式必須是關鍵字清單或包含表示動態屬性的鍵值配對的對應。

HEEx 延伸：定義函式組件

函式組件是透過 Phoenix.Component 模組的幫助作為純粹函式實作的無狀態組件。它們可以是本地的（相同模組）或遠端的（外部模組）。

HEEx 允許在範本中使用類似 HTML 的符號直接呼叫其函式組件。例如，遠端函式

<MyApp.Weather.city name="Kraków"/>

本地函式可以使用開頭句點呼叫

<.city name="Kraków"/>

組件可以定義如下

defmodule MyApp.Weather do
  use Phoenix.Component

  def city(assigns) do
    ~H"""
    The chosen city is: <%= @city %>.
    """
  end

  def country(assigns) do
    ~H"""
    The chosen country is: <%= @country %>.
    """
  end
end

通常最好將相關函式群組到單一模組，而不是擁有許多具有單一 render/1 函式的模組。您可以在 Phoenix.Component 中進一步瞭解組件。

新的 LiveView 伺服器生命週期掛勾

感謝 Phoenix 團隊的 Michael Crumm，LiveView 0.16 引入了 on_mount 和 attach_hook 掛勾，這些掛勾提供了點入 LiveView 生命週期關鍵階段的機制。這允許開發人員在必要時繫結/更新分配、攔截事件、修補程式和定期訊息，並注入常見功能。掛勾可以附加到以下任何生命週期階段：:mount（透過 on_mount/1）、:handle_params、:handle_event 和 :handle_info。

新的 LiveView live_session 以最佳化導覽

LiveView 0.16 也在路由器中引入了 live_session 巨集，用於將 live 路由分組在一起。這讓經過 live 轉址的所有 live 導航都可以在現有的 websocket 連線中發生。這樣可以避免到伺服器的額外 HTTP 回傳，並提供速度極快的導航體驗，因為不再需要 HTTP 交握。live_session 也允許提供生命週期 on_mount 掛鉤，讓 LiveView 能夠共用常見的程式碼路徑，例如驗證，而不需要在每個模組上指定掛鉤。

使用 esbuild 建置免費的 Node 和 webpack 資產

除了新的 HTML 引擎，變更也發生在 phx.new 專案產生器處理資產的方式。我們已從公式中完全移除 webpack 和 node。現在您可以在系統中沒有 node 或 npm 的情況下建置您的 js 和 css 捆組！多年來 Phoenix 最大的支援問題都與 node 工具、重大變更，以及經常不必要的重複運作有關。透過使用 esbuild，專案可以使用可攜式二進位檔案進行跨平台、免依賴的資產建置，速度很快且「簡單好用」/tm。五年後，您不應害怕對 js 或 css 檔案進行一些變更，並發現您的工具已在您的下方中斷。進階的 front-end 使用者可以繼續利用符合其工作流程的 webpack 工具，但我們希望這個免依賴的解決方案能為資產帶來更多的「安心」，就像 Phoenix 的標語一樣 :)。非常感謝 DockYard 的 Brian Cardarella 和 Phoenix 團隊的 Max Veytsman 探索我們的 js 選項並實驗解決方案，以及 Wojtek Mach 領導提取可攜式二進位檔案 esbuild。還要感謝 José 為各種工具編寫一些 go 和 JavaScript 公關，以便在沒有殭屍程序的情況下處理 mix 關閉。

此版本也將 Phoenix.View 提取到其自己的函式庫 phoenix_view 中，因此非網路使用者可以在不引入所有 Phoenix 的情況下使用 Phoenix 的檢視呈現。

一如往常，循序漸進的升級指南可以在這裡找到

https://gist.github.com/chrismccord/2ab350f154235ad4a4d0f4de6decba7b

您也可以查看 完整變更記錄 以取得更多詳細資訊。

如果您需要協助，請在 elixir slack 或論壇上找到我們。編碼愉快！

–Chris

---