Bí Quyết Xây Dựng Frontend "Sạch Sẽ" với Clean Architecture: Từ A đến Z!

Lê Lân

09/07/2025

Phát Triển Ứng Dụng Frontend Theo Kiến Trúc Sạch: Quy Trình Từng Bước Với Ví Dụ Thực Tiễn

Mở Đầu

Kiến trúc sạch (Clean Architecture) đang trở thành xu hướng quan trọng giúp các nhà phát triển frontend xây dựng các ứng dụng bền vững, dễ bảo trì và mở rộng. Tuy nhiên, việc áp dụng kiến trúc này trong thực tế còn gặp nhiều thách thức do thiếu quy trình cụ thể và minh họa rõ ràng.

Bài viết này sẽ cung cấp một quy trình phát triển ứng dụng frontend theo Kiến trúc sạch thông qua ví dụ thực tiễn là ứng dụng đếm số (counter app). Chúng ta sẽ lần lượt xây dựng từng đơn vị trong kiến trúc từ việc tạo giao diện người dùng đến kết nối backend, đồng thời minh họa các nguyên tắc quan trọng trong Clean Architecture. Dự án mẫu được lưu trữ tại GitHub: frontend-clean-architecture-exercise .

Qua bài viết, bạn sẽ hiểu cách ứng dụng Clean Architecture giúp tách biệt rõ các concern, dễ dàng kiểm thử và nâng cấp dự án một cách hiệu quả.

1. Tổng Quan Về Ứng Dụng Và Yêu Cầu

1.1 Mô Tả Ứng Dụng Đếm Số

Ứng dụng sẽ gồm màn hình hiển thị:

Giá trị đếm hiện tại

Trạng thái đếm: Positive, Negative, hoặc Zero

Các nút thao tác: tăng, giảm, và đặt lại giá trị về 0

Tất cả logic đếm được xử lý phía máy chủ, giá trị ban đầu cũng lấy từ server và mặc định là 0.

1.2 Giao Diện Người Dùng Cơ Bản

1.3 Sơ Đồ Kiến Trúc Sạch Cho Frontend

Chúng ta dựa vào sơ đồ UML của Clean Architecture áp dụng cho frontend như sau:

2. Quy Trình Phát Triển Ứng Dụng Theo Các Đơn Vị trong Clean Architecture

2.1 Bước 1: Tạo Đơn Vị View, Controller và Presenter

View unit: Dựa trên bản phác thảo giao diện, chịu trách nhiệm trình bày và nhận tương tác người dùng.

Presenter và Controller unit: Ban đầu có thể tạo dưới dạng mock (giả lập) để hỗ trợ test giao diện.

Mã ví dụ đơn giản cho view component:

function Counter() {
  // Giá trị và trạng thái đếm giả lập
  const countValue = 0;
  const countStatus = "Positive";

  // Các hàm xử lý giả lập
  const onIncrementButtonClick = () => {};
  const onDecrementButtonClick = () => {};
  const onResetButtonClick = () => {};

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-lg p-10 text-center max-w-sm w-full">
        <h1 className="text-3xl font-bold text-gray-800 mb-8">Counter App</h1>
        <div className="bg-gray-50 rounded-xl py-8 mb-8 border-2 border-gray-200">
          <span className="text-6xl font-bold text-indigo-600">{countValue}</span>
        </div>
        <div className="flex gap-4 justify-center mb-6">
          <button onClick={onDecrementButtonClick} className="w-16 h-16 bg-red-500 hover:bg-red-600 text-white text-2xl font-bold rounded-xl shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">-</button>
          <button onClick={onIncrementButtonClick} className="w-16 h-16 bg-green-500 hover:bg-green-600 text-white text-2xl font-bold rounded-xl shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">+</button>
        </div>
        <button onClick={onResetButtonClick} className="w-full py-3 px-6 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">Reset to Zero</button>
        <p className="text-gray-500 text-sm mt-6">
          Status: <span className="font-semibold">{countStatus}</span>
        </p>
      </div>
    </div>
  );
}

Ở giai đoạn này, view được coi là đã hoàn thành và có thể xem xét đóng gói tạm thời để phát triển tiếp các đơn vị khác.

2.2 Bước 2: Thêm Đơn Vị Entities Store

Entities store unit chịu trách nhiệm quản lý trạng thái ứng dụng, chứa các entity cốt lõi.

Với ví dụ đếm số, entity là count và hàm setter setCount .

const INITIAL_COUNT = 0;

function Counter() {
  const [count, setCount] = useState(INITIAL_COUNT);

  // Các phần khác như presenter, controller...

  return (
    // JSX view ở bước 1
  );
}

Việc tách biệt entities store giúp dễ dàng quản lý trạng thái tập trung và là đầu mối kết nối cho presenter cũng như controller.

2.3 Bước 3: Thêm Gateway Unit Factory

Gateway unit là lớp trung gian giữa ứng dụng và nguồn dữ liệu bên ngoài (backend).

Factory gateway cung cấp các phương thức truy xuất đến logic server.

interface CounterGateway {}

const useCounterGateway = (): CounterGateway => {
  return {} as CounterGateway;
};

Việc khởi tạo gateway ngay từ đầu giúp giảm sự phụ thuộc trực tiếp giữa ứng dụng và backend, tăng tính trừu tượng và dễ bảo trì.

2.4 Bước 4: Kết Nối Presenter Với Entities Store

Presenter có nhiệm vụ định dạng dữ liệu thô từ entities store để phù hợp với giao diện người dùng.

Ví dụ: tính trạng thái countStatus dựa vào giá trị countValue .

const countValue = count;
const countStatus = count === 0 ? "Zero" : count > 0 ? "Positive" : "Negative";

Tách presenter giúp view tập trung trình bày mà không cần lo lắng về tính toán trạng thái hay biến đổi dữ liệu.

2.5 Bước 5: Kết Nối Controller Với Entities Store Và Gateway

Controller xử lý sự kiện người dùng, cập nhật entities store và gọi gateway tương tác backend.

Trong ví dụ, các thao tác tăng, giảm, reset được thực hiện thông qua các use case tương tác với gateway.

interface CounterGateway {
  getCount: () => Promise<number>;
  incrementCount: () => Promise<number>;
  decrementCount: () => Promise<number>;
  resetCount: () => Promise<number>;
}

const onIncrementButtonClick = async () => {
  const remoteCount = await gateway.incrementCount();
  setCount(remoteCount);
};

const onDecrementButtonClick = async () => {
  const remoteCount = await gateway.decrementCount();
  setCount(remoteCount);
};

const onResetButtonClick = async () => {
  const remoteCount = await gateway.resetCount();
  setCount(remoteCount);
};

useEffect(() => {
  const onCounterMount = async () => {
    const remoteCount = await gateway.getCount();
    setCount(remoteCount);
  };
  onCounterMount();
}, []);

2.6 Bước 6: Triển Khai Gateway Bộ Nhớ Trong (In-memory Gateway)

Trước khi backend sẵn sàng, sử dụng gateway giả lập để mô phỏng logic server.

Đảm bảo application core không bị phụ thuộc trực tiếp vào backend thật.

let count = 5;

export const inMemoryCounterGateway: CounterGateway = {
  getCount: async () => count,
  incrementCount: async () => ++count,
  decrementCount: async () => --count,
  resetCount: async () => { count = 0; return count; },
};

export const useCounterGateway = (): CounterGateway => {
  return inMemoryCounterGateway;
};

Điều này minh họa một lợi ích lớn của Clean Architecture: bạn có thể thay thế hoàn toàn các phần bên ngoài mà không ảnh hưởng đến lõi ứng dụng.

2.7 Bước 7: Triển Khai Đơn Vị Tài Nguyên Ngoại Vi (External Resource Unit)

Khi backend sẵn sàng, viết đơn vị chịu trách nhiệm thực hiện các HTTP request.

Đơn vị này cung cấp interface tiêu chuẩn cho việc lấy và cập nhật dữ liệu backend.

interface ApiCountDto {
  value: number;
}

export const CounterApi = {
  async getCount(): Promise<ApiCountDto> {
    const response = await fetch("/api/counter");
    if (!response.ok) throw new Error("Failed to fetch count");
    return response.json();
  },
  async incrementCount(): Promise<ApiCountDto> {
    const response = await fetch("/api/counter/increment", { method: "POST" });
    if (!response.ok) throw new Error("Failed to increment count");
    return response.json();
  },
  async decrementCount(): Promise<ApiCountDto> {
    const response = await fetch("/api/counter/decrement", { method: "POST" });
    if (!response.ok) throw new Error("Failed to decrement count");
    return response.json();
  },
  async resetCount(): Promise<ApiCountDto> {
    const response = await fetch("/api/counter/reset", { method: "POST" });
    if (!response.ok) throw new Error("Failed to reset count");
    return response.json();
  },
};

2.8 Bước 8: Thêm Remote Gateway Unit

Remote gateway đóng vai trò adapter kết nối giữa core logic và external resource.

Nhiệm vụ chính: gọi API qua CounterApi và chuyển đổi dữ liệu cho ứng dụng.

export const remoteCounterGateway: CounterGateway = {
  getCount: async () => {
    const response = await CounterApi.getCount();
    return response.value;
  },
  incrementCount: async () => {
    const response = await CounterApi.incrementCount();
    return response.value;
  },
  decrementCount: async () => {
    const response = await CounterApi.decrementCount();
    return response.value;
  },
  resetCount: async () => {
    const response = await CounterApi.resetCount();
    return response.value;
  },
};

export const useCounterGateway = (): CounterGateway => {
  if (import.meta.env.DEV) {
    return inMemoryCounterGateway;
  }
  return remoteCounterGateway;
};

Việc lựa chọn động giữa gateway bộ nhớ trong và remote thể hiện khả năng linh hoạt và mở rộng cao theo nguyên lý của kiến trúc sạch.

3. Kết Luận

Quy trình phát triển ứng dụng frontend theo Clean Architecture từng bước rõ ràng không những giúp nâng cao chất lượng mã nguồn mà còn hỗ trợ phối hợp nhóm tốt hơn và đơn giản hóa bảo trì về lâu dài. Qua ví dụ ứng dụng counter, ta thấy cách từng đơn vị trong kiến trúc được xây dựng độc lập và kết nối tuần tự, từ giao diện, quản lý trạng thái, xử lý logic nghiệp vụ, đến tương tác backend.

Tính mô-đun và trừu tượng của kiến trúc sạch giúp cho việc mở rộng, thay thế phần backend hoặc cải tiến giao diện trở nên dễ dàng, giảm thiểu rủi ro kéo theo.

Nếu bạn đang xây dựng hoặc nâng cấp một ứng dụng frontend, kiến trúc sạch là lựa chọn đáng để cân nhắc cho quy trình phát triển của mình.

Tham Khảo

Harunou. Frontend Clean Architecture Exercise. GitHub repository. https://github.com/harunou/frontend-clean-architecture-exercise

Robert C. Martin. Clean Architecture: A Craftsman's Guide to Software Structure and Design. Prentice Hall, 2017.

Microsoft Docs. Clean Architecture. https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/common-web-application-architectures#clean-architecture

Eric Evans. Domain-Driven Design. Addison-Wesley, 2003.

Understanding the Clean Architecture Model. https://medium.com/swlh/clean-architecture-for-frontend-applications-bf4ab9bb6f63

Dev.to Article. Incrementally Building Frontend Apps with Clean Architecture. https://dev.to/harunou/incrementally-building-frontend-apps-with-clean-architecture-3ddb