React to LiveView for Performance [audio] • Hacker News Board

Re: React to LiveView for Performance [audio]

#21

Post by agos » Wed, Jun 21, 2023, 8:55 AM UTC

artellectual wrote: post #14

egeozcan wrote: post #12

Would it make sense to task elixir and liveview to work only as a BFF with a separate backend? Does it not being typed affect productivity? If anyone with experience can chime in, that'd be very appreciated!

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 cumbers…

can you go more in detail of what was difficult in React / Typescript but an order of magnitude easier in LiveView?

Re: React to LiveView for Performance [audio]

#22

Post by bongobingo1 » Wed, Jun 21, 2023, 9:02 AM UTC

jamil7 wrote: post #15

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

Re: React to LiveView for Performance [audio]

#23

Post by thomasfromcdnjs » Wed, Jun 21, 2023, 9:10 AM UTC

robertoandred wrote: post #8

A list of 100 items in react stuttered? Sounds like PEBKAC, not with react.

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.

Re: React to LiveView for Performance [audio]

#24

Post by jorams » Wed, Jun 21, 2023, 9:33 AM UTC

deliriumchn wrote: post #16

jamil7 wrote: post #15

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?

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.

Re: React to LiveView for Performance [audio]

#25

Post by artellectual » Wed, Jun 21, 2023, 9:43 AM UTC

agos wrote: post #21

artellectual wrote: post #14

Earlier quoted context omitted.

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 cumbers…

can you go more in detail of what was difficult in React / Typescript but an order of magnitude easier in LiveView?

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.

Re: React to LiveView for Performance [audio]

#26

Post by egeozcan » Wed, Jun 21, 2023, 9:52 AM UTC

artellectual wrote: post #25

agos wrote: post #21

Earlier quoted context omitted.

can you go more in detail of what was difficult in React / Typescript but an order of magnitude easier in LiveView?

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…

But many already have API endpoints because you have to serve native apps too.

My question was, does LiveView also help you in a Backend-for-Frontend case?

Re: React to LiveView for Performance [audio]

#27

Post by artellectual » Wed, Jun 21, 2023, 9:52 AM UTC

stanmancan wrote: post #3

I’ve been using Elixir, Phoenix, and LiveView exclusively for about 7-8 months now and it’s been so much fun. Can’t recommend it enough.

That's been my experience too!

Re: React to LiveView for Performance [audio]

#28

Post by artellectual » Wed, Jun 21, 2023, 9:54 AM UTC

egeozcan wrote: post #26

artellectual wrote: post #25

Earlier quoted context omitted.

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…

But many already have API endpoints because you have to serve native apps too. My question was, does LiveView also help you in a Backend-for-Frontend case?

This is why I'm eagerly waiting for LiveView Native. That will remove the need for front-end APIs entirely.

Re: React to LiveView for Performance [audio]

#29

Post by pdimitar » Wed, Jun 21, 2023, 11:12 AM UTC

deliriumchn wrote: post #13

nesarkvechnep wrote: post #5

Earlier quoted context omitted.

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

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

Elixir the language is not niche at all, and you can achieve practically everything with it. But maybe you meant adoption numbers.

Re: React to LiveView for Performance [audio]

#30

Post by dham » Wed, Jun 21, 2023, 11:20 AM UTC

thomasfromcdnjs wrote: post #23

robertoandred wrote: post #8

A list of 100 items in react stuttered? Sounds like PEBKAC, not with react.

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.