DEV Community

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

John Rush on June 06, 2023

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 Twit...

Read full post

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>

John Rush • Jun 18 '23

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

yolocat-dev • Jun 12 '23

XSS vulnerability though

Eljay-Adobe • Jun 10 '23

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

Danny Engelman • Jun 16 '23

Why more dependencies with VanillaJS?

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

Eljay-Adobe • Jun 17 '23

It appears you are not familiar with VanillaJS.

Matti Bar-Zeev • Jun 13 '23

Dude... SolidJS.

Eckehard • Jun 16 '23

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....

John Rush • Jun 16 '23

hammer for me

Eckehard • Jun 17 '23

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

Kirill Birger • Jun 11 '23

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...

John Rush • Jun 11 '23

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

Raavan • Jun 10 '23 • Edited

Cool information on JS frameworks

John Rush • Jun 11 '23

thx

Lei Wu • Jun 10 '23

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.

Bryan King Pecho • Jun 7 '23

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

Tomas Rimkus • Jun 14 '23

"Elm" - when you need extra job security :)

Chris Cook • Jun 9 '23

Cool comparison! 👍🏻

John Rush • Jun 9 '23

thx Chris

John Rush • Jun 10 '23

this is sleak :)

Comment deleted

Dmitriy • Jun 10 '23

Great article. Also those are not apps but a very basic components. Which does not cover at least 10% of what a real SPA should be. State management? Component communication? Nah!

John Rush • Jun 10 '23

I would have to write a book size article to cover an app you describe.
But actually I will do it. Wait for in on Monday or Tuesday.

Friday candour • Jun 9 '23

I built something for everyone.

It's the fastest,
We can prove over again.
It easy normal and nothing else.
No virtual Dom.

Welcome to cradova.

Here's a basic Todo app example.

import _, {
  button,
  createSignal,
  css,
  div,
  input,
  main,
  p,
  Ref,
  reference,
} from "cradova";

function TodoList() {
  // can be used to hold multiple references
  const referenceSet = new reference();

  // creating a store
  const todoStore = new createSignal([
    "take bath",
    "code code code",
    "take a break",
  ]);

  // create actions
  todoStore.createAction("add-todo", function (todo) {
    this.set([...this.value, todo]);
  });

  todoStore.createAction("remove-todo", function (todo) {
    const ind = this.value.indexOf(todo);
    this.value.splice(ind, 1);
    this.set(this.value);
  });

  // bind Ref to Signal
  todoStore.bindRef(todoList);

  // markup
  return main(
    _`|Todo List`,
    div(
      input({
        placeholder: "type in todo",
        reference: referenceSet.bindAs("todoInput"),
      }),
      button("Add todo", {
        onclick() {
          todoStore.fireAction("add-todo", referenceSet.todoInput.value);
          referenceSet.todoInput.value = "";
        },
      })
    ),
    todoList.render
  );
}

const todoList = new Ref(function () {
  const self = this;
  return div(
    self.Signal.value.map((item) =>
      p(item, {
        title: "click to remove",
        onclick() {
          self.Signal.fireAction("remove-todo", item);
        },
      })
    )
  );
});

document.body.appendChild(TodoList());

css`
  body {
    box-sizing: border-box;
    display: flex;
  }
  main {
    margin: auto;
  }
  main > p {
    font-size: 2rem;
  }
`;

Friday candour • Jun 9 '23

No transpiliing needed, faster tooling as a result and more performant apps.

Cradova was originally built for performant pwa, but for that you can use it for any web project.

github.com/FridayCandour/cradova

Laurent Payot • Jun 7 '23

I personally moved from Vue to Svelte, then from Svelte to Elm. The problem with Elm is that once you get a bite of that Functional Programming drug you can’t go back to JS or even TS 😉

Richard Guay • Jun 8 '23

I did the opposite. I went from Vue, to Elm, to Svelte. I had trouble getting some things to work with Vue and Elm that worked out easy with Svelte. Also, my Svelte code did more work with less code (after compiling Svelte). But, that was my experience. Mileage may vary.

Laurent Payot • Jun 8 '23

Not really the opposite, as I also moved from Vue to Svelte, just without the Elm step 😉
So we agree we had a better developer experience with Svelte compared to Vue. I love Elm for its fearless refactoring capabilities and its ML-like syntax.