What is Blazor?

-

 Before we see the actual definition of Blazor, we must understand below 

  • For server-side development, we use programming languages like C#, Java, PHP etc. These are the server-side programming languages.
  • For the client-side development we use JavaScript frameworks like Angular, React, Vue etc. There’s no doubt these JavaScript frameworks dominated client-side development up until recently. 
  • To stay in the business as a developer and remain competitive, it's inevitable we learn both a server-side programming language and a client-side programming language
what is blazor
  • But the question is, why should we learn and use 2 different sets of programming languages and frameworks.

Can we use C# both for server-side and client-side development?

why should we use blazor

Well, we can and that's exactly why we use Blazor. With Blazor we can now build interactive web UIs using C# instead of JavaScript. C# code can be executed both on the server and in the client browser. This means existing .Net developers can reuse their c# skills rather than learning new JavaScript frameworks and their huge learning curve.

Blazor can run C# code directly in the browser, using WebAssembly. It runs in the same security sandbox as JavaScript frameworks like Angular, React, Vue etc. Not just C#, in fact, we can run any type of code in the browser using WebAssembly

Blazor hosting models

Blazor offers 2 hosting models. Blazor WebAssembly and Blazor Server.

Blazor WebAssembly

This is also called the client-side hosting model and in this model, the application runs directly in the browser on WebAssembly. So, everything the application needs i.e the compiled application code itself, it's dependencies and the .NET runtime are downloaded to the browser. We use the Blazor WebAssembly App template, to create a Blazor application with the client-side hosting model. We will see this in action in our upcoming videos

Blazor server

This is also called the server hosting model and in this model, the application is executed on the server from within an ASP.NET Core application. Between the client and the server, a SignalR connection is established. When an event occurs on the client such as a button click, for example, the information about the event is sent to the server over the SignalR connection. The server handles the event and for the generated HTML a diff (difference) is calculated. The entire HTML is not sent back again to the client, it's only the diff that is sent to the client over the established SignalR connection. The browser then updates the UI. Blazor embraces the single page application architecture which rewrites the same page dynamically in response to the user action. Since only the diff is applied to update the UI, the application feels faster and more responsive to the user

Blazor Prerequisites

  • C#
  • HTML 
  • CSS

Blazor is gaining great traction and it is here to stay. If you are a .Net developer, it’s invaluable to have Blazor in your tool belt



Comments

Post a Comment

Popular posts from this blog

Email Sending through O365 using OAuth Protocol

-
  Microsoft Office365 EWS servers have been extended to support authorization via the industry-standard OAuth 2.0 protocol. Using OAUTH protocol, user can do authentication by Microsoft Web OAuth instead of inputting user and password directly in application Microsoft / Office 365 OAuth + EWS We can use the OAuth authentication service provided by Azure Active Directory to enable our application to connect with IMAP, POP or SMTP protocols to access Exchange Online in Office 365. To use OAuth with our application we need to register application on Azure Active directory and other steps also we need to do to get the access token back. Below are the steps   To use Microsoft/Office365 OAUTH in your application, you must create an application in  https://portal.azure.com . Sign into the Azure portal using either a work or school account or a personal Microsoft account. If your account gives you access to more than one tenant, select your account in the top ...
Read more

IoT Technology

-
Image
IoT technology The Internet of Things (IoT) is a system of interrelated computing devices, mechanical and digital machines.  IoT is a network of sensors where data is exchanged, using different connectivity protocols, with systems. This set up can be leveraged to create a new business application or to enhance an existing process. The exchange of the data can be bi-directional between sensors and systems Examples of sensors can be temperature sensors, motion sensors, flow meters, heart meter monitors, biometric devices, smoke detectors, & etc Examples of connectivity can be wifi, radio, GPRS, GSM, LAN, WAN, & etc. Examples of systems can be a remote health monitoring applications, SCADA applications, etc Look at next slide about the complete flow of IoT process Examples A doctor in US would like to monitor the heart rate and ECG of a patient in Hyderabad. This is done with the patient having sensors attached to him that collect the ECG data and the hea...
Read more

What is reverse proxy?

-
Image
  What is a reverse proxy? A reverse proxy is a server that sits in front of web servers and forwards client (e.g. web browser) requests to those web servers. Reverse proxies are typically implemented to help increase  security ,  performance , and reliability . In order to better understand how a reverse proxy works and the benefits it can provide, let’s first define what a proxy server is. What’s a proxy server? A forward proxy, often called a proxy, proxy server, or web proxy, is a server that sits in front of a group of client machines. When those computers make requests to sites and services on the Internet, the proxy server intercepts those requests and then communicates with web servers on behalf of those clients, like a middleman. For example, let’s name 3 computers involved in a typical forward proxy communication: A: This is a user’s home computer B: This is a forward proxy server C: This is a website’s origin server (where the website data is stored) In a stand...
Read more