Chapter 15: The Grass Isn’t Always Greener: Vue, Svelte, and Why You’ll Be Back

Every React developer goes through a phase where they think, “There must be a better way.” They’re right. There are better ways. But you’ll probably end up using React anyway because the job market has spoken, and it said “React or unemployment.”

Let’s explore the alternatives you’ll flirt with before inevitably returning to your React prison.

Vue: The Middle Child

Vue is what happens when you look at React and Angular and say, “What if we met in the middle?” It’s the framework that makes sense, which is probably why it has fewer jobs.

The Vue Promise

<template>
  <div>
    <h1></h1>
    <button @click="reverseMessage">Reverse</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Look at that! HTML is HTML! JavaScript is JavaScript! CSS is CSS! It’s like the web standards we already had, but in one file!

What Vue Gets Right

  1. Single File Components that actually make sense
  2. Template syntax that looks like HTML
  3. Reactive data without ceremonies
  4. Computed properties that just work
  5. Two-way binding when you want it

Why You Won’t Use Vue

# Job search results
React Developer: 10,000 positions
Vue Developer: 500 positions
"Must have React experience": 9,500 positions
"Vue is a plus": 50 positions

Vue is better designed, more intuitive, and easier to learn. So naturally, nobody uses it.

Svelte: The Compiler That Could

Svelte took a radical approach: “What if we didn’t have a framework at all?”

The Svelte Magic

<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

<style>
  button {
    background: blue;
    color: white;
  }
</style>

That’s it. No Virtual DOM. No runtime. It compiles to vanilla JavaScript. Your bundle is tiny. Performance is amazing.

The Svelte Reality

// What Svelte compiles to (simplified)
function create_fragment(ctx) {
  let button;
  let t0;
  let t1;
  
  return {
    c() {
      button = element("button");
      t0 = text("Clicks: ");
      t1 = text(ctx[0]);
    },
    m(target, anchor) {
      insert(target, button, anchor);
      append(button, t0);
      append(button, t1);
      listen(button, "click", ctx[1]);
    },
    p(ctx, [dirty]) {
      if (dirty & 1) set_data(t1, ctx[0]);
    },
    d(detaching) {
      if (detaching) detach(button);
      dispose();
    }
  };
}

It’s fast because it’s just JavaScript manipulating the DOM. You know, like we used to do before React convinced us the DOM was slow.

Why You Won’t Use Svelte

  1. Small ecosystem - Need a date picker? Build it yourself
  2. “It doesn’t scale” - Says React developers who’ve never tried it
  3. No jobs - 50 positions worldwide
  4. Rich Harris might hurt your feelings - He’s right, but ouch

SolidJS: React Without the Problems

SolidJS looks like React but actually performs well:

import { createSignal } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <button onClick={() => setCount(count() + 1)}>
      Count: {count()}
    </button>
  );
}

Looks familiar? That’s the point. But here’s the difference:

  • No Virtual DOM
  • No re-renders
  • Fine-grained reactivity
  • Actually fast

The SolidJS Tragedy

It’s better than React in every technical way:

  • Smaller bundle
  • Faster performance
  • Better DX
  • No useEffect footguns

But nobody cares because Facebook didn’t make it.

Alpine.js: jQuery for the Modern Web

Alpine is what we should be using for 90% of websites:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">
    Content
  </div>
</div>

That’s it. Add Alpine via CDN. No build step. No npm. No webpack. It just works.

Why Alpine Makes Sense

  • 11KB - Smaller than React’s error messages
  • No build step - Remember when websites didn’t need compilation?
  • Progressive enhancement - Add interactivity where needed
  • It’s just HTML - With some extra attributes

Why You Won’t Use Alpine

“It’s not a real framework” - React Developer making a contact form

Qwik: Resumability Instead of Hydration

Qwik solved the hydration problem by… not hydrating:

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);
  
  return (
    <button onClick$={() => count.value++}>
      Count: {count.value}
    </button>
  );
});

The $ means lazy-loaded. Everything is lazy. Peak performance.

Nobody uses it because nobody can pronounce it.

HTMX: The Revolutionary Idea of HTML

HTMX asks: “What if HTML… could do HTML things?”

<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

Server returns HTML. Browser swaps HTML. No JavaScript. Revolutionary.

Why HTMX Is the Future We Deserve

<!-- The entire "app" -->
<div hx-get="/todos" hx-trigger="load">
  Loading...
</div>

That’s it. The server returns HTML. The browser displays HTML. Like the web was designed to work.

Why We Won’t Get It

“But how do we manage state?” - React developer building a blog

Web Components: The Standard Nobody Wanted

Remember when Web Components were going to save us?

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <button>${this.count}</button>
    `;
    
    this.shadowRoot.querySelector('button')
      .addEventListener('click', () => {
        this.count++;
        this.render();
      });
  }
}

customElements.define('my-counter', MyCounter);

Native browser APIs! No framework needed! Standards-based!

Nobody uses them because they’re verbose and the API is awkward.

The Grass Is Greener, But…

Here’s the truth about React alternatives:

Vue

  • Pros: Better designed, easier to learn, fantastic docs
  • Cons: Smaller ecosystem, fewer jobs, “not invented at Facebook”
  • Reality: You’ll love it but can’t use it at work

Svelte

  • Pros: No runtime, tiny bundles, actual innovation
  • Cons: Small community, “doesn’t scale” FUD, compiler magic
  • Reality: Perfect for side projects you’ll rebuild in React for your portfolio

SolidJS

  • Pros: React API with better performance
  • Cons: Nobody’s heard of it
  • Reality: What React should have been

Alpine

  • Pros: Simple, small, no build step
  • Cons: “Not enterprise ready”
  • Reality: Perfect for 90% of websites, used in 10%

HTMX

  • Pros: The web as originally intended
  • Cons: Requires server-side rendering (the horror!)
  • Reality: Too simple for developers who like complexity

Why You’ll Come Back to React

  1. Jobs - 95% require React
  2. Ecosystem - Everything integrates with React
  3. Community - Largest community, most resources
  4. FOMO - Everyone else is using React
  5. Stockholm Syndrome - You’ve learned to love your captor

The Cycle of Exploration

Every React developer’s journey:

  1. Learn React - “This is complicated”
  2. Master React - “I understand the complexity”
  3. Discover Vue - “This is so much simpler!”
  4. Try Svelte - “This is even better!”
  5. Experiment with HTMX - “Do we even need JavaScript?”
  6. Check job market - “React Developer: $150k”
  7. Return to React - “React isn’t that bad”
  8. Acceptance - “This is fine”

The Real Alternative: Vanilla JavaScript

The best React alternative has always been no React:

// The entire "framework"
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// Your entire app
$('#button').addEventListener('click', () => {
  $('#count').textContent = parseInt($('#count').textContent) + 1;
});

But that’s not “scalable” or “maintainable” or “enterprise-ready” or whatever excuse we use to justify complexity.

The Path Forward

You’ll explore alternatives. You’ll find they’re better in many ways. You’ll appreciate their simplicity, their performance, their elegance.

Then you’ll check LinkedIn, see “React” in every job posting, and fire up Create Next App.

Because the grass is greener on the other side, but the paychecks are on this side.

In the next chapter, we’ll reach the final stage: Acceptance. Making peace with React, finding balance, and learning to be productive despite the madness.

But first, take a moment to npm install one of these alternatives. Play with it. Enjoy the simplicity. Remember what web development could be.

Then delete node_modules and come back to React.

We’ll be waiting. We’re always waiting.

React is inevitable.