别再追逐新的 JavaScript 框架了：先从基础做起 🏗️

如果你从事 Web 开发超过五分钟，你肯定见过这种模式：每隔几个月，就会冒出一个崭新的 JavaScript 框架，承诺解决你所有的问题。更好的性能！更简洁的语法！更强大的功能！但是，在经历了多年从AngularJS到React、Vue、Svelte（现在可能还有Solid或Qwik）的轮换之后，我逐渐意识到一个重要的事实：不断追逐最新的 JavaScript 框架往往是在浪费时间。

别误会我的意思——创新固然重要，每种工具都有其优势。但最终，你需要问问自己：我是在创造有意义的东西，还是仅仅用略微不同的方式重新学习如何构建同一个应用程序？

本文探讨了“框架炒作周期”为何可能阻碍你的发展，以及为何投资于基础架构和稳定技术才是更明智的选择。你会发现，你其实已经拥有了创造卓越成果所需的工具，无需不断重复造轮子。

永无止境的 JavaScript 炒作周期

不得不承认，作为 JavaScript 开发者，我们对新鲜事物总是毫无抵抗力。通常情况下，这个过程是这样的：

1. 下一个重大突破来了：有人发布了一个“颠覆性”的框架，它比以往任何框架都更快、更小、更优雅。世界各地的开发者都对此产生了浓厚的兴趣。

2. 所有人都蜂拥而至：科技推特、博客文章、YouTube教程——这个新框架无处不在。早期用户宣称它是Web开发的未来。

3. 现实情况是：拥有实际生产产品的公司行事谨慎。他们需要的是运行可靠的应用程序，因此新技术的采用是一个循序渐进的过程。

4. 热潮终会消退：最终，所谓的“革命性”框架日趋成熟，复杂性不断增加，并开始变得与它原本想要取代的框架相似。最初的兴奋感也随之消退。

5. 换个名字重复这个过程：很快又出现了另一个“热门”框架，然后循环再次开始，只是略有不同。

还记得当初Vue.js被认为会取代 React 吗？后来Svelte又说它们都要过时了。现在我们又听到了关于Solid或Qwik 的类似说法。与此同时，React 和 Angular 仍然主导着行业，而 jQuery（没错，就是那个 2006 年的库）依然默默地为无数网站提供技术支持。工具在不断发展，但炒作周期却始终存在。

在这个循环中，我最终不得不停下来问问自己：每年更换框架究竟能给我带来什么好处？很多情况下，答案是“不多”。

反复重写应用程序会拖慢你的速度

我跟其他人一样喜欢尝试新技术。更好的开发体验和更高的效率确实很诱人。但每次我换用新的框架，都会付出生产力下降的代价。想想当你采用最新最全的 JavaScript 版本时会发生什么：

• 你又要学习新的组件语法和项目结构了。
• 你又想出了另一种状态管理方法。
• 你仔细研读文档，找出该框架特有的怪癖。
• 你甚至可以迁移或重写现有组件以适应新的范式。
• 你花时间说服你的团队（或你自己），这种改变是值得的。

费了这么多功夫之后……你最终往往还是在重复开发之前已经有的功能。一个切换按钮、一个表单、一个项目列表——功能本身并没有改变，改变的只是实现细节。

为了便于理解，这里有一个简单的计数器组件，点击后数字会递增，该组件已在三个不同的框架中实现：

// Using React (JSX)
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

<!-- Using Vue.js (with the Options API) -->
<div id="app">
  <button @click="count++">Clicked {{ count }} times</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: { count: 0 }
  });
</script>

<!-- Using Svelte -->
<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} times
</button>

每个框架都有自己的语法和特性，但它们最终都做着同一件事：在按钮点击时更新计数器。每次切换框架都意味着要重新学习这些细微差别，并重写之前编写的组件。尝试不同的框架固然有趣，但当你试图交付实际项目时，这种频繁的重写会消耗你的精力。

我最终意识到，我花在学习框架上的时间比实际开发实用功能的时间还要多。即使我把产品创意从框架 X 重构到框架 Y，我的产品创意列表也没有变短。重写一切一开始固然令人兴奋，但它并不会为最终产品或用户带来任何价值。

并不存在“最佳框架”（只有权衡取舍）。

技术讨论常常演变成关于哪个框架才是最佳框架的争论。但事实是：并不存在所谓的“最佳”框架。每个选项都包含权衡取舍：

• React：拥有庞大的生态系统和社区，但你需要处理样板代码和复杂的渲染模式（例如 useEffect 依赖项或协调怪癖）。

• Vue：对初学者来说直观且对开发者友好，但它引入了自己的约定（单文件组件、Vue 特有的状态库），你必须遵循这些约定。

• Svelte：内置响应式设计，无需编写样板代码，但需要编译步骤，且生态系统较小。你不能直接将 Svelte 组件添加到现有应用中，必须经过编译过程。

• SolidJS：提供类似 React 的语法和令人印象深刻的性能，但由于它比较新，这意味着社区较小，遇到问题时可获得的资源也较少。

• Angular：一个完整​​、功能齐全且结构清晰的框架——但学习曲线陡峭，对于小型项目来说可能会显得笨重。

实际上，每个框架都有其优势和劣势。从一个框架跳到另一个框架，就相当于用另一组问题取代了之前的一组问题。崭新的框架或许能解决一些问题，但它也会带来新的挑战。

一旦我理解了这一点，我就不再寻找一个虚幻的完美框架，而是专注于真正重要的事情——构建优秀软件的基本原理。

事实：基本面比炒作更持久（而且能带来实际收益）

现实情况是：公司和严肃的项目更看重稳定性和可维护性，而不是时髦的技术。看看招聘信息或者和招聘经理聊聊——反复提到的都是成熟的技术。在所有提到前端框架的招聘信息中，React 的出现率超过 57%，Angular 位居第二，约占 32%。Vue 也占有相当可观的份额。至于那些新兴技术？它们在就业市场上仍然属于小众领域。

一家走在时代前沿的初创公司可能会尝试 Svelte、Solid 或者昨天 Hacker News 上流行的其他技术。但对于大多数成熟公司而言，他们不会仅仅因为某个技术这个月很火就对生产环境进行彻底重写。频繁更换技术栈既冒险又昂贵。企业需要的是经过验证、易于维护的代码。他们会选择团队熟悉且稳定的技术栈，而不是那些充满未知陷阱的热门新框架。

这对开发者意味着什么？这意味着，掌握核心技能和常用工具比了解每一个新框架更能助你走得更远。JavaScript（和 TypeScript）的基础知识、扎实的 DOM、HTML、CSS 知识，以及如何设计简洁模块化的代码——这些技能将永远炙手可热，它们超越了年度热门框架的更迭。

有趣的是： jQuery 虽然热度可能已经过去，但它仍然比大多数现代框架在更多网站上运行。而且，jQuery 简化的底层 DOM API仍然可以直接使用。一位拥有扎实的 DOM 和原生 JavaScript 知识的开发者通常只需几行额外的代码就能实现同样的效果——无需任何花哨的框架。

框架并不会自动让你成为更优秀的开发者。

我曾经以为，学习每一种新的框架就能提升我的技能。“如果我的简历上能写上React/Vue/Svelte/Solid 专家，那我肯定就是个多面手，技能高超了。”我当时是这么想的。但实际上，频繁更换框架确实让我了解了不同工具之间的差异，但并不一定能让我写出更好的代码，或者打造出更好的产品。

事实上，成为一名优秀的开发者并不在于你掌握了哪个框架，而在于你理解如何解决问题：

• 将复杂功能分解为更简单的组件或模块
• 无论使用何种工具，编写简洁、易读且架构良好的代码都至关重要。
• 懂得如何调试问题、编写测试以及处理边界情况
• 了解性能瓶颈（为什么某些算法运行缓慢，渲染的底层工作原理）
• 能够根据需要快速上手任何框架，因为你理解其基本概念。

如果你频繁切换框架，却把它们当作黑盒来对待，你可能会错过前端开发的更深层次的精髓。相反，如果你强化核心 JavaScript 技能、学习设计模式或探索浏览器 Web API，你会发现使用任何框架（甚至完全不使用框架）都会更加轻松。你或许会发现，仅凭平台本身就能完成很多工作。

示例：Web 组件优于框架

经常被忽视的一组基础知识是Web Components标准。它允许你在浏览器中原生创建可重用的自定义元素，而无需任何框架。以下是一个简单的 Web Component，其功能与我们的示例类似——仅使用原生 JS 和浏览器 API：

// Defining a custom web component (no frameworks involved)
class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    // Attach a shadow DOM for encapsulation
    this.attachShadow({ mode: 'open' });
    // Create a button in the shadow DOM
    this.button = document.createElement('button');
    this._updateButton(); // set initial text
    this.button.addEventListener('click', () => {
      this.count++;
      this._updateButton();
    });
    this.shadowRoot.appendChild(this.button);
  }

  _updateButton() {
    this.button.textContent = `Clicked ${this.count} times`;
  }
}
customElements.define('my-counter', MyCounter);

你可以<my-counter></my-counter>在 HTML 中使用它，效果和我们之前的例子一样。这并不是说你永远不应该使用框架——而是说平台本身就拥有值得学习的强大功能。通过加深对核心 Web 技术的理解，你对任何单一框架抽象层的依赖性都会降低。

通过这种探索获得的技能（理解事件、高效的 DOM 操作、组件封装）将无处不在。它们能让你更好地使用 React、Vue 或你选择的任何框架，因为你将了解其背后的工作原理。

我没有追逐框架，而是在做其他事

我并没有完全放弃新的框架（探索它们仍然很有趣！）。但我确实改变了我的方法：

• 夯实基础：我投入更多时间来提升我的 JavaScript/TypeScript、HTML 和 CSS 核心技能。令人惊讶的是，许多“神奇”的框架特性实际上只是语言基础知识的巧妙应用。理解闭包和模块模式可以帮助你无需任何库就能编写简单的状态管理代码。

• 将框架视为工具，而非教条：现在我选择框架是基于项目需求和团队经验，而不是新奇之处。如果我的团队精通 React，并且我们需要快速构建，我们会坚持使用 React。如果我只是在一个以原生 JavaScript 为主的项目中添加一个小功能，我可能根本不会使用框架。

• 构建真实项目（即使是小型项目）：没有什么比从头到尾创建项目更能让人受益匪浅。与其用 5 个框架重写同一个演示程序，我更专注于使用我已熟悉的工具构建实用项目。开发我自己的应用程序Kollabe让我学到的软件开发和团队协作知识，远比框架迁移要多得多。通过构建一个真正的产品，我学会了如何应对日益增长的复杂性、处理用户反馈以及进行性能优化——这些经验让我受益匪浅。

• 关注技术趋势固然重要，但对于严肃的工作，我更倾向于选择成熟可靠的技术：我会持续关注新的库和技术发展（毕竟我是一名开发者！）。我会尝试在小型项目中使用它们，或者研究它们的概念。但对于生产代码或任何有截止日期的项目，我都会选择稳定且文档齐全的技术。这与其说是保守，不如说是务实。一旦新工具证明了自身的价值并能满足特定需求，我随时可以采用它们。

这种转变让我更加安心，工作效率也更高了。我不再会因为“FrameworkXYZ 1.0 刚发布，我落后了！”而惊慌失措。相反，我会冷静地评估新技术，并且常常发现我现有的技能足以胜任工作。

最后想说的话

框架层出不穷，日新月异。今天可能是 React 和 Svelte 的较量，昨天可能是 Angular 和 Backbone 的对决，明天可能就完全是另一种潮流了。你使用的具体工具会随着职业生涯的推进而不断演变——这很正常。但优秀软件开发的基本原则始终不变。相比一味追逐最新潮流，编写简洁的代码、构建周密的架构、提升解决问题的能力以及对工具的深入理解，才是真正对你大有裨益的。

当你看到某个炫酷的新框架流行起来时，当然应该去了解一下（好奇心是宝贵的！）。但请记住，你无需围绕它重建整个工作流程。仅仅因为你这个月没有用 NewHotness.js 重写你的应用，并不意味着你“落后了”。事实上，专注于现有框架的稳定性和有意义的改进，可能对你和你的用户都有好处。

保持热情，不断学习，但也要保持清醒的头脑。归根结底，打造真正有效且能帮助人们的产品，比追逐潮流更有成就感。选择适合自身情况的工具，掌握基本功，你就能从容应对任何技术浪潮——无需精疲力竭。

坚持编程，不断成长，最重要的是，享受过程。

哦，还有，厚颜无耻地🔌 如果你的团队进行回顾会议，请查看我的免费工具Kollabe。