Introduction

As most of the decision-makers and the technical person knows, Web App Development has been a tough task altogether especially in the last decade, the complexity has increased manifolds. With each complexity, developers are exploring their ways to adapt new ways to solve the problem and adapt to new realities with more vigour. One of such advents has been that the Web App Front-End Development has by default adapted to JavaScript frameworks as a permanent solution to every problem associated with it.

Like every technological solution, JavaScript frameworks have their own advantages and disadvantages. Few advantages are that there are comprehensive frameworks, packages, and tools with a varied and very powerful ecosystem with a variety of options. Similarly, all frameworks share a few common issues. Most of the developers concur to the understanding that JavaScript is a great tool from a Client and Businesses perspective but from the development point of view, it is very complex and the learning curve is very steep.

Addressing the challenges faced in JavaScript, Microsoft came up with a Framework that is not only powerful but productive too. Microsoft has developed Blazor, which is a new Web Framework for building interactive Web Application. It allows .NET developers to build advanced Web Applications.

Blazor leverages .NET Core’s structure for common practices and patterns. Blazor also uses .NET Core’s ability to run anywhere by supporting the Client-Side and Server-Side Hosting Model.

Works on Both Client and Server Side

In the initial stages, Blazor started off only as a Client-side Single Page Application (SPA) framework. The initial goal was to run .NET Applications in the Browser using Web Assembly and Razor. However, during the development course, the team decided to add a Server-side Hosting Model to Blazor. This allowed developers to write their codes independent of the Hosting Model. This way the only instance when code is identified as Client-Side or Server-Side is when data is fetched.

Benefits of Blazor

• Blazor allows compilation of Static Files. We do not need a .NET Runtime environment on the Server.
• From Server Side to the Client Side, the work is offloaded.
• Blazor Apps can be run in an Offline state.
• Codesharing and Objects of C# can be shared between Client and Server fairly easily.

Where is it used?

The Blazor Framework or specifically Blazor WebAssembly has been built to be a competitor to JavaScript Frameworks. So, anywhere that someone is trying to use JavaScript Frameworks can consider Blazor as an ideal option.

One of the most important things to note is that Blazor WebAssembly doesn’t require us to have .NET on the Server. If we are having a backend written in any other technology such as PHP, ROR, Node, etc…we can still use Blazor as the Frontend. The WebAssembly would compile static files.

Hype

Microsoft has clearly focused on long term aspects and planning to gain the market share back. Considering that there has been enormous speculation around the barrier for entry to .NET and with so many choices the new developers to the platform have to undergo, Blazor Framework would offer the much-needed clarity when it comes to effective UI, Single Programming Model, learn once apply anywhere, etc… Considering this, all the hype about being the next big thing in Programming and Development around Blazor is not misplaced at all.

Conclusion

Zobi Web Solutions is a place where we not only focus on effective services but adapting to newer technologies and frameworks as fast as possible. We being in .NET development since our inception, it becomes inevitable for us to adapt to Blazor if we have to compete amongst the best, and considering this, we have already trained our team and have started offering services. Our developers are capable to adapt to new technologies quickly. We Offer Blazor Development Consultation, Guidance, and Blazor Development Services. We have customers from the USA, UK, Canada, and Europe already using our services. We develop secure and scalable Applications. We provide a one-stop solution to all your needs

The post Why Blazor is next big thing in the web app development? appeared first on Zobi Web Solutions Private Limited.

Here we can get a brief understanding of the practical demo of Blazor. How can we get started with Blazor and which SDK, packages, and extension are required to install

Blazor tools and support

As we know that Blazor is developed by Microsoft so when Blazor was introduced at that time it’s an experimental framework for .Net single page application. which is run on the browser. Microsoft is committed to mold as a supported web UI framework. The Blazor is supported on Linux, Mac OS, and Windows, and it is introduced by Microsoft as a feature of Asp.Net the company’s flagship for web development. Asp.Net Core pipeline has included the Blazor into them official rollout

Now, we follow the given step to setup the Blazor project.

Step 1.

First, of all, we need to Install the latest Blazor extension from the Visual Studio Marketplace. By this step, the Blazor templates are available to Visual Studio.

(https://marketplace.visualstudio.com/items?itemName=aspnet.blazor)

After installing the Blazor extension, check the following list is installed.

1. Check that the latest   .NET Core 3.0 Preview 4 SDK (3.0.100-preview4-011223) is installed

2. Visual Studio 2019 (Preview 4 or later) with the ASP.NET and web development workload selected.

Step 2.

By following the guidelines, we can add our chosen tools.

1.  Create a new project.

2. Select Blazor App. Then click on Next.

3. Give a suitable project name in the Project name field or you can accept the default project name. Make sure that the Location entry is correct or provide a location for the project. Select Create.

4. Select  Blazor Server App and Select Create.

5. Press Ctrl+F5 to run the app.

Here We can see the application Home Page

We can also navigate to the other two menu items, Counter and Fetch data :-

The post Getting started with Blazor appeared first on Zobi Web Solutions Private Limited.

The Blazor is rapidly used for a single page application its uses C# as a full-stack. We can write client-side application code using C# without depending on JavaScript, jQuery,

React, or Angular because Blazor will replace all of them. Now we have Asp.Net Core for end-to-end.

Components :

Blazor app depends on units A units in Blazor is an element of UI, such as a dialog, page,  or data entry form.

The Unit/Components are .NET classes is build into the .NET assemblies that :

• Its define the flexible UI rendering logic
• Its handle the user’s event
• Its may a reusable
• It may be distributed as Razor class libraries or NuGet packages.

The component class generally is written in razor form with using .razor file extension. The component of Blazor formally referred to a razor component. The razor is the syntax to use for combining HTML markup with c# code design for developer productivity. The Razor is allowed us to switch between HTML markup and C# in the same file with IntelliSense  support. The razor page and MVC are also used the Razor.

In opposit of Razor pages and MVC, they are built around a request/response model, the components basically used for client-side UI logic and composition.

The title and body content are provided by the component that will use this component in UI. OnYes its trigger the c# onclick event.

Blazor WebAssembly :

Important

Blazor WebAssembly in preview

Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly is in preview for ASP.NET Core 3.1.

The Blazor WebAssembly is a single page application framework to develop the interactive client-side web application. The .Net Blazor WebAssembly used the open web standard without using any plugins or code transition and its work for all modern web and mobile browsers. To run .Net code in the web browser possible by the WebAssembly . The WebAssembly makes the possible fast download and maximum execution speed as it in compact bytecode format. The WebAssembly is in open web standard form and its support in a web browser without the plugins.

The WebAssembly code may access the full functionality of the web browser by using JavaScript, its called Java Script interoperability. The .Net Code may be executed via WebAssembly in the web browser and it runs in the browser’s JavaScript sandbox with the protections Which provide by sandbox against malicious action on the client machine.

When the Blazor WebAssembly app built and runs in the browser

• The C# code and Razor files compiled into .Net assemblies.
• The different assemblies and the .net runtime are downloads to the browser
• The Blazor WebAssembly bootstrap the Asp.Net runtime and configure it to load the assemblies for the app.

The Blazor WebAssembly uses JavaScript to handle DOM manipulation and browser API calls. The Blazor WebAssembly reduces download times.

Blazor Server :

From the UI updations and execution Blazor can decouple component rendering logic. The Blazor Server also helps the Razor component to host on server in .Net Core app. The UI updates are handled by SignalR connection. The runtime manages the sending of UI events to the server from the browser and will implement UI updates that are sent by the server after the components are running. Blazor Server’s connection to communicate with the browser is also used for handling interop calls from JavaScript.

JavaScript interop :

The JavaScript interoperates with the browser APIs, components to allow access to the app that requires a third-party JavaScript library.

The components can use any library or API which is used by Javascript. The JavaScript code able to call c# code and C# code able to call JavaScript code. for more detail.

Browser requirements Blazor WebAssembly

Browser requirements Blazor Server

The post Indepth with Blazor appeared first on Zobi Web Solutions Private Limited.

Zobi Web Solutions is a well-known name in Blazor App Development Company. We have successfully completed multiple projects and our experienced and dedicated developers served the best results for this technology and have been given some promising results. Get a free consultation today to develop a Blazor Application on the Linux platform.

You want to try the Blazor, on your Linux machine. Well, you are lucky. One of the goals of the Asp.Net core is being cross-platform. so in this blog, we will see how “cross-platform” is with Blazor Microsoft’s hot new front-end development project.

For setting up Blazor app on Linux We can follow the given steps.

Setup .net core

Register Microsoft key and feed :

Before installing .NET, you’ll need to :

• Register the Microsoft key.
• Register the product repository.
• Install required dependencies.

This only needs to be done once per machine.

Open a terminal and run the following commands.

wget -q https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb

sudo dpkg -i packages-microsoft-prod.deb

Install the .NET Core SDK :

Update the products available for installation, then install the .NET Core SDK. In your terminal, run the following commands.

sudo apt-get update

sudo apt-get install apt-transport-https

sudo apt-get update

sudo apt-get install dotnet-sdk-3.1

Install the ASP.NET Core runtime :

Update the products available for installation, then install the ASP.NET Core runtime. In your terminal, run the following commands.

sudo apt-get update

sudo apt-get install apt-transport-https

sudo apt-get update

sudo apt-get install aspnetcore-runtime-3.1

Install the .NET Core runtime :

Update the products available for installation, then install the .NET Core runtime. In your terminal, run the following commands.

sudo apt-get update

sudo apt-get install apt-transport-https

sudo apt-get update

sudo apt-get install dotnet-runtime-3.1

Publish and copy over the app :

Check app running success fully on local machine.

Remove https://localhost:5001 (if present) from the applicationUrl property in the Properties/launchSettings.json file.

Run dotnet publish from the development environment to package an app into a directory (for example, bin/Release/<target_framework_moniker>/publish) that can run on the server:

dotnetpublish –configuration Release

Copy the ASP.NET Core app to the server using a tool that integrates into the organization’s workflow (for example, SCP, SFTP). It’s common to locate web apps under the var directory (for example, var/www/demoapp).

Test the app :

1. From the command line, run the app: dotnet<app_assembly>.dll.
2. In a browser, navigate to http://<serveraddress>:<port>to verify the app works on Linux locally.

Install Nginx :

sudo apt-get update

sudo apt-get install nginx

sudo service nginx start

Verify a browser displays the default landing page for Nginx. The landing page is reachable at

http://<server_IP_address>/index.nginx-debian.html.

Configure Nginx :

To configure Nginx as a reverse proxy to forward requests to your ASP.NET Core app, modify /etc/nginx/sites-available/default. Open it in a text editor, and replace the contents with the following:

Once the Nginx configuration is established, run sudo nginx -t to verify the syntax of the configuration files. If the configuration file test is successful, force Nginx to pick up the changes by running sudo nginx -s reload.

To directly run the app on the server :

1. Navigate to the app’s directory.
2. Run the app: dotnet<app_assembly.dll>, where dllis the assembly file name of the app.

When done testing the app, shut the app down with ctrl + c at the command prompt.

Monitor the app :

The server is setup to forward requests made to http://<serveraddress>:80 on to the ASP.NET Core app running on Kestrel at http://127.0.0.1:5000. However, Nginx isn’t set up to manage the Kestrel process. systemd can be used to create a service file to start and monitor the underlying web app. systemd is an init system that provides many powerful features for starting, stopping, and managing processes.

Create the service file :

Create the service definition file:

sudo nano /etc/systemd/system/kestrel-newapp.service

The following is an example service file for the app:

[Install]

WantedBy=multi-user.target

Save the file and enable the service.

sudo systemctl enable kestrel-newapp.service

Start the service and verify that it’s running.

sudo systemctl start kestrel-newapp.service

sudo systemctl status kestrel-newapp.service

• kestrel-newapp.service – Example .NET Web API App running on Ubuntu
  Loaded: loaded (/etc/systemd/system/kestrel-newapp.service; enabled)
  Active: active (running) since Thu 2016-10-18 04:09:35 NZDT; 35s ago
  Main PID: 9021 (dotnet)
  CGroup: /system.slice/kestrel-newapp.service
  └─9021 /usr/local/bin/dotnet /var/www/demoapp/newapp.dll

Conclusion

This is how you can deploy your Blazor application on Linux operating system which is totally open-source. If you have any queries regarding this, you can contact Zobi Web Solutions, which is one of the earliest adopters of this technology and a prominent web and mobile app development company.

The post How to deploy blazor on linux appeared first on Zobi Web Solutions Private Limited.

Before getting start introduction of blazor we must have knowledge of WebAssembly(wasm). the WebAssembly(wasm) is a specification for the browser which is introduced

in 2015 and it defines as a compressed binary code arrangement designed as a portable target for compilation on the web for server and client applications.

After this release, many companies have launched projects with a high-level programming language to run on the top of WebAssembaly. The team Microsoft has a take the initiative to start its Blazor project and now we can use Blazor to run c# in a front end web app. this is happening due to WebAssembly open standard specification, the .Net code can run on the browser without the use of any plugins.

The Blazor is good for single page application frontend development which uses c# as a full-stack. We can write frontend app code with c# without depending on javascript as we would typically with React, jQuery, or Angular because Blazor will take the place of all of that. connect with Asp.Net Core server code it’s mean we can now have .Net as an end to end

The Blazor components are written as C# classes, then built into .NET assemblies. Which responsible for output and input operations handle user event and render the UI. Components also work as a container that is shared, distributed, reused, across multiple apps.

The HTML page that had a JavaScript function to perform frontend logic is simple to the frontend developer. The Blazor component is declared as a markup file .razor extension contains the HTML elements with the c# code responsible for event handling and HTML rendering.

Comparison of Blazor with Javascript :

Blazor allows frontend and backend C# code and provides code encapsulation by its reusable web UI component

Componentization is a react, Javascript and Angular concept. The Components of the app-building blocks and typical app will have many of these. They accept inputs and return HTML elements which describe how a section of UI appears.

The Asp.Net Core provides these features in the form of razor components. The Razor components also the component model of Blazor. so Blazor and Razor components are interchangeable.

The components of Blazor show different elements in the app UI structure like a news feed, comment section, and shopping cart.

Comparison of ASP. NET Core MVC and Blazor :

The Asp.Net Core MVC renders the UI as a block of string. but Blazor builds a render tree which is not a string and representation of the Document Object Model(DOM) which is held in memory. Blazor takes that and The changes belong to it will trigger a UI update for affected DOM element. this is the core difference between Asp.Net Core HTML and Razor Views, Which renders the strings.

Now we have a question of why the Blazor worked with render tree instead of a string We must have to remember that Blazor code does not access the DOM element directly. this is the main difference between Asp.Net Core HTML Helper and Razor Views They depend on JavaScript to get access to the UI elements. Blazor framework listens to changes made to the data model and manages the render tree to apply changes. which allows C# to work on the client-side.

Why go with Blazor instead of pure client-side JavaScript or Asp.Net Core MVC/Razor? Here We will get an idea about the differences between them so we can make a well-judged decision before putting any effort into developing a new Blazor project

Advantage of Client-side Blazor :

By using Blazor we can run the .net code directly in the browser. The Blazor has ruined the monopoly of JavaScript on the point of view of a full-stack developer. because using Blazor developer not need to upgrade with multiple programming skills.

The Blazor code is compiled in .NET language, so its faster than the javascript code.

We can share the validation code between the client and server app. suppose we have applied validation logic on both side back-end and front-end. by using Blazor we can create a class library in the .Net standard2.0 and share it across client and server app.

Disadvantages of Client-side Blazor :

To run Blazor on browser we must have to download Mono.wasm the .Net run time libraries to the browser with application’s .wasm and .NET libraries. Downloading first-time these is time-consuming it may delay the application startup so small Blazor application will also require downloading large memory of code. Java script has not this kind of burden.

Blazor does not have control over the HTML element as Blazor doesn’t manipulate the DOM element directly. so we must have to use JavaScript.

Blazor is slow in comparison to JavaScript. The team Microsoft work on it. They should be solved this problem in a short time.

The Blazor has Limited Debugging capability. They need improvement in this area Blazor has limited debugging features in chrome if we want to debug more effectively then we must have to do console login through our client app.

Different Faces of Blazor :

We generally know that the Blazor runs the C# code on top of web assembly on the browser but the fact is we can create the app which runs either a Blazor client-side or Blazor server-side. When we create the app we can choose from hosting models.

The Blazor Client-side is a familiar hosting model to Javascript Developer. they can deploy application assets to the webserver which can serve client browsers with a set of static files. when browser download that files the app can run on top of web assembly.wich is not much different from client-side javascript apps the only thing is the app is running on web assembly instead of JavaScript.

The Blazor backend app can run on the server and built on top of ASP. NET Core SignalR, a real-time communication library based on WebSockets. The Blazor can run without any limitation imposed by webAsembaly when the app runs on the browser as the Blazor can run on the server on top of the full ASP. NET Core web framework.

The post Introduction to Blazor appeared first on Zobi Web Solutions Private Limited.