(and I'd put my bets on sooner considering the early stage of LiveView), that isn't enough. The module page for the template engine gives some extra insight.

The first place you should look for answers and pointers. LiveView docs have a dedicated assigns and HEEx guide, so that's Now that we know multiple concepts are mixed in with assigns, we see how they may actually not be as simple as they look in the code. But it may also raise some ambiguity and doubts as far as assigns are concerned, and, if used without care, change tracking can definitely backfire performance-wise. Overall, change tracking is a powerful feature that does some really useful stuff under the hood while keeping our code clean. LiveView goes the extra mile to save on server resources and bandwidth without sacrificing the dev experience - which works well for a compiler-backed server-side library. React focuses on optimizing historically slow DOM patching while assuming that modern JS is fast enough to re-evaluate typical rendering logic (ideal for a client-side library). Note: We're not saying React is the worst here. Consider the following live component:įunction UserHoroscope ( In React, we can achieve similar behavior in a more explicit way (so it'll serve as a great visual exercise) The approach towards it varies across JS frameworks - check out the above keywords regarding Angular, Ember, Knockout, or Svelte. Note: This feature is known by different names, including change tracking, reactivity, memoization, or observability.

That's some cool out-of-the-box optimization. Since this happens on the server, it's only the actual changes that will ever take up bandwidth, saving you the effort needed to slim down JSON payloads in classic SPAs, e.g., by designingĬase-specific or flexible APIs. Templating engine that splits your template into static and dynamic parts, and then only re-evaluates dynamic parts to You see, if you update a single React prop or piece of React state, the whole component will re-render. If you think that assigns are 'just' props and state, and the show is over, brace yourself. We'll examine a specific use case along with its solution in a moment. Needed to hold the assigns during their entire session. This is especially true considering we're on the server, and all connected users will claim the memory Stealing the spotlight from API layers, state managers, sagas, and browser-based test suites.Īt the same time, state management is undoubtedly a challenging task, and keeping memory usage under control is one of This is perhaps the biggest highlight of LiveView, Imagine all the moving parts that it would take to produce and fully test the client-side equivalent of assign. Pick your plan: Basic ($4.99) Premium ($19.99) You're currently subscribed to plan. Let's start with an overview of what assigns actually are. Opposed to EEx assigns, Plug assigns, or Phoenix Socket assigns. Note: Throughout this post, we're going to use assigns to refer to LiveView assigns - as We'll describe what LiveView assigns actually are in relation to popular frameworks,įind out how assigns work in practice, and highlight some of the traps that one may easily fall into. In this article, we're going to demystify LiveView assigns. Within multiple teams, so I know first-hand that assigns canįeel like magic to many developers (myself included). Over the last three years, I've had the pleasure to work on multiple LiveView apps Own complexities and may backfire if misused. But as they do so much, assigns come with their Present, and update data effortlessly and efficiently. Assigns, managed by the LiveView socket, are a core tool for making that happen - allowing you to store, Phoenix LiveView lets you develop full-stack apps with client-side interactions while mostly avoidingĬross-stack hassle.

Elixir liveview