React to LiveView for Performance [audio]

That's been my experience too!

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).

the same way you do it with every other technology

you write components for it

https://petal.build/

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

LiveView and Elixir combine to in my opinion to make the only platform that's enjoyable for front end and backend developers.

Front-end developers love the LiveView model with functional components, no state, and light node.js dependency.

Backend developers get a process/actor + OTP supervision tree that's second to none. Horizontally scalable, functional, and pretty simple at its core.

Fullstack developers get to transition seamlessly.

I've really enjoyed using it while building.

If you're looking for something to do,

implement this:

https://www.deepmind.com/blog/decoupled-neural-interfaces-us...

in this:

https://hexdocs.pm/nx/Nx.html

Someone at our local meetup said it was the future.

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.

It is hard to justify, especially when front-end devs are monoglots. I bet your backend is Node + Mongo.

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.

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.

You can watch the video of what I built with LiveView here https://instellar.app

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

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.