I recently started on a 1.6 to 1.7 upgrade with all the changes to remove phoenix_view and had some troubles. Despite Jose mentioning that phoenix_view will be maintained, I was already half-way done, so I continued on a complete migration.

Hopefully, this documentation helps someone. Also, the pre-requisite reading is:

Phoenix 1.6 to 1.7 upgrade
Phoenix View - replaced by Phoenix.Component

Main changes

A sample phoenix 1.7 project is required (currently at 1.7.2).

app_web.ex

Several additional functions need to be copied from a new project

• live_component
• live_view
• html
• html_helpers
• verified_routes

Need to eventually remove “view”

Copy files / replace from app_web/components/*

• app_web/components/core_components.ex

• app_web/controllers/error_html.ex

• app_web/controllers/error_json.ex

• Layout replacement. root.html.heex now takes on the function of both templates/layouts/{app.html.heex, live_app.html.heex}

  • app_web/components/layouts.ex (replaces app_web/views/layout_view.ex)
  • app_web/components/layouts/app.html.heex

<%= @inner_content %>

• app_web/components/layouts/root.html.heex

-     <%= csrf_meta_tag() %>
+     <meta name="csrf-token" content={get_csrf_token()} />

• router.ex

-  plug :put_layout, {AppWeb.LayoutView, :app}
+  plug :put_root_layout, {AppWeb.Layouts, :root}

• config/config.ex

 config :app, AppWeb.Endpoint,
-   render_errors: [view: AppWeb.ErrorView, accepts: ~w(html json)]
+   render_errors: [
+    formats: [html: AppWeb.ErrorHTML, json: AppWeb.ErrorJSON],
+   layout: false
+ ]

Non-Liveview

Directory structure changes

app_web/controllers/bla_controller.ex → app_web/controllers/bla_controller.ex
app_web/templates/bla/* → app_web/controllers/bla_html/*
app_web/views/bla_view.ex → app_web/controllers/bla_html.ex

File changes bla_view.ex → bla_html.ex

use AppWeb, :view

def some_helper() do
end

to

use AppWeb, :html
embed_templates "bla_html/*"
# Or to keep directory structure
# embed_templates "../templates/bla/*"

def some_helper() do
end

 @doc """
  NOTE: In migration to Phoenix 1.7.2, needed to keep this function for some generated eex files
  Generates tag for inlined form input errors.
  """
  def error_tag(form, field) do
    Enum.map(Keyword.get_values(form.errors, field), fn error ->
      content_tag(:span, translate_error(error), class: "help-block")
    end)
  end

Moving/Deletion

Can eventually delete

• lib/app_web/controllers/fallback_controller.ex
• lib/app_web/views/*

New location could be found for

• lib/app_web/templates/*

Render changes

Have to be very explicit in templates now as there is no way to dynamically choose a function that I can see so far. The functions here are actually template names as found by the directive embed_templates/* in the controllers/bla_html.ex

-         <%= render "#{@page_name}.html", email: @email, action: Routes.session_path(@conn, @page_action), changeset: @changeset %>
+     <%=  case @page_name do
+          "landing" -> landing(assigns)
+          "login_form" -> login_form(assigns)
+          "register_form" -> register_form(assigns)
+          "forgot_form" -> forgot_form(assigns)
+        end
+      %>

LiveView changes

Directory structure changes

Perhaps I’m doing it wrong, but this is what I had to do.

• app_web/live/first/ - the directory
• app_web/live/first/main.ex - the live_view / live_component

- use Phoenix.LiveComponent
+ use AppWeb, :live_component
+ import AppWeb.First.Helpers # these were previously defined in AppWeb.FirstView
+ embed_templates "templates/*"

- def render(assigns) do
    AppWeb.FirstView.render("main.html", assigns)
  end

• app_web/live/first/helpers.ex - whatever functions that were previously in FirstView

+ use AppWeb, :html

• app_web/live/first/main.html.heex - the file that gets directly rendered on component/view load. Any sub-templates need to be rendered from the templates/* directory. The render changes to a function call. If there is any conditional rendering, there needs to be a case statement with the function calls.

-  <%= render("file.html", target: @myself) %>
+ <.file target={@myself}

What if you want to keep the render function in your liveview?

This is needed for conditional rendering of templates. In that case, move the main.html.heex into the whatever templates directory you have defined in embed_templates/* and it changes from

 def render(assigns) do
    cond do
      assigns.print == true  ->
        AppWeb.FirstView.render("print.html", assigns)
      !is_nil(assigns.alt_layout ) >
        AppWeb.FirstView.render("layout#{assigns.alt_layout}.html", assigns)
      true ->
        AppWeb.FirstView.render("main.html", assigns)
     end
  end

  def render(assigns) do
    cond do
      assigns.print == true  ->
        ~H"<%= print(assigns) %>"

     !is_nil(assigns.alt_layout)  ->
        current_layout = assigns.alt_layout
        case current_layout do
          "1" -> ~H"<%= layout1(assigns) %>"
          "2" -> ~H"<%= layout2(assigns) %>"
        end

      true ->
        ~H"<%= main(assigns) %>"
     end
  end

Conclusion

In the end, the migration wasn’t hard, just time consuming. I had an organic sprawl of 30 templates and 20 liveview components in templates and live and had to touch around 70 files total and took the opportunity to namespace everything better.

I’m solo right now, but in the future if someone had to touch the code and look at the phoenix documentation, they would have been very confused.

Regardless, I prefer this new setup without phoenix_view as there seems like there is a bit less magic. Verified routes is also a nice incremental improvement. Also, perhaps this is a pipedream, but I’d like to keep this application running for the next 10 years (preferably 50) without too many major migrations.