2025/08/23

EXARC (Express ARC JS Starter Kit) 為 Delphi 開發者打造的現代化 Web 開發框架

EXARC (Express ARC JS Starter Kit)
-- 為 Delphi 開發者打造的現代化 Web 開發框架

🎯 給熟悉 DataSnap、MVC、WebBroker 的您

如果您曾經使用過 Delphi DataSnap REST 的代理自動生成功能，或是體驗過 Delphi MVC Web Framework 的路由機制，那麼 EXARC 將會讓您感到非常熟悉。它將 Delphi 開發中最優雅的概念帶到了現代 JavaScript 生態系統中。

🔄 從 Delphi 到 JavaScript：相似的開發哲學

DataSnap REST 的現代化演進

還記得 Delphi DataSnap 如何自動為您的伺服器方法生成用戶端代理嗎？EXARC 採用了相同的理念：

Delphi DataSnap EXARC 相似度
伺服器方法定義 Express 路由定義 ✅ 相同概念
自動生成用戶端代理 自動生成 apiProxy.js ✅ 相同機制
型別安全的呼叫 語義化的 async 呼叫 ✅ 相同體驗
內建認證支援 JWT 認證中介軟體 ✅ 相同功能 
// Delphi DataSnap 伺服器方法
function TServerMethods.EchoMessage(const AMessage: string): string;
begin
  Result := 'Echo: ' + AMessage;
end;

// 自動生成的用戶端代理呼叫
ClientModule.ServerMethods.EchoMessage('Hello');

// EXARC Express 路由定義
app.get('/api/echomsg/:msg', (req, res) => {
    res.json({ echoed: req.params.msg });
});

// 自動生成的前端代理呼叫
await apiProxy.echomsg('Hello');

MVC Web Framework 的路由理念

熟悉 Delphi MVC 的路由屬性嗎？EXARC 採用了相似但更簡潔的方式：

// Delphi MVC Controller
[MVCPath('/api/users')]
[MVCHTTPMethod([httpGET])]
function GetUserList: TObjectList<TUser>;

// EXARC Express 路由
app.get('/api/users/list', (req, res) => {
    res.json(getUserList());
});
// 自動生成: apiProxy.usersList()

💡 為什麼 Delphi 開發者會愛上 EXARC？

1. 熟悉的開發模式

您已經習慣了 Delphi 的「定義一次，處處可用」理念：

  • DataSnap: 定義伺服器方法 → 自動生成用戶端代理
  • EXARC: 定義 Express 路由 → 自動生成前端代理
  • 結果: 相同的開發體驗，但擁抱現代 Web 技術

2. 強型別思維的延續

雖然是 JavaScript，但 EXARC 透過 JSDoc 和自動生成機制，提供了接近強型別的開發體驗：

/**
 * 建立使用者資料
 * @param {Object} userData - 使用者資訊
 * @param {string} userData.name - 使用者姓名
 * @param {string} userData.email - 電子郵件
 * @returns {Promise<Object>} 建立結果
 */
app.post('/api/users/create', (req, res) => {
    // 業務邏輯實作
});

// 前端呼叫時會有清楚的參數提示
await apiProxy.usersCreate({
    name: "John Doe",
    email: "john@example.com"
});

3. 內建的測試和除錯工具

就像 Delphi IDE 的整合除錯環境，EXARC 提供內建的 API 測試器：

  • 自動掃描所有 API 端點（類似 DataSnap 的伺服器方法瀏覽器）
  • 即時參數輸入和測試（類似 Delphi 的 Method Invoker）
  • 即時回應查看（類似 REST Debugger）

🚀 技術架構對比

從 WebBroker 到 Express.js

概念 Delphi WebBroker EXARC Express.js
HTTP 伺服器 TWebModule + HTTP.sys Node.js + Express
路由處理 WebActionItem app.get/post/put/delete
中介軟體 WebModule Events Express Middleware
靜態檔案 DocumentRoot express.static
會話管理 TWebSession JWT Token

從 DataSnap 到 EXARC

// Delphi DataSnap 架構
TServerContainer -> TDSServer -> TServerMethods
                              -> Auto-generated Client Proxy

// EXARC 架構
Express Router -> API Routes -> Auto-generated apiProxy.js
                            -> Dynamic API Invoker

🔧 實際開發對比

Delphi DataSnap 開發流程

// 1. 定義伺服器方法
function TServerMethods.GetCustomerOrders(CustomerID: Integer): TJSONArray;
begin
  // 實作業務邏輯
end;

// 2. 編譯專案，自動更新用戶端代理

// 3. 用戶端呼叫
ClientModule.ServerMethods.GetCustomerOrders(123);

EXARC 開發流程

// 1. 定義 Express 路由
app.get('/api/customers/:id/orders', (req, res) => {
    const customerId = req.params.id;
    // 實作業務邏輯
    res.json(getCustomerOrders(customerId));
});

// 2. 儲存檔案，自動更新前端代理

// 3. 前端呼叫
await apiProxy.customersOrders(123);

相似度：95%！

🌟 EXARC 相比 Delphi 的優勢

1. 現代化的生態系統

  • 豐富的套件庫: npm 生態系統 vs GetIt Package Manager
  • 跨平台部署: Linux/Windows/macOS vs Windows 主要
  • 容器化支援: Docker 原生支援 vs 需要額外配置

2. 前端技術選擇自由

  • 多框架支援: React, Vue, 原生 JS vs 主要是 Delphi 用戶端
  • 響應式設計: 內建 Mobile-first 設計
  • 現代 UI 框架: Tailwind, Bootstrap 等

3. 開發工具整合

  • VS Code 完整支援: IntelliSense, 除錯, Git 整合
  • 熱重載: 程式碼變更即時生效
  • DevTools: 強大的瀏覽器除錯工具

4. 部署和維運

  • 雲端原生: 天然支援 AWS, Azure, GCP
  • CI/CD 整合: GitHub Actions, GitLab CI 等
  • 監控和日誌: 豐富的 APM 工具

🎯 遷移建議：從 Delphi 到 EXARC

階段一：概念對應

  • DataSnap 伺服器方法 → Express 路由
  • ClientDataSet → JSON 資料處理
  • WebBroker Actions → Express 中介軟體
  • ISAPI/CGI → Node.js HTTP Server

階段二：逐步遷移

  1. API 層先行: 將 DataSnap REST 服務改寫為 Express API
  2. 保持資料庫: 繼續使用現有的 SQL Server/Oracle/FireDAC
  3. 前端現代化: 逐步將 VCL/FMX 用戶端改為 Web 介面
  4. 認證統一: 從 Session-based 遷移到 JWT

階段三：現代化升級

  • 導入 TypeScript (可選)
  • 整合現代 CSS 框架
  • 實作 PWA 功能
  • 加入自動化測試

📊 成本效益分析

Delphi 開發 vs EXARC 開發

項目 Delphi 生態 EXARC + Node.js
授權成本 Delphi Professional: $1,500+ 完全免費
伺服器授權 Windows Server 授權 Linux 免費
部署成本 IIS + Windows Docker + 雲端 (更便宜)
維護成本 需要 Delphi 專家 JavaScript 開發者更易找
學習曲線 對 Delphi 開發者: 低 中等 (但概念相似)

🛠️ 實作範例：從 DataSnap 到 EXARC

Delphi DataSnap 範例

unit ServerMethodsUnit;

interface

uses
  SysUtils, Classes, DSServer, DSAuth, DataSnap.DSProviderDataModuleAdapter,
  Datasnap.DSClientMetadata, Data.FireDACJSONReflect, Data.DB;

type
  TServerMethods = class(TDSServerModule)
  private
  public
    function GetUserProfile(UserID: Integer): TJSONObject;
    function UpdateUserProfile(UserID: Integer; ProfileData: TJSONObject): Boolean;
  end;

implementation

function TServerMethods.GetUserProfile(UserID: Integer): TJSONObject;
begin
  // 實作取得使用者資料邏輯
  Result := TJSONObject.Create;
  Result.AddPair('id', TJSONNumber.Create(UserID));
  Result.AddPair('name', 'John Doe');
end;

function TServerMethods.UpdateUserProfile(UserID: Integer; ProfileData: TJSONObject): Boolean;
begin
  // 實作更新使用者資料邏輯
  Result := True;
end;

EXARC 對應實作

// server.js
const express = require('express');
const app = express();

app.use(express.json());

// 對應 TServerMethods.GetUserProfile
app.get('/api/users/:id/profile', (req, res) => {
    const userId = parseInt(req.params.id);
    
    // 實作取得使用者資料邏輯
    const userProfile = {
        id: userId,
        name: 'John Doe',
        email: 'john@example.com'
    };
    
    res.json(userProfile);
});

// 對應 TServerMethods.UpdateUserProfile
app.put('/api/users/:id/profile', (req, res) => {
    const userId = parseInt(req.params.id);
    const profileData = req.body;
    
    // 實作更新使用者資料邏輯
    const success = updateUserProfile(userId, profileData);
    
    res.json({ success: success });
});

app.listen(3000);

自動生成的前端代理

// apiProxy.js (自動生成)
export const apiProxy = {
    /**
     * 取得使用者資料
     * @param {number} id - 使用者 ID
     * @returns {Promise<Object>} 使用者資料
     */
    usersProfile: async (id) => {
        return handleApiCall(api.get, `users/${id}/profile`);
    },

    /**
     * 更新使用者資料
     * @param {number} id - 使用者 ID  
     * @param {Object} data - 更新資料
     * @returns {Promise<Object>} 更新結果
     */
    usersProfileUpdate: async (id, data) => {
        return handleApiCall(api.put, `users/${id}/profile`, data);
    }
};

// 使用方式 (類似 DataSnap 用戶端代理)
const profile = await apiProxy.usersProfile(123);
const result = await apiProxy.usersProfileUpdate(123, { name: 'Jane Doe' });

🎉 結論：擁抱現代化，保持熟悉感

EXARC 為 Delphi 開發者提供了一條平滑的現代化遷移路徑：

✅ 保留 Delphi 的優雅設計理念 - 自動化、強型別思維、整合開發體驗
✅ 擁抱現代 Web 技術 - JavaScript 生態、雲端原生、跨平台部署
✅ 降低學習成本 - 相似的概念映射、熟悉的開發流程
✅ 提升競爭力 - 更低的成本、更大的人才庫、更好的擴展性

立即開始您的現代化之旅

# 30 秒體驗 EXARC
npx degit Eden5Wu/EXARC my-modern-api
cd my-modern-api && npm install && npm run dev

# 訪問 http://localhost:8893/apiProxyInvoker.html
# 體驗類似 DataSnap Method Invoker 的測試工具！

從 Delphi 到 EXARC，不是放棄過去，而是站在巨人的肩膀上擁抱未來。 🚀

📞 技術支援

  • GitHub: Eden5Wu/EXARC
  • 遷移指南: [專為 Delphi 開發者準備的詳細文檔]
  • 範例專案: [DataSnap 到 EXARC 的完整遷移範例]

讓我們一起將 Delphi 的優雅帶入現代 Web 開發！ 💪

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)