Three Years of Phoenix Liveview and Elixir

Erlang has been around for roughly 30 years and it’s not going anywhere. Elixir, which is built on top of the BEAM VM²⁰²⁰For years, I kept my usage of BEAM for backend systems relatively secret. of Erlang, is likely even more popular than Erlang at this point.

However, longevity is somewhat of an illusion since the only thing that matters is if your application can still run²¹²¹In one job, we kept two application servers running WebLogic mapped to fixed ips for licensing running in 32-bit vms / containers for roughly a decade without any modifications. And yes, they were critical to the business. and be updated. Eventually, there is some reason that is required for an upgrade whether it be a platform change, security, or the language version has reached end of life.

From my experience, Erlang and Elixir, I believe, land in the middle of the pack on this unofficial ranking based on my official gauge of my irritation level with a language.

The top three:²²²²Perhaps there are other languages that are better, but I just don’t have the experience with them.

• C - It’s C. It’s irritating in different ways, but not this.
• Vanilla Javascript/Jquery. Kind of impressed. I literally still have a single page of frontend code written in jquery by someone that is running fine after 11 years.
• Erlang/Elixir - I was annoyed exactly once. BEAM OTP only supports the last release and there is roughly a new release every year. Elixir supports several versions of OTP. The single time I was irritated was early in the life of Elixir which resulted in a half-day of yak-shaving.²³²³I wanted to upgrade an OS. However, I couldn’t install the ancient OTP I had available which then involved a chain reaction of needing to update Elixir followed by having to deal with dependency upgrades and having to re-write a bunch of code. Nowadays, Elixir is approaching the stability of Erlang libraries which just work and are rarely updated.

Then there some others which I rank not in my top 3.

• PHP - Not very irritated. Of course, I used it back in the early 2000’s, so perhaps my memories are more fond.
• Ruby - The 1.9.3 to 2.0 transition was pretty decent. I know this cause I barely remember it. I have gone through dependency hell a few times with some software written in Ruby, so there’s that.
• Java - Mild irritation. Luckily, having an army of developers to deal with upgrades lessens my personal annoyance.
• Python - The 2 to 3 transition was not good.
• Anything else involving JS. Heaven help us all. You’re never sure if anything will work.

For systems and prototyping, it is tough to beat Erlang/Elixir.²⁴²⁴Actually, I can’t think of a single language that does better. Lisp might be up there in different domains.

Out of the box, you get:

• genserver - a representation of a server
• a communication fabric - to communicate between different processes
• supervision tree - to restart a server or process if it crashes
• fault detection - to inform other processes
• internal api versioning
• a cache

With these, it is easy to model and represent systems.²⁵²⁵Deployment is not linked to design, you can scale everything independently if needed later.

Let’s say you wanted to build a product that needs 3-4 services. Well, you can literally model that on a single node. This would involve writing several different Genservers, starting them under the supervision tree, and then allowing them to communicate via message passing.²⁶²⁶You’d need Kubernetes, something like GRPC, Redis, and who knows what else to emulate this setup.

If you’re an architect that needs to figure out if a design is going to work, look no further than Elixir.²⁷²⁷Just be aware that your code may run better than teams who spent months and you may feel sad and depressed about the world.

Elixir has evolved a great deal since I started in 2014. I could never actually recommend teams to use Erlang because of the lack of ecosystem, but that is no longer true for Elixir. I could go into more details, but a high-level overview:

• standard library and documentation are very solid and evolved over time to the point dependencies could be removed.²⁸²⁸And mix hex.docs offline is bliss after you block fonts.google.com.
• mix is one of the best package managers and hands-down favorite from all the languages I’ve used.²⁹²⁹Heard great things about Cargo, but never used Rust.
• build and runtime configuration for deployment has improved to work out of the box with `mix release`.³⁰³⁰I use distillery and still need to migrate.
• ETS - the Erlang Term Store which serves as a cache
• Hex PM has many packages, however, there is still no official Stripe, Paypal, or Paddle libraries. If you would like to use an esoteric db, good luck with that. On the positive side, the libraries that are available are good quality and the entire erlang ecosystem is available.
• BEAM VM - the underlying virtual machine is extremely stable yet continues to improve.³¹³¹A recent release added JIT which improved performance considerably on some applications.

The BEAM VM has made many choices which allow systems to scale with some effort. Much has been written about the performance and reliability.

• https://blog.discord.com/scaling-elixir-f9b8e1e7c29b
• https://www.wired.com/2015/09/whatsapp-serves-900-million-users-50-engineers/

Some caveats, the BEAM VM is not great for computationally intensive tasks. If you’re looking for that, pick another language to write that code.³²³²I have a few NIFs in C for that reason.

I started out with zero frontend experience. With backend systems, I actually never used a framework either.³⁴³⁴Also, with great irony in the last three years, I’ve realized the principles that allow for maintainable and scalable backend architecture are the same for having good ux architecture for settings/components/etc.

So over many years, I experimented with Ember, Angular, Elm, Mithril, React/Redux, etc. I would usually spend 1-2 days every year which meant there was a brand-new thing to look at by the time I got back to it.³⁵³⁵My favorite was spending a few days writing an Angular application to find out Angular 2 was coming out and wasn’t backward compatible. Even the build tools are out of control.³⁶³⁶Bundler, webpack, yarn, and npm and I’m still wondering why I couldn’t <script src=bla.js> and be done with it.

With LiveView, a total of 285 lines of javascript code and 930 lines of SASS was written in the past three years.³⁷³⁷I wasted three weeks experimenting with AlpineJS and then went back and wrote 50 lines of hooks. I’ve spent the majority of my time on the business domain.

So, in my opinion, if someone can figure out the insanity of the Javascript frontend ecosystem, they can easily learn Elixir and Phoenix Liveview.

I’ve been using Liveview from 0.1 to 0.17.7. There have been a few breaking changes between versions and I believe I’ve spent roughly 10 days going through liveview upgrades in 3 years.³⁸³⁸It took 5 days to update from 0.15.4 to 0.17.7 where 3000 lines of template got updated. With various other changes, the socket data was reduced by 50k uncompressed.

There are 18,000 lines of domain specific Elixir-code and 3000 lines of templates.

Code quality is always an amusing discussion since I’ve never been a fan of test coverage.³⁹³⁹I believe in fear-based testing. If I’m ever scared of changing something, I write tests around it. There are roughly 5000 lines of tests and probably another 5000 lines of doctests, but absolutely zero coverage of LiveView.

The application consists of different stateful components which I manually test after changes. Once a component is created, there is just a question of how it is populated. After the first year, I re-factored many things to use structs instead of maps.⁴⁰⁴⁰Yes, they are the same thing, but you know what you’re getting with a struct. In the second year, I discovered protocols which simplified several designs of new features.

Regarding static analysis, I tried using dialyxir and added specs to many functions, however, this was not very useful. I did want to try static typing, but I’m not sure how much it would really help with my design and code organization. Essentially, if anything is wrong, the application will crash immediately. It’s rather hard to miss. At least for this application, I don’t believe static types would have been useful.⁴¹⁴¹They seem to be hot right now, so I do want to try them. Usually, my modules/genservers/services are tiny. For instance, the location code is just 500 lines. I’m just confused where static typing would be useful.

In lieu of static typing, I do depend on doc tests.

Functional codebases are generally easier to maintain and since I wrote all the code, I can’t say I’m having any issues.

Users are worldwide while the server is on the east-coast of the US. LiveView is much faster than the SPA that I had before and much more usable on mobile and high-latency connections. The reasons are:

• Liveview generates a full page that is useful on the first render. The SPA would load a skeleton page and then start populating the page. The first render is roughly 25k gzipped and requires no javascript, so on low-end cpu and slow connections it is magnitudes faster.
• No CDN used and only requests to a single domain. The SPA would require various javascript libraries which I had pulled from a CDN. When travelling in India, I found that DNS requests to the CDN would take seconds sometimes.⁴²⁴²Amusingly, the location service I built for fun gives a noticable performance boost on low-end devices. Making multiple tcp connections and ssl negotiations also adds to latency.
• The full page load contains everything the user needs after two requests which are the main page (25k gzipped) and the app.css(10k gzip). The javascript loads afterwards and establishes the websocket(80k gzip)⁴³⁴³I added a tour at some point, but looking at the size really makes me irritated enough to remove it..
• Most users explore the page via various tabs which are css-based.⁴⁴⁴⁴I think this is called optimistic ui? There is no javascript involved in the use of the page even though there appear to be dynamic elements. Going to the backend only happens when the user wants something re-rendered.
• The websocket is established after roughly 1-2s if the js is cached. A full page change of all components over the socket is 70k of raw json which is 8k gzipped⁴⁵⁴⁵Note this is 3x smaller than the original page render.. A full-page re-render of all components takes roughly 400-600ms from India connecting to a US server. On the east coast of the US, a re-render takes less than 100ms.
• If the websocket is broken for whatever reason, there is a phx-error class which becomes active. This allows the user to know that they are no longer connected to the server. Once re-connected, the notice goes away. In practice, this doesn’t interfere with the usage due to the fact that everything the user needs has already been loaded, but hidden with css.
• Websocket reconnections call a form-recovery to ensure that the user state can be re-populated on the server side.

Since this application would never be able to do everything client-side anyway⁴⁶⁴⁶But maybe with WASM eventually., this architecture is as fast as you can get at the expense of cpu and memory.

LiveView keeps track of the user state on the server side and then sends a diff to the client to render. While the connection is active, it uses roughly 3MB of memory on the server side. After 15 seconds, the connection is hibernated and reduces to 150kB.

Theoretical upper estimate: The memory usage depends on the number of concurrent active connections. I don’t imagine this application will ever have 10,000 concurrent users, but in that case the server would need roughly 30GB of ram. From the compute side, estimating at an update every 10 seconds requires 1000qps. The worst page takes 100ms which would imply that 100 cores are needed. In reality, the majority of page events take less than 20ms which would suggest roughly 20 cores.⁴⁷⁴⁷This is roughly $200 / month at Hetzner.

Real-world estimate: From real-world usage, roughly 1GB of ram per 200 users is required for this application and at most 5-10 are active at a time. So if there was 10,000 concurrent users, this could still run on a single server and give mega-monies.

Given all that, I’m good with the server-side performance.⁴⁸⁴⁸For now. Optimization is fun.

Users have asked for an offline mode. I’m not sure if this is feasible yet, but the application has been designed to be cached. There is an open question if the application can connect properly to the websocket without an updated csrf token.

For my application, Phoenix LiveView is really, really good. The cognitive overhead is much lower and I can’t say enough good things about it. Simply put, it made a herculean task of building web applications, merely difficult. That is true innovation.⁴⁹⁴⁹Fire And Motion – Joel on Software covers my thoughts pretty well on this. While everyone else is busy keeping up with the tech and wasting their time, liveview just works.