Finishing the transition to Phoenix LiveView.
As some of you might know from my previous posts, I have been spending the last week to converting the traditional HTTP-based controller design of Nindo to a faster and over all better alternative: Phoenix LiveView.
What is LiveView
LiveView is an alternative for traditional HTTP controllers and single page webapps. Where in the previous version of Nindo you needed to send a HTTP request for every action, which reloads the page and is quite slow, there is now a websocket connection that allows for on-demand messaging between the client and server.
Why?
I had several reasons to do so. First of all, I wanted to learn how LiveView works. I think I now have a quite solid understanding of how it works and that is nice. I also wanted to make the PWA more responsive. Currently it feels like some weird website that I yonked and just put on my phone.
LiveView allows for live navigation. That means that when you navigate to another page you also don’t need to send another HTTP request which is, like I just said, quite slow. Instead we use live_patch
(docs). Live patching the page means we alter the DOM to display a new page and change the URI, but don’t reload. That makes navigation feel almost as snappy and responsive as native apps.
Another benefit is that LiveView sends less data over the network and thus saves bandwith. Where currently I need to rerender the entire page for every action in LiveView only the data that needs to be updated is sent over the websocket connection, which is way quicker.
While rewriting all the modules and controllers to support LiveView I also did a lot of refactoring and visual improvements. The darkmode should look less sketchy in some places and the typography is now handled by @tailwindcss/typography
.
I have deployed the new LiveView version this afternoon and the code is publicly available on GitHub.
- Robin