5 ms·
React to LiveView for Performance [audio]
- typeofhuman 3y agoWhat's with not being able to seek the podcast audio? I have to listen to all 45mins in one go...
- lefrenchy 3y agoI’ve been wanting to use LiveView so bad, it’s just incredibly hard to justify to a team when React is working just fine :(
- bicx 3y agoI 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.
- nesarkvechnep 3y agoIt is hard to justify, especially when front-end devs are monoglots. I bet your backend is Node + Mongo.
- deliriumchn 3y agonot 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
- pdimitar 3y agoElixir the language is not niche at all, and you can achieve practically everything with it. But maybe you meant adoption numbers.
- nesarkvechnep 3y agoNot niche at all.
- golemiprague 3y ago[dead]
- throwawaymaths 3y agoIf you're looking for something to do, implement this: https://www.deepmind.com/blog/decoupled-neural-interfaces-using-synthetic-gradients https://www.deepmind.com/blog/decoupled-neural-interfaces-us... in this: https://hexdocs.pm/nx/Nx.html https://hexdocs.pm/nx/Nx.html Someone at our local meetup said it was the future.
- bullfightonmars 3y agoWow. 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.
- cpursley 3y agoI’m experienced with Elixir but have no idea what all this is. Can you break it down for me and it’s benefits?
- throwawaymaths 3y agoNormally, 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.
- eclark 3y agoLiveView 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.
- bongobingo1 3y ago> light node.js dependency 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.
- sodapopcan 3y agoWas going to comment the same. I haven't had to touch node or npm in a year or so.
- wturner 3y agoSometimes 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.
- stanmancan 3y agoI’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.
- artellectual 3y agoThat's been my experience too!
- robertoandred 3y agoA list of 100 items in react stuttered? Sounds like PEBKAC, not with react.
- thomasfromcdnjs 3y agoYeah, 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.
- dham 3y agoWith 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.
- tommica 3y agoYeah, 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.
- thomasfromcdnjs 3y agoCommercial grade apps where I do throttle CPU. If you are only re-rendering what is required, it's just a webpage at rest.
- dham 3y ago> 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.
- egeozcan 3y agoWould 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!
- artellectual 3y agoI 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 https://instellar.app
- agos 3y agocan you go more in detail of what was difficult in React / Typescript but an order of magnitude easier in LiveView?
- artellectual 3y agoWith 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.
- jamil7 3y agoWhenever 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?
- deliriumchn 3y agothats 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
- jorams 3y agoThis 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.
- peoplefromibiza 3y agothe same way you do it with every other technology you write components for it https://petal.build/ https://petal.build/
- jamil7 3y agoOK, so by mixing it with a JS library (Alpine.js) by the looks of the source code.
- peoplefromibiza 3y agoFrontend 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. The presentation layer it's up to the developers. Wanna react to a change? setup a `phx-*` event Wanna handle some custom event? Setup a hook [1] [2] [1] https://hexdocs.pm/phoenix_live_view/js-interop.html https://hexdocs.pm/phoenix_live_view/js-interop.html [2] example of reacting to Monaco editor events: https://github.com/BeaconCMS/live_monaco_editor#fetching-the-editor-value https://github.com/BeaconCMS/live_monaco_editor#fetching-the...
- dhucerbin 3y agoIs 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.
- sodapopcan 3y agoIn 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.
- deleted 3y ago[deleted]
- arrowsmith 3y agoSounds 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.
- arrowsmith 3y ago