我們習慣的前端開發正在消亡

王大冶發表於2024-11-21
前端
  • CSS技巧與案例詳解
  • vue2與vue3技巧合集
  • VueUse原始碼解讀

技術演進歷程

傳統多頁面應用時代

在單頁面應用(SPA)出現之前，Web應用主要採用多頁面架構。每次使用者互動都需要伺服器返回完整的HTML頁面，這種方式雖然簡單直接，但使用者體驗欠佳。當時的開發者通常是全棧工程師，使用PHP、Ruby on Rails等技術進行開發。

image.png

// PHP傳統頁面渲染示例
<?php
// 控制器處理
$products = $db->query("SELECT * FROM products");

// 檢視渲染
include 'header.php';
foreach ($products as $product) {
    echo "<div class='product'>{$product['name']}</div>";
}
include 'footer.php';
?>

SPA革命

隨著使用者對互動體驗要求提高，BackboneJs、AngularJs等框架出現，開創了前端新紀元。這導致了前後端分離趨勢，出現了專門的前端開發崗位。

// React SPA示例
function ProductList() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  );
}

純粹的前端開發人員的角色要求越來越高，也越來越多樣化。他們開始專門建立使用者介面，使用HTML、CSS和JavaScript，以及與 API 和伺服器互動。另一方面，後端開發人員則更加專注於資料處理、應用程式業務邏輯、資料庫工作以及建立伺服器 API。

就這樣，我們進入了React、Angular2、Vue和其他Web應用程式開發工具的時代。我們不再需要建立簡單的表單和列表，現在我們有了 js 路由、狀態管理、瀏覽器 API、將授權令牌與請求繫結、資料對映等。

當前前端開發面臨的挑戰

1. 開發效率問題

  • API契約定義與維護成本高
  • 前後端資料驗證重複
  • 狀態管理複雜性增加
  • 除錯和測試難度提升

2. 技術棧複雜性

// 現代前端專案依賴示例
{
  "dependencies": {
    "react": "^18.0.0",
    "redux": "^4.0.0",
    "axios": "^1.0.0",
    "zod": "^3.0.0",
    "webpack": "^5.0.0",
    // 更多依賴...
  }
}

3. SEO與效能問題

  • 客戶端渲染不利於搜尋引擎抓取
  • 首屏載入效能問題
  • 狀態還原成本高

新趨勢：服務端技術復興

現代全棧框架的崛起

  • Next.js + React
  • Nuxt + Vue
  • Django + HTMX
<!-- HTMX示例：無需JavaScript的動態互動 -->
<button hx-post="/api/products"
        hx-trigger="click"
        hx-target="#product-list"
        hx-swap="innerHTML">
  載入產品列表
</button>

這些都是基於伺服器的Web 應用程式開發捆綁包。由於採用了Hydration和Resumability方法，伺服器只能渲染介面的修改部分，而無需重新載入頁面。

優勢

  1. 開發效率提升

    • 減少API契約設計
    • 簡化狀態管理
    • 直接輸出HTML片段

  2. 效能最佳化

    • 服務端渲染
    • 更小的傳輸體積
    • 更好的SEO支援

  3. 開發成本降低

    • 團隊協作簡化
    • 技術棧統一
    • 除錯便利

隨著無程式碼解決方案、透過 AI 生成模板、龐大的伺服器資源和搜尋引擎最佳化要求的出現，目前的前端開發人員數量和工具已不再需要只開發前端部分。

企業主有一個合理的問題--"為什麼我需要僱用一個純前端開發員和一個純後端開發員來開發一個簡單的應用程式？

全棧開發人員並不是一種管理時尚，就節省人員而言，現在它已成為一種主流。你不需要一個純粹的前端開發人員，你需要的是一個能製作整個應用程式的開發人員，直接對資料庫或其他服務執行簡單操作並顯示結果。

未來展望

前端開發正在向全棧方向轉變，比例可能會是60%前端+40%後端。這不是技術的倒退，而是在解決了早期多頁面應用的問題後，找到了更優的解決方案。建議前端開發者：

  1. 擴充套件後端技能
  2. 關注現代全棧框架
  3. 瞭解服務端渲染技術
  4. 保持技術視野開放

前端開發並不會消失，而是在進化。未來的web開發將更注重整體解決方案，而不是前後端的嚴格劃分。對於複雜的單頁應用場景，專業的前端開發仍然必不可少，但更多的中小型應用可能會採用現代全棧方案。

首發於公眾號 大遷世界，歡迎關注。📝 每週一篇實用的前端文章 🛠️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章