Introductory Blazor WebAssembly Course

0


What is Blazor? What is this for? What kinds of apps can you write with? Is it client side or server side? This free crash course in building .NET 5-based Blazor WebAssembly Applications provides a first-class opportunity to get behind the hype of what Blazor is and what it can do.

But before that, let me first describe the background …

Blazor is a way to write both server-side and client-side web applications with .NET and C # instead of using Javascript on the front-end. If you’ve heard of the Vaadin framework, Blazor is something similar. But with a small difference … Blazor’s code compiles to WebAssembly, not JavaScript. The way it works is that a .Net runtime compiled on WebAssembly is downloaded to the user’s browser who then runs the Blazor app in the same sandbox that JavaScript is running. And thanks to this magic of WASM, you can run high intensity applications, even C ++ games, in the browser!

But doesn’t that look like a Java applet? An applet needs a browser plug-in and a host machine running JVM. In contrast, WASM targets the browser engine, for example Chrome’s V8. In addition, it can still interact with Javascript, especially since it currently cannot directly access the DOM. This is one of the reasons why it is not seen as a replacement for Javascript, but as a complement to it.

But for most people, these technological advancements will not resonate; it is the productivity gains that will raise an eyebrow, they are looking for an overview, that is to say that backend developers do not have to learn JavaScript and its frameworks to write a full stack web. applications. They can use the same 3GL language on the back and front. In addition, you can run other types of applications, normally not available for a web browser, it offers performance improvements and the rest of the benefits of compiling to WebAssembly.

With that in mind, let’s take a look at what this course covers.

The use case is to build a simple income and expense tracking app, FinanceMentor, with a menu, form, and dashboard. This will involve developing Blazor components, managing forms, managing APIs, modal dialogs, managing CSS, using images, and building a dashboard using a third-party user interface library.

To follow, Visual Studio and the .NET 5 SDK are required. Also note that the course is for Blazor WebAssembly and not Blazor Server. For a quick introduction to Blazor and the differences, watch this. Don’t worry though; While this video is from January 2020, the current price is from March 2021.

So after a brief but good high-level overview of Blazor and its hosting models, we continue with the first lesson where we learn how to set up a new Blazor project based on a default template and introduce the first basics. from our web page.

Going step by step, the second lesson, Blazor Form Component & Validation, goes through the implementation of the page, menu item, form, and handling of input validation for form fields.

In Lesson 3: Managing Blazor APIs, we learn how to save data and load data from the backend by implementing a simple data table and populating its data using an API call from there. Blazor web application to an ASP.NET WebAPI backend.

Lesson 4 is about creating a Blazor modal dialog component that asks the user for confirmation when the delete button is clicked.

Lesson 5 covers using CSS to style the created components, Lesson 6 is about adding static images such as a logo and Lesson 7 concludes the course by integrating a third-party user interface library, Radzen. , in order to create the dashboard.

In summary, the lessons are:

1.Start
2.Component and validation of the Blazor form
3.Blazor API management
4.Blazor modal dialog component
5.Css Blazor manipulation
6.static images
7. make a dashboard

Each video is 10-16 minutes long, comes with instructions, and all code is posted on Github.

Recommended if you are a .NET developer wanting to be up to date with the latest hype and at the same time looking for a productive alternative to writing Javascript on the front-end.

blazorsq

More information

The FREE Blazor Crash Course (.NET 5)

Youtube playlist

Github

Related Articles

Blazor, .NET in browser

Design patterns explained with food in C #

Programming Web APIs with .NET

Microsoft jumps on the OpenJDK train

Blazor, .NET in browser

To be informed of new articles on I Programmer, subscribe to our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Banner

square

comments

or send your comment to: [email protected]





Source link

Leave A Reply

Your email address will not be published.