John Rush

Posted on Jun 6, 2023 • Edited on Jan 22

I built the same app 6 times! Which JS Framework is best?

#frontend #webdev #react #vue

Hi, I'm John, Multi Startup Builder.
I enjoy both coding and marketing.
See all my 20 products here
→ johnrush.me
→ my BIO
→ Say Hi to me On Twitter
→ Try my website builder

Warning: This post contains a high dose of code, humor, and life-changing revelations. Proceed at your own risk. 😎

When people ask me which frontend framework is my favorite, I usually reply with "all of them." But recently, I decided to put that statement to the test by building the same app using not one or two but five different frontend frameworks.

In this roller-coaster ride of an article, we'll build a simple To-Do app (yeah, another one) in five steps:

Angular
React
Vue.js
Svelte
Elm
MarsX

You might be thinking - what about jQuery? Well...that's so 2010! 🙅‍♂️ Let's dive into some modern stuff!

Step 1: Acing it with Angular 🔥

Angular has been around for quite some time now and is known for being powerful yet opinionated (thanks Google). It gave birth to concepts like components and Dependency Injection while rocking our worlds with Two-Way Data Binding.

ng new todo-app --routing=false --style=css

Inside app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>To-Do App</h1>
    <ul>
      <li *ngFor="let todo of todos">{{todo}}</li>
    </ul>
    <form (submit)="addTodo()">
      <input [(ngModel)]="newTodo" name="newTodo">
      <button type="submit">Add</button>
    </form>`,
})
export class AppComponent {
  todos = [];
  newTodo = '';

  addTodo() {
    this.todos.push(this.newTodo);
    this.newTodo = '';
  }
}

Don't forget to import and include FormsModule in app.module.ts.

Step 2: Reacting with React ⚛️

React came as Facebook's gift 🎁 to us developers who were tired of manually updating DOM elements every single time something changed in the data model (cries in vanilla JS).

npx create-react-app todo-app

Inside App.js:

import React, { useState } from 'react';

function App() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewToDo] = useState('');

    const addTodo = e => {
        e.preventDefault();
        setTodos([...todos, newTodo]);
        setNewToDo('');
    };

    return (
        <div className="App">
            <h1>To-Do App</h1>
            <ul>{todos.map(todo => (<li key={todo}>{todo}</li>))}</ul>

            <form onSubmit={add_todo}>
                <input value={new_todo} onChange={(e) => set_new_todo(e.target.value)} />
                submit_button
            </form>
        </div>
    );
}

export default App;

Step 3: Viewing it through Vue.js 💚

Vue.js entered our lives as this cool kid on the block that wanted to make things simpler for us developers while giving Angular & React a run for their money.

vue create todo-app

Inside App.vue:

<template>
  <div id="app">
    <h1>To-Do App</h1>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{todo}}</li>
    </ul>

    <form @submit.prevent="addTodo">
      <input v-model="newTodo"/>
      <button type="submit">Add</button>
    </form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: '',
    };
  },
  methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    },
  },
};
</script>

Step 4: Svelte-ing into Simplicity 🧡

Svelte arrived fashionably late but was worth the wait! This framework promised something different - no virtual DOM!

npx degit sveltejs/template todo-app

Inside App.svelte:

<script>
    let todos = [];
    let newTodo = '';

    function add_todo(e) {

        e.preventDefault();
        todos = [...todos, new_todo];
        new_todo= '';

}
</script>

<main>
    <h1>To-Do App</h1>
    <ul>{#each todos as todo}<li>{todo}</li>{/each}</ul>

<form on_submit|prevent_default={add_todo}>
<input bind:value={new_todo} />
<button type="submit">Add</button>
</form>
</main>

<style>
  /* Add your styles here */
</style>

Step 5: Elm-inating Complexity with Elm 🌳

Elm stepped into our journey as this purely functional language based on Haskell offering "no runtime exceptions" (cue angelic music).

Inside src/Main.elm:

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, h1, input, li, text, ul)
import Html.Attributes as Attrs exposing (value)
import Html.Events as Events exposing (onClick)


type alias Model =
    { todos : List String
    , newTodo : String
    }


init : Model
init =
    { todos = []
    , newTodo = ""
    }


type Msg
    = AddTodo


update msg model =
     case msg of 
        AddTodo ->
            { model | todos=model.todos++[model.newTodo],new_todo=""}


view model =
      div []
          [ h1 [] [text "To-Do App"]
          , ul [] <| List.map (\todo -> li [] [text todo]) <| model.todos 
          , form [Events.onSubmit |> Events.preventDefault |> onClick add_todo]
              [
                inputAttr [ value model.new_todo,
                           on_input set_new_to_do] [],
                submit_button []
             ]
         ]


main=
Browser.sandbox{
    init=initial_model,
    update=update,
    view=view}

Although Elm took some getting used to, its type system & pattern matching helped us build robust components along with The Elm Architecture(T.E.A) making sure everything stayed organized even when complexity increased.

Step 6: MarsX - It took less time to code the todo list here than it took time to write this sentence :D

<schema>
  <array name="todo">
    <object>
      <string name="title" />
    </object>
  </array>
</schema>

Now that you've witnessed how I built the same app using different frontend frameworks, you might be wondering which one is the best. Well, my friend, that's like asking a parent to pick their favorite child - it just doesn't work that way.

Each framework has its strengths and weaknesses; what works for me may not work for you. So go ahead, take your pick and start building some amazing apps! 🚀

And remember: no matter which framework you choose, don't forget to have fun while coding! 😄

Follow me on twitter
Credits to fireship

Thx for reading, check out my projects:

Hi, I'm John, Multi Startup Builder.
I enjoy both coding and marketing.
See all my 20 products here
→ johnrush.me
→ my BIO
→ Say Hi to me On Twitter
→ Try my website builder

Top comments (39)

eshimischi • Jun 8 '23

SolidJS is absent here. Would love to see it also in your list. Lots of upsides.

Ilya Shigabeev • Jun 10 '23

What about writing it yourself and submitting here?

Danny Engelman • Jun 16 '23 • Edited

Just Vanilla JavaScript

No dependencies
editable in the browser
immediate execution
etc, etc,
⚠️ and can handle multiple <todo-list> in one page:
Click the Result Tab, and wonder why you are still developing with Build and Compile steps...

Note: This whole "comparison" of six frameworks ofcourse just is clickbait to mention MarsX

To compete with MarsX I would have added just one dependency (the custom element) and write only HTML:

<todo-list title="impediments">
* Walter is waiting for a MarsX account
* Danny is waiting for a MarsX account
* Sophie is also waiting for a MarsX account
</todo-list>

But if you prefer more keyboard strokes; feel free to do it the MarsX way:

<schema>
  <array name="todo">
    <object>
      <string name="title" />
    </object>
  </array>
</schema>

John Rush • Jun 12 '23

the key goal was to show very basic example for all 6,
In future articles I will dive in to routing, state and more

Ryan Hawthorne • Jun 12 '23

Having worked on many of these amazing libraries and frameworks for the better part of a decade now, I can confidently create something in just a few mere days, that in JQuery would have taken me hours.
:D

Charlie J Smotherman • Jun 9 '23

Astro is missing from this list

John Rush • Jun 9 '23

gonna add it into a new tutorial

Francisco Zapata • Jun 18 '23 • Edited

Great post bro!!! Thank for sharing it.

However, with the "script setup" syntax of the Vue 3 Composition API, the script is reduced to just this:

<script setup>
    import { reactive, ref } from 'vue';

    const todos = reactive([]);
    const newTodo = ref('');

    function addTodo() {
        todos.push(newTodo.value);
        newTodo.value = '';
    }
</script>