DEV Community

Cover image for I built the same app 6 times! Which JS Framework is best?
John Rush
John Rush

Posted on • Updated on

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

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:

  1. Angular
  2. React
  3. Vue.js
  4. Svelte
  5. Elm
  6. 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
Enter fullscreen mode Exit fullscreen mode

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 = '';
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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


My other articles:

21 Mind-Blowing Web Features You Probably Haven't Heard Of

20 databases to pick in 2023 - simplified

SQL, NoSql, and 5 DB types you'll never need

I built a todo app using 9 different languages

All 20 JavaScript concept you'll ever need

Top comments (41)

Collapse
 
eshimischi profile image
eshimischi

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

Collapse
 
frappuccino_o profile image
Ilya Shigabeev

What about writing it yourself and submitting here?

Collapse
 
dannyengelman profile image
Danny Engelman • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
 
johnrushx profile image
John Rush

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

Collapse
 
drfcozapata profile image
Francisco Zapata • 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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
johnrushx profile image
John Rush

new new one is short, but I still like the old one, still using vue3 with options api

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Astro is missing from this list

Collapse
 
johnrushx profile image
John Rush

gonna add it into a new tutorial

Collapse
 
yolocat profile image
yolocat-dev

XSS vulnerability though

Collapse
 
surprisedryan profile image
Ryan Hawthorne

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

Collapse
 
eljayadobe profile image
Eljay-Adobe

I wish VanillaJS was in the mix. (Although I readily admit I'm partial to Elm.)

Collapse
 
dannyengelman profile image
Danny Engelman

Why more dependencies with VanillaJS?

You can do it in 3 lines of fairly readable native JavaScript, see my comment below

Collapse
 
eljayadobe profile image
Eljay-Adobe

It appears you are not familiar with VanillaJS.

Collapse
 
efpage profile image
Eckehard

Which tool is best?

So, we can ask the same question about tools: Which tool is best?

  • a hammer
  • a screwdriver
  • a wrench

well, my personal favourite is....

Collapse
 
johnrushx profile image
John Rush

hammer for me

Collapse
 
efpage profile image
Eckehard

...but it should be reactive. Most important to write TODO's
reactive hammer

Collapse
 
kbirgerdev profile image
Kirill Birger

I was hoping for some actual comparison of these frameworks and how they work, their strengths and weaknesses. This looks like something that ChatGPT could have generated...

Collapse
 
johnrushx profile image
John Rush

honestly I had no idea anyone is gonna read my articles,
Now that lots of people read it, I will make more detailed articles, for all topics I covered with simple takes

Collapse
 
mahendrarao profile image
Raavan • Edited

Cool information on JS frameworks

Collapse
 
johnrushx profile image
John Rush

thx

Collapse
 
wuleicanada profile image
Lei Wu

From time to time I read about Elm being inspired by Haskell. Always curious where this claim originated from. Elm's syntax looks much more similar to ML-family languages such as OCaml and F# than to Haskell.

Collapse
 
bkpecho profile image
Bryan King Pecho

Engaging and informative article, John. 👏 Loved the humor!

Collapse
 
mbarzeev profile image
Matti Bar-Zeev

Dude... SolidJS.

Collapse
 
johnrushx profile image
John Rush

this is sleak :)