Adopt LiveView

Introduction

Anatomy of a LiveView

Read time: 3 minutes

#Understanding each part

Let's return to the code from the previous step:

Mix.install([
  {:liveview_playground, "~> 0.1.1"}
])

defmodule PageLive do
  use LiveviewPlaygroundWeb, :live_view

  def render(assigns) do
    ~H"""
    Hello World
    """
  end
end

LiveviewPlayground.start()

#Understanding Mix.install

Mix is the tool that manages and compiles projects in Elixir. For Elixir scripts the function Mix.Install/2 is used to install dependencies without having to create an entire Mix project . In practice you will rarely host LiveView projects using .exs scripts (although it is possible and valid depending on your project). However, for learning this is good enough.

Hey, what was that /2 you said in Mix.install/2?

In Elixir the functions are different depending on the number of arguments. So just as there's a function called Enum.count/1 there is also the Enum.count/2 function which takes two arguments and they are different. It is worth mentioning that this number of arguments represents the arity of the function. A function that accepts one argument is an unary function. A function that accepts two arguments is a binary function. A function that accepts three arguments is a ternary function.

#The PageLive module

For convenience sake our LiveviewPlayground always looks for a defmodule PageLive do to use by default. If you forget to write it you will see an error in the system. We will see later that this name doesn't matter that much and can be called anything when we study Phoenix's Router.

The first line of the use LiveviewPlaygroundWeb, :live_view module is important and you will see it in all LiveView applications. The use macro works behind the scenes as a way to execute code at compile time. Think of it as "by the time this code compiles, things will be added." When we study the LiveviewPlaygroundWeb module everything will become clearer but you just need to know now that almost every time you make a LiveView, its module will have something like use WebProjectName, :live_view.

def render(assigns) do
  ~H"""
  Hello World
  """
end

Finally, the minimum for you to have a LiveView is, shockingly, the view. That is, a function that explains which HTML code will be shown to your user. Every LiveView (without exception) has a rendering function that exclusively receives an argument called assigns (we'll talk about them later). All your render functions needs to do is return valid HTML using sigil_H/2.

sigil_H/2?

In Elixir, sigils are binary functions (take 2 arguments) that are used to transform text into something else. sigil_H/2 transforms valid HTML into an optimized data structure to send HTML to your user. Do we need to know how it works? No! But we will see in the future only for curiosity sake in advanced topics.

#Recap!

  • Mix is the Elixir project compilation tool.
  • Mix.install/2 is useful for simple projects and is generally not used to host LiveView in production.
  • All LiveViews have a render/1 function and always receive an argument called assigns.
  • use YourProjectWeb, :live_view adds things at compile time to make your LiveView work properly.

Feedback

Got any feedback about this page? Let us know!

Next
LiveView Assigns