DEV Community

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

John Rush on December 25, 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

Marco • Dec 26 '23

Hello Angular, my old friend <3 currently I am checking out react, but honestly it doesn't feel like "home", so I think I will stick in angular for later projects until a shiny knight.. eeh framework comes around and saves me from my angular tower. ;-)

Shine Santhosh • Dec 26 '23

I have the opposite experience 😅. Attempted some projects in Angular, but it didn't quite feel like home. I'm leaning towards React 🤣.

Each has its pros and cons. As you delve deeper into learning, you'll likely discover which suits different projects best. 😬

John Rush • Dec 26 '23

for simple projects, alpine is great. so easy to get started

John Rush • Dec 26 '23

I loved angularjs, but lost the love once it moved past Angular 2

Marco • Dec 26 '23

Could be the name but I love angular too ❤️

Stephen Dicks • Jan 3 • Edited

The Elm version shows off very nicely was is possible if you let a smart person design things rather than a company - we wouldn't have Python or Ruby without these sorts of people.

gkTim • Dec 26 '23

Vue is simply the best in my point of view. Composition API is nice. It’s fast and have a great DX. But everyone is different which is nice. If there are multiple JS-Frameworks we have competition which benefits all and brings new innovations.

John Rush • Dec 26 '23

my fav is VUE too

Brandon Lecky • Dec 28 '23

Point of Vue 😉

Dawosch • Dec 29 '23

But then you are not using TypeScript in your Vue JS project.

gkTim • Dec 30 '23

I‘m using typescript in all of my projects and actually vue is a great fit and it’s a pleasure to work with.

Nikunj Bhatt • Dec 26 '23

Markup for Angular and Vue are understandable even if one doesn't know about them and who is familiar with HTML. Other looks like assembly language code. The difference seems like simple & affordable things vs flashy & costly things, both working well for a same purpose.

John Rush • Dec 26 '23

I have same feeling tbh

Rense Bakker • Dec 27 '23

ngIf looks like html? This is news to me.

Rense Bakker • Dec 28 '23

Really so a student fresh out of school who learned html, css and nothing else, is going to understand how something like ngFor works? Tbh that's just a factual lie...

Nikunj Bhatt • Jan 8

You missed a factual reality. What happens when a web browser encounters an unknown tag or attribute within HTML code? The HTML developer can consider the same (obviously, if he knows how HTML and web browser work).

Rense Bakker • Jan 9

Nothing in HTML spec or documentation will prepare you for the nightmare that is ngFor syntax. What the developer has to do is go to the angular documentation site and learn how it works, which is knowledge that is only applicable to angular and nothing else. Same goes for vue and htmx. All these frameworks face the same issue of wanting to make something dynamic that was never intended to be dynamic (html). Its a markup language, let's keep it that way.

Nikunj Bhatt • Feb 9

It seems you misinterpreted my previous comment. What I mean by

What happens when a web browser encounters an unknown tag or attribute within HTML code?

is - a web browser will ignore the unknown tag and attributes; so similarly, the HTML-CSS designer can ignore unknown code too.

The problem with React is a traditional web designer would wonder about where the HTML and CSS code is!

I agree with your other concerns, though.

Eckehard • Dec 26 '23

I´m curious to see, which bundle size each package delivers...

John Rush • Dec 26 '23

with the modern internet speed and device perf, the size doesn't matter as much as it did in old days

Eckehard • Dec 26 '23 • Edited

If you are talking about application performance and responsiveness, you're probably right. I don´t think there is a direct relation between bundle size and performance. I am just curious to see, how much overhead a framework will pack ontop of a relatively small application.

Anyway, comparing start up performance and responsiveness would be an interestion comparison too!

Mike E • Dec 26 '23

Angular != AngularJS

John Rush • Dec 26 '23

true

Mike E • Dec 28 '23

The point I was making is that it seems like framework #1 you list is Angular, but then you say "AngularJS won my heart." It seems like you don't understand there is a difference.

Horace Nelson • Aug 8

Angular !== AngularJS. Code reviewed! 😆😜

kyoukhana • Dec 27 '23 • Edited

Also what is wrong with using pure JavaScript and HTML

<h1>To-Do App</h1>
    <ul id="todoList"></ul>

    <form id="todoForm">
      <input id="newTodo" />
      <button type="submit">Add</button>
    </form>

 document.addEventListener('DOMContentLoaded', () => {
      /* Initialize an empty array for todos */
      const todos = [];

      /* Get DOM elements */
      const todoList = document.getElementById('todoList');
      const todoForm = document.getElementById('todoForm');
      const newTodoInput = document.getElementById('newTodo');

      /* Function to render todos */
      const renderTodos = () => {
        todoList.innerHTML = '';
        todos.forEach((todo, index) => {
          const li = document.createElement('li');
          li.textContent = todo;

          /* Add a click event listener to remove the todo item when clicked */
          li.addEventListener('click', () => {
            todos.splice(index, 1);
            renderTodos();
          });

          todoList.appendChild(li);
        });
      };

      /* Function to add a todo */
      const addTodo = () => {
        const newTodo = newTodoInput.value.trim();
        if (newTodo !== '') {
          todos.push(newTodo);
          newTodoInput.value = '';
          renderTodos();
        }
      };

      /* Event listener for form submission */
      todoForm.addEventListener('submit', (e) => {
        e.preventDefault();
        addTodo();
      });

      /* Initial rendering */
      renderTodos();
    });

eerk • Dec 27 '23

The best solution for a todolist if you ask me :) The only counterpoint is that in the previous code snippets, the todolist state can also be modified by other processes and then the DOM would automatically be updated.

kyoukhana • Dec 27 '23

You think in 2024 is maybe minimize the use of front-end frameworks? There was a good article I read. Today Astro and tomorrow another solution. We need to write code so that we can switch out frameworks easy not lock yourself into one.

eerk • Dec 28 '23 • Edited

I often miss the part where a new framework actually explains why we need it at all. Is it only so we don't have to type document.querySelector() anymore? Is a framework actually faster than native js+html without any framework? Can't you have a design system that just works with native js+html? (MVC, MVVM, etc).

Charles F. Munat • Jan 3

Awesome. Saved me the trouble.

MananKateshiya • Dec 26 '23

"Well, my friend, that's like asking a parent to pick their favorite child - it just doesn't work that way."
Love it 😂

I don't care what anyone says I love React <3

John Rush • Dec 26 '23

your first kid is often your favorite kid ;)

Tharaka Sandaruwan • Dec 26 '23

Well said

Each framework has its strengths and weaknesses; what works for me may not work for you.

John Rush • Dec 26 '23

just to make sure I don't start a framework war

Peter Vivo • Dec 26 '23

I missing the qwik from the list

John Rush • Dec 26 '23

I can add, if you help me with the code snippet

Thorsten Hirsch • Dec 26 '23 • Edited

Aren't there any frameworks besides React which just allow Javascript in "HTML"? I know, it's not really HTML but JSX, and I still think it's the best feature of React.

<ul>{todos.map(todo => (<li key={todo}>{todo}</li>))}</ul>

In all other frameworks presented here you have to learn a templating language and write things like #each, x-for or *ngFor="let todo of todos"

Abhay • Dec 27 '23 • Edited

SolidJS has JSX.
It's like Svelte and React had a baby

eerk • Dec 27 '23

That's because React doesn't even have a ngFor :( You have to write a whole loop yourself... I still can't believe it...

Rense Bakker • Dec 27 '23

You don't have to invent the for loop yourself, JavaScript has many different ways to loop over things built in.

Rense Bakker • Dec 27 '23

Solidjs uses jsx natively and a lot of frameworks like Astro support mdx files, which support jsx.

Per Lundholm • Dec 27 '23

Small examples doesn't give you the story on building something real, but are still interesting for a quick view.

The ones I've used in real projects with more than one team involved, are React and Elm.

Elm's approach is superior. The architecture in combination with the type system makes it so much easier to maintain a larger code base.

Some say Typescript saves you and it helps but it is not in the same league as Elm.

Volodymyr Liutkin • Dec 31 '23

I can't see Elm as superior at anything at the moment.

It has unfamiliar syntax to most web developers, meaning they can't reuse already established knowledge of HTML/JavaScript.
Near zero vacancies on the market.
Can be replaced with any framework of the big three (vue, react, angular), which will be cheaper and more profitable for maintaining and extending.

Per Lundholm • Jan 1

Why can't you see that? What are your experiences?

Volodymyr Liutkin • Jan 3

I provided three simple reasons why I would never choose something like Elm aside from purely educational fun and tinkering. My experience is better off with something much more familiar and simpler yet effective for solving day-to-day problems (like Vue).

Harishkumar Singh • Jan 3

The main problem is that they take a giant leap of faith away from html instead of being on the page to go along and then introduce all sorts of smoke and mirrors with different types of bindings and all of them scream prevent default!! That is like an overkill if you cannot even prevent default without making it the default thing to prevent.

Stephen Dicks • Jan 3

It's interesting that only React and Elm don't involve some bespoke looping constructs to display the list, which I always find strange in all these frameworks - it shouldn't be that hard IMHO to allow loops.

Nice to show off the Elm version - it's the only one with just code and no specialized markup, which seems to be a trend everywhere except JavaScript.

Danny Engelman • Jan 3 • Edited

Funniest thing, you do NOT

have to load a framework
run a Svelte compiler
or need a build step

Andev70 • Dec 27 '23 • Edited

Sveltekit is the goat...If you are building a static site use the vite bundler with svelte only...if you are building dynamic fullstack app which is not an industry level project then use sveltekit, else use nextjs....

David Beard • Dec 27 '23

Gotta add Solid JS to this list, Solid what I wish react would have been.

Something to add about alpine would be that's it's a popular choice to add client side JS to HTMX Apps

I'd also like to know more about marsx, is there a repo link?

Christian Knoll • Dec 27 '23

Angular is opinionated, which means you have to learn how to do some things "the Angular way" which is new. Which was a drag, but now that I learned it, there are many benefits. Two huge ones are: opinionated means you know THE official way to do something. With JS there are so many ways to get the same outcome that different devs have different ways to get there and they don't often always make sense to all devs on the team. If there is one way, everyone knows what to expect and can read the code quicker. The other advantage is that since it's Google-backed, it's often accepted at big corporations (like the one I work for) so you have a good chance of getting a good paying job with it.

Another benefit is that it taught me RxJS and Typescript, which are huge benefits to my coding and my career. There were growing pains, but with ChatGPT and Copilot nowadays, those is 1000% times easier.

Rense Bakker • Dec 28 '23

Rxjs and typescript are not an invention of angular though. You can (and probably should) use both with React too.

But you are right there are some advantages to an opinionated framework like angular.

Raman Jha • Jan 2

I'm new to JS frameworks, have begun with React. The more I m diving deep into it, the better is my experience. I think one must first master one, then only try his/her hand into another.