【文章翻譯】We rebuilt Flutter’s websites with Dart and Jaspr

【文章內容使用 Gemini 2.5 Flash 自動翻譯產生】

使用 Jaspr（一個基於 Dart 的開源網路框架）重建三個網站。

儘管 Dart 最初是一種網路語言，並且每天都被用於跨平台（包括網路）構建應用程式，但我們自己的網站（dart.dev、flutter.dev、docs.flutter.dev）卻依賴於碎片化的非 Dart 工具組合。這種情況終於改變了。我們已將所有三個網站遷移到使用 Jaspr，這是一個用於使用 Dart 構建網站的開源框架。

結果是一個統一的技術棧，具有一致的開發人員體驗，其中貢獻只需要 Dart。如果您對使用 Dart 構建超越標準 Flutter 網路應用程式的網路體驗感到好奇，這篇文章將探討我們遷移的動機以及 Dart 和 Jaspr 如何使這一切成為可能。

碎片化且不熟悉的技術棧

雖然我們網站之前的設定有效，但它們的實作是碎片化的，並且需要越來越多的精力來更新網站以滿足我們不斷變化的需求。文件網站是使用 Eleventy（一個 Node.js 靜態網站生成器）構建的。同時，flutter.dev 有一個完全獨立的設定，由 Wagtail（一個基於 Python 和 Django 的 CMS）提供支援。

這種碎片化意味著任何想要為我們的網站做出貢獻或維護我們網站的人都需要 Dart 生態系統之外的額外經驗和工具：一組網站需要 Node.js 工具，另一組網站需要 Python。雖然一些周邊基礎設施和互動式組件已經使用 Dart 構建，但獨立的生態系統限制了程式碼共用，顯著增加了設定和貢獻的摩擦，並變得越來越複雜。

我們想改變這種情況。我們想要一個基於我們的團隊和社群已經熟悉的語言和工具的單一、統一的技術棧。我們對網站的互動性也有越來越高的期望和需求，從更豐富的程式碼範例到教學課程的測驗。我們現有的設定使每個新的互動元素都變得困難重重，通常需要一次性的命令式 DOM 邏輯。

在 Jaspr 中尋找統一的解決方案

Jaspr 是一個多功能 Dart 網路框架，支援客戶端渲染、伺服器端渲染和靜態網站生成。除了作為一個傳統的基於 DOM（帶有 HTML 和 CSS）的網路框架並以我們已經知道的語言編寫之外，Jaspr 因以下幾個原因而脫穎而出：

Flutter 技能直接轉換。 Jaspr 框架及其組件模型旨在讓任何 Flutter 開發人員感到自然和熟悉，同時與網路的 DOM 模型相容。如果您以前編寫過 Flutter Widget，您可以閱讀此內容：

class FeatureCard extends StatelessComponent {
  const FeatureCard({
    required this.title,
    required this.description,
    super.key,
  });

  final String title;
  final String description;

  @override
  Component build(BuildContext context) {
    return div(classes: 'feature-card', [
      h3([.text(title)]),
      p([.text(description)]),
    ]);
  }
}

使用 Jaspr，貢獻者可以直接將他們已有的 Dart 和 Flutter 經驗應用到新平台，顯著降低了想要改進我們文件和網站的團隊和社群成員的進入門檻。

無縫支援部分水合。 這次探索和遷移的一個主要潛在原因是為了讓在我們的網站上建立和整合互動式體驗變得更容易。Jaspr 內建的部分水合支援允許每個頁面預渲染為靜態 HTML，然後僅為需要它的組件附加客戶端邏輯。這對於像我們這樣的網站來說是完美的，其中大部分內容是靜態的，只需要小部分的互動性，確保快速的頁面載入和良好的 SEO。

Jaspr Content 適用於 Markdown 驅動的網站。 Jaspr 還提供了 Jaspr Content，這是一個支援快速建立內容驅動網站的套件。它提供了足夠的開箱即用功能，可以在幾分鐘內建立一個基於 Markdown 的運行網站，同時也易於廣泛擴展和自訂。這種內建功能節省了大量的時間，而可自訂性使我們能夠保持原始功能和內容實踐不變。

我們獲得了什麼

這次遷移帶來了我們所設想的所有好處，甚至更多，包括網站本身和貢獻體驗。

一個單一、統一的工具鏈。 由於所有內容都用 Dart 編寫，您不僅只需要一個 SDK 即可貢獻，我們還可以使用 Dart 強大、統一的工具。我們可以使用 dart pub 管理所有依賴項，使用 dart format 格式化程式碼，使用 dart analyze 分析程式碼，然後使用 dart test 測試程式碼。現在，管理網站只需要一套工具，一套要遵循的慣例，以及一個要保持最新的生態系統，而且這是我們已經最熟悉的那個。

我們的貢獻者已經熟悉的技術棧。 我們的網站有很多貢獻者，從工程師到技術撰稿人，再到熱情的社群成員。我們希望每個人都能夠做出貢獻，但碎片化的設定對大多數人來說是複雜且不熟悉的。現在，這些網站被實作成標準的 Dart 專案，如果您了解 Dart，那麼您就擁有所需的一切。我們希望這能降低團隊和社群成員想要幫助改進 Flutter 和 Dart 文件的門檻。

需要改變的內容比您預期的要少。 由於 Jaspr Content 開箱即用支援我們所需的大部分功能，例如模板支援、Markdown 和資料載入，我們的內容和撰寫工作流程幾乎不需要改變。我們的樣式也不需要改變，因為我們已經使用 Sass（一種 CSS 擴展語言），它實際上是使用 Dart 實作的，因此比我們以前的設定需要更簡單的設定。

協作遷移

總體而言，網站遷移到 Jaspr 和 Jaspr Content 進行得很順利，但當然也遇到了一些挑戰。我們偶爾會遇到 Dart 的 Web 工具和 Jaspr 本身的問題以及改進機會。

使遷移成為可能的是 Jaspr 的創建者和維護者 Kilian。除了創建 Jaspr，他在整個遷移過程中都支援我們。他作為早期概念驗證遷移了組件，回應了問題，發布了修復，改進了開發人員體驗，甚至以我們的網站為主要用例構建了 Jaspr Content。為了支援這項持續的努力並正式化協作，我們與 Kilian 和他的諮詢公司 Netlight 合作，幫助我們遷移我們的其餘網路存在並繼續直接投資於 Jaspr。這是一個真正的協作過程。我們的網站和 Jaspr 都因此而成長。

在 Dart 和 Flutter 生態系統中，社群就是一切，而 Kilian 透過 Jaspr 為社群提供的正是最好的例子。Jaspr 已證明自己是一個功能強大且現代化的 Web 框架，它維護良好、對回饋反應迅速，並隨時供您試用。謝謝您，Kilian！

若要聽取 Kilian 關於建立和維護框架的觀點，請查看他的文章：Jaspr：為什麼在 Dart 中進行 Web 開發可能是一個好主意。

Dart 和 Jaspr 共同成長

在全 Dart 技術棧上構建最值得稱道的一個方面是，Dart 語言和周圍工具的改進會使所有事物受益。不僅僅是您的 Flutter 應用程式，您的網站也一樣。以下是一些最近的 Dart 功能，它們直接影響並改進了使用 Jaspr 進行構建的體驗。

點簡寫使組件樹更簡潔。 Dart 3.10 引入了對 點簡寫語法 的支援，使您可以在從上下文中推斷出靜態成員存取時省略類型名稱。Kilian 利用這一點，將幾個組件構造函數整合到 Component 類上，並將它們設計為與新語法自然協同工作：

Component build(BuildContext context) => const div([
  // API 變更後：
  h1([Component.text('Dash says hi!')]),
  Component.fragment([
    Component.text('First element'),
    Component.text('Second element'),
  ]),
  Component.empty(),

  // 使用點簡寫：
  h1([.text('Dash says hi!')]),
  .fragment([
    .text('First element'),
    .text('Second element'),
  ]),
  .empty(),
]);

結果是一個更一致的 API，具有更好的可發現性，以及在常量上下文仍然有效的簡潔語法。最棒的是，Jaspr 的 CLI 帶有一個 jaspr migrate 命令，可以自動處理遷移到新 API 以及其他變更。

Null 感知集合元素簡化了條件渲染。 Dart 3.8 添加了對 null 感知集合元素 的支持，提供了一種清晰的語法，可以在集合中條件性地包含非 null 值。在 Jaspr 程式碼中，您經常組合子組件列表，它們提供了一種優雅的方式來處理條件 UI 元素：

Component build(BuildContext context) => div(classes: 'header', [
  h1([.text('Welcome to Flutter!')]),

  // 在 null 感知集合元素之前：
  if (eventBanner != null) eventBanner!,

  // 使用 null 感知集合元素：
  ?eventBanner,
]);

不再有冗長的 if 檢查和非 null 斷言混亂您的組件樹。

現代、輕量級 JS 互通與編譯至 WebAssembly。 為了高效存取現代 Web API 並編譯至 WebAssembly，Dart 3.3 引入了新的 JS 互通 函式庫以及 package:web。Jaspr 迅速遷移並支援了新的 API，確保 Jaspr 開發人員可以從其新功能中受益並構建現代 Dart 應用程式。在此基礎上，Jaspr 還支援在客戶端運行時實驗性地編譯至 WebAssembly。事實上，dart.dev 已經在使用並受益於對相容瀏覽器的這種支援。

一個實用、整合的分析器外掛。 一段時間以來，Jaspr 有一個基於 package:custom_lint 構建的實用 linting 套件，幫助開發人員編寫符合慣例且正確的 Jaspr 程式碼。隨著 Dart 3.10 中官方 分析器外掛 支援的發布，Jaspr 遷移以採用該功能。該外掛提供了一個很好的範例，說明了什麼是可能的，提供 Jaspr 特定的診斷和程式碼輔助。例如，它可以轉換組件類型或快速將組件包裝到另一個組件中，類似於您可能已經習慣使用的 Flutter 輔助。

這些功能都不是專門為 Jaspr 構建的。它們是對 Dart 語言和工具的改進，使整個生態系統受益，而不僅僅是 Flutter。其中一些功能，Jaspr 能夠立即利用，而其他功能則需要 Kilian 和貢獻者的框架更改才能釋放其潛力。無論哪種方式，很明顯 Dart 仍在不斷發展，並且這種發展繼續為所有用它構建的東西（包括 Jaspr 和 Flutter）開闢改進和可能性。

接下來是什麼以及如何開始

我們還沒結束。現在我們的網站共享這個新的技術棧，我們可以開始共享更多程式碼，構建新的互動功能，並繼續改進 Dart 的 Web 開發故事。我們還將 Dart 和 Flutter 部落格從 Medium 遷移到直接託管在我們由 Jaspr 提供支援的網站上。您很快就能在上面閱讀這篇文章了。

如果您是一位 Dart 或 Flutter 開發人員，對使用您已有的技能建立網站感到好奇，那麼現在是嘗試的最佳時機。Jaspr 是內容豐富型網站（例如登陸頁面和文件）的絕佳選擇。它甚至可以自然地 與您的 Flutter 網站應用程式整合。立即在 Jaspr 的 線上遊樂場（也是用 Jaspr 構建的！）或依照 Jaspr 快速入門 試用。

或者，如果您有興趣為 Flutter 或 Dart 文件網站做出貢獻，那麼進入門檻剛剛降低了很多。現在有了 Jaspr，您所需要的只有 Dart。

---

我們用 Dart 和 Jaspr 重建了 Flutter 的網站 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。