jan-swiatek

jan-swiatek

Hi,

I’m learning Phoenix for a while and I don’t get the differences between MVC and LiveView. When should I use which, or how to mix them properly? Can you give me some examples as well?

Showing Posts 1 to 9

tfwright

tfwright

This seems like a strange question, assuming you mean Model/View/Controller, since the latter is a general pattern for building software and LiveView is a very specific framework for rendering HTML server-side. The default Phoenix code structure already encourages a sort of MVC structure by encouraging you to keep business logic (Model) in contexts, and providing a template system so you can keep your mark up (View) separate from your event handlers (Controller). So really it’s only left to us as Phoenix LiveView users to try and respect the boundaries the framework has already put in place, and not put functions that generate HTML in contexts, or general business logic in specific live views, etc…

If you provide some more specific examples of things you’re confused about, maybe we can give you more specific pointers.

jan-swiatek

jan-swiatek OP

Thanks for the explanation.

I follow “Phoenix LiveView Pro” from The Pragmatic Studio. As far as I know, now I’m using LiveView for all stuff. They mentioned that there is a possibility to use LiveView only when it’s necessary using live_render() (I assume that I should use traditional MVC instead of LiveView and live macros). Which approach is better or when to use them? Please correct me if I’m wrong.

cmo

cmo

It depends.

I assume when you say MVC you mean something along the lines of the stateless HTTP request-response type of web. Plain old Phoenix gives you that. You click something, send a request to the server and it loads a new page.

LiveView maintains a connection between the server and the client over WebSockets. This allows the server to push events to the client. There are other things that you get with LiveView but this is the core difference.

tfwright

tfwright

After years of “JS all the things!” there has been some backlash and now people are starting to realize that the dev resources required to create and maintain complex SPA type software may not always be worth it. So many people are returning to standard server rendered HTML and injecting JS only where they need it for truly dynamic features. live_render makes it easy to do that, but to use LV instead of JS for those features. So as @cmo says there’s no general rule for which is “better,” rather you first have to describe what kind of app you want to build. If you are building a SPA you probably won’t need it because every view will already by a LV.

travisf

travisf

Based on the original question, with Phoenix, if you are following their patterns, you are already building with models and views. As @cmo mentioned, the C part of MVC is controllers, if you are using LiveViews you will have a live folder rather than a controllers folder. I’m not sure it’s harmful to think of them as being drastically different, the live folder will act as a sort of controller for data from the model and pass it to the view.

This is of course an over simplification but I think in theory it’s a good way to think of things.

As @cmo mentioned using controllers vs LiveView absolutely depends but you are not wedded to either one, you can create a controller for some pages that will have traditional HTTP request-responses and frontend JavaScript and LiveView for dynamic pages where you want to push data to and from the client without a page refresh. Personally, I find working with traditional HTTP request-responses tends to get pretty limited if I’m trying to build an interactive user experience so I tend to stick with LiveView as a default but it’s conditional on what the page is.

derek-zhou

derek-zhou

My only advice is don’t blend static view and LiveView until you are very comfortable with both of them. Limit your choice first; if the problem space is too vast you can easily get lost exploring.

jan-swiatek

jan-swiatek OP

Thank you guys for all replies.
I’ll try both ways in that case.

tfnielson-se

tfnielson-se

This is very helpful, I’ve been battling with how to make the connection between liveview and controllers, makes sense that the “live” folder is the “controllers” folder. If this concept is true, this just unstuck me for a while.

codeanpeace

codeanpeace

Yeah, it’s a useful analogy for sure, but it’s good to know it’s not a perfect one.

For example, a key difference is that stateless HTTP requests pass through plugs before reaching Controller actions whereas LiveView events sent within stateful connections do not pass through plugs before reaching LiveView callbacks. And this distinction introduces some important security considerations for the LiveView model around authentication and authorization.

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
roeland
Kia ora, We have been using elixir-google-api to connect to Google Drive. However, with the updates to Tesla due to CVEs this is now bro...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
Onor.io
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
New
jaybe78
Hello, I’m developing a online persistent chat system (what’s app) like using elixir/dynamodb/aws for a mobile app(flutter). The diffic...
New
Trolleger
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
New

Other Trending Topics Top

jvoegele
Bond brings Design by Contract to Elixir: preconditions, postconditions and invariants as executable specifications, checked at runtime a...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews