brazerzkidaispice.blogg.se - Phoenix liveview form

#Phoenix liveview form registration
#Phoenix liveview form code

We want to provide immediate feedback to our users when the information they’re providing is missing or incorrect.

#Phoenix liveview form registration

Think of a registration form on a web page. If that doesn’t immediately make sense, let’s take a step back and consider the problem.

#Phoenix liveview form code

The new feature, tentatively called “LiveView”, allows developers to add dynamic, client-side interactions to web pages, using code that runs in Elixir on the server. So far, I am satisfied with what I have been able to achieve, and I intend to keep using it in the future.In his keynote at ElixirConf last week, Chris McCord announced a new feature for the Phoenix web framework that caused many jaws to hit the floor, and had the hall buzzing when the talk was over. There are many other benefits that LiveView broughts to the table, but in this case it is worth evaluating what is your requirement before proceeding with it. There are ways to integrate it with some client side technologies, but that will probably take more time than doing it directly with JS and ajax.

You are not working on the client side anymore.

This is a non-traditional approach, so it is probable that you are not familiar with it and you will have to read a lot about the underlying technologies to be able to grasp a good understanding of the implementation.

There are a couple challenges to face when working with this approach: Obviously, this is a very simple example, and more sophisticated things can be implemented, so give it a try. I found LiveView very easy to work with, and the sensation you get when you are on the user side is that it is fast. There are other libraries that are trying to do something similar in other frameworks (like, for example, Reactor for Django). LiveView is an approach that is gaining traction. You could have several of those parameters and react as necessary in those cases. These values tell LiveView to call the handle_event method with the `filter` parameter. The form has `phx_change: filter` when declared. %,įilter = Map.put(_state, param, value)Īnd, we are done. Modify the template to send the client eventsĪdd the events to the template so we can react to changes: %>Īdd the functions to react to client events: In our case, we can simply add a blank filter (unfiltered data): def mount(_params, socket) do We basically establish what a “stable known state” is. The mount function is where we initialize the LiveView. LiveViews can be attached to routes, controllers or templates. I will go through every point in this list in detail.

Modify the template to send the client events.

There are 4 things that need to be done to implement our LiveView: This function won’t be implemented in the following exercise, we will just assume that it correctly retrieves the information from the database and filters as expected. Also, we will use a function named retrieve_items which optionally receives a map with the filters to apply. For installation instructions, please read the documentation. I will focus on implementing the proposed scenario.

Once the connection is established, there are some events in the client that propagate to the server, the server updates the state, and a minimal DOM diff (DOM differences with respect to the old version) is then sent to the client to be rendered. The client connects to LiveView via websockets.The html is rendered and sent to the client.The view is mounted (an actual function named mount is called, initializing the view).The user sends a regular HTTP request to the page where LiveView is being used.LiveView provides a third way: Writing server-side code only, while providing real-time interactivity and avoiding page reloads. The second approach does not need to reload the page and can be made to be highly interactive, but additional complexity is added as a separate application needs to be created and maintained for this seemingly simple task. The first approach requires a page reload and will not be interactive at all. Javascript application using ajax to retrieve the information from an API.Form submitted via http, with the fields being the parameters to filter.There are 2 approaches that quickly come to mind (which I assume the reader is familiar with): I propose the following (common case) scenario: We need to filter data from a database and the size of the data is big enough to discourage from filtering directly in javascript. In this post, I will try to illustrate how it works, by showing a use case where I successfully applied it. It enables us to implement interactive applications without using javascript beyond the bare minimum.