Blazor vs React: Pse ky arkitekt .NET më në fund zgjodhi një faqe

Blazor vs React është një pyetje që çdo zhvillues .NET përfundimisht pyet. Blazor ju lejon të ndërtoni UI interaktive web me C# në vend të JavaScript. Nëse ju jeni tashmë një zhvillues .NET, kjo do të thotë një gjuhë, një ekosistem, dhe shumë më pak kriza ekzistenciale në lidhje me cilën bibliotekë të menaxhimit të shtetit për të përdorur këtë tremujor. Blazor vs React është një pyetje që çdo zhvillues .NET përfundimisht pyet. Blazor ju lejon të ndërtoni UI interaktive web me C# në vend të JavaScript. Nëse ju jeni tashmë një zhvillues .NET, kjo do të thotë një gjuhë, një ekosistem, dhe shumë më pak kriza ekzistenciale në lidhje me cilën bibliotekë të menaxhimit të shtetit për të përdorur këtë tremujor. Tabela e përmbajtjes Çfarë është Blazor, gjithsesi? Procesi kundër reagimit Kodi i krahasimit: React vs Blazor Pse Blazor punon për mua Evolucioni i Blazor: .NET 8, 9 dhe 10 Kur reagimi ende ka kuptim Duke filluar me Blazor FAQ: Shqetësimet e përbashkëta janë përgjigjur Mendimet e fundit Unë kam qenë duke shkruar JavaScript që nga viti 2009, prapa kur jQuery 1.3 ndjehej si masë. kam parë korniza ngrihen dhe bien si perandori. Backbone, Angular, React, dhe tani unë duhet të shqetësohem për sinjalet? më shumë se unë kam pasur darka të nxehtë. node_modules Dhe diku rreth tim të tretë Në një dosje që tejkalonte 800MB, fillova të pyes veten: node_modules Po sikur të kishte një mënyrë tjetër? Është quajtur Blazor, dhe më lejoi të ndërtoja aplikacione web duke përdorur një gjuhë që nuk mendon Është sjellje e pranueshme. "2" + 2 = "22" Çfarë është Blazor, gjithsesi? Blazor është korniza e Microsoft-it për ndërtimin e UI-ve interaktive të uebit duke përdorur C# në vend të JavaScript. Emri është një portmanteau i "Browser" dhe "Razor" (sintax .NET templating), dhe është i gatshëm për prodhim që nga viti 2020. Instead of writing JavaScript that runs in the browser, you write C# that either: Ekzekutohet në server (Blazor Server): C# juaj ekzekutohet në server dhe përditësimet e UI rrjedhin në shfletues përmes një lidhjeje SignalR WebSocket në kohë reale. Ekzekutohet në shfletues (Blazor WebAssembly): Runtime .NET vetë ekzekutohet në shfletues përmes WebAssembly. Po, kodi aktual i kompiluar .NET, në shfletuesin tuaj. Të dyja (Blazor United/.NET 8+): Zgjidhni mënyrën tuaj të renditjes për komponent. Server-side për shpejtësinë fillestare të ngarkimit, WebAssembly për aftësinë offline. më e mira e të dy botëve. // A Blazor component. Yes, that's C# in your UI. @page "/counter"

Counter Current count: @currentCount

Click me

@code { private int currentCount = 0;

private void IncrementCount() { currentCount++; } } Asnjë webpack. Asnjë babel. Asnjë shtatëmbëdhjetë skedarë konfigurimi. Vetëm C# që kompilon dhe ekzekuton. The Case Against React (ose: Pse kam nevojë për një ndryshim) React revolucionarizoi mënyrën se si ne mendojmë për UI-të e bazuara në komponentë. Virtual DOM ishte me të vërtetë i zgjuar. Por pas viteve të ndërtimit të aplikacioneve të prodhimit React, fillova të vërej modele që më bënin të vë në dyshim zgjedhjet e mia të jetës. Framework Churn është real Ekosistemi React është përshkruar si Kjo nuk është fraza ime, por e ndjeva në shpirtin tim kur e lexova. “Një labirint gjithmonë i ndryshueshëm i faddish churn” Çdo vit sjell një mënyrë të re "të drejtë" për të bërë gjërat: Year What We Were Told to Use 2016 Redux. Obviously. 2018 MobX because Redux boilerplate was killing us 2020 Context API (who needs libraries?) 2021 Zustand, after Context caused re-render hell on a dashboard I built 2022 Pick one: Jotai, Recoil, Valtio, or whatever your coworker found on Hacker News 2023 Whatever survived the layoffs 2024 Server Components. State lives on the server now, apparently? 2016 të reduktuar, natyrisht 2018 MobX sepse boilerplate Redux ishte duke na vrarë 2020 API Kontekst (kush ka nevojë për biblioteka?) 2021 Zustand, pas kontekstit shkaktuar re-render ferr në një dashboard unë ndërtuar 2022 Zgjidhni një: Jotai, Recoil, Valtio, ose çfarëdo që kolegët tuaj të gjejnë në Hacker News 2023 Çfarëdo që i mbijetoi shkarkimeve 2024 Server Components. state jeton në server tani, me sa duket? Një zhvillues në komunitetin DEV “Pas viteve të kërcimit nga React në Vue në Svelte në Solid (dhe përsëri), kuptova se isha vazhdimisht duke ri-mësuar se si të ndërtoj të njëjtën gjë në një mënyrë pak më ndryshe.” Përmbledhje të përsosur Vendimi i lodhjes është i lodhshëm Fillimi i një projekti të ri React në 2024 do të thotë se kam kaluar dy ditë vetëm duke zgjedhur mjete. Bundler? Webpack është "trashëgimia" tani, Vite është default, por a kam nevojë për Turbopack? Menaxhimi i shtetit? Unë shkova me Zustand pas tre orësh të leximit të posteve të krahasimit. Styling? Tailwind, por gjysma e ekipit tim donte Komponentët e Styled. Forms? React Hook Form, ndoshta, përveç nëse na duhet diçka Formik bën më mirë. That was before I'd written a single line of business logic. të “Fleksibiliteti dhe diversiteti i opsioneve të ekosistemeve ka qenë një forcë dhe një dobësi... Kjo çon në lodhje vendimmarrëse, ndryshime në bazat e kodit të projektit dhe ndryshime të vazhdueshme në ato mjete që përdoren zakonisht.” Shteti i Reagimit 2025 Teatri i Sigurisë Po, TypeScript ekziston. Po, kjo ndihmon. Por TypeScript është një bandazh në një plagë të tipuar dinamikisht.Ju jeni duke mbështjellë një sistem tip në një gjuhë që në thelb nuk ka një. // TypeScript: Types are suggestions, really const user: User = JSON.parse(response); // No runtime validation! // user could be anything. TypeScript just trusts you.

// Meanwhile, in C#: var user = JsonSerializer.Deserialize (response); // Actual deserialization with type checking Të rrëmbyer në një projekt klient vitin e kaluar. 847 raste. Në atë pikë, ju jeni vetëm duke shkruar JavaScript me hapa shtesë. grep -r ': any' src/ | wc -l Ëndrra e tmerrshme e sigurisë Le të flasim për diçka që komuniteti JavaScript nuk i pëlqen të diskutojë: Follower është një përgjegjësi e sigurisë. node_modules September 2025: The Shai-Hulud Attack kompromentuar 18+ paketa me mbi Sulmi filloi me një email phishing për një mirëmbajtës të vetëm. Brenda ditëve, paketat nga Zapier, PostHog dhe Postman u trojanizuan. Një nga sulmet më të mëdha në zinxhirin e furnizimit të NPM në histori 2.6 billion weekly downloads Një kicker? pasuar në nëntor 2025, duke prekur më shumë se 25,000 repositories GitHub. Ky version përfshinte një "tokë të shkatërruar" fallback-nëse malware nuk mund të eksfiltruar të dhënat e besueshme, ajo do të . Kërçovë 2.0 destroy the victim's entire home directory Kjo nuk është histori e lashtë, kjo është . this year The Greatest Hits of npm Disasters Incident Year Impact left-pad 2016 One developer unpublished an 11-line package. Babel, React, and thousands of projects broke instantly. event-stream 2018 Malicious code injected by a "helpful" new maintainer. Went undetected for 2.5 months. Targeted Bitcoin wallets. ua-parser-js 2021 8 million weekly downloads. Compromised to install cryptominers and password stealers. everything 2024 A "joke" package that depended on every npm package. DOS'd anyone who installed it. Shai-Hulud 2025 2.6B+ weekly downloads affected. AI-assisted attacks. Data destruction payloads. të majtë 2016 Një zhvillues nuk publikoi një paketë 11-line. Babel, React, dhe mijëra projekte u thyen menjëherë. event-stream 2018 Kodi keqdashës injektuar nga një mirëmbajtës i ri "i dobishëm". u zbulua për 2.5 muaj. portofolet Bitcoin të synuara. Përshkrimi i faqes 2021 8 milionë shkarkime javore. Kompromentuar për të instaluar cryptominers dhe vjedhësit e fjalëkalimeve. Gjithçka 2024 A "joke" package that depended on every npm package. DOS'd anyone who installed it. Shkëndija 2025 2.6B+ shkarkime javore të prekur. sulme të ndihmuara nga AI. ngarkesa të dobishme të shkatërrimit të të dhënave. Why This Keeps Happening Ekosistemi i npm ka probleme strukturore: Pemë masive të varësisë: Një aplikacion tipik React ka qindra varësi të përkohshme. secila prej tyre është një sipërfaqe sulmi. Mirëmbajtësit vullnetarë: Infrastruktura kritike e mirëmbajtur nga individët e papaguar që mund të phishohen, të digjen ose të socializohen. : npm installs whatever says. There's no compile-time check that the code is safe. No build-time verification package.json Paketat triviale: ekosistemi JavaScript është normalizuar në varësi të paketa për funksionalitetin trivial. is-odd? is-even? is-number? Këto ekzistojnë, dhe ata kanë miliona shkarkime. # A real npm audit from a "simple" React project found 47 vulnerabilities (12 moderate, 28 high, 7 critical) Meanwhile, in .NET Land NuGet nuk është i përsosur, por është dramatikisht më i mirë: Paketat e nënshkruara: Publikuesit mund të nënshkruajnë paketat në mënyrë kriptografike : Fewer packages overall, but higher average quality Curated ecosystem Mbështetja e Microsoft: Bibliotekat kryesore të mirëmbajtura nga një kompani trilion dollarë, jo një zhvillues solo Siguria e kohës së kompilimit: kompilatori C# kap shumë probleme para kohës së drejtimit Grafika më të vogla të varësisë: Biblioteka e plotë standarde e .NET do të thotë më pak varësi të jashtme Kur unë vrapoj në projektet e mia Blazor, unë zakonisht shoh rezultate zero. Në lidhje me projektet React, unë pastroj pasditen time. dotnet list package --vulnerable npm audit Le Code të flasë për veten e tij: React vs. Blazor Teoria është e mirë. Kodi është më i mirë. Ja se si funksionaliteti i njëjtë duket në të dy kornizat. A Simple Counter (The "Hello World" i kornizave) React (with hooks): import { useState } from 'react';

export default function Counter() { const [count, setCount] = useState(0);

return ( Counter Current count: {count}

setCount(count + 1)}> Click me ); } Blazor: @page "/counter"

Counter Current count: @count

count++">Click me

@code { private int count = 0; } Numërimi i linjave të ngjashme, por vëmendje: asnjë import, jo hook, no setter function. Just a variable and an increment. useState Two-Way Data Binding This is where the ceremony difference gets real. React: import { useState } from 'react';

export default function SearchBox() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]);

const handleChange = (e) => { setQuery(e.target.value); };

return ( You typed: {query}

); } Blazor: You typed: @query

@code { private string query = ""; } handles both directions. No handler, no , no setter function. lidhja thjesht punon. @bind onChange e.target.value Form Handling with Validation Here's where things get spicy. A user registration form with validation. React (with React Hook Form + Zod - the "modern" approach): import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod';

const schema = z.object({ email: z.string().email('Invalid email'), password: z.string().min(8, 'Password must be at least 8 characters'), confirmPassword: z.string() }).refine(data => data.password === data.confirmPassword, { message: "Passwords don't match", path: ['confirmPassword'] });

export default function RegisterForm() { const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) });

const onSubmit = async (data) => { await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); };

return ( {errors.email && {errors.email.message} } {errors.password && {errors.password.message} } {errors.confirmPassword && {errors.confirmPassword.message} } Register ); } Kjo është tre paketa npm ( , të ), spread operators on inputs, and resolver configuration. It works, but there's a lot happening. react-hook-form @hookform/resolvers zod Blazor (with built-in DataAnnotations): @page "/register" @inject HttpClient Http

model.Email" /> model.Password" /> model.ConfirmPassword" />

Register

@code { private RegisterModel model = new(); private bool isSubmitting = false;

private async Task HandleSubmit() { isSubmitting = true; await Http.PostAsJsonAsync("/api/register", model); isSubmitting = false; }

public class RegisterModel { [Required, EmailAddress] public string Email { get; set; } = "";

[Required, MinLength(8, ErrorMessage = "Password must be at least 8 characters")] public string Password { get; set; } = "";

[Required, Compare(nameof(Password), ErrorMessage = "Passwords don't match")] public string ConfirmPassword { get; set; } = ""; } } Zero additional packages. The validation attributes are built into .NET. Menaxhoni rrjedhën e dorëzuar. wires up validation automatically. The model class is reusable on your API too. EditForm DataAnnotationsValidator Të dhënat fshihen React (with useEffect - the footgun everyone steps on): import { useState, useEffect } from 'react';

export default function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);

useEffect(() => { let isMounted = true; // Cleanup flag to prevent state updates after unmount

fetchUsers();

return () => { isMounted = false; }; // Cleanup }, []);

if (loading) return Loading... ; if (error) return Error: {error} ;

return ( {users.map(user => ( {user.name} ))} ); } Notice the cleanup pattern with . I spent two hours last year hunting down a memory leak because a junior dev forgot this pattern. The error message? "Can't perform a React state update on an unmounted component." Helpful. isMounted Blazor: @page "/users" @inject HttpClient Http

@if (users == null) { Loading... } else if (error != null) { Error: @error } else { @foreach (var user in users) { @user.Name } }

@code { private List ? users; private string? error;

protected override async Task OnInitializedAsync() { try { users = await Http.GetFromJsonAsync >("/api/users"); } catch (Exception ex) { error = ex.Message; } } } No cleanup needed. Blazor handles component lifecycle properly. No dependency array to forget. fillon një herë kur komponenti ngarkesës. OnInitializedAsync Komunikimi i përbashkët (prind për fëmijë, fëmijë për prind) React: // Parent function Parent() { const [selectedItem, setSelectedItem] = useState(null);

return ( {selectedItem && } ); }

// Child function ItemList({ onItemSelected, highlightedId }) { const items = [...];

return ( {items.map(item => ( onItemSelected(item)} > {item.name} ))} ); } Blazor: @* Parent *@

@if (selectedItem != null) { }

@code { private Item? selectedItem; } @* ItemList.razor *@ @foreach (var item in items) { SelectedItem = item"> @item.Name }

@code { private List items = [...];

[Parameter] public Item? SelectedItem { get; set; }

[Parameter] public EventCallback SelectedItemChanged { get; set; } } The syntax automatically wires up two-way binding between parent and child. Convention over configuration. @bind-SelectedItem The Ceremony Comparison Task React Blazor Two-way binding + (every. single. field.) value onChange @bind Form validation Pick a library, write a schema, pray Built-in DataAnnotationsValidator Data fetching + cleanup + deps array (good luck) useEffect OnInitializedAsync State management This week's favorite: Redux? Zustand? Jotai? Class fields. Call when needed StateHasChanged() DI Roll your own with Context or install a library (it just works) @inject Parent-child binding Props down, callbacks up @bind-PropertyName Two-way binding + (every. single. field.) value onChange @bind Forma e validimit Zgjidh një bibliotekë, shkruaj një skemë, lutem ndërtuar DataAnnotationsValidator Të dhënat e kapura + cleanup + deps array (good luck) useEffect OnInitializedAsync State management Favoriti i kësaj jave: Redux? Zustand? Jotai? Class fields. Call Kur nevojitet StateHasChanged() Në Roll your own with Context or install a library (Ajo vetëm funksionon) @inject Fëmijët detyrues Props down, callbacks up @bind-PropertyName See the pattern? Blazor does the same thing with less code and fewer choices to agonize over. Pse Blazor me të vërtetë punon për mua Një gjuhë për t’i sunduar të gjithë Me Blazor, unë shkruaj C# në frontend dhe C# në backend. E njëjta gjuhë. E njëjta lloj sistemi. Të njëjtat modele. // Shared model used by both frontend and backend public record CreateOrderRequest( string CustomerId, List Items, ShippingAddress Address );

// API endpoint [HttpPost] public async Task > CreateOrder(CreateOrderRequest request) { // Validate, process, return }

// Blazor component calling the API var order = await Http.PostAsJsonAsync ("api/orders", request); No serialization mismatches. No "I updated the API but forgot to update the TypeScript types." The compiler catches everything. Type Safety That Actually Means Something C# is statically typed. Not "we added types later and hope you use them" typed. The compiler is your friend, and it will tell you about problems your users find them. më parë // This won't compile. Period. int count = "five"; // Error CS0029

// Pattern matching catches nulls at compile time if (user is { Email: var email }) { SendWelcomeEmail(email); // email is guaranteed non-null here } As , "combining these tools with the type safety of the language allows developers to write code with a lot more confidence up-front, not having to worry about runtime errors like unexpected nulls." Emergent Software notes Parimet e forta janë qytetarë të klasit të parë .NET was designed with dependency injection and interface-based programming in mind. Implementing SOLID principles isn't fighting the framework-it's using it as intended. // Program.cs - Clean DI registration builder.Services.AddScoped (); builder.Services.AddScoped (); builder.Services.AddScoped ();

// Component receives dependencies automatically @inject OrderService Orders @inject NavigationManager Navigation

@code { private async Task SubmitOrder() { var result = await Orders.CreateAsync(currentOrder); if (result.IsSuccess) { Navigation.NavigateTo($"/orders/{result.Value.Id}"); } } } Mundohuni të arrini këtë nivel të injektimit të varësisë së pastër në React pa një bibliotekë të palës së tretë dhe një ceremoni konfigurimi. Debugging që nuk ju bën të qani Debugger Visual Studio me Blazor është me të vërtetë i shkëlqyeshëm. Breakpoints punojnë. hap-për-hap punon. Watch shprehjet punojnë. Stack thirrje në fakt ka kuptim. Unë mund të vendos një pikë ndarje në komponentin tim Blazor, hap përmes logjikës sime të biznesit, dhe gjurmoj ekzekutimin deri në bazë të të dhënave dhe prapa. private async Task LoadOrders() { // Set a breakpoint here var orders = await OrderService.GetRecentAsync(customerId);

// Inspect 'orders' in the debugger // See the actual types, not 'object Object'

this.orders = orders; } Compare this to debugging React where you're juggling browser DevTools, React DevTools, and Redux DevTools all at once. Last year I spent 45 minutes on a bug that turned out to be a missing dependency in a Simptomi ishte re-renders heshtur pafund. debugger Blazor do të kishte kapur atë në sekonda. useEffect Ekosistemi .NET është i qëndrueshëm (Boringly So) Ekosistemi .NET lëviz ngadalë. qëllimisht. Unë e konsideroj këtë një tipar, jo një bug. Paketat NuGet kanë tendencë të kenë mbështetje afatgjatë. Kur Newtonsoft.Json vendosi të qëndrojë në versionin 13, askush nuk u panikua. Ajo ende punon. Krahasojeni atë me ekosistemin npm ku "i fundit" është një mënyrë jetese. When I upgraded from .NET 7.0.14 to .NET 8.0.0 last November, I got a documented list of breaking changes. Took me an afternoon to migrate a medium-sized app. When React moved from class components to hooks, the community spent months rewriting tutorials and arguing on Twitter. Real-World Advantages Shpërndarja e kodit është triviale Got validation logic? Write it once in a shared library. // Shared.Validation/OrderValidator.cs public class OrderValidator : AbstractValidator { public OrderValidator() { RuleFor(x => x.Items).NotEmpty(); RuleFor(x => x.Total).GreaterThan(0); RuleFor(x => x.ShippingAddress).NotNull(); } }

// Use in Blazor component // Use in API controller // Use in background service // Same validation, everywhere Modeli i përbërësit është i njohur Nëse e njihni sintazin e Razor nga MVC ose Razor Pages, komponentët e Blazor do të ndjehen të natyrshëm. // Component with parameters - looks like any other C# class @code { [Parameter] public Order Order { get; set; } = default!;

[Parameter] public EventCallback OnOrderUpdated { get; set; }

[CascadingParameter] public UserContext? User { get; set; } } Performanca u përmirësua në mënyrë dramatike Early Blazor WebAssembly had legitimate performance concerns. Those days are largely behind us-each .NET release has brought major improvements. .NET 8 introduced: : Partial JIT compilation in the browser, replacing slow interpreter bytecodes with optimized WebAssembly Jiterpreter SIMD sipas parazgjedhjes: WebAssembly Single Instruction, Multiple Data për llogaritjet vektorike Kompilimi i AOT: Kompiloni C# direkt në WebAssembly për performancë pothuajse native në detyrat intensive me CPU .NET 9 added: : Removes IL after AOT compilation, significantly reducing bundle size WasmStripILAfterAOT Përmirësimi i ngarkesës së butë: shtyrje më e mirë e montimit për ngarkesa fillestare më të shpejta WebSocket Compression: Aktivizohet sipas parazgjedhjes për komponentët e Interactive Server .NET 10 delivers: Para-ngarkimi i aseteve të kornizës: Asetet statike të para-ngarkuara përmes kopjeve të lidhjes para se faqja të renditet : Browser downloads and caches critical assets earlier High-priority resource scheduling : New diagnostic tools for WebAssembly apps Performance profiling counters Shkarkimi automatik i kujtesës: Menaxhimi më i mirë i kujtesës në aplikacionet e gjata So: Static SSR outperforms React on initial load because you're serving pre-rendered HTML with zero JavaScript hydration overhead. AOT compilation gets WebAssembly apps to near-native speed. You pick the right mode for each page. Blazor's Rapid Evolution: .NET 8, 9, and 10 One thing that impressed me about Blazor is how aggressively Microsoft has been improving it. This isn't a side project-it's a first-class citizen in the .NET ecosystem. .NET 8: The "Blazor United" Revolution .NET 8 ndryshoi në thelb mënyrën se si punon Blazor me futjen e . Before .NET 8, you had to choose: Blazor Server Blazor WebAssembly. Now you can mix and match per-component. unified rendering modes ose changed everything. Your components render as plain HTML on the server. No SignalR connection, no WebAssembly download. Just fast, SEO-friendly HTML. Static Server-Side Rendering (SSR) // A static SSR page - renders as pure HTML @page "/about" @attribute [StreamRendering]

About Us

About Our Company This renders as static HTML. Search engines love it.

Blazor Web App është një ndryshim themelor në filozofi - ju filloni me opsionin më të shpejtë, më SEO-miqësor dhe shtoni interaktivitet vetëm kur është e nevojshme. .NET 9: Përzierja e modes me saktësi dyfishuar në fleksibilitet. atribut ju lejon të shënoni faqet specifike që përdorni SSR statike-e dobishme për faqet që varen nga cookies HTTP ose cikli i kërkesës / përgjigjes. .NET 9 [ExcludeFromInteractiveRouting] must @page "/privacy-settings" @attribute [ExcludeFromInteractiveRouting]

// This page always renders statically, even in an otherwise interactive app Other .NET 9 improvements: WebSocket Compression aktivizuar nga default për komponentët e Interactive Server at runtime via the new RendererInfo API Render mode detection for Blazor Server apps Improved reconnection handling .NET 10: Performanca dhe gjuha polake Dërguar me përmirësime të konsiderueshme Blazor: Rrjetet 10 : The Blazor script is now served as a static web asset with automatic compression and fingerprinting, significantly reducing payload size and improving caching. Blazor script optimization • Të rejat attribute simplifies sharing data between pre-rendering and interactive renders: Persistent component state [PersistentState] @code { [PersistentState] public List ? Movies { get; set; }

protected override async Task OnInitializedAsync() { // State is automatically restored from prerendering Movies ??= await MovieService.GetMoviesAsync(); } } : now works seamlessly across all render modes. New project templates include a default page. Better 404 handling NavigationManager.NotFound() NotFound.razor Server Circuits tani ekspozojnë gjurmët si aktivitetet e nivelit të lartë, duke e bërë vëzhgimin në Application Insights shumë më të pastër. Improved diagnostics The trajectory is clear: Blazor is getting faster, more flexible, and more production-ready with every release. When React Still Makes Sense I'm not here to tell you React is bad. It's not. Pick React if your team already thinks in JavaScript and nobody wants to learn C#. Pick it if you need some niche npm component that doesn't exist in the Blazor ecosystem (there are still gaps). Pick it for a quick startup MVP where you'll probably throw away the code in six months anyway. React's ecosystem is massive. If you need an obscure charting library or a drag-and-drop grid that does exactly one weird thing, someone's probably built it. That's genuinely valuable. Por nëse jeni një dyqan .NET duke ndërtuar mjete të brendshme, aplikacione të linjës së biznesit, ose çdo gjë që duhet të funksionojë për më shumë se tre vjet? Duke filluar me Blazor Nëse jeni kurioz, këtu është rruga më e shpejtë për të drejtuar një aplikacion Blazor: # Create a new Blazor Web App (.NET 8+) dotnet new blazor -o MyBlazorApp cd MyBlazorApp dotnet run Kjo është ajo. jo that spins for three minutes downloading half the internet. No folder larger than your actual code. No or to fight with. npm install node_modules .babelrc webpack.config.js të is comprehensive and actually well-written. Microsoft's docs have come a long way since the MSDN days. Dokumentet zyrtare të Blazor FAQ: Common Concerns About Blazor I've heard every objection in the Blazor vs React debate. Some are valid. Most aren't. Is Blazor WebAssembly bundle size too large? Në 2020? Po, ishte e ashpër. ngarkimi i parë mund të godiste 2-3MB. Now? .NET 8+ changed the math: Kompilimi i AOT shkurton kohën e drejtimit në mënyrë të konsiderueshme IL trimming strips unused code Ngarkimi i butë largon asambletat jo-kritike .NET 10 adds automatic compression and fingerprinting But honestly, the smarter answer is: don't ship WebAssembly to everyone. Use Static SSR for landing pages (zero WASM). Use Interactive Server for authenticated sections. Save WebAssembly for offline scenarios or heavy client-side computation. You pick per-page now. A janë zhvilluesit JavaScript më të lehtë për të punësuar se zhvilluesit Blazor? Varet për çfarë po punësoni në të vërtetë. A senior C# developer picks up Blazor in a week. The component model clicks immediately, the syntax is just Razor, and they already know the language. Compare that to hiring a "React developer" who learned it three years ago and now needs to catch up on Server Components, the Hook, dhe çfarëdo meta-framework ekipi juaj zgjodhi. use Peshku i talenteve .NET është i madh, i qëndrueshëm dhe plotësisht i aftë. zhvilluesi juaj i backend mund të shqyrtojë PR-të frontend pa gjuhë që ndërrojnë kontekst. Does React have more third-party components than Blazor? Yes. Full stop. Por sasia nuk është cilësi.Për çdo bibliotekë të përbërësve React të polishuar, ka dhjetëra paketa të braktisura me vrima të sigurisë, varësi të papajtueshme të shokëve dhe READMEs që thonë "TOT: shtoni dokumentacion". Ekosistemi i Blazor është më i vogël, por ju nuk jeni duke gërmuar nëpër npm duke shpresuar se paketa që keni gjetur është ende e ruajtur. Material Design, falas, dhe mirëmbajtësit në fakt përgjigjen për problemet. and të dyja ofrojnë licenca falas të komunitetit nëse keni nevojë për më shumë. dyqanet e ndërmarrjeve zakonisht shkojnë for the support contracts. MudBlazor Radzen Syncfusion Telerik Kur keni nevojë për një bibliotekë JavaScript? Lëreni të qetësoheni: IJSRuntime @inject IJSRuntime JS

@code { private async Task InitializeChart() { await JS.InvokeVoidAsync("Chart.bindings.init", chartElement, chartData); } } You're not locked out of the JavaScript ecosystem. You just don't on it. depend Is Blazor good for SEO? Static SSR renders pure HTML. Google sees it, indexes it, done. Same as Next.js SSR but in C#. This objection made sense in 2020 when Blazor was WebAssembly-only. It hasn't been true for years. Can Blazor be used for mobile apps? Shkruani komponentët tuaj një herë, ekzekutoni ato në MAUI (iOS / Android / Windows / macOS), WPF, ose edhe Windows Forms. Komponentët e njëjtë C#, shell native app. Jo mjaft "shkruaj një herë, drejto kudo", por mjaft afër për shumicën e rasteve të përdorimit. A është Blazor Tooling aq i mirë sa VS Code me React? Unë do të argumentoja se është më mirë, por kjo është subjektive. Visual Studio me Blazor: debugging aktual me breakpoints dhe hap-through, IntelliSense që e kupton të gjithë bazën tuaj të kodit, refactoring që punon në të gjitha komponentët dhe shërbimet, Hot Reload që kryesisht punon, testimi dhe profilimi i integruar. VS Code with React: syntax highlighting, IntelliSense që punon nëse TypeScript është konfiguruar si duhet, duke shpresuar që is correct, browser extensions that may or may not conflict with each other. launch.json Vendosja e një ndarje në një komponent Blazor dhe kalimi në bazën e të dhënave, në një IDE, një gjuhë? A do të krijojë Blazor Microsoft vendor lock-in? .NET is open source (MIT license). Blazor is open source. You can run it on Linux, in Docker, on AWS, on Azure, wherever. A ka gravitet ekosistemi drejt Azure? Sigurisht. por unë kam vendosur aplikacionet Blazor në AWS, DigitalOcean, dhe serverat bare metal pa asnjë problem. Krahasoni këtë me React, e cila është teknikisht me burim të hapur, por praktikisht e kontrolluar nga prioritetet e Meta-s. Kur Facebook vendosi që komponentët e klasës ishin jashtë, e gjithë ekosistemi u kthye. At least Microsoft publishes a roadmap. A punon Blazor Hot Reload siç duhet? Ajo ishte e papërshtatshme në .NET 5. nga .NET 8 ajo ishte e përdorshme. Edit a file, save, see changes. Method bodies, Razor markup, CSS, të gjitha të menjëhershme. .NET 10 më në fund e bëri mirë .razor Is it as fast as Vite? No. Is it fast enough that I don't think about it? Yes. Final Thoughts Switching to Blazor hasn't solved all my problems. I still write bugs. I still make architecture mistakes. I still occasionally spend too long debugging something that turns out to be a typo. Por unë kam ndaluar shpenzimin e energjisë mendore në të cilën biblioteka e menaxhimit të shtetit është "e saktë" këtë muaj. unë nuk pyes nëse llojet e mia TypeScript përputhen më me të dhënat e drejtimit (spoiler: ata shpesh nuk e bënë). One language. One ecosystem. Patterns I've refined over a decade of .NET work. That's the trade-off, and for me it's worth it. Your mileage may vary. But if you're a .NET developer who's ever looked at your with existential dread-Blazor might be worth an afternoon of your time. package.json Çfarë është e radhës? If you want to try it: Ky është i gjithë setup. dotnet new blazor -o MyFirstBlazorApp && cd MyFirstBlazorApp && dotnet run Microsoft's janë të forta dhe është një nga subreddits më miqësore teknologjike që kam gjetur. Blazor tutorials r/Blazor Questions? Drop a comment or find me on social. I like talking about this stuff. Sources: burime të The State of React and the Community in 2025 If Not React, Then What? Pse kornizat më të fundit të JavaScript janë një humbje kohe Is Blazor Better Than JavaScript? Blazor vs React: Një krahasim i plotë Debug ASP.NET Core Blazor Apps - Microsoft Mësoni Blazor in .NET 8: Server-side and Streaming Rendering The Benefits of Static Server-Side Rendering in Blazor Çfarë është e re në .NET 10 - Microsoft Learn Çfarë është e re në ASP.NET Core në .NET 10 - Microsoft Learn npm Supply Chain Attack - Palo Alto Networks Shai-Hulud 2.0 Supply Chain Attack - Wiz npm left-pad Incident - Wikipedia event-stream Malicious Package - Snyk The "Everything" Paketë Chaos - Socket About the Author I'm a Systems Architect who is passionate about distributed systems, .NET clean code, logging, performance, and production debugging. I've mass-deleted më shumë herë se sa do të doja të pranoja. node_modules Linkedin: Lidhuni me ne GitHub: mashrulhaque Twitter/X: @mashrulthunder