I built the same app 7 times! Which JS Framework is best?
source link: https://dev.to/johnrushx/i-built-the-same-app-7-times-which-js-framework-is-best-39e0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 seven different frontend frameworks.
I'll build a simple To-Do app 6 times using:
- Angular
- React
- Vue.js
- Svelte
- AlpineJS
- MarsX
1: First love: 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. It was my first frontend framework I fell in love with. I tried knockout and few others, didnt like those. But AngularJS won my heart.
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
.
2: React. The mainstreamer. ⚛️
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) or seeing our browser freeze once an angularjs app got too much data or constant refresh loops.
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;
3: My second wife: Vue.js 💚
Vue.js entered our lives as this cool kid on the block who 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>
I lost my feeling to VUE once they came up with composition API. Sorry VUE.
4: Svelte-ing into Simplicity 🧡
Svelte arrived fashionably late but was worth the wait! This framework promised something different - no virtual DOM! (I know lately they turned into react by adding almost same stuff, but I don't use that stuff, I'm still using the old svelte).
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>
5: Elm-inator 🌳
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, form, h1, input, li, text, ul)
import Html.Attributes exposing (value)
import Html.Events exposing (onInput, onSubmit)
-- MODEL
type alias Model =
{ todos : List String
, newTodo : String
}
init : Model
init =
{ todos = []
, newTodo = ""
}
-- MESSAGES
type Msg
= AddTodo
| SetNewTodo String
-- UPDATE
update : Msg -> Model -> Model
update msg model =
case msg of
AddTodo ->
{ model | todos = model.todos ++ [model.newTodo], newTodo = "" }
SetNewTodo newTodo ->
{ model | newTodo = newTodo }
-- VIEW
view : Model -> Html Msg
view model =
div []
[ h1 [] [text "To-Do App"]
, ul [] (List.map (\todo -> li [] [text todo]) model.todos)
, form [onSubmit AddTodo]
[ input [value model.newTodo, onInput SetNewTodo] []
, button [] [text "Add"]
]
]
-- MAIN
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, 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.
6: Alpine, the most underrated one.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="todoApp()" class="todo-container">
<h1>To-Do App</h1>
<form @submit.prevent="addTodo">
<input type="text" x-model="newTodo" placeholder="Add new todo">
<button type="submit">Add</button>
</form>
<ul>
<template x-for="todo in todos" :key="todo">
<li x-text="todo"></li>
</template>
</ul>
</div>
<script>
function todoApp() {
return {
newTodo: '',
todos: [],
addTodo() {
if (this.newTodo.trim() === '') {
return;
}
this.todos.push(this.newTodo);
this.newTodo = '';
}
}
}
</script>
</body>
</html>
7: MarsX - It took less time to code the todo list here than it took time to write this sentence :D
Disclamer, I'm the author of marsx, so feel free to ignore this, but it's not bad I'd say.
<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! 😄
That's it for now.
→→→ My 100xfounder newsletter or check out my landing page builder.
Say hi to me on X: @johnrushx
Recommend
-
29
_api Table of Contents Introduction _api is an autogenerated CRUD API built on
-
45
AtBitovi, we’ve been working on utilizing HTTP streaming to speed up single-page application (SPA) load times for the last couple of years. We’ve developed a technique that accelerates page load times that we call
-
28
Nevertheless, it addresses a lot of problems for the implementations and customers by doing the websites rapid, serviceable, esthetic and SEO friendly at once. Full of efficient functionality and features sets
-
5
WTF is Serverless Framework? Is it the same as serverless? (no, it's not) March 03, 2020...
-
4
React vs. Flutter: Which Framework Works Best?
-
4
Deploying multiple Serverless Framework apis to the same AWS API Gateway By default, each Serverless project you deploy will create a new API Gateway. In most cases this works fine, but for larger projects you may need to sp...
-
4
Yes, We Are Living in Weird Times, Which is Exactly Why We Should All Become Artists.Self Portrait in Shapes (2022) Aquatint EtchingWe are social beings living through weird, stressful, and isolated times, to say the least...
-
3
I Built the Same Project in React and Vue with AgnosticUI so You didn’t Have ToHere are my thoughts about this library
-
7
Now Google Calendar lets you specify which times you’ll be in the office / This should make it easier to let your colleagues know where you’ll be throughout the day.By
-
7
Choosing the perfect backend development framework? Dive into the Django vs Laravel comparison to determine which one suits your needs best.There are many technologies and frameworks available for website development. This article provides in...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK