If the live_view is the data container, the live component is the stateful component. The code below shows how we define a live_view: defmodule do But, this would make for a terrible foundation to build applications on, so there are exceptions to the rule that are beyond the scope of this article.įor now, we just need to think of a LiveView as a container in which our data fetching happens. In an Elixir LiveView, usually, each route is independent and has nothing functionally in common with other LiveViews. From there, we render a router, which is essentially just a large switch case. The biggest difference between Phoenix LiveView and React is that React typically has only one root. LiveViewĪ LiveView is usually the root of a page. Finally, we’ll make the components safer to use with compile time warnings, providing them with sensible defaults but allow for overriding. Then, we’ll learn how to make our main markup cleaner by abstracting parts out into separate components. We’ll start with a basic view that contains some layout and a button. In LiveView ≥v0.18, we can get very close to that. In my opinion, the component model used by React, which allows users to create small components, is the bees-knees. The ability to do so is something I look for when deciding to learn a new framework or library, helping to keep a consistent look and feel on my sites and making it easy to create layouts with the same amount of padding and margin. In my experience, I tend to create components that allow me to encapsulate markup and styling for consistency no matter how small the project I’m working on. Now that we know what a LiveView is about, let’s see what one actually looks like. The routing comes with a new HTML payload over the WebSocket connection, and some JavaScript code will patch the current view, much like how React works today. Therefore, even when performing routing, you remain on the same page. In essence, a Phoenix LiveView is a single-page application. The backend will handle that event, update the state, and return the new HTML to be rendered on the frontend. Since all state is kept on the server, a button click doesn’t necessarily call a JavaScript function or update the state. Rather, when the button is clicked, an event is sent over the WebSocket connection. How does a LiveView fit into the frontend? Therefore, we’ll need to take on a different mindset. When compared to other frontend libraries and frameworks like React and Svelte, where all state is kept in JavaScript on the frontend itself, this might seem counterintuitive. In the context of an Elixir application, a single connected user holds a process on the server where the state is kept and updated. Instead of returning static HTML or JSON, we return a WebSocket connection that allows the frontend and backend to communicate, hence the “live” in LiveView.Ī LiveView is a server-side, stateful pattern that keeps frontend state on the server. LiveView is a special type of connection that we can return from the JSON and HTML routes mentioned above. How does a LiveView fit into the frontend?.In this article, we’ll explore Phoenix by learning how to write reusable components in Phoenix LiveView. There are several other types that you can return, but JSON and HTML are the most common. Phoenix is an HTTP routing framework for the Elixir language that allows you to create endpoints that return either JSON or HTML. How to write reusable components in Phoenix LiveView My primary work has been in React, but I'm now working full-time on an Elixir/Phoenix project. In our initial setup, whenever a notification was issued in the application, `put_flash` was used to issue an alert.Simon Bundgaard-Egeberg Follow I work as a lead developer at a consultancy called it-minds. = the following controller: defmodule MyAppWeb.AlertsComponent false Our setup consisted of an alerts component with the following (simplified) html (we use slim ).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |