Phx.gen.html vs phx.gen.live

I’m reading, Contexts — Phoenix v1.6.15, and it’s all about phx.gen.html. When would you use phx.gen.live instead?
I generated both and they look similar/identical in the browser.
They both use .heex files

mix phx.gen — Phoenix v1.6.15 says:
live has Liveview
html has Controller and View

I’m building my first application and I don’t know which to choose.

2 Likes

There are differences “under the hood” primarily. With gen.html you get a controller and take the traditional MVC approach with a single page call to your router. With LiveView there’s the addition of websockets where the GenServer takes the place of a traditional controller.

The primary difference is that web socket that requires a more persistent connection. LiveView is mostly both an Elixir backend as well as front end. Normal views (I’m not a fan of the term “dead views”) relies on JavaScript for more frontend behaviors. If you’re looking to integrate things like React, Vue, or Svelte you’ll have a slightly easier time if the backend is not a LiveView. It’s not that you can’t marry a heavy JS frontend with a LiveView backend, its just that fetching is handled a lot differently.

There is a lot more to each topic but if you’re making something that’s targeting crappy internet or things like phones, you may not want to choose LiveView. You can have great experiences and fortunately there is wide browser support for web sockets but particularly very old browsers don’t support them well or at all.

If this were me and I wasn’t aware of typical MVC architecture I would create 2 prototype projects generating both phx.gen.html and phx.gen.live. It’s a good way to get intimately familiar with both. I believe the majority of the Phoenix books do just that. They start you with normal views before moving to live.

3 Likes