Daniel Jaouen Development

Hey there! Tonight I was feverishly working on a basic Phoenix 1.7.0 app that lets me store various links. The goal was to build out a site that would replace having to keep a whole bunch of tabs open in my laptop and mobile browsers. Here it is: https://loulinks.net. Enjoy!

This is a continuation of Part 1, which you can find here:
https://danieljaouendevelopment.com/2022/12/18/a-brief-introduction-to-phoenix-and-liveview-part-1/

Now, let’s navigate to the index.html.heex file, which is located in lib/todo_web/live/todo_item_live/index.html.heex.

.header

The first thing we encounter is something that looks like an HTML tag, but is actually a LiveView function component. We can tell that it is a function component because it begins with a .. You can find the definition of the header component in lib/todo_web/components/core_components.ex. We can see that it has a class attr, an inner_block, a subtitle, and associated actions slots.

In :actions, we see that there is a .link. This is defined in LiveView itself (see: deps/phoenix_live_view/lib/phoenix_component.ex — search for “def link“. Feel free to also read the documentation at the top of the file). You can find the documentation for the patch attr in the file listed above (search for "attr.(:patch"). The long and short of it is that /todo_items/new is first translated into a Verified Route (note the ~p sigil), which then will call handle_params with the :new action.

.table

Next, we have a .table. You can also view this function component in lib/todo_web/components/core_components.ex. Basically, the table function component has three attrs (id, row_click, and rows) and a slot col which takes an optional attr label plus a slot action. The rows attr passes each list item into the :let slot of the associated slot, and the row_click attr calls JS.navigate, which will, in turn navigate the page to the show.ex LiveView. You can learn more about the JS module here: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html

.modal

Next, we have the modal function component, which is displayed only when the @live_action is in [:new, :edit]. Basically, it renders a LiveComponent, which you can find in lib/todo_web/live/todo_item_live/form_component.ex. You can read more about LiveView’s LiveComponent’s here: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html

Conclusion

And that’s it! Now we navigated through index.html.heex, so you should have a better understanding of function components and where you can find the docs for them.

Again, if you gained value from this article, feel free to throw me a dollar or two on my Buy Me a Coffee page, which you can find here: https://www.buymeacoffee.com/danieljaouen

Thanks for reading!

Hello, once again! Today, I am going to introduce you to the basics of the web framework, Phoenix. Phoenix is a web framework that reached 1.0 in 2015 written in the Elixir programming language. It is generally seen as the “successor” to Ruby on Rails, although that can be hotly debated and is not the purpose of this post. It is well known for its use of the real-time package, LiveView, which can help minimize the amount of Javascript that you have to write. It is well-suited for programmers who want a combination of functionality and performance. If that sounds like you, let’s jump right in!

Installation

I will assume that you have Elixir 1.14 installed. We are going to be using Phoenix version 1.7 in this tutorial. To install it, run the following command in your terminal:

mix archive.install hex phx_new

You may need to uninstall your previous version first (if you had it installed already):

mix archive.uninstall phx_new

Creating the App

Great! Now, let’s begin our Phoenix project by using the mix phx.new command:

mix phx.new todo

Great! Now let’s cd into the new todo directory and run the following commands:

cd todo
mix ecto.create

Great! That created the initial PostgreSQL database for us. Now, let’s run the following command to make sure everything was set up correctly:

iex -S mix phx.server

Now browse to localhost:4000 and you should see the Phoenix welcome page. If not, you will need to debug the reason you are getting your specific error.

Creating the Todos

First, let’s take a look at the help dialog that ships with Phoenix by running the following command:

mix help phx.gen.live

Feel free to read this at your convenience. Now, let’s create the Todos using the following command:

mix phx.gen.live Items TodoItem todo_items text:string

Next, follow the instructions printed to your terminal about modifying your router.ex file.

Next, run the generated database migrations:

mix ecto.migrate

Now restart the Phoenix server and re-navigate to localhost:4000/todo_items and you should see the listing page for your TodoItems. Great!

Navigating the Generated Code

Now that we have the Todo app up-and-running, let’s navigate through the code to get a glimpse at how things work under the hood.

lib/todo_web/live/todo_item_live/index.ex

First, let’s take a look at index.ex, the generated Elixir code for the index LiveView. We notice five functions:

mount
handle_params
apply_action
handle_event
list_todo_items

mount is called when the client connects and is used to set up the initial socket. You will notice that there is no render function, and that is because Phoenix uses a particular convention to display its templates: if there is an associated index.html.heex adjacent to index.ex, that template will be used.

handle_params is called whenever we have a live navigation event. These events are what you would normally have separate HTTP requests for. You can learn more about handle_params here:

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_params/3

handle_event is called whenever we have a JS “delete” event pushed to the page. Finally, list_todo_items simply calls the associated context’s function.

Next Up

Join me next time when we dive into index.html.heex. In the mean time, feel free to browse through the additional generated code.

If you gained value from this post, feel free to throw me a dollar or two on my Buy Me a Coffee page, which you can find here:

https://www.buymeacoffee.com/danieljaouen

Your support goes to the cost of keeping the server up and is never unappreciated. Thanks!