Nhật ký học tập

Fluxor là một thư viện giúp quản lý trạng thái (State Management) một cách chặt chẽ và dễ dự đoán. Để hiểu cách nó hoạt động, chúng ta hãy nhìn vào luồng dữ liệu sau: 1. Luồng hoạt động graph LR A[UI / View] -- Dispatch --> B(Action) B --> C{Dispatcher} C --> D[Reducer] E[(Current State)] --> D D -- Create New --> F[(New State)] F --> A Hiểu đơn giản: State (Trạng thái): Là dữ liệu duy nhất và không thể thay đổi (immutable) đại diện cho một phần của ứng dụng. Action (Hành động): Một thông điệp gửi đi để yêu cầu thay đổi trạng thái. Nó không chứa logic, chỉ chứa dữ liệu cần thiết. Reducer (Bộ chuyển đổi): Một hàm thuần túy (pure function) nhận vào State cũ + Action và trả về một State mới. Dispatcher (Bộ điều phối): Công cụ dùng để gửi Action vào hệ thống. State State trong Blazor là dữ liệu hiện tại của ứng dụng tại một thời điểm cụ thể (ví dụ: giỏ hàng, thông tin đăng nhập, biến Lưu ý: Không ai được sửa State trực tiếp. Tại sao St...

State trong Blazor là một trong những khái niệm quan trọng nhất. Nếu hiểu đúng, bạn sẽ thấy Blazor rất "mượt"; nếu hiểu sai, code sẽ nhanh chóng thành… mì gói 🍜. Bài này đi từ ví dụ đơn giản nhất (click button) đến các pattern nâng cao như StateContainer, PersistentState, Fluxor và Undo/Redo. 1. State là gì? State = dữ liệu hiện tại của ứng dụng tại một thời điểm. Ví dụ: Counter = 5 User đã đăng nhập Giỏ hàng có 3 sản phẩm UI luôn được render dựa trên state. 2. Ví dụ cơ bản nhất: Click Counter Counter.razor <h3>Counter</h3> <p>Current count: @count</p> <button @onclick="Increment">Click me</button> @code { int count = 0; void Increment() { count++; } } Điều gì đang xảy ra? Flow rất đơn giản: User click ↓ Increment() ↓ count thay đổi ↓ Blazor re-render UI Đây chính là nền tảng: UI = f(state) 3. Khi state nằm trong component Cách trên hoạt động tốt khi: S...

Trong kiến trúc hiện đại của Blazor, việc chia nhỏ giao diện thành các Component giúp mã nguồn dễ bảo trì và tái sử dụng hơn. Tuy nhiên, thách thức lớn nhất thường nằm ở việc: Làm thế nào để các Component "communicate" được với nhau? Bài viết này sẽ giúp bạn nắm vững 3 kỹ thuật cốt lõi để truyền dữ liệu và điều khiển hành vi giữa các Component trong Blazor 1. EventCallback EventCallback là cách chuẩn nhất để một Component con thông báo cho Component cha rằng một sự kiện nào đó đã xảy ra (ví dụ: người dùng click nút, chọn item). Giả sử bạn có 2 components: Parent và Child Ở Component Child, bạn thêm 1 button và gọi event click của component Parent ParentComponent.razor @page "/parentcomponent" @namespace BlazorGettingStarted.Components.Pages @rendermode InteractiveServer <ChildComponent Text="Tăng giá trị" OnButtonClicked="IncrementCount" /> <p>Giá trị hiện tại: @count</p> @code { private int count = 0; private ...

Blazor Server là một mô hình hosting của framework web Microsoft Blazor, trong đó ứng dụng được thực thi trên server bên trong một ứng dụng ASP.NET Core. Khác với các ứng dụng web truyền thống phải tải lại toàn bộ trang, Blazor Server sử dụng một kết nối thời gian thực để cập nhật giao diện người dùng (UI) một cách linh hoạt và tức thì. 1. Cơ chế vận hành: Sức mạnh từ SignalR Điểm khác biệt lớn nhất của Blazor Server (nay gọi là Interactive Server ) so với MVC hay Razor Pages truyền thống là Stateful Connection : Khi trình duyệt kết nối, một kênh SignalR (dựa trên WebSockets) được thiết lập. Toàn bộ logic UI và trạng thái component chạy trên server. Mỗi khi có sự kiện người dùng (click, gõ phím...), server chỉ tính toán phần thay đổi nhỏ nhất của HTML (gọi là UI diff ) và gửi đoạn dữ liệu cực nhỏ về trình duyệt để cập nhật giao diện. 2. Cấu trúc một ứng dụng Blazor Web App (.NET 10) Từ .NET 8 trở đi, Microsoft khuyến nghị sử dụng template Blazor Web App . Cấ...

Khi thực hiện migrate các dự án .NET Framework , việc chuyển đổi dữ liệu giữa Entity và DTO thường tốn rất nhiều thời gian. Hôm nay mình sẽ giới thiệu Mapster - một thư viện Mapping cực nhanh và nhẹ để thay thế cho việc gán tay (Manual Mapping) nhàm chán. 1. Cài đặt Mở NuGet Package Manager Console và chạy lệnh sau: Install-Package Mapster # hoặc dotnet add package Mapster 2. Khởi tạo Model Giả sử chúng ta có cấu trúc class như sau: public class Person { public string Title { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime? DateOfBirth { get; set; } public Address Address { get; set; } } public class Address { public string Street { get; set; } public string City { get; set; } public string PostCode { get; set; } public string Country { get; set; } } public class PersonDto { public string Title { get; set; } public string FirstName { get; set; } public string LastName { get...

Mapster là một thư viện ánh xạ đối tượng (object-to-object mapping) mã nguồn mở, hiệu suất cao dành cho .NET, được tạo ra bởi Albert Huang. Nó giúp sao chép dữ liệu từ kiểu đối tượng này sang kiểu đối tượng khác (ví dụ: DTO sang Entity) một cách gọn nhẹ, nhanh chóng, thường được dùng thay thế cho AutoMapper. Cài đặt Mapster Bước đầu tiên là cài đặt package Mapster thông qua NuGet Package Manager Console: Install-Package Mapster Chuẩn bị môi trường (Model & DTO) Giả sử chúng ta có các class thực thể (Entities) và một class DTO (Data Transfer Object) để hứng dữ liệu: public class Person { public string Title { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime? DateOfBirth { get; set; } public Address Address { get; set; } } public class Address { public string Street { get; set; } public string City { get; set; } public string PostCode { get; set; } public string Country { get; set; } } publ...

.NET ASP.NET Visual Studio Đây là phần 2 trong series modernize ASP.NET MVC 5 trên .NET Framework 4.8. Ở Part 1 , chúng ta đã migrate project sang SDK-style .csproj . Bây giờ nền móng đã sạch, có thể bắt đầu tối ưu phần “đụng nhiều nhất mỗi ngày”: mapping giữa entity và ViewModel . 1. Vì sao nên thay AutoMapper? AutoMapper rất tiện — nhưng cũng có những trade-off: Mapping diễn ra ở runtime → khó debug Logic bị “giấu” trong config Performance không tối ưu trong một số case Khi project lớn dần, những vấn đề này bắt đầu rõ ràng hơn. Giải pháp thay thế: compile-time mapping . Một trong những thư viện nổi bật: Mapperly . 2. Mapperly là gì? Mapperly sử dụng Source Generator để generate code mapping ngay lúc build. Nghĩa là: Không còn reflection Không còn runtime mapping Mapping = code C# thật (có thể debug) Hiểu đơn giản: thay vì “config mapping”, bạn “viết mapping — và tool generate phần còn lại”....

.NET ASP.NET Visual Studio Đây là phần 1 trong series modernize ASP.NET MVC 5 trên .NET Framework 4.8. Series này gồm 2 phần: Part 1: migrate sang SDK-style .csproj Part 2: tích hợp compile-time mapping (Mapperly) Nếu nền móng project chưa ổn, việc tối ưu phía trên (mapping, performance, architecture) sẽ rất khó maintain về lâu dài. Vì vậy, bài này chỉ tập trung vào một việc duy nhất: chuyển project MVC 5 sang SDK-style và chạy ổn định với IIS Express . 1. Vấn đề của project legacy Hầu hết project ASP.NET MVC 5 lâu năm đều có đặc điểm chung: .csproj dạng cũ (old-style) Khai báo file thủ công Sử dụng packages.config Những vấn đề thường gặp: File .csproj dài hàng trăm dòng, khó đọc Thêm/xóa file → phải sửa project file Merge conflict xảy ra thường xuyên Project vẫn chạy — nhưng càng ngày càng khó maintain. 2. SDK-style giải quyết điều gì? SDK-style .csproj mang lại cách tiếp cận đơn giản h...

Mediator Pattern là gì? Mediator là một mẫu thiết kế hành vi (behavioral design pattern) giúp giảm sự phụ thuộc trực tiếp và phức tạp giữa các thành phần trong một hệ thống. Hãy hình dung một hệ thống phức tạp mà không có Mediator như một mạng lưới các đối tượng giao tiếp trực tiếp với nhau. Khi số lượng đối tượng tăng lên, số lượng kết nối và sự phụ thuộc sẽ tăng theo cấp số nhân, tạo ra một kiến trúc rối rắm, khó quản lý, thường được gọi là "spaghetti code". Mediator pattern giải quyết vấn đề này bằng cách giới thiệu một đối tượng trung gian (Mediator). Thay vì giao tiếp trực tiếp, tất cả các thành phần sẽ gửi yêu cầu hoặc thông báo đến Mediator. Mediator sau đó sẽ điều phối và chuyển tiếp các yêu cầu này đến (các) thành phần xử lý (handler) tương ứng. Điều này giúp các thành phần trở nên độc lập (decoupled) với nhau. Mối Liên Hệ Giữa Mediator, CQS và CQRS Để hiểu sâu hơn về sức mạnh và ứng dụng của Mediator pattern, chúng ta cần tìm hiểu về một nguyên tắc nền tảng trong th...