Whenever I see examples of LiveView being used it all works seamlessly but the UI always looks very simple, like basic forms, links and buttons. How does one build more custom/complex UI controls with it?
I guess it depends what you mean by "complex ui controls".
You can add "hooks" that attach to any normal element. Those hooks have access to push/pull data/events down the socket, so you can basically set up listeners on any element to trigger what would be your normal REST calls. In that respect you can hook your <canvas> into integrating with a liveview process, but obviously it wont receive any DOM difffing etc. If your entire UI is in a canvas, you're probably better off using another UI framework - but perhaps you would still benefit from having a "live process" on the server with a socket, especially if you have any kind of chrome around it. It can simplify lots of stuff in general such as long running tasks, not having to think about a REST API, etc.
People also integrate directly with React/Svelt/Vue/etc though I dont have personal experience with doing that.
I have a reasonably complex LiveView app that has a complex UI, but they're still forms in the end, if only dressed up. Mostly its composed of "function components" (static-y bits of mark up) or "live components" (things that have some internal state, that I want to separate [sic] from the main process).
Thanks for the detailed response. I took a look at a post where react was still used and driven by server-side state using liveview hooks which looked quite interesting.
Frontend components are frontend, so until JavaScript is the only viable option, the answer is yes.
LiveView is a channel to pass data back and forth between backend and frontend in a very performant and size-effective way, that hides all the complexity involved, making it astonishingly simple to get started.
You can incrementally add client side only UI elements as you need - and if you want to use something more complex there are escape hatches which let you use your frontend framework of choice which can then hook into the LiveView process across the socket.
thats pretty much what happens when backend developers write UI, they mostly care about some ephemeral performance (hoping that their ui will get 1k RPS or something) while performance of existing tools (vue/react/svelte/remix/solid) is already absolutely enough even for heavy cases like high interval trading
This seems like a weird criticism. The motivation for people to switch to LiveView usually doesn't have much to do with performance. Instead it's about removing a whole class of work around client-server interaction. It offers the ability to have a server-powered UI be dynamic without any custom JS, to easily push content from the server to the client when something is updated, stuff like that.
Pedantic but just for drive-by readers, there isn't really any nodejs dependency. You can use it to manage JS dependencies, or you can forgo it for "vendoring" with esbuild (or bun, etc).
Liveview itself has a small JS component that is mostly transparent (socket.connect() basically). You can of course add more JS too it.
Wow. This paper is _very_ well written. I am not an expert in neural networks, but the concepts were very well described and diagramed and I was able to follow along.
I would read a whole book about neural networks written in this style.
Normally, ML training is via back propagation, which is a synchronous technique. If you try to trivially parallelize, it doesn't work, for reasons (tm).
This lets you train a machine learning model of arbitrary size (bigger than can fit on a GPU, or even a multigpu node) using an actor-based distributed technique. There is a slight training cycles count penalty but it's way less than the cost of coordination.
I love Elixir and Phoenix/LiveView, but I have the same problem. I think it will need to gain the proverbial 10x improvement over React and JS frameworks in general before people consider it.
Sometimes you can come in the side door. I built a testbed reservation app for the GUI team I work with using Phoenix LiveView. The Product manager was surprised out fast I hammered it out. So far everyone is using it without a hitch. It's not product code, but it's still in active use with no problems.
not just this, but also no one knows elixir. Its a very niche language for very niche set of tasks, rewriting existing apps form react to elixir just to use liveview is a pointless overkill
Yeah, that sounds so strange. I've had thousands if not tens of thousands of components, reacting to objects that contain millions of data points that felt native.
With 6x CPU slowdown (although not enough anymore) or a "normal" computer? React isn't exactly fast, in fact it's pretty slow. Developers just think it's fast because they have $4000 Mac Book Pro's.
Yeah, apps/sites should be tested with consumer-grade hardware and software - the browsers they have (most likely edge/chrome), with some other applications and tabs open in the background.
> If you are only re-rendering what is required, it's just a webpage at rest.
As someone who has used React since 2015, and has worked on tons of React apps, with a wide range of team members and skill level, this is easier said than done. First of all, some developers just don't "get" React. The framework has a lot of foot guns, especially around performance. The most productive I've ever seen a team is with Mobx, which does fine-grain updates out of the box if you model your state correctly.
Getting great performance in vanilla React requires constantly thinking about where state lives, lifting, lowering state, composition, and memoization. It's not exactly fun, requires a ton of diligence, and most developers can't architect a simple table that has interactivity that just re-renders a single row instead of the entire table.
It's not the fault of the developers, it's the framework that has poor performance, has a team that doubles down on awful architecture, and doesn't have the empathy of what it's actually like working in React day to day with just normal developers.
Compare this with Solid or Svelte, which have fine-grain interactivity, and you don't have to refactor your components changing where state lives constantly. You can actually describe your UI with components based on where they should live, not how they should update. Contrast that with React, which requires you to describe your UI and state by how it's updated, not where it makes sense.
In a world with advancing AI and great new frontend frameworks, why are we specifying memoization dependencies manually? It's a joke. The model of a component executing top-down every change has to go. The react-forget compiler has been in the works for years at this point. I've moved on, so should you.
I could rant on this for hours, but that's the gist.
I could also rant about this stuff for hours, lol. I ran into all this stuff in the two recent years I spent working with React daily. The fact that functions getting redefined is something that you even have to consider is kind of insane. I've never used any other frontend framework so I don't know what those are like but I'm very happy with LiveView.
I recently converted an entire React / TypeScript frontend to LiveView (will open-source the project soon). I've gone much faster with LiveView. Something which use to take me 4-5 weeks to build with React / TypeScript now takes 4-5 days.
The main reason for that is, the LiveView test framework is super simple to work with. I didn't write any tests when I was doing React / TypeScript just because it seemed so cumbersome to setup. Having a test suite that works out of the box made me write more tests for my front-end.
Not having to build API endpoints for my react components is also a huge accelerator in productivity.
In the end I ended up writing less code, with more polished / well tested front-end.
With React / TypeScript, even the setup of the test suite as I mentioned is painful, which one do you use? playwright? that one is going to be slow and cumbersome, LiveView's built in test suite does the same thing and is much more lightweight and fast. If not playwright which do you use? Jest? Vitest? this is the problem with JS community, too many choice on things that in the end don't matter to the end user.
Also the fact that you have to setup API endpoints for your data, with liveview, you have direct access to the data. You can load any state with a function call instead of having to develop a separate endpoint for your frontend, handle hydration etc... You need real-time updates? It's done out of the box, you don't have to think about it. With react, that stuff is just ALOT to do.
I ended up removing a lot of controllers from my codebase that was there just to service the react front-end. Having those controllers do not service as the "API" of the app. Specs for front-end apis and core APIs are usually quite different based on my experience.
The easiest way I can explain it is LiveView is the least friction between thought and output. React / TypeScript just gets in the way because of all the choice and abstractions you have to build for it.
Don't get me wrong, React still has it's place, there are things I would still use react for, like if I need to render something visually rich, like a flow diagram (reactflow.dev), or video component, or make something like Figma, or a calendar / gantt chart, but for most front-end UIs (95%) you just don't need React.
He did kinda answer your question with: "I ended up removing a lot of controllers from my codebase that was there just to service the react front-end. Having those controllers do not service as the "API" of the app. Specs for front-end apis and core APIs are usually quite different based on my experience"
Oh that's interesting. It won't need to remove the need for APIs (there are scripts and other clients, like embedded, that LiveView will likely not support) but cool.
Is it possible to get on Phoenix nested controllers? Like in remix.run, where for each route segment we get one controller/view. It’s really generalised version of layouts.
When I was looking into Phoenix all routes, no matter how nested, had to resolve to single controller. That meant that controller for path `/user/settings/privacy` was also responsible for getting data to display users sidebar.
Sounds like you want to define some shared behaviour that can be applied across a set of controllers? Phoenix doesn't have "nested" controllers like you describe, but you might be able to do what you want using a plug. Something like:
# lib/your_app_web/controllers/user_sidebar.ex
defmodule YourAppWeb.UserSidebar do
def load_sidebar(conn, _params) do
data = SomeModule.whatever_loads_your_sidebar_data()
assign(conn, :sidebar, data)
end
end
# then in router.ex:
import YourAppWeb.UserSidebar
pipeline :users do
plug :load_sidebar
end
scope "/users", YourAppWeb do
pipe_through [:browsers, :user]
get "settings/privacy", SettingsController, :privacy
# and all other routes that need this sidebar
# …
end
Then in your controller action `SettingsController.privacy/2`, the incoming `conn` will already have `sidebar` assigned because it's been passed through `load_sidebar`.
Remember that an HTTP request/response cycle in Phoenix is fundamentally just a list of transformations that are applied to a `%Plug.Conn{}`. If you want the same behaviour to apply to multiple controller actions, you can just define that behaviour in a plug function (i.e. a two-arity function that takes and returns a conn), then pass your conn through that plug before it reaches your controller actions.
In LiveView you can use hooks or LiveComponents for that kind of thing. Not sure about regular controllers as I've never actually built an app using them, heh.
