a carefully curated stack for modern web developers in 2025

<- return to blog

Vue, Sinatra & Elixir #

An opinionated, but killer modern tech stack for 2025 #

If you're building a modern web app in 2025 you need a stack that’s fast, scalable, and easy to work with. The days of bloated monolithic frameworks are behind us. Instead this stack uses specialized tools that get the job done efficiently.

Vue, Sinatra, and Elixir — a powerful trifecta that combines a lightweight frontend, a simple backend for APIs, and a blazing-fast WebSocket server. This stack gives you speed, flexibility, and most importantly of all - developer joy.

Why not a monolith or server-side-components?

It's simple - speed and scalability. A monolith or server-side-components will never be able to match the speed of a statically served Vue bundle from NGINX or Caddy. It's more efficient for our backend to only serve a JSON REST API or WebSocket that our statically served client can consume.

Vue.js & TypeScript for the front-end #

We are going to build our front-end using Vue.js and TypeScript, and we are going to make it a single-page-application that takes advantage of lazy-loading and code-splitting. This ensures we can statically serve our entire app while keeping initial bundle size low.

Vue is a simple front-end framework - it has a wonderful DX and is lightweight and fast. It has a simple learning curve that allows you to build more with less time.

Quasar, a component library for Vue makes it simple to create amazing apps.

Here is a minimal example of a Vue SFC

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
  button {
    font-weight: bold;
  }
</style>

Why not React?

Vue.js was chosen because it simply provides us less headaches and lets us focus on the fun part - building the app. I'm also firmly convinced that people who like JSX are masochistic freaks, because there is no other way to describe people who think it's OK to put your markup in a JavaScript function.

Big components or pages can highly benefit from being seperated into seperate CSS, TS and Vue files using the options API. Smaller and more simple components can benefit as single-file-components using the composition API.

State management in Vue is simple with Pinia.

Vue embraces web standards like HTML, CSS, and the DOM, while React replaces them with abstractions.

React’s Problem: React’s Virtual DOM re-renders entire components unnecessarily unless you manually optimize it (useMemo, useCallback). Hooks in React introduce unintuitive rules, require useEffect for side effects, and lead to "stale closure" bugs. CSS in JS adds runtime overhead.

Vue reactively updates only what's needed. There is also no need for useState or useEffect.

Sinatra for RESTful JSON APIs #

We are going to be building a RESTful JSON API that our Vue app can consume and we don't need all the bells and whistles that comes with Ruby on Rails or any other monolithic framework. Sinatra is a small microframework that makes building APIs a dream.

This API is going to handle your apps business logic - and Sinatra/ActiveRecord is the tool for the job. You can use ActiveRecord with Sinatra using the sinatra-activerecord gem.

Sinatra APIs are simple to write and easy to deploy and scale.

Here is a minimal example of a Sinatra API

require 'sinatra'
require 'json'

get "/hello" do
  content_type :json
  { message: "Hello from Sinatra" }.to_json
end

Why Ruby?

Ruby is simple and has a great DX. This allows us to move fast and build more with much less headaches. Ruby, Sinatra and ActiveRecord combined makes it easy to write complex business logic.

When it comes to performance, Sinatra is "fast-enough" for most applications. We can scale horizontally if necessary. Sinatra also leverages Rack middleware making it easy to add things like rate-limiting.

Ruby/Sinatra/ActiveRecord is battle-tested and used in production by companies like Apple, GitHub, Shopify & Twitch.

Why not Elixir for our REST JSON API?

Elixir is the wrong tool for the job. Elixir’s power lies in concurrency, real-time systems, and fault tolerance. Elixir has characteristics that can make it challenging to write the complex business logic that REST APIs can demand.

• Lack of Object-Oriented structures
• No return early pattern
• Immutability inconvenient for complex state management
• Hard to avoid deep nesting of if, case, with statements
• Pattern matching can get messy
• Harder to find Elixir developers

Elixir is great for our realtime features that require concurrent connections (like websockets), but not-so-great for the non-realtime features that are heavy in business logic like our RESTful JSON APIs.

Elixir for real-time features #

So your front-end app happens to require real-time updates. Perhaps you have a dashboard that demands real-time data about device metrics, or you want a live chat between your users.

We are going to use Elixir, Cowboy, Octo and Redis to build our real-time features.

Why Elixir?

Concurrency and fault-tolerance. Cowboy (Erlang’s HTTP server) efficiently handles WebSocket and SSE connections.

Elixir runs on BEAM, which supports millions of lightweight processes (not OS threads). Each WebSocket/SSE connection runs in its own process, isolated and crash-safe. Elixir can handle thousands to millions of concurrent connections.

Elixir also supports hot code swapping, meaning you can update code without restarting WebSocket/SSE connections for zero downtime deploys.

Erlang/Elixir is battle-tested when it comes to realtime features and is deployed in production by companies like Heroku, Discord and WhatsApp.

Tools in a Box #

At the end of the day - programming languages and the frameworks that come with them are just tools in a box.

Informing yourself of the strengths and weaknesses of each language and framework can empower you to make better choices when it comes to building a solution.

#

<- return to blog