Curiosum messenger app tutorial with Phoenix LiveView

I am following along the series of blog posts about building the Curious Messenger, that will teach us how to use LiveView to build it.

Have you ever wondered why Elixir and its ecosystem is gradually becoming the go-to platform for many web application developers who want both performance and productivity, not a tradeoff between them?

Well, we’ll show you why - and we’ll do it via a thorough crash course of Phoenix Framework’s hot deal, Phoenix LiveView , using which we’ll build a Messenger-like live chat application .

In a series of articles (don’t forget to subscribe to our newsletter!) , we’ll convince you that Phoenix LiveView will revolutionize the way you create reactive UIs!

I though to open a thread to help us point issues in the article and get help when we get stuck on it.

5 Likes

I will start with my first suggestion.

The series should start by explicitly lock the versions being used for Elixir, Phoenix and Postgres.

Specially in the context of Phoenix the generators output will be different depending on the version we have installed, thus making the tutorial hard to follow. It may not be an issue now for anyone using the last versions of Elixir, but I foresee it being an issue for people on older versions or in the future when the generators change their output.

For example this is the file I use in this project to lock everything on my Elixir Docker Stack:

stack_name=phoenix
stack_build_source=git
stack_port_map=4000:4000
os_name=debian
os_version=stretch
erlang_otp_version=22.1.6
elixir_version=1.9.4
phoenix_version=1.4.10
phoenix_command=phx.server
database_image=postgres:11-alpine
database_user=postgres
database_execute_command=postgres

For the blog post something around this would suffix:

erlang_otp_version=22.1.6
elixir_version=1.9.4
phoenix_version=1.4.10
database_image=postgres:11-alpine

or maybe only:

$ mix phx.new --version
Phoenix v1.4.6

$ elixir --version
Erlang/OTP 22 [erts-10.5.4] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe]

Elixir 1.9.4 (compiled with Erlang/OTP 22)

postgres@localhost> SHOW server_version
+------------------+
| server_version   |
|------------------|
| 11.5             |
+------------------+
SHOW
1 Like

Another suggestion is to name the paths for the files in the code examples.

Instead of:

# Validate nickname presence and uniqueness:
def changeset(user, attrs) do
  user
  |> cast(attrs, [:nickname])
  |> validate_required([:nickname])
  |> unique_constraint(:nickname)
end

Maybe:

# /path/to/file/here

# Validate nickname presence and uniqueness:
def changeset(user, attrs) do
  user
  |> cast(attrs, [:nickname])
  |> validate_required([:nickname])
  |> unique_constraint(:nickname)
end

A good example for some code in the blog post that I had no clue where to put it in:

def controller do
  quote do
    # ...
    import Phoenix.LiveView.Controller
  end
end

def view do
  quote do
    # ...
    import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]
  end
end

def router do
  quote do
    # ...
    import Phoenix.LiveView.Router
  end
end

I thought of controllers/page_controller.ex, but turns out that needs to be in curious_messenger_web.ex :wink:

So while experienced Elixir developers may understand where to go, a newbie like me will get lost easily.

Yes, yes I have been a Elixir forum member for a long time, but I just play with Elixir time to time, months of interval between, and I am still pretty much on the basics of it… I keep forgetting what I have learn some months ago :wink:

1 Like

One more suggestion…

When asking us to edit current code, please be explicit about the need to override the entire code or just add some lines to it.

For example the generator gave me this code:

  schema "chat_conversation_members" do
    field :owner, :boolean, default: false
    field :conversation_id, :id
    field :user_id, :id

    timestamps()
  end

The blog post says to add the belongs to relations, thus I added like:

  schema "chat_conversation_members" do
    field :owner, :boolean, default: false
    field :conversation_id, :id
    field :user_id, :id

    belongs_to :user, User
    belongs_to :conversation, Conversation

    timestamps()
  end

But no luck compiling it, because it needs to be like this:

  schema "chat_conversation_members" do
    field :owner, :boolean, default: false

    belongs_to :user, User
    belongs_to :conversation, Conversation

    timestamps()
  end

Now you may argue that its the exact code in the blog post, but for me was not clear that it was needed to remove the other lines or if the author was just giving some context, or if the generator used by me was populating the file wit more code.

@Exadra37 Thanks a lot for your feedback. It’s a crazy period and it might take some time for us to apply your valuable suggestions to our existing content, but we definitely want to do this and apply it to our future content. We appreciate your help a lot.

2 Likes

@vincentvanbush up to now I’m still waiting for you to make the changes you said you will make, especially the one suggested by @Exadra37 about indicating the path to the file requiring editing (file being refereed to by the tutorial)