Khám Phá Tính Năng Signals trong Angular

Angular là một framework phát triển ứng dụng web nổi tiếng, giúp xây dựng các ứng dụng doanh nghiệp phức tạp và mạnh mẽ. Việc làm chủ công cụ này không chỉ giúp lập trình viên nâng cao khả năng nghề nghiệp mà còn tạo ra những sản phẩm hiệu suất cao.

Tính Năng Phản Ứng trong Angular

Sự phổ biến của Angular được xây dựng trên tính năng phản ứng (reactivity). Tính năng này cho phép giao diện người dùng tự động cập nhật khi dữ liệu hoặc trạng thái của ứng dụng thay đổi. Việc này thường diễn ra từ các sự kiện, như phản hồi từ API hoặc hành động của người dùng như nhấp chuột.

Dù tính năng phản ứng mang lại nhiều tiện ích, nhưng đôi khi, nó có thể dẫn đến vấn đề về hiệu suất do các cập nhật không mong muốn trong UI.

Tính Năng Signals Mới

Mới đây, Angular đã cho ra mắt tính năng Signals, cho phép lập trình viên kiểm soát việc phát hiện thay đổi và tránh các cập nhật không mong muốn trong UI. Tính năng này không chỉ giúp cải thiện hiệu suất cho các ứng dụng hiện có mà còn cho phép xây dựng các ứng dụng mới với hiệu suất vượt trội hơn so với Angular truyền thống.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước chuyển đổi một ứng dụng Angular hiện có sang sử dụng Signals, nhằm tối ưu hóa hiệu suất.

Điều Kiện Cần Thiết Trước Khi Bắt Đầu

Để bắt đầu, bạn cần có:

• Kiến thức về JavaScript, TypeScript và Angular.
• Cài đặt Node.js và NPM trên máy tính của bạn.
• Cài đặt Git để quản lý phiên bản mã nguồn.
• Một trình soạn thảo mã như Visual Studio Code.

Bước Đầu Khởi Chạy Ứng Dụng

Chúng ta sẽ tiến hành chuyển đổi một ứng dụng quản lý bảng chấm công, nơi quản lý có thể xem và cập nhật số giờ làm việc của nhân viên. Trước tiên, hãy cài đặt các dependencies với lệnh npm install và khởi động ứng dụng bằng npm start. Bạn có thể truy cập ứng dụng tại địa chỉ http://localhost:4200/.

Hiểu Về Ứng Dụng Hiện Có

Ứng dụng của chúng ta có hai thành phần chính là thành phần cha và thành phần con. Thành phần cha hiển thị tổng số giờ của nhóm và danh sách nhân viên, trong khi đó thành phần con cho phép chỉnh sửa thông tin của một nhân viên được chọn.

Chuyển Đổi Ứng Dụng Sang Signals

Đầu tiên, chúng ta sẽ chuyển đổi biến managerName thành một signal, như sau:

managerName = signal<string>('John Doe');

Sau đó, hãy cập nhật mã HTML để đọc giá trị của signal này:

<h1 class="text-3xl font-bold mb-6">Hello {{managerName()}}!</h1>

Tương tự, chúng ta sẽ chuyển đổi danh sách nhân viên thành signal:

 employees = signal<Employee[]>([ ... ]);

Hãy nhận xét mã trong các phương thức tính toán tổng số giờ tập hợp để xử lý sự thay đổi của signal:

getTeamRegularHoursTotal() {
  let total = 0;
  return total;
}

Tiếp theo, sử dụng computed signals để tính toán tổng giờ:

teamRegularHoursTotal = computed(() => { ... });

Cập nhật HTML để hiển thị giá trị giờ:

<p>Tổng số giờ: {{teamRegularHoursTotal()}}</p>

Chuyển Đổi Thành Phần Con

Trong thành phần con, hãy thay thế @Input bằng signal kiểu input:

employee = input<Employee | null>();

Cập nhật các phương thức trong thành phần con để phản ánh thay đổi do signal:

saveChanges() { this.employeeChange.emit(this.employee()); }

Như vậy, toàn bộ quá trình chuyển đổi ứng dụng sang sử dụng Signals đã hoàn tất, nâng cao hiệu suất và sự tương tác của ứng dụng.

Kết Luận

Chúc mừng bạn đã hoàn thành hướng dẫn chuyển đổi ứng dụng Angular sang sử dụng Signals! Qua bài viết, bạn đã học cách khai thác sức mạnh của Signals để cải tiến hiệu suất và sự phản ứng của Angular. Nếu bạn gặp vấn đề, hãy kiểm tra mã trong nhánh feature/signals của kho lưu trữ.

Hãy theo dõi trang của chúng tôi để cập nhật thêm nhiều kiến thức và kỹ năng hữu ích trong lập trình Angular!
source: viblo