:::: MENU ::::

Quest for an efficient front-end tech stack

I’ve been researching an alternative tech stack to PHP for small web applications, looking for one which can make React-quality front ends, but without having to maintain the client-server split and API middleman. Partly out of intellectual interest, And partly out of dissatisfaction with the low level of real-time interactivity provided by some apps I maintain which are still powered by PHP and Bootstrap.

Enter Phoenix Liveview. It was recommended by several YC CTOs. It’s monolithic, like PHP or Rails, with database and business logic in optionally in one file, separate template files for views, and separate CSS files (that’s a minimum of three files total for a complete web application – And in my view, a Good Thing™️).

The main appeal of LiveView to me is its potential to speed up creation of front-end development of web applications, shipping front end features, while keeping focus on the back end, and front end complexity to an absolute minimum.Context: I’m passionate and opinionated about UX, but hate getting stuck in the JavaScript time suck vortex of tool proliferation and complexity.

Context: I’m passionate and opinionated about UX, but hate getting stuck in the JavaScript time suck vortex of tool proliferation and complexity.

About Liveview

  • Server side rendering: HTML is generated server-side, and live updates are automatically shipped as compressed diffs to the browser. That means lower latency UI updates then SPAs and react.
  • Unified framework: Phoenix LiveView combines front-end rendering and back-end business logic, eliminating the need for separate client and server layers like in React + REST API setups.
  • Language: requires business logic to be written in the elixir language, which is in turn built on Erlang. It’s functional and dynamically typed.
  • Real-time capabilities: It handles real-time updates via WebSockets by default, making it ideal for applications needing real-time interaction, but it works well even without complex concurrency needs.
  • Simplified development: LiveView provides a monolithic, PHP-like experience, allowing you to manage business logic, data retrieval, and UI rendering in1 framework and 3 files.
  • Live reloading: it requires compiling, and has built-in live-reloading for development, automatically compiling and reloading changes without manual intervention.
  • No JavaScript: JS is handled completely by the framework. No JS needs to be written for SPA an end user experience.
  • Component libraries: there are several like Reacts, though not as comprehensive. They seem to provide a similar experience to eg shadcn.
  • Testing: It has a built-in alternative to full browser automation testing that is apparently much more lightweight and easier to deploy, with similar benefits.
  • VM: like Node it  requires a Elixir/Erlang VM to be running continuously to handle requests and maintain WebSocket connections.

Concerns

At first glance I don’t like the look of Elixir’s syntax. That’s the worst thing I’ve found out about the LiveView concept so far.

That and the need to run VMs.

Also: although it has some uptake, including Discord powering their back end with Elixir (coupled with React, not LiveView, on their front end), the development team looks small and not especially stable. Could be a concern for the future. Wouldn’t stop me building small apps with it.

That’s it! Happy experimenting.


So, what do you think ?