![phoenix liveview tutorial phoenix liveview tutorial](https://i.imgur.com/cwPeqwK.png)
In other words, I would be changing the value in a search input placed in a projects index to filter the projects card, keeping only ones that match the search. ‘Projects.IndexLive’) module and bind the function to the specific element in the browser. Instead, I would simply create a function inside the ‘#Live ’ (i.e. Because of this, I didn't need to think of GET requests, what to preload, and what should be fetched from the server. The client and server are conversing through the WebSocket, dynamically changing the state of a page. In LiveView, the communication exchange is more like a dynamic conversation. (This is otherwise known as a stateless web approach.) This means that, in practical terms, we’re preloading a lot of data. That is, each request comes with a response containing the most information that we are allowed to send and that could be important for a specific page. Using LiveView, I could simply focus on building the web app as a whole without any differentiation between frontend and backend.ĭevelopers typically think about the flow of communication between client and server taking the form of a mail-like conversation. This is largely because LiveView made it easy to build new features, and coding doesn't require switching the context between building the backend in Elixir and frontend in JavaScript. Not only was this an exciting and pleasant task - building an app in Phoenix LiveView was also surprisingly fast.
![phoenix liveview tutorial phoenix liveview tutorial](https://res.cloudinary.com/dwvh1fhcg/image/upload/v1595876371/features/sortable_simple.png)
As I familiarised myself with the new paradigm, I found the app building process to be refreshing, as it presented me with a completely different approach to building certain features. This was an exciting task for me, as it was my first contact with LiveView.
PHOENIX LIVEVIEW TUTORIAL HOW TO
This isn't a step-by-step tutorial on how to create a web app in LiveView, and each person who uses the program for similar tasks will undoubtedly take an individual approach to how they work.
![phoenix liveview tutorial phoenix liveview tutorial](https://res.cloudinary.com/dwvh1fhcg/image/upload/v1596091178/tutorials/absinthe_img_7.png)
Please note that in this post, I’ll be describing my personal experiences and chosen approaches while using Phoenix LiveView.