阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

小編精選 - 技術文章翻譯 · 03月25日

別再追逐新的 JavaScript 框架了：先打好基礎再說吧🏗️

如果您擔任 Web 開發人員超過五分鐘，您就會看到這種模式：每隔幾個月，就會出現一個嶄新的 JavaScript 框架，承諾解決您的所有問題。性能更佳！更清晰的語法！更加神奇！但經過多年從AngularJS到React到Vue到Svelte （現在可能是Solid或Qwik ）的跳躍，我有了一個重要的認識：不斷追逐最新的 JavaScript 框架往往會浪費大量的時間。

請不要誤會我的意思——創新是美好的，每種工具都有其優勢。但最終，你需要問自己：我是否正在建立有意義的東西，或者只是重新學習如何以略有不同的方式建立相同的應用程式？

本文探討了為什麼「框架炒作週期」可能會阻礙您的發展，以及為什麼投資基本面和穩定的技術可能是一條更有價值的道路。你會發現你已經擁有了創造驚人事物所需的工具，而不需要不斷地重新發明輪子。

永無止境的 JavaScript 炒作週期

讓我們面對現實吧——作為 JavaScript 開發人員，我們對新奇和閃亮的事物有一種弱點。這個循環通常是這樣的：

下一件大事即將發生：有人發布了一個「改變遊戲規則」的框架，它比之前的任何框架都更快、更小、更優雅。世界各地的開發人員都對此很感興趣。
每個人都趕上了這股炒作浪潮：科技 Twitter、部落格文章、YouTube 教學——新框架隨處可見。早期採用者宣稱它是網路開發的未來。
現實情況是：生產實際產品的公司都採取謹慎態度。他們需要執行可靠的應用程式，因此新技術的採用是漸進的。
炒作逐漸消退：最終，「革命性」框架逐漸成熟、累積複雜性，並開始變得類似於它想要取代的框架。最初的興奮逐漸消退。
用新名稱重複：很快另一個「熱門」框架就會出現，並且循環會以略有不同的方式重新開始。

還記得Vue.js曾經一度取代 React 嗎？然後Svelte將使它們全部過時。現在我們聽到了有關Solid或Qwik 的類似說法。同時，React 和 Angular 繼續主導產業，而 jQuery（是的，就是那個 2006 年時代的函式庫）仍然默默地為無數網站提供支援。工具不斷發展，但炒作週期依然存在。

在這個循環的某個時刻，我必須退後一步問自己：每年更換框架實際上能為我帶來什麼好處？在很多情況下，答案都是「不多」。

一遍又一遍地重寫你的應用程式會讓你的速度變慢

我和其他人一樣喜歡嘗試新技術。更好的開發人員體驗和更高的效率的承諾確實很誘人。但每次我跳到新框架時，我都會付出生產力的代價。考慮一下當你採用 Latest-and-Greatest.js 時會發生什麼：

你再次學習了新的元件文法和專案結構
你想出了另一種狀態管理方法
你仔細閱讀文件，找出框架獨有的怪癖
您甚至可以遷移或重寫現有元件以適應新範式
你花時間說服你的團隊（或你自己）這種轉變是值得的

經過所有這些努力之後…您最終建置的功能往往與已經擁有的功能相同。一個切換按鈕、一個表格、一個專案清單－功能沒有改變，只有實作細節改變。

為了便於理解，這裡有一個簡單的計數器元件，它在點擊時會增加一個數字，它在三個不同的框架中實現：

// 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：一個完整的、功能齊全的框架，結構清晰，但學習曲線陡峭，對於較小的專案來說可能會很沉重。

事實上，每個框架都有優點和缺點。當你從一個問題跳到另一個問題時，你實際上是用一組問題來交換另一組問題。這個嶄新的框架也許能解決一些問題，但它也會帶來新的挑戰。

一旦我了解這一點，我就不再尋找神話般的完美框架，而是專注於真正重要的事情——建立優秀軟體的基礎。

現實：基本面比炒作更持久（並能支付帳單）

現實情況是：公司和嚴肅的專案優先考慮穩定性和可維護性，而不是流行技術。查看招聘資訊或與招聘經理交談—反覆提到的技術都是成熟的技術。在所有提到前端框架的招募資訊中，超過 57% 都提到了 React，而 Angular 則以 32% 左右的比例位居第二。 Vue 也佔有相當大的份額。更新的選擇？他們在就業市場上仍屬於小眾市場。

一家前沿的新創公司可能會嘗試 Svelte、Solid 或昨天在 Hacker News 上流行的任何技術。但是，大多數成熟公司的生產應用程式不會只因為本月有新事物而進行整體重寫。不斷更改技術堆疊既有風險又昂貴。企業需要經過驗證且易於維護的程式碼。他們會選擇團隊熟悉的穩定堆疊，而不是存在未知缺陷的熱門新框架。

這對開發人員意味著什麼？這意味著掌握核心技能和廣泛使用的工具將比了解每個新框架更能讓你在職涯中走得更遠。 JavaScript（和 TypeScript）的基礎知識、對 DOM、HTML、CSS 的紮實了解、以及如何設計乾淨、模組化的程式碼——這些技能仍然很受歡迎。它們超越了年度的框架。

有趣的事實： jQuery 在炒作方面可能已經過時了，但它仍然在比大多數現代框架更多的網站上執行。而 jQuery 簡化的底層 DOM API仍然存在，可以直接使用。具有豐富 DOM 和原始 JS 知識的開發人員通常只需加入幾行程式碼即可實現相同的結果 - 無需花哨的框架。

框架不會自動讓你成為更好的開發人員

我曾經相信學習每個新框架都會提升我的技能。我想：“如果我能在簡歷上列出React/Vue/Svelte/Solid 方面的專家，那我就是多才多藝、技術嫻熟的了。”事實上，框架跳躍讓我了解了工具之間的差異，但不一定能讓我寫出更好的程式碼或打造出更好的產品。

事實上，成為優秀的開發人員並不取決於你知道哪個框架，而是取決於了解如何解決問題：

將複雜的功能分解為更簡單的元件或模組
無論使用什麼工具，都可以編寫具有良好架構的簡潔、可讀的程式碼
了解如何除錯問題、編寫測試和處理極端情況
了解效能瓶頸（為什麼某些演算法很慢，渲染的底層工作原理是什麼）
由於您了解底層概念，因此能夠根據需要選擇任何框架

如果您在框架之間跳轉但將它們視為黑盒子，您可能會錯過前端開發的更深層次的課程。相反，如果您加強核心 JavaScript 技能、學習設計模式或探索瀏覽器 Web API ，您會發現使用任何框架（或根本不使用框架）都變得更容易。您可能會發現，僅使用平臺本身就可以完成很多事情。

範例：Web 元件優於框架

經常被忽略的一組基礎知識是Web 元件標準。它允許您在瀏覽器中本地建立可重複使用的自訂元素，無需任何框架。這是一個簡單的 Web 元件，其功能與我們的反例類似 - 僅使用原始 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);

您可以在 HTML 中使用<my-counter></my-counter> ，它的運作方式與我們之前的範例一樣。這並不是說你永遠不應該使用框架 - 但它表明平臺本身俱有值得學習的強大功能。透過加深對核心 Web 技術的了解，您可以減少對任何單一框架抽象的依賴。

從這樣的探索中獲得的技能（理解事件、高效的 DOM 操作、元件封裝）將會在任何地方應用。它們會讓你更好地使用 React、Vue 或任何你選擇的東西，因為你會了解幕後發生的事情。

我沒有追逐框架，而是在做什麼

我還沒有完全放棄新框架（探索它們仍然很有趣！）。但我改變了我的方法：

加倍學習基礎：我投入更多時間磨練核心 JavaScript/TypeScript、HTML 和 CSS 技能。令人驚訝的是，許多「神奇」的框架功能只是語言基礎的巧妙應用。了解閉包和模組模式可以幫助您編寫無需任何程式庫的簡單狀態管理。
使用框架作為工具，而不是教條：現在我根據專案需求和團隊專業知識來選擇框架，而不是新穎性。如果我的團隊非常了解 React 並且我們需要快速建置，我們就會堅持使用 React。如果我要為一個主要為原始 JS 專案加入一個小功能，我可能根本不會使用框架。
建構真實的專案（即使是小專案）：沒有什麼比創造端到端的東西更能教會我們東西了。我不會用 5 個框架重寫相同的演示，而是專注於用我已經了解的工具建立有用的專案。開發我自己的應用程式Kollabe讓我學到了很多關於軟體開發和團隊合作的知識，而框架遷移卻沒有教我這麼多。透過建立真實的產品，我學會瞭如何管理日益增長的複雜性、處理用戶回饋以及效能優化——這些都是值得紀念的教訓。
關注趨勢，但要依靠經過驗證的技術進行嚴肅的工作：我專注於新的庫和發展（畢竟我是一名開發人員！）。我會在小專案中嘗試它們或研究它們的概念。但對於生產程式碼或任何有最後期限的事情，我依賴穩定、有據可查的技術。這不是保守，而是務實。一旦新工具證明了其價值並能滿足特定需求，我就會採用它們。

這種關注點的轉變帶來了更多的內心平靜和生產力。我不再驚慌“FrameworkXYZ 1.0 剛剛發布，我落後了！”相反，我會冷靜地評估新技術，並且經常發現我現有的技能足以做好這項工作。

最後的想法

框架會出現又會消失。今天是 React 與 Svelte 的對決，昨天是 Angular 與 Backbone 的對決，明天又會是完全不同的對決。您使用的特定工具會在整個職業生涯中不斷發展 - 這是正常的。但良好軟體開發的基本原則是不變的。乾淨的程式碼、周到的架構、解決問題的能力以及對工具的深刻理解，將比不斷追逐最新潮流更能為您帶來幫助。

當你看到一個引人注目的新框架流行時，一定要檢查一下（好奇心是有價值的！）。但請記住，您不需要圍繞它重建整個工作流程。您本月沒有用 NewHotness.js 重寫您的應用程式，但這並不意味著您「落後」。透過專注於穩定性和對現有系統的有意義的改進，您實際上可能會為自己和您的用戶帶來好處。

保持熱情，不斷學習，但要保持洞察力。歸根結底，創造出能夠發揮作用並能幫助人們的東西比追逐炒作更有成就感。使用適合您情況的工具，掌握基礎知識，您就可以為任何技術浪潮做好準備 - 無需倦怠。

繼續編碼，繼續成長，最重要的是，享受旅程。

哦，太不要臉了🔌如果你的團隊進行回顧，請查看我的免費工具Kollabe 。

原文出處：https://dev.to/mattlewandowski93/stop-chasing-new-javascript-frameworks-build-with-fundamentals-instead-1lni

1個讚 0留言 93瀏覽

按讚的人：