LiveView passing assigns to LiveComponent # We do that by passing a keyword list of assigns in the live_component/3 call.
It is rare that we would want a heading that is titled “Title”, so it would be nice if we could customize the component’s heading text. defmodule DemoWeb.StaticTitleLiveView doĭef handle_params(_params, _uri, socket) do leex HTML template and pass the LiveView’s socket and LiveComponent module. To use the StaticTitleComponent (above) in a parent LiveView, you call the live_component/3 function from within the LiveView’s render/1 function or. Pretty simple, right? Hardly useful, but you could drop this into any markup where you happen to need a “Title” heading. This is a LiveComponent: defmodule DemoWeb.StaticTitleComponent do The Most Basic LiveComponent # Minimal LiveComponent #Ī LiveComponent is an Elixir module that, at a minimum, uses the Phoenix.LiveComponent macro and defines a render/1 function.
Liveview elixir code#
You can find the code for this article on GitHub. In a separate article, we walk through a more useful Modal LiveComponent that you could use across multiple apps. In this article we will walk through the features of LiveComponents with simple and admittedly contrived, but complete, examples. The LiveComponent documentation is very good and describes the mechanics of creating and using LiveComponents and design considerations. LiveComponents operate similarly to LiveViews, but execute in the context of a parent LiveView process, allowing you to create LiveView web pages that are composed of multiple LiveComponents, which can be reused across multiple LiveViews and apps.Īnd, LiveComponents can be nested inside other LiveComponents, allowing you to assemble larger aggregate components from smaller ones. LiveView LiveComponents allow you to package-up markup, state, and functionality into reusable components that you can use in your LiveViews. The result is super-snappy web apps that your users will love.Īnd now… LiveComponents bring another key facet to the LiveView story.
Liveview elixir full#
“if the route belongs to a different LiveView than the currently running root, then the existing root LiveView is shutdown, and an Ajax request is made to request the necessary information about the new LiveView, without performing a full static render.” Second, when transitioning between LiveView web pages, the new page can load over the same connection rather than tearing it down and establishing a new one. “by keeping a persistent connection between client and server, LiveView applications can react faster to user events as there is less work to be done and less data to be sent compared to stateless requests that have to authenticate, decode, load, and encode data on every request.” But LiveView web apps are even faster!įirst, LiveViews can respond to user events in the same process, without loading a new page. This is due to the lightweight processes and soft-realtime Erlang VM underlying Elixir apps. While some targeted JavaScript will likely be required in your app, the majority of your development time is spent in Elixir, which is well-known for its developer productivity.Įlixir Phoenix apps are known for their stability and speedy response times. This allows you to create dynamic web apps without employing heavy-weight client-side frameworks or trafficking in JSON.
Once the connection is made, user actions are sent to the LiveView process and updates to server-side state are sent down to the browser, efficiently refreshing the page by modifying the DOM. When a client browser connects to a LiveView an initial rendering of the HTML is returned to the browser (good for SEO), which then in-turn establishes a persistent connection with the server. And LiveView reacts to user actions, in a way that until now, only client-side programming could do.Ī LiveView is an Elixir process, essentially a GenServer. Built on top of Elixir’s Phoenix web framework, LiveView allows you to create pages that are dynamically updated when state changes on the server, providing dynamism to web pages. LiveView enables client-side dynamism using server side processes. Phoenix LiveView became publicly available in March of 2019 and has been under active development ever since as such we can expect regular changes and additions until the 1.0 released, likely sometime in 2020. LiveComponents are a new feature of Phoenix LiveView, bringing lightweight reusable components into the LiveView ecosystem. DecemIntroduction to Phoenix LiveView LiveComponents
0 kommentar(er)
