LiveView With Phoenix

A few months ago, I started learning Elixir because I wanted to get a good grasp of Functional Programming.  While learning, I made a project called Github Identicon that you can check out here. 

If you want to learn more about what Elixir is, check out this video.

It was a different world altogether for me and I liked my stay there, so the next obvious thing was to have a look at Phoenix. 

The first thing I did was to learn how to make a simple CRUD API, that's the "Hello world" for any backend frameworks, I guess.

Then I came across Phoenix channels.

Channels in Phoenix is one of the best features you can ask for. It enables soft real-time communication with and between millions of connected clients. Channels bring interactive functionality to the web page. Usually, when you load a page, you are sending a request to a server and the server responds back with the HTML template. Once the rendering of the page is done, a server has no way to communicate back to your browser.

Channels operate differently. When you load a page, it can establish a connection between a client (your browser) and the server. Once the connection is established, they can send messages back and forth. Phoenix uses WebSockets as a transport protocol.

Now, after all this, I came across with something called Phoenix LiveView.

Let's directly jump into this.

It’s a two-step process —

Step 1 (a combination of Step 1 2 & 3 in the above diagram) indicates the stateless connection where the entire static and dynamic HTML content is sent to browser from server and get rendered.

Step 2 (Step 4, 5 combined) establishes a stateful connection via WebSocket and further updates are sent for only the dynamically changed contents.

For more details, you can read this article.

Now let's build something and see what I actually meant by all this.

I am assuming you already have an Elixir Phoenix setup If you don't, go ahead and have that setup first.

Now let's start with creating a new project:

The phx.new command with the --live flag will create a new project with LiveView installed and configured. 

Now let's start by building a CRUD application.

This command will basically generate LiveView, templates, and context for a resource. The first argument is the context module followed by the schema module and its plural name (used as the schema table name).

We will also create a table called posts like this:

Overall, this generator will add the following files to lib/:

• A context module in lib/demo/timeline.ex for the accounts API
• A schema in lib/demo/timeline/post.ex, with an users table
• A view in lib/demo_web/views/post_view.ex
• A LiveView in lib/demo_web/live/post_live/show_live.ex
• A LiveView in lib/demo_web/live/post_live/index_live.ex
• A LiveComponent in lib/demo_web/live/post_live/form_component.ex
• A LiveComponent in lib/demo_web/live/modal_component.ex
• A helpers modules in lib/demo_web/live/live_helpers.ex

This command, at last, will ask you to add some things which are basically live routes. Go ahead and add them to your router.ex file. Now, before running the app, run the mix ecto.create command which will create the database and migration files for you.

Now go to localhost/4000/posts and you will have all the basic functionality and templates for your CRUD application.

Here are some changes and files to add:

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo_web/live/post_live/form_component.html.leex

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo/timeline/post.ex

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo_web/live/post_live/index.html.leex

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo_web/live/post_live/post_component.ex

In this file, we have broadcast and subscribe method:

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo/timeline.ex

https://github.com/GeekyAnts/phoenix-liveview-demo/blob/master/lib/demo_web/live/post_live/index.ex

Add them and run your project again. You will see something like this:

Now as you can see in the demo, we post all the other devices also get updated in real-time or if you like, it also updates all of them and Phoenix LiveView for you.

Go ahead and inspect the website you will see how it gets updated every time. 

Here is Github Repo for the code.

Thank you for reading. You can ping me on Twitter. Let's build something together.

Cheers and keep experimenting.