我开发了 7 次同一款应用！哪个 JS 框架最好？

2025-06-09

我开发了 7 次同一款应用！哪个 JS 框架最好？

大家好，我是 John，一家多创企业建设者。
我热爱编程和市场营销。
点击此处查看我的所有 20 款产品
→ johnrush.me
→我的简历
→在 Twitter 上跟我打招呼
→试用我的网站建设器

警告：本文包含大量代码、幽默和足以改变人生的启示。请自行承担风险。😎

当人们问我最喜欢哪个前端框架时，我通常会回答“所有”。但最近，我决定测试一下这个说法，用七种不同的前端框架来构建同一个应用程序。

我将使用以下方法构建一个简单的待办事项应用程序 6 次：

  1. 角度
  2. 反应
  3. Vue.js
  4. 苗条
  5. 榆树
  6. AlpineJS
  7. 火星X

1：初恋：Angular🔥

Angular 已经存在一段时间了，以强大而又固执己见而闻名（感谢谷歌）。它催生了组件和依赖注入等概念，并用双向数据绑定震撼了我们的世界。它是我第一个爱上的前端框架。我尝试过 Knockout 和其他几个框架，但都不太喜欢。但 AngularJS 赢得了我的心。

ng new todo-app --routing=false --style=css
Enter fullscreen mode Exit fullscreen mode

里面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

不要忘记导入并包含 FormsModule app.module.ts。

2：React。主流。⚛️

React 是 Facebook 送给我们开发人员的礼物🎁，我们厌倦了每次数据模型发生变化时手动更新 DOM 元素（原始 JS 中的哭泣），或者一旦 angularjs 应用程序获得太多数据或不断刷新循环，我们的浏览器就会冻结。

npx create-react-app todo-app
Enter fullscreen mode Exit fullscreen mode

里面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

3：我的第二任妻子：Vue.js💚

Vue.js 就像一个很酷的孩子一样进入了我们的生活，它希望让我们开发人员的工作变得更简单，同时让 Angular 和 React 也为之疯狂。

vue create todo-app
Enter fullscreen mode Exit fullscreen mode

里面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

自从 VUE 推出了 Composition API 之后，我就对它失去了兴趣。对不起，VUE。

4：精简至极

Svelte 姗姗来迟，但值得等待！这个框架承诺了与众不同的东西——没有虚拟 DOM！（我知道他们最近通过添加几乎相同的功能变成了 React，但我不用那些功能，我仍然在用老版本的 Svelte）。

npx degit sveltejs/template todo-app
Enter fullscreen mode Exit fullscreen mode

里面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

5：Elm-inator🌳

Elm 作为一门基于 Haskell 的纯函数式语言走进了我们的旅程，它提供“无运行时异常”（提示天使音乐）。

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

尽管 Elm 需要一些时间来适应，但它的类型系统和模式匹配帮助我们构建了强大的组件以及 Elm 架构 (TEA)，确保即使复杂性增加，一切仍然井然有序。

6：Alpine，最被低估的一个。

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

7：MarsX - 在这里编写待办事项列表所花的时间比编写这句话所花的时间还少 :D

免责声明，我是 marsx 的作者，所以请随意忽略这一点，但我想说这并不坏。

<schema>
  <array name="todo">
    <object>
      <string name="title" />
    </object>
  </array>
</schema>
Enter fullscreen mode Exit fullscreen mode

现在你已经见证了我如何使用不同的前端框架构建同一个应用，你可能会想知道哪一个是最好的。好吧，我的朋友，这就像让父母挑选他们最喜欢的孩子一样——根本行不通。

每个框架都有其优缺点；对我有用的未必适合你。所以，大胆选择，开始构建精彩的应用吧！🚀

请记住：无论你选择哪个框架，都不要忘记享受编码的乐趣！😄

大家好，我是 John，一家多创企业建设者。
我热爱编程和市场营销。
点击此处查看我的所有 20 款产品
→ johnrush.me
→我的简历
→在 Twitter 上跟我打招呼
→试用我的网站建设器

鏂囩珷鏉ユ簮锛�https://dev.to/johnrushx/i-built-the-same-app-7-times-which-js-framework-is-best-39e0
Devto 翻译
PREV
面向新手的异步 JavaScript
NEXT
我开发了 6 次同一款应用！哪个 JS 框架最好？