DEV Community: pushpk

Using NULL Conditional and Coalescing Operators in C#

pushpk — Mon, 15 Jun 2020 02:01:11 +0000

Null checking is important part of developing quality code, Without it Code with throw NullReferenceException

Most common way to check for nulls is using If, consider below code


public class Program
{
    public static void Main()
    {
       Person person1 = null;
       DisplayPerson(person1);
    }

    static void DisplayPerson(Person person)
    {
      Console.WriteLine(person.FirstName);
      Console.WriteLine(person.LastName);
    }
}

class Person
{
  public string FirstName {get; set;}
  public string LastName {get; set;}
}

If we try to run this code, We will get NullReferenceException since there is no null checking in place inside DisplayPerson function

Now as soon as I get null exception, I go into code where NullReferenceException is causing and add if null check, like below

static void DisplayPerson(Person person){
    if(person != null)
    {
        Console.WriteLine(person.FirstName);
        Console.WriteLine(person.LastName);
    }

 }

and adding if null check is fine except adding it in every method in code makes code verbose.

NULL-conditional Operator(?.)

Another way to solve this issue is to use null-conditional operator, ?. introduced in C# 6.0, here is how we can reduce if null check by using null-conditional operator

static void DisplayPerson(Person person){
    Console.WriteLine(person?.FirstName);
    Console.WriteLine(person?.LastName);
 }

The part on the right of ? only evaluates if the part to the left is not null. Otherwise, the code returns null. In the case above, person?.FirstName and person?.LastName evaluates to null, but it does not throw an exception because there is no attempt to access a member on a null reference.

Use the null-conditional operator on members of namespaces, types, array elements (?.[]), access methods, or to invoke delegates.

Now this is good but what if we want some default value to be return if object is null, this is where Null-coalescing Operator ?? can be useful,

Null-coalescing Operator(??)

Null-coalescing Operator is a binary operator that simplifies checking for null values. it is used to define a default value for nullable value types or reference types. It returns the left-hand operand if the operand is not null; otherwise, it returns the right operand.

In cases where a statement could return null, the null-coalescing operator can be used to ensure a reasonable value gets returned. This code returns the Firstname and Lastname of a person or the default names if the person is null. this operator is a handy tool when working with the null-conditional operator.

 static void DisplayPerson(Person person){
    Console.WriteLine(person?.FirstName ?? "Default First Name");
    Console.WriteLine(person?.LastName ?? "Default Last Name");
 }

From C# 7, it is also possible to use the null-coalescing operator to shorten the validation of arguments, below code requires to validate name, here is how I would look

internal class FormatName{

 private readonly string Name;

 public void SaveName(string name){
    if(name == null)
            throw new ArgumentNullException(nameof(name));
    }
    Name = name;
 }

Using the null coalescing operator allows this to be shortened to the code below.

internal class FormatName{

 private readonly string Name;

 public void SaveName(string name){
    Name = name ?? throw new ArgumentNullException(nameof(name));
 }

Checking NULL is vital part of code for stability, Using NULL-conditional and Null-coalescing Operator can really reduce and simplify code.

Happy Coding!

Say "Hello" to Blazor WebAssembly

pushpk — Tue, 26 May 2020 00:21:25 +0000

History

In mid-April 2019, Microsoft released Blazor, which allows client-side code with C# (no JavaScript required), allows Developers to build single-page apps using .NET and C# instead of JavaScript, the traditional nearly ubiquitous go-to programming language for the web.

Now if you are like me and curious how can Browser understand C# for SPA (Single Page Application) to work? It does it thanks to WebAssembly

WebAssembly

Now, if this is first time you are hearing this term or still unsure What is it and how does it work, below are couple good sources that helped me to understand:

In Short:
WebAssembly is a way to take code in any programming language and run it within a web browser. It is generated by the compiler with a binary format which allows us to execute any language code on the browser.

It takes Code Written in any language and compile into what it called WebAssembly Module(Called WASM for short) and that module get loaded in Web Application.

WebAssembly Browser Support:

Blazor: Browser-based Razor Pages

Blazor is a framework that sits on top of Web Assembly and gets its name from using Razor templates in the browser. Behind the scenes, .Net uses Mono .NET Runtime to run .Net binaries to Web Browser. Mono is the official .NET runtime for client platforms (e.g., native mobile apps and games) so another Client Platform (WebAssembly) makes sense to be run on Mono.

Blazor works by implementing Blazor UI components using a combination of .NET code and Razor syntax: an elegant melding of HTML and C#. Blazor components can seamlessly handle UI events, bind to user input, and efficiently render UI updates.

Blazor is designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). Regardless of the hosting model, the app and component models are the same.

During the 2019 edition of .NET Conf, Microsoft demonstrated two different Blazor editions (Or two different ways of hosting Blazor App): Blazor Server and Blazor WebAssembly. Blazor Server, shipped together with .NET Core 3.0, allows web applications using Razor components to be hosted in ASP.NET Core servers. Users accessing the application act as thin clients, and the UI in the browser is updated through the use of asynchronous notifications (using the SignalR library).

And last week, during #MSBuild 2020, Microsoft announced Blazor WebAssembly. Blazor WebAssembly is now the second supported way to host your Blazor components: client-side in the browser using a WebAssembly-based .NET runtime.

In this post we will talk about Blazor WebAssembly, if you want to learn more about Blazor Server App, here are couple links that helped me

Blazor WebAssembly

Blazor WebAssembly is a direct competitor to JavaScript Frameworks such as Angular, VueJS, and React. Using this hosting model, we are able to write our UI logic using C# that executes within browser without any plugins or code transpilation required. Blazor WebAssembly includes a proper .NET runtime implemented in WebAssembly, a standardized byte-code for the web. This .NET runtime is downloaded with your Blazor WebAssembly app and enables running normal .NET code directly in the browser.

These apps can be deployed as completely standalone static sites without any .NET server component at all, or they can be paired with ASP.NET Core API services to enable full stack web development with .NET.

There are few things we need to get started on Blazor Web Assembly Project

Install the .NET Core 3.1 SDK.
Install Visual Studio Code.
Install the latest C# for Visual Studio Code extension and the JavaScript Debugger (Nightly) extension with debug.javascript.usePreview set to true.
After installing above tools, To Create Blazor WebAssembly, Open command/terminal to run following command:

    dotnet new blazorwasm -o Hello-Blazor-WebAssembly

Open the Hello-Blazor-WebAssembly folder in Visual Studio Code.
The IDE requests that you add assets to build and debug the project. Select Yes.
Run following command from VS Code terminal()

    dotnet run

Open the browser and navigate to http://localhost:5000 or https://localhost:5001. You should be able to see the application something like the following :

If we hop on to Developer Tools and check network tab, you should see dotnet.wasm, which is dotnet runtime compiled into WebAssembly so it can run into browser, and Hello-Blazor-WebAssembly.dll which is normal dll compiled by C# compiler to run into browser.

Great! Everything works!

Now, let's try to see how it works by surfing code

Components

Blazor is a component centric framework. That means everything in our app is made up of components.

Let's try to figure out how our app is made up. The root component is called App and can be found in the file App.razor. The content of that file is as follows:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

The above is telling us two things.

Normal routing, Normal routing is taken care of by the Found component. It used the MainLayout component to set up a DefaultLayout
Not found, the component NotFound handles any non-defined routes and outputs an error text

MainLayout

Let's have a look at the MainLayout component. It can be found under Shared/MainLayout.razor and looks like this:

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

It has couple things sidebar and Main

Sidebar renders Navigation menu using NavMenu Component
main renders content using @Body, if you are coming from asp.net mvc background, it's similar to @RenderBody() in _Layout.cshtml

All site content will be rendered under Main, let's try to see how Index and Count components are rendered there using Routes.

Index Component

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

At the top of the file we @page that tells us what route it handles, in this case, /, the default route. Then we have a portion of HTML.
This page has another component SurveyPrompt component, and we are passing Title to that component, which means Components can be nested and rendered in each other.

Main component will load Default Route when we load application and will show index component.

Counter Component

Now, Let's try to Look at Counter Component. Here is how it looks in UI:

<div class="language-csharp line-numbers-mode">

    @page "/counter"

    <h1>Counter</h1>

    <p>Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

    @code {
        int currentCount = 0;

        void IncrementCount()
        {
            currentCount++;
        }
    }

This component can be found under Pages/Counter.razor and looks like this

This has code and event involved and reacts on click event. At the top, we can see that it handles the route /counter.

It has variable called currentCount using the Razor Directive @, in component we can write code blocks using @code,

In above counter component, We have local variable and Function IncrementCount() which we are binding to button click using @onclick which increases currentCount variable by 1 each time we click and that value is bound to p tag.

These Components are re-usable piece of code blocks which we can render on any page, for example if I define <Counter /> on index page, it will show same output like as above with other index page text.

FetchData Component

Now let's try to understand FetchData Component, which is a bit complex one, here is how looks in UI:

By looking at it, its pulling Weather Data from Some API, is it? Let’s look into code,

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server. </p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

It has route /fetchdata and we are injecting HttpClient to call API, The @inject allows injecting services. The HttpClient is registered by default and doesn’t require an explicit entry in Startup.cs, three things that are going on in code block:

Injecting HttpClient, this a service that helps us do HTTP calls
Invoking HttpClient, we use the method GetJsonAsync() to fetch a JSON from the defined endpoint
Creation of a result type, we are creating the type WeatherForecast that based on the incoming JSON structure is able to pick out the relevant data found on the property results

When we navigate to /fetchdata, OnInitializedAsync method gets called and it get array of WeatherForecast and passes to Html which then loop through it and generates output.

Currently, it is pulling data from JSON file but it can be URL of API service,

What if we want to add new component and start building something more realistic? We can do that easily by start adding new file with extension .razor and defining route on top using @page

Here is link to Project we used in this Post: Hello-Web-Assembly

Steve Sanderson Developer at Microsoft from Asp.net Team shows Real-world Car Checker Demo during Microsoft Build 2020, here is the link of it:
Modern Web UI with Blazor WebAssembly

If you want to learn more about Blazor WebAssembly here are couple good sources:

Happy coding!

C# 9.0 New Features

pushpk — Thu, 21 May 2020 23:36:55 +0000

Microsoft build 2020, Mads Torgersen, Program Manager for the C# Language and Dustin Campbel, a principal software engineer on the .NET Developer Experience team showed C# 9.0 features that will be shipped with .NET 5 in upcoming November 2020,

Let's go over in brief to see all features that were introduced in session

Improved Pattern Matching

There are several new patterns been added to C# 9.0, Pattern Matching was added in C#7, here is a tutorial on pattern matching

No need to declare default identifier in switch

// Before
public static decimal CalculateTotal(object product) =>
product switch
{
...

LaptopProduct l when t.ScreenSize > 13 => 500+ 50,
LaptopProduct l when t.ScreenSize > 15 => 500 + 75,
LaptopProduct _ => 500,

_ => throw new ArgumentException("Not a known Product type", nameof(product))
}

//C# 9.0
LaptopProduct => 500

Note that on with C# 9.0 we can specify Type without '_'

Relational Patterns

With C# 9.0, relational operators (<, >, etc) can be used as patterns indicators like below

//C# 9.0
LaptopProduct t when t.ScreenSize switch
{
> 13 => 500+ 50,
> 15 => 500 + 75,
_ => 500,
},

Logical Patterns

You can combine relational operators with Logical Operators and, or and not(word) like blow:

//C# 9.0
LaptopProduct t when t.ScreenSize switch
{
> 13 and <= 15 => 500+ 50,
> 15 => 500 + 75,
_ => 500,
},

The way we use not pattern with null constant pattern is we can avoid unknown types falling into null bucket

//C# 9.0
not null => throw new ArgumentException($"Not a known Laptop type: {product}", nameof(product)),
null => throw new ArgumentNullException(nameof(product))

not is also useful is-expression like below

instead of writing

if(!(product is LaptopProduct))

we can write

if(product is not LaptopProduct)

Top-level statements

Currently, writing hello world program in C# for beginners can be confusing with all boilerplate code, but with C# 9.0, we can directly start writing statements like below:

//Before
using System;
class Program
{
static void Main()
{
Console.WriteLine("Hello World!");
}
}

//C# 9.0
using System;

Console.WriteLine("Hello World!");

Any statement will work here but it will be allowed only in one file since you can have only one main method.

Target-typed "new"

Expression doesn't need to say type it will come from context like below:

//Before
Person person = new Person("Justin","Taylor");

//C# 9.0
Person person = new ("Justin","Taylor");

Parameter null checking

with 9.0 '!' at the end of parameter telling it will not accept nulls, it will throw argument null except if null will be passed without writing that line in all methods

//Before
public Person(string firstName!, string lastName!);

//C# 9.0
Person person = new ("Justin","Taylor");

Set Values Only in Constructor OR Object Initializer: Init Accessor

In C#, for Object initializers to work, property must be mutable for it to work, with that limitation, it can be changed afterward intentionally or unintentionally.

To overcome this situation, C# 9.0 introduces new accessor 'init' which will make it immutable and it can be used like below:

//before - mutable properties
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}

//Object Intializer
new Person
{
FirstName = "Steve",
LastName = "Taylor"
}

//value change
person.LastName = "Clark"

//before - mutable properties
public class Person
{
public string FirstName { get; init; }
public string LastName { get; init; }
}

//Object Initializer
new Person
{
FirstName = "Steve",
LastName = "Taylor"
}

//THIS WILL NOT BE ALLOWED WITH INIT ACCESSOR
//person.LastName = "Clark"

With 'init' it will give error if we will try to set property value anywhere else except constructor or initializer.

Records

Records are a new, simplified declaration form for C# class and struct types that combine the benefits of a number of simpler features. It can represent data as a Database record or some model entity:

Read-only properties => Immutable Type
Equality implementations => Structural equality
Pattern-matching support = is pattern, switch pattern etc.

public data class Person
{
public string FirstName { get; init; }
public string LastName { get; init; }
}

The Data keyword marks class as a record. Let's go over few value-like features it will have by making it a Record class

With-expressions : Non-distructive mutation

Working with immutable data, common pattern is to create new values from existing value that represent a new state, For Example in Person object, if we want object with different last name, we would have new person object with copying properties from existing person object with only different last name

C# 9.0 allows this using "with-" expression

var differentPerson = person with {LastName = "Jenny"}

It uses object initializer syntax to state what's different in the new object form old object. Behind the scene record class implicitly defines a protected copy constructor which takes original object to copy values:

Value-based equality

Object.Equals method will behave same for record class as Structs, comparing each field by calling Equals on them recursively.

Which means Two object instances from Record Class can be same without being same object. For Example: if we put original last name back and create new object like below, Equals method for (person, originalPerson) will be true, ReferenceEquals(person, originalPerson) will be false.

var originalPerson = differentPerson with {LastName = "Taylor"}

Data members

Intention of Record Classes is to be immutable, with init-only public properties that can be modified using with-expression. For that, common case will be to have Default Public members instead of Private members, for that, C# 9.0 provides nice short-hand for init-properties like below:

public data class Person { string FirstName; string LastName; }

is same as


public data class Person
{
public string FirstName { get; init; }
public string LastName { get; init; }
}

and

public data class Person
{
string FirstName;
string LastName;
public Person(string firstName, string lastName)
=> (FirstName, LastName) = (firstName, lastName);
public void Deconstruct(out string firstName, out string lastName)
=> (firstName, lastName) = (FirstName, LastName);
} public string LastName { get; init; }
}

can be written using shorter syntax like this:

public data class Person(string FirstName, string LastName);

this will declare public init auto properties with constructor and destructor, so we can create object like this:

var person = new Person("Steve", "Taylor");
var (f, l) = person;

With-expressions and inheritance

Records Class along with with-in expressions are challenging when we try to use with Inheritance.
Here is inherited Person class to Employee Class

public data class Person { string FirstName; string LastName; }
public data class Employee : Person { int Salary; }

Now if we try to use with-in expression to create employee and try to store in Person variable:

Person person = new Employee { FirstName = "Jacob", LastName = "Smith", Salary = 2000 };
otherPerson = person with { LastName = "Jenny" };

C# compiler has no idea that person actually contains Employee. It will not be properly copied to otherPerson if it wasn’t actually Employee object, complete with the same Salary as the first one copied over.

Records have a hidden virtual method that is created with “cloning” the whole object. Every derived record type overrides this method to call the copy constructor of that type, and the copy constructor of a derived record chains to the copy constructor of the base record. A with-expression simply calls that method and applies the object initializer to the result.

Here is link to MSbuild 2020 video of C# 9.0 :
C# Today and Tomorrow

Couple GitHub links to see upcoming C# 9.0 features and progress
C# 9.0 Language Feature Status
C# 9.0 candidate

Happy Coding!

Made CoronaVirus Tracker App using Angular on weekend

pushpk — Wed, 18 Mar 2020 18:51:06 +0000

I was looking for some project to practice Angular which doesn't get too complicated for a beginner and at the same time, we were getting bombarded with coronavirus news and numbers from everywhere, which gave me an idea why not create tracker and news app regarding Coronavirus.

Started with figuring out API to use for Data Source(https://www.who.int/data/gho/info/athena-api & https://thevirustracker.com/api) and map that data in a way that app wants to represent. Using Google Map API to show map and circles. New API to pull news regarding Coronavirus on the Important News section.

https://thevirustracker.now.sh/

Please share your thoughts to make it better, still adding new features and working on performance.