Blazor – client web app với C# (và không JavaScript)

0

Trước hết cần khẳng định luôn với bạn đây là viết client web app bằng C# thực sự, không dùng JavaScript, cũng không phải là dùng một transpiler (công cụ dịch mã C# thành mã JavaScript) như trước kia. Blazor giúp bạn tạo ra ứng dụng .NET thực sự chạy trên browser mà không cần thêm plugin hay add-on nào hết.

Nếu bạn là một lập trình viên .NET, bạn hoàn toàn không cần rời xa ngôn ngữ lập trình C# và môi trường Visual Studio quen thuộc. Bạn cũng không cần cài đặt hàng đống thư viện hỗ trợ. Với Blazor, bạn hoàn toàn có thể viết ra các ứng dụng web client native, giống hệt như những gì mà Angular hay React thực hiện được. Tất cả chỉ với C# và Visual Studio.

Blazor là gì?

Blazor là một framework miễn phí mã mở và là một bộ công cụ mới của Microsoft giúp phát triển client web (chạy trên trình duyệt) sử dụng ngôn ngữ C# (thay cho JavaScript truyền thống). Bản release chính thức của Blazor mới phát hành vào tháng 9/2019 cùng với Asp.net Core 3.0.

Trước đây nếu cần tạo ra giao diện tương tác trên web bạn chỉ có lựa chọn là JavaScript và các framework của nó. Giờ đây, Blazor cũng có thể tạo ra UI tương tác hoàn toàn tương tự từ HTML, CSS và C#!!! Cả client và server giờ có thể viết bằng C#.

Blazor được xây dựng trên các tiêu chuẩn của web mở mà bạn đã quen thuộc.

Blazor cung cấp khả năng giống như của các JavaScript framework thông dụng như Angular hay React.

Không chỉ vậy, Blazor thậm chí còn cung cấp khả năng tương tác với JavaScript. C# code có thể gọi JavaScript code để tận dụng các thư viện JavaScript khổng lồ!

Khác với người tiền nhiệm SilverLight, Blazor không đòi hỏi trình duyệt phải cài đặt thêm plugin. Blazor cũng không phải là một loại transpiler và cũng không sử dụng bất kỳ transpilation nào.

Trước đây một số công cụ cũng cho phép viết code C# cho trình duyệt, ví dụ https://bridge.net/. Tuy nhiên, các công cụ này dịch mã nguồn C# sang JavaScript. Nói cách khác, bản chất của các ứng dụng đó cũng là ứng dụng JavaScript. Việc dịch mã nguồn các ngôn ngữ khác sang JavaScript như vậy gọi là transpilation. Công cụ để dịch mã như thế gọi là transpiler.

Blazor được phát triển làm một bộ phận của Asp.net Core, cùng hoạt động song song với MVC và Razor page đã có từ trước. Do vậy, những kinh nghiệm và kỹ thuật đã biết với nền tảng này có thể tiếp tục được tận dụng với Blazor. Blazor cũng có khả năng tái sử dụng code và thư viện như các ứng dụng .NET.

Mặc dù mới ra đời, các hãng thứ ba nổi tiếng như Telerik, DevExpress, Syncfusion đã bắt đầu cung cấp thư viện component cho Blazor. Bạn có thể truy cập để dùng thử miễn phí.

Blazor có hai mô hình hoạt động: (1) chạy trên server, gọi là Blazor Server app; (2) chạy trên WebAssembly, gọi là Blazor Assembly. Sự khác biệt này chúng ta sẽ xem trong bài viết tiếp theo.

Hiện nay chỉ có Blazor Server đã được phát hành chính thức cùng với Asp.net core 3.0. Blazor WebAssembly dự kiến sẽ phát hành cùng Asp.net Core 3.1 (hiện đang ở giai đoạn Preview).

Để bạn có thể tin tưởng, chúng ta cùng thực hiện một project nho nhỏ với Blazor Server, sau đó sẽ quay lại nói chuyện lý thuyết.

Tạo project Blazor đầu tiên

Để trải nghiệm Blazor, bạn cần bản mới nhất của Visual Studio 2019 (16.3.6) với ASP.NET and web development workload.

Để kiểm tra phiên bản của Visual Studio, bạn mở Visual Studio Installer. Nếu chưa update lên phiên bản 16.3.6, hãy thực hiện update ngay.

Nếu chưa cài ASP.NET and web development workload, hãy click nút Modify và cài đặt như dưới đây.

Lý do phải update là bản 16.3.6 lần đầu được tích hợp với .NET Core 3.0 – phiên bản đầu tiên hỗ trợ Blazor Server app.

cập nhật visual studio và cài đặt workload cho blazor

Giờ bạn có thể bắt đầu tạo project cho ứng dụng Blazor:

tạo blazor project
tạo blazor project
lựa chọn loại blazor app

Khi hoàn thành, bạn sẽ thu được một project với cấu trúc như sau:

cấu trúc project blazor

Dịch và chạy chương trình, bạn sẽ thu được ngay một ứng dụng web như sau:

chương trình blazor đầu tiên

Đây là ứng dụng mẫu mà Blazor tạo sẵn, giúp bạn có một cái khung để dễ dàng phát triển ứng dụng của riêng mình.

Hãy dành chút thời gian để nghịch với chương trình đơn giản này:

chương trình blazor đầu tiên
chương trình blazor đầu tiên

Hello world, Blazor!

Chúng ta tiếp tục với việc xây dựng một page riêng để cảm nhận cách viết code trong Blazor.

Click phải vào folder Pages và chọn Add => New Item. Sau đó chọn Razor Component đặt cho nó một cái tên (Greeting.razor).

tạo blazor component

Giờ là lúc viết vài dòng code cho Greeting.razor:

code blazor component

* Để bạn có cảm nhận riêng khi viết code, tôi chỉ chụp ảnh code lên đây chứ không copy code text.

Sau đó mở file NavMenu.razor trong thư mục Shared và tạo thêm mục mới trong menu như sau:

tạo menu cho blazor app

Bạn chỉ đơn giản sao chép một mục có sẵn và điều chỉnh giá trị href – url tương đối tới trang razor vừa tạo và label của nó trên menu. Giá trị của href chính là chuỗi ký tự bạn đặt trong @page “/greeting”.

Chạy chương trình và bạn thu được kết quả như sau:

blazor component tự tạo

Nhập tên và địa chỉ vào hai textbox rồi ấn nút Welcome!. Bạn sẽ nhận được lời chào mừng từ Blazor!

Chúc mừng bạn đã xây dựng page component đầu tiên của Blazor!

Một số nhận xét

Hẳn bạn đã thấy, những gì trước đây bạn phải dùng JavaScript, giờ bạn có thể thực hiện hoàn toàn bằng C#!

Các sự kiện được xử lý bằng phương thức của C#. Việc đọc và hiển thị dữ liệu động từ biến được thực hiện rất tiện lợi qua cơ chế databinding.

Các kỹ thuật làm việc với Html và Css được giữ nguyên vẹn.

Code C# và HTML markup trộn với nhau thoải mái nhờ cú pháp quen thuộc của Razor (nếu bạn từng làm việc với Asp.net MVC hoặc Asp.net Core).

Nếu mở DevTool (F12) của Chrome, bạn sẽ thấy các file được tải như sau:

các file của blazor app tải về client

Vô cùng đơn giản và gọn nhẹ phải không ạ! Không có hàng đống file hỗ trợ, không có JavaScript (ngoại trừ blazor.server.js chúng ta sẽ nói đến sau).

Nếu giữ cửa sổ DevTool mở và bạn chuyển qua lại giữa các mục của menu, bạn cũng để ý thấy rằng các page hoàn toàn không được tải lại! Nói cách khác, client viết bằng Blazor giờ hoạt động tương tự như một SPA (Single Page Application) rất nhẹ nhàng.

Cũng lưu ý rằng, ở trên chúng ta vừa phát triển một Blazor Server app. Cơ chế làm việc của Blazor Server app rất khác biệt so với client web app viết bằng JavaScript.

Trải nghiệm với Blazor WebAssembly

Blazor còn có một dạng khác là Blazor WebAssembly (thường gọi tắt là Blazor Wasm) đang ở giai đoạn Preview. Blazor wasm sẽ phát hành cùng với Asp.net Core 3.1, dự kiến vào tháng 5/2020.

Do vẫn còn ở giai đoạn Preview, Blazor wasm chưa được cung cấp chính thức với Visual Studio 2019 16.3.6. Bạn phải thực hiện một số cài đặt đơn giản.

Phần này sẽ hướng dẫn bạn cách cài đặt để trải nghiệm Blazor Wasm. Đặc điểm chi tiết của từng loại và sự khác biệt giữa chúng sẽ được nói rõ hơn ở các bài viết sau.

Trước hết bạn cần cài đặt .NET Core 3.1 Preview SDK từ https://dotnet.microsoft.com/download/dotnet-core/3.1. Lưu ý chọn cột Build apps – SDK và phiên bản phù hợp với hệ điều hành. Nếu dùng windows, dễ dàng nhất là chọn .NET Core Installer x64 hoặc x86.

Tiếp theo bạn mở Command Prompt (trên windows) và chạy lệnh:

 dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20 

Lệnh này sẽ cài đặt template cho Blazor wasm vào Visual studio.

Khi này, bạn có thể thực hiện lại các bước để tạo project Blazor giống như ở phần trên đã hướng dẫn. Ở bước “Create a new Blazor app”, bạn lựa chọn ASP.NET Core 3.1 thì template cho Blazor WebAssembly App sẽ xuất hiện.

Nếu chọn ASP.NET Core 3.0 thì chỉ có Blazor Server App, giống như ở phần trên đã thực hiện.

lựa chọn blazor webassembly app project

Kết quả bạn sẽ thu được một project với cấu trúc rất giống như của Blazor Server đã làm ở trên. Nếu dịch và chạy bạn sẽ thu được kết quả y hệt.

Bạn có thể áp dụng lại những gì đã làm để tạo ra một page component mới giống như đã làm với Blazor Server.

Tuy nhiên, khi tải app trên trình duyệt bạn sẽ để ý thấy, Blazor WebAssembly tải chậm hơn khá nhiều. Nếu mở DevTool của Chrome bạn sẽ thấy vô số file được tải về như thế này:

các file do blazor webassembly tải về trình duyệt

Nếu để ý kỹ nữa thì bạn sẽ thấy, phần lớn các file tải về có đuôi dll (Dynamic Link Library – thư viện động). Một số file trong đó có tên rất quen thuộc như System.dl. Chúng ta sẽ giải thích vấn đề này trong một bài viết riêng để giúp bạn hiểu rõ hơn về mô hình hoạt động của Blazor webassembly.

Kết phần

Chúng ta tạm dừng ở đây.

Bạn hãy dành chút thời gian để nghịch thử với project trên.

Nếu muốn tìm hiểu thêm về kỹ thuật phát triển ứng dụng với Blazor, bạn có thể đọc ở trang tài liệu chính thức của Microsoft: https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.0

Hãy đón đọc bài viết tiếp theo về cách thức hoạt động của Blazor.

Nếu có thắc mắc hoặc cần trao đổi thêm, mời bạn viết trong phần Bình luận ở cuối trang. Nếu cần trao đổi riêng, hãy gửi email hoặc nhắn tin qua form liên hệ. Nếu bài viết hữu ích với bạn, hãy giúp chúng tôi chia sẻ tới mọi người. Cảm ơn bạn!

Series bài về công nghệ Blazor:
(1) Blazor – phát triển web client với C# – trải nghiệm đầu tiên với Blazor
(2) Mô hình hoạt động của Blazor Server
(3) Mô hình hoạt động của Blazor WebAssembly

Bình luận

avatar
  Đăng ký theo dõi  
Thông báo về