dwyl / phoenix-liveview-todo-list-tutorial

✅ Beginners tutorial building a Realtime Todo List in Phoenix 1.6.10 + LiveView 0.17.10 ⚡️ Feedback very welcome!
https://liveview-todo.herokuapp.com/
69 stars 11 forks source link

Update readme #20

Closed SimonLab closed 3 years ago

SimonLab commented 3 years ago

To be merged after #19 Update steps to reflect changes from Phoenix 1.6

codecov[bot] commented 3 years ago

Codecov Report

Merging #20 (8775d9b) into master (a61f810) will not change coverage. The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##            master       #20   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            4         4           
  Lines           30        30           
=========================================
  Hits            30        30           
Impacted Files Coverage Δ
lib/live_view_todo_web/live/page_live.ex 100.00% <ø> (ø)
lib/live_view_todo_web/router.ex 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a61f810...8775d9b. Read the comment docs.

SimonLab commented 3 years ago

A few notes while reading the LiveView documentation (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) With Phoenix 1.5 when using the flag --live to create a new liveView application, the liveView features were added with

use MyAppWeb, :live_view

However the documentation mention to just add

use Phoenix.LiveView

This allow to customize how you want to use LiveView, the example from the doc

      use Phoenix.LiveView,
        namespace: MyAppWeb,
        container: {:tr, class: "colorized"},
        layout: {MyAppWeb.LayoutView, "live.html"}

use MyAppWeb, :live_view instead configure for you the default layout:

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {LiveViewTodoWeb.LayoutView, "live.html"}

      unquote(view_helpers())
    end
  end
nelsonic commented 3 years ago

@SimonLab what I've done in the past is re-write tutorials from scratch to fit the newer version of Phoenix rather than try to spot all the differences. But if you feel that the differences aren't very big, updating should work. 👍

SimonLab commented 3 years ago

I think it should be ok to just rewrite some part, but I'll see if it becomes too tedious I might follow your suggestion

SimonLab commented 3 years ago

To render a liveview template (.heex) you can either add the file along the controller file in the live folder, this is called colocating templates. In this case you don't have to define the render function see https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-colocating-templates.

Or you can use the folder structure used for regular templates, ie view folder and template folder.

For this example, we can keep the folder structure simple and use the colocating templates feature

SimonLab commented 3 years ago

The liveView page is currently served via the router file using the live macro: https://github.com/dwyl/phoenix-liveview-todo-list-tutorial/blob/a61f8103a6079b8792bb7a50eb3b47134b3eb9b4/lib/live_view_todo_web/router.ex#L20

We can see that the :index action is also passed as an option. However because the todo liveview doesn't have any other specific actions at the moment we can simplify the route with:

live "/", PageLive

Actions are used for navigation in the liveView, see https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live/4-actions-and-live-navigation We can review the routes and navigation later on if necessary (for example delete, sort by completed...)