

While modern JS frameworks such as React have server-side rendering capabilities, it is usually not convenient to do this in a non-NodeJS backend server. Phoenix LiveView is built on top of Elixir processes and Phoenix Channels - every LiveView instance is a BEAM process, acting very much like a GenServer, receiving messages and updating its state. It is groundbreaking in the way it maintains the states of components and manages their updates - in Phoenix LiveView, components are stateful on the server, and their events and updates are communicated via a bidirectional WebSocket connection. It is familiar in that it lets you define UI elements as nestable components composed of pure HTML markup, and it builds upon the experience of reactive UI frameworks in implementing mechanisms that calculate diffs between consecutive UI states to ensure efficient updates. Phoenix LiveView's concept is both groundbreaking and familiar, in different ways. You will usually need to implement a JSON API or a GraphQL service, or perhaps you could develop a WebSocket-based solution using Phoenix Channels.Įither way, the Pareto 80/20 principle will imminently catch you, and when you get to the 20% of work needed to finish off your message-passing code, it'll soon become a framework within a framework.
LIVEVIEW SOFTWARE HOW TO
The challenge, though, is pretty much down to how to exchange data between the UI and the backend. In contrast, modern frameworks such as ReactJS or Vue.js don't care about how the data model layer works at all (loosely coupled data stores such as Redux are often used for this) - but they have a virtual DOM concept - long story short, a pattern of incrementally upgrading only those elements that need to be changed, based on changes in the state of particular components and their children. Historically, for instance, developers using BackboneJS would define a Backbone.View to represent an atomic chunk of user interface, behind which there's a Backbone.Model, encapsulating the business logic of data.īackbone remained unopinionated about how views were to be rendered, so it had no built-in tools to make the re-rendering of views on model changes efficient - the whole structure of a view had to be built from scratch and replaced, which tended to yield inefficient views.

Many JavaScript frameworks, both contemporary and not-so-contemporary ones, rely on manipulating the page's DOM for dynamic content updates. Lessons learnt from reactive UI libraries Which is great, given that many Elixir developers do not exactly consider themselves fluent at JS, or - just like myself - are not exactly in love with JS. Long story short, LiveView is a tool that lets an Elixir developer create reactive UIs without writing a single line of JS code.

Phoenix Framework is Elixir's answer to the never-ending question of how to build rich web applications, and it's got a lot of tools that make the job easy - one of the latest being Phoenix LiveView. The thing about Elixir, on top of Erlang/OTP, is that it offers a great mix of making life easy and being a scalable and reliable platform that will not let you down when your estimated traffic of 4000 users becomes 4,000,000 users.

LIVEVIEW SOFTWARE SERIES
In a series of articles (don't forget to subscribe to our newsletter!), we'll convince you that Phoenix LiveView will revolutionize the way you create reactive UIs! Why Phoenix?
