Blazor Explained: C# in the Browser, Without JavaScript

Blazor lets you build interactive web pages using C# instead of JavaScript. It runs on .NET, so if you already know C#, you can write both the front end and the back end of a web app in one language, sharing models and validation logic between them instead of maintaining two versions of the same idea.

Blazor comes in two hosting models, and the choice matters. Blazor WebAssembly runs your C# code in the browser itself, compiled to WebAssembly, so the app works as a single page application after the initial download. Blazor Server keeps the code on the server and sends only small UI updates to the browser over a live connection, which makes the first load fast but means every click round trips to the server. Many apps start with one model and switch later, because the component code stays mostly the same.

Components are the building block. A component is a Razor file that mixes HTML markup with C# code, and it re-renders itself when its state changes. Here is the classic counter, the smallest component that shows how state and events connect.

@page "/counter"

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

Read it as two halves. The top half is markup: a heading, a paragraph that displays the current count, and a button. The @onclick attribute wires the button to a C# method instead of a JavaScript handler. The bottom half, inside @code, holds the state (currentCount, starting at 0) and the method that changes it. When the button is clicked, IncrementCount runs, currentCount grows by one, and Blazor re-renders the paragraph. There is no manual DOM update, no query selector, and no separate script file.

That model is why Blazor appeals to .NET teams. Forms, validation, and API calls can all use the same classes the server uses. A form can bind directly to a model object, validation attributes on that model work on both sides, and an HTTP call from a component looks like any other C# code.

The honest trade

Blazor trades the size of the JavaScript ecosystem for the comfort of one language. WebAssembly apps carry a larger first download than a plain JavaScript bundle, because the .NET runtime comes along with the app, and the pool of ready made Blazor component libraries is smaller than what React or Vue developers enjoy. Blazor Server avoids the download but adds a constant connection, so it fits internal tools and dashboards better than public pages on slow networks. When a team already lives in .NET, that trade is often worth it. When a team is hiring front end specialists, plain JavaScript frameworks usually have the deeper bench.

One language, end to end

The fastest way to judge Blazor is to build one small interactive page with it: a form, a list fetched from an API, and a button that changes state. If writing it all in C# feels like a relief rather than a constraint, Blazor has earned a place in your toolbox.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and, unusually for a systems language, genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally use ...
Read more

Rust Explained: Memory Safety Without a Garbage Collector

Introduction Rust promises something that sounds impossible: the speed of C and C++, without their most famous class of bugs, crashes and security holes caused by bad memory handling, and without a garbage collector pausing your program to clean up. The trick is not magic. It is a set of rules, checked by the compiler before your program ever runs, called ownership. Ownership: every value has one owner In Rust, every value has exactly one owner: the variable that holds it. When the owner goes out of scope, the value is cleaned up automatically. Move the value to another variable, and the first one can no longer use it. fn main() { let s1 = String::from("hello"); let s2 = s1; // s1 is moved, not copied // println!("{}", s1); // Error: s1 no longer owns the value println!("{}", s2); // Works } This looks annoying at first, and it is, briefly. But it eliminates an entire category of bugs: no two parts of a program can accidentally free the same memory, ...
Read more

Neovim Explained: Vim Rebuilt for the Modern Era

Introduction Vim is a legendary editor and, by modern standards, a hard one to extend: its Vimscript configuration language and single-threaded design show their age. Neovim, forked from Vim in 2014, keeps Vim's modal editing and keybindings while rebuilding the internals for the modern era: Lua configuration, a built-in language server client, async plugins, and a first-class terminal. It is why a generation of Vim users moved, same muscle memory, modern capabilities. What Neovim changes, and what it keeps Neovim keeps everything Vim users rely on: modes, motions, the dw / ci" grammar, and upgrades the parts around it: Lua configuration, init.lua replaces Vimscript for most users: a real programming language for config, with a huge plugin ecosystem built on it. Built-in LSP client, language servers (the same protocol VS Code uses) plug in natively, giving autocomplete, go-to-definition, and diagnostics without a plugin framework. Treesitter, incremental parsing gives...
Read more