I enjoy the whirlwind tour of all those frameworks - five of those I didn't even know existed! I have only work with vue and react so seeing the other frameworks with a simple app was great. I was thinking it was too simple but it made it a lot easier to compare the frameworks at a glance.

My only remark is that HTML/DOM can be written more declarative than you show.

<!-- `return false` is equal to `event.preventDefault()` -->
<form onsubmit="addTodo(this.elements.todo.value); this.reset(); return false">
    <input name="todo" type="text">
    <input type="submit" value="Add Todo">
</form>

function createListElement(text) {
    const li = document.createElement('li');
    li.textContent = text; // faster and safer than .innerHTML
    return li;
}

function addTodo(todoText) {
    todoData.push(todoText);
    todoList.appendChild(createListElement(todoText));
    localStorage.setItem('todos', JSON.stringify(todoData));
}

When running through a local webhost in Chrome Version 96.0.4664.110 for Windows, I get these errors in the developer console when viewing /alpine-app/index.html:

Attempting to add an item using the form will repeat the warning and error.

I think the movement is insane. You bet on angular, and it has little adoption. Who cares? You should be able to use any tool, who cares what people think. Give it a try! I am a total noob, and your videos quite literally run our company. I absolutely love Firebase, and your channel. Am a long time Google user myself. But when it comes to angular, I think vuejs is just more intuitive.

<3

I coded along and stumbled upon this error. Which is still there, when I copy the entire file

File & Line:
https://github.com/fireship-io/10-javascript-frameworks/blob/main/vanilla-app/index.html#L28

Error Message:
Uncaught TypeError: existingTodos.forEach is not a function

You may refer to the dagger.js version here: https://codepen.io/dagger8224/pen/XWYBKjJ, which should be very easy to understand.

"The last thing the world needs is ANOTHER JavaScript framework."

https://www.customink.com/designs/javascript/pef0-00ck-day7

This framework comparison is awesome. In the video, you talk about the pros and cons for each framework but you don't talk about the size of the final project.

I think you could add a comparison table in the main readme. I did some tests and was surprised how small is the Svelte output. Theses size considerations can help choosing a framework.

It makes the data reactive and you can give the Proxy rule for new data like rendering.

I think it would be a good idea to do this type of video again but with mobile development tools like Objective C and SwiftUI for iOS, Kotlin and Java for Android, and Flutter and React Native for cross platform. Plus I think there's some cross platform tool for kotlin too. Thanks

It's just a boiler plate vue app.

Vue app in repo appears to be the default generated hello world app, rather than the demo app from the video!

(Can I say thanks for the quick and useful framework comparison here?)

When you have some todos in local storage they're added twice to todoData since addTodo pushes each one to the array:

You'll have twice as much todos on the next page load.