Trang chủ Thủ Thuật Khung web Blazor của Microsoft là gì và bạn có nên sử...

Khung web Blazor của Microsoft là gì và bạn có nên sử dụng nó không?

0
42

Khung web Blazor của Microsoft là gì và bạn có nên sử dụng nó không?

Blazor logo

Blazor là một khung web mới từ Microsoft được thiết kế để cạnh tranh với các nền tảng hàng đầu trong ngành như React. Ngoại trừ, thay vì sử dụng JavaScript, nó chạy trên thời gian chạy .NET và cho phép các nhà phát triển tạo các ứng dụng web tương tác với C# và HTML.

Thậm chí ASP.NET gì?

Nếu bạn đến từ thế giới của các framework JavaScript, bạn có thể bối rối về mối quan hệ của Blazor với ASP.NET. Cả hai đều là “khung web”, nhưng Blazor chỉ là một phần của hệ sinh thái ASP.NET chúng.

Mặc dù nền tảng ASP.NET đã gần 20 năm tuổi vào thời điểm này, nhưng nó không phải là một khuôn khổ khủng long— nó đã liên tục cải thiện cùng với C # và .NET nói chung, vì Microsoft sử dụng nó trong nội bộ. Nó hoàn toàn đa nền tảng và hiệu quả hơn bao giờ hết.

Ban đầu, chỉ có một số ASP.NET, có thể được sử dụng để tạo ra tất cả các loại ứng dụng web. Có một ASP.NET MVC (Model-View-Controller), tạo ra các trang web dựa trên dữ liệu và ASP.NET WebAPI, chuyên về API phụ trợ. Chúng gần đây đã được hợp nhất thành một gói thống nhất với các sản phẩm ASP.NET Core.

Năm năm trước, Razor Pages (một thứ riêng biệt với Blazor và được đặt tên khó hiểu) đã được phát hành để đơn giản hóa cú pháp biểu cảm của MVC, đòi hỏi rất nhiều boilerplate và do đó, không chơi tốt với thiết kế tập trung vào thành phần của các ứng dụng hiện đại. MVC yêu cầu bạn phải làm một cái nhìn và mô hình cho mỗi trang trong các tập tin riêng biệt:

MVC requires you to make a view and model for each page in separate files:

quảng cáo

Trong khi đó, với Razor, bạn có thể tạo các trang hoặc thành phần hợp lý hơn với mã tích hợp trên chính trang. Điều này hoạt động tốt hơn khi các trang đơn giản hơn, nhưng cả hai đều có sẵn dưới dạng tùy chọn để bạn sử dụng.

Meanwhile, with Razor, you can make more streamlined pages or components with integrated code on the page itself.

Tất cả các tính năng này là một phần của hệ sinh thái “ASP.NET”. Phần tuyệt vời về nó là các gói và hỗ trợ. Giống như NPM cho JavaScript, C# cũng có một môi trường gói lành mạnh với trình quản lý gói NuGet.

Vậy Blazor là gì?

Blazor không thay đổi bất cứ điều gì về cú pháp của các trang này. Bạn vẫn sẽ sử dụng các trang Razor và/hoặc MVC. Điều này thực sự thậm chí không phải là một điều xấu, bởi vì đã có rất nhiều thư viện giao diện người dùng và thành phần được tạo cho các trang Razor được hỗ trợ C #.

Những gì Blazor thêm là tính tương tác. Các trang MVC/Razor truyền thống sử ASP.NET luôn rườm rà và đã phải vật lộn để theo kịp các ứng dụng web thời gian thực như React. Các ứng dụng web thời gian thực nhanh đến mức chúng cũng bắt đầu tiếp quản máy tính để bàn, với các khung công tác như Electron chạy ứng dụng trong bộ chứa Chromium, với người dùng không ai khôn ngoan hơn.

Vì vậy, Blazor được tạo ra để đáp ứng nhu cầu này. Nó hoạt động rất giống React, nơi các hành động sửa đổi trạng thái và đạo cụ và kích hoạt các bản cập nhật cho ứng dụng. Khung sẽ xử lý việc cập nhật DOM cho bạn dựa trên các thành phần cần cập nhật. Điều này cho phép các ứng dụng thời gian thực nơi trang có thể được cập nhật hoặc thậm chí vẽ lại hoàn toàn mà không cần phải thực sự làm mới trình duyệt.

Lợi ích của Blazor so với một framework được thiết lập như React là ngôn ngữ. Nó cho phép bạn xây dựng các ứng dụng web với C #, và điều đó một mình làm cho nó quyến rũ nhiều nhà phát triển. Bất kể ý kiến nào bạn có thể có về cuộc tranh luận gõ động so với tĩnh, chắc chắn có những lợi ích cho các ngôn ngữ “máy tính để bàn” như C #, và web đang thiếu nghiêm trọng các lựa chọn thay thế cho JavaScript.

quảng cáo

Nếu bạn có một backend đòi hỏi hiệu suất cao, C# cũng sẽ chạy nhanh hơn rất nhiều so với JavaScript. Mặc dù JS không có nghĩa là chậm và đã cải thiện rất nhiều trong những năm qua, nhưng nó vẫn sẽ có hiệu suất thấp hơn C #, thực sự chạy khá gần với hiệu suất C++ bản địa.

Blazor cho phép khả năng tương tác tốt hơn. Nhiều ứng dụng cũng đã sử dụng C# trên backend. Ví dụ: bạn có thể có một API ASP.NET tương tác với frontend React của bạn. Bạn sẽ cần các mô hình riêng biệt cho máy chủ và phía máy khách cũng như mã riêng để tương tác với chúng. Nếu chúng là cùng một ngôn ngữ, nó cho phép bạn dễ dàng chia sẻ mã và thư viện giữa máy khách và máy chủ. Đây là toàn bộ lý do tại sao NodeJS tồn tại ở phía máy chủ — mặc dù JavaScript không phải là ngôn ngữ máy tính để bàn lý tưởng, việc các ứng dụng được xây dựng bằng một ngôn ngữ sẽ cắt giảm thời gian phát triển.

Tương lai của Blazor

Thực sự có một vài loại Blazor khác nhau, vì Microsoft đã thúc đẩy sự phát triển lớn gần đây để hiện đại hóa hệ sinh thái ASP.NET mới. Hiện tại, có hai phiên bản đã được phát hành:

  • Blazor Server, hoạt động như React Server Side Rendering và thực hiện hầu hết quá trình xử lý trên máy chủ.
  • Blazor WebAssembly, sử dụng phép thuật của WebAssembly để chạy mã .NET thực tế trong trình duyệt web máy khách thực tế.

Microsoft cũng có kế hoạch phát hành thêm ba phiên bản Blazor, vẫn đang được phát triển và có sẵn để xem trước:

  • Blazor PWA, được thiết kế xung quanh việc xuất bản trang web dưới dạng Ứng dụng web tiến bộ có thể cài đặt (PWA).
  • Blazor Desktop / Hybrid, cho phép các ứng dụng Blazor được đóng gói vào các ứng dụng máy tính để bàn và về cơ bản giống như Electron nhưng với hiệu suất tốt hơn.
  • Blazor Native, thay thế giao diện người dùng dựa trên web bằng giao diện gốc nền tảng. Không rõ điều này thậm chí còn hữu ích như thế nào bên cạnh việc giao tiếp với các công cụ Blazor hiện có và phiên bản này vẫn đang trong giai đoạn lập kế hoạch.

Trong thông báo của họ cho Blazor Desktop, Microsoft tuyên bố rằng “Blazor là một mô hình lập trình ứng dụng. Nó rất dễ thích nghi và có thể được thực hiện theo nhiều cách (tùy thuộc vào nhu cầu).”

Microsoft dường như coi Blazor là tiêu chuẩn tiếp theo của họ để tạo frontend ứng dụng. Công việc của họ cũng rất đáng giá, bởi vì khi các ứng dụng ngày càng phụ thuộc vào web, thật khó để biện minh cho việc tạo các frontend riêng biệt cho web và máy tính để bàn. Blazor có một tương lai tươi sáng, và các ứng dụng web được thực hiện ngày hôm nay trên Blazor Server và WebAssembly sẽ có rất nhiều chỗ để phát triển.

Blazor Server vs. Blazor WebAssembly

Blazor Server sử dụng kết nối SignalR để giao tiếp giữa máy khách và máy chủ. Đây chỉ là một layer lạ mắt trên đầu kết nối WebSocket, có thể tùy chọn quay lại các kết nối khác khi cần. Điều này giữ tất cả các xử lý trên máy chủ và để máy khách như một cái nhìn đơn giản với một cách cơ bản để thao tác DOM.

Blazor Server uses a SignalR connection to communicate between the client and server.

quảng cáo

Blazor WebAssembly là nơi nó trở nên cực kỳ mát mẻ. WebAssembly (WASM) không thực sự là một ngôn ngữ mà bạn viết, mà là một mục tiêu biên dịch. Nó thực sự hoạt động gần như chính xác giống như Ngôn ngữ trung gian của Microsoft (MSIL) mà tất cả C #, F #và VB.NET biên dịch. Ngoại trừ điều đó, thay vì chạy với thời gian chạy .NET, nó chạy bằng cách sử dụng thời gian chạy WebAssembly trong trình duyệt.

Wasm can be used as a portable compilation target for other languages

Phần thú vị về WebAssembly là nó là một mục tiêu biên dịch tương đối dễ dàng để đạt được. Giống như cách C# có thể biên dịch xuống MSIL, C# cũng có thể biên dịch thành WebAssembly. Chà, về mặt kỹ thuật, đó là MSIL biên dịch cho WebAssembly (vì điều đó đơn giản hơn), nhưng vấn đề là như nhau.

Bất kỳ ngôn ngữ nào cũng có thể biên dịch sang WASM, ngay cả các ngôn ngữ máy tính để bàn hoàn toàn bản địa như C++. Đây không phải là lý thuyết- nó thực sự hoạt động trong thực tế. AutoDesk đã có thể chuyển AutoCAD, một cơ sở mã C++ 30 năm tuổi, sang một ứng dụng web dựa trên WebAssembly, trong một vài tháng tương đối dễ dàng. Ai đó thậm chí đã chuyển Doom 3.

Blazor WebAssembly về cơ bản mất toàn bộ máy chủ cũng như thời gian chạy .NET và chạy nó trên WASM. Sau đó, thay vì nói chuyện với máy chủ qua SignalR, nó trực tiếp nói chuyện với DOM. Điều này cắt giảm xử lý phía máy chủ, điều này có thể lý tưởng cho một số ứng dụng.

Instead of talking to the server over SignalR, Blazor WebAssembly directly talks to the DOM.

Điều này làm cho nó có vị trí độc đáo để cạnh tranh với các framework như React, vì về cơ bản nó là đối thủ cạnh tranh thực sự đầu tiên với JavaScript cho các ứng dụng web máy khách. Mặc dù bạn phải thêm một vài thẻ tập lệnh để tải thời gian chạy và có thể phải nhúng ngón chân vào mã JavaScript cho một vài thứ, nhưng phần lớn, bạn nên có thể tạo toàn bộ ứng dụng web sản xuất mà không cần viết một dòng JavaScript nào.

quảng cáo

Cho dù bạn sử dụng Blazor Server hay Blazor WebAssembly là bạn. Cả hai đều có lợi thế của họ. Blazor Server chạy tất cả mã xử lý trong một môi trường đáng tin cậy và không yêu cầu bạn phải có API công cộng. Blazor WASM đáp ứng và nhanh chóng, và thậm chí có thể được triển khai như một trang web tĩnh chỉ được phục vụ với NGINX.

Blazor hoạt động như thế nào với JavaScript?

Trong cả hai trường hợp, bạn thực sự có khả năng tương tác JavaScript đầy đủ. Blazor có thể gọi hàm JS từ mã được quản lý:

private async Task ConvertArray()
{
    text = new(đang chờ JS. InvokeAsync<string>("convertArray", quoteArray));
}

Và ngược lại:

DotNet.invokeMethodasync('{TÊN CHI TIẾT}', '{.NET METHOD ID}', {ARGUMENTS});

Mặc dù, hãy nhớ rằng điều này, tất nhiên, sẽ sử dụng sự phản chiếu, và chắc chắn không phải là điều hiệu quả nhất trên thế giới.

Về mặt kỹ thuật, bạn có thể sử dụng tất cả các gói NPM với Blazor, mặc dù việc thiết lập và tương tác với nó từ phía .NET có thể hơi đau đầu, vì vậy bạn nên thích gói NuGet hầu hết thời gian.

Bạn có thể sử dụng Blazor trên máy tính để bàn (Electron)?

You can use Blazor on desktop.

Đáng ngạc nhiên, câu trả lời cho điều này là có. Trong khi Microsoft có kế hoạch phát hành Blazor Desktop / Hybrid, làm điều tương tự, trong khi đó, bạn thực sự có thể chỉ sử dụng Electron bình thường. Điều này là do Electron thực sự không quan tâm đến trang web nào nó đang phục vụ và chỉ có thể phục vụ ứng dụng Blazor.

Bạn có thể nghĩ rằng nó sẽ sử dụng một ứng dụng Blazor WebAssembly, nhưng thực sự dễ dàng hơn để thêm Electron vào một máy chủ ASP.NET Core hiện có. WASM có một số chi phí, vì vậy phương pháp này nhanh hơn. Đó là những gì bạn Electron.NET, và nó hoạt động tốt một cách đáng ngạc nhiên. Tất cả những gì bạn phải làm là cài đặt nó và thêm Electron làm ASP.NET vụ. Bạn cũng có thể gọi các hàm gốc Electron từ C#.

quảng cáo

Tuy nhiên, Microsoft có các gói lớn hơn cho Blazor Desktop. Họ có kế hoạch loại bỏ hoàn toàn sự phụ thuộc vào trình duyệt và JavaScript và chỉ cần chạy một bộ chứa gốc với chế độ xem web là .NET.

“Máy tính để bàn Blazor sẽ được cấu trúc tương tự như cách Electron hoạt động. Sẽ có một điều khiển WebView hiển thị nội dung từ một máy chủ web Blazor nhúng, có thể phục vụ cả Blazor và nội dung web khác (JavaScript, CSS, v.v.).”

Chế độ xem web này sẽ sử dụng Safari, WebKitGTK hoặc WebView2, tùy thuộc vào HĐH. WebView2 sử dụng Chromium dưới mui xe, vì vậy nó sẽ hoạt động rất giống Electron, ngoại trừ hiệu năng hơn và sử dụng ít bộ nhớ hơn.


Dù việc triển khai kết thúc như thế nào, thật thú vị khi thấy một nền tảng khác cạnh tranh với JavaScript và Electron để xây dựng các ứng dụng web và máy tính để bàn đa nền tảng. Blazor Desktop sẽ được phát hành vào tháng 11 năm 2021 với bản xem trước đầu tiên của .NET 6.

How to Scale Docker Containers Across Servers Using Kubernetes

Cách thay đổi quy mô bộ chứa Docker trên các máy chủ bằng Kubernetes

What Does Cloud Native Actually Mean?

Cloud native actually có nghĩa là gì?

What Does It Mean to “Shift Security Left?”

“Shift Security Left có nghĩa là gì?”

How to Fix, Edit, or Undo Git Commits (Changing Git History)

Cách khắc phục, chỉnh sửa hoặc hoàn tác cam kết Git (Thay đổi lịch sử Git)

What is Docker Swarm Mode and When Should You Use It?

Chế độ Docker Swarm là gì và khi nào bạn nên sử dụng nó?

How to Fix, Edit, or Undo Git Commits (Changing Git History)

Git Cherry Pick làm gì, và khi nào bạn nên sử dụng nó?

Dịch từ: https://www.cloudsavvyit.com/12493/what-is-microsofts-blazor-web-framework-and-should-you-use-it/

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây