Blazor WebAssembly คืออะไร

Blazor WebAssembly เป็นภาษาโปรแกรมมิ่งที่เขียนเว็บแอพด้วย C# ไม่ต้องใช้เซิร์ฟเวอร์ เพราะรันในเบราว์เซอร์ได้เลย Blazor เป็นเฟรมเวิร์คตัวหนึ่งในตระกูล ASP.NET เอาไว้เขียนเว็บแอพแบบหน้าเดียว (single-page) ลูกผสมระหว่าง HTML กับ C# แทนที่การใช้ภาษา JavaScript

JavaScript interop

จุดเด่นของ Blazor เลยคือใช้ C# ที่นักพัฒนาสาย .NET คุ้นเคยเป็นอย่างดี ใช้โค้ด C# ทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์ ใช้ Library ของ .NET ได้ มีระบบ UI component พร้อมใช้งาน ล่าสุดไมโครซอฟท์ได้เพิ่มวิธีรัน Blazor ด้วยการแปลงโค้ดของรันไทม์ .NET เป็น WebAssembly ที่รันในเว็บเบราว์เซอร์รุ่นใหม่ ๆ ทัน

เมื่อเปิดหน้าเว็บที่เขียนด้วย Blazor ขึ้นมา ตัวรันไทม์ .NET WebAssembly จะจักการดาวน์โหลดมายังเบราว์เซอร์ เริ่มทำงานและประมวลผลหน้าเว็บของ Blazor บนเครื่องผู้ใช้ ทำให้ไม่ต้องใช้ wab server เลย มันจึงกลายเป็น (standalone static site) ที่สามารถทำงานออฟไลน์ได้โดยสมบูรณ์ ไม่ต้องตั้งเซิร์ฟเวอร์ .NET เหมาะกับการแจกจ่ายเว็บแอพไปรันในสภาพแวดล้อมที่ จำกัดเรื่องอินเทอร์เน็ต แต่ยังคงฟีเจอร์เท่ากับ Blazor เวอร์ชันที่รันบนเซิร์ฟเวอร์ปกติ

ภาพ

หรืออีกวิธีหนึ่ง Blazor สามารถรันตรรกะไคลเอ็นต์ของคุณบนเซิร์ฟเวอร์ เหตุการณ์ UI ของไคลเอ็นต์จะถูกส่งกลับไปยังเซิร์ฟเวอร์โดยใช้ SignalR ซึ่งเป็นกรอบการส่งข้อความแบบเรียลไทม์ เมื่อดำเนินการเสร็จสิ้นการเปลี่ยนแปลง UI ที่จำเป็นจะถูกส่งไปยังไคลเอนต์และรวมเข้ากับ DOM

ตัวอย่าง Code

ภาพ

ตัวอย่างหน้าจอเว็บแอพ Blazor

หน้านี้จะถูกแสดงออกมาด้วยไฟล์ Pages/Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

ทำเป็น wab app

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Refer