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

2025-06-09

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

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

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

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

在这篇跌宕起伏的文章中，我们将通过五个步骤构建一个简单的待办事项应用程序（是的，另一个）：

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

你可能会想——jQuery 怎么样？嗯……那都 2010 年了！🙅‍♂️ 让我们深入了解一些现代的东西！

第一步：用 Angular 实现它🔥

Angular 已经存在了相当长一段时间，它以强大而又固执己见而闻名（感谢 Google）。它催生了组件和依赖注入等概念，同时用双向数据绑定震撼了我们的世界。

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 中的哭泣）。

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

步骤 4：精简至极

Svelte 姗姗来迟，但值得等待！这个框架承诺了一些不同的东西——没有虚拟 DOM！

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

第五步：用 Elm 实现 Elm 的复杂性

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

里面src/Main.elm：

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, h1, input, li, text, ul)
import Html.Attributes as Attrs exposing (value)
import Html.Events as Events exposing (onClick)


type alias Model =
    { todos : List String
    , newTodo : String
    }


init : Model
init =
    { todos = []
    , newTodo = ""
    }


type Msg
    = AddTodo


update msg model =
     case msg of 
        AddTodo ->
            { model | todos=model.todos++[model.newTodo],new_todo=""}


view model =
      div []
          [ h1 [] [text "To-Do App"]
          , ul [] <| List.map (\todo -> li [] [text todo]) <| model.todos 
          , form [Events.onSubmit |> Events.preventDefault |> onClick add_todo]
              [
                inputAttr [ value model.new_todo,
                           on_input set_new_to_do] [],
                submit_button []
             ]
         ]


main=
Browser.sandbox{
    init=initial_model,
    update=update,
    view=view}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

在 Twitter 上关注我
鸣谢fireship

感谢您的阅读，请查看我的项目：

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

鏂囩珷鏉ユ簮锛�https://dev.to/johnrushx/i-built-the-same-app-6-times-which-js-framework-is-best-2iff
Devto 翻译
PREV
我开发了 7 次同一款应用！哪个 JS 框架最好？
NEXT
21 个你可能闻所未闻的令人惊叹的 Web 功能