DEV Community: James Amattey

What To Expect In .NET 7

James Amattey — Tue, 30 Aug 2022 11:48:53 +0000

Microsoft's .NET Release Cycle

In 2016, Microsoft released .NET 3.0 as a cross-platform framework. Since the official release of .NET 5 in November, Microsoft has committed to an annual release cycle for .NET as it focuses on making .NET a multiplatform environment. The "new .NET" combines the power of Mono and .NET Core into a single framework that allows developers to create applications for any platform forming the basis for the launch of products such as .NET MAUI.

.NET releases in even numbers are the targetted for LTS and receive support and updates for 3 years, whilst odd number versions have short-term support for 18 months. This information is critical as it allows you to determine how far ahead you need to plan for a major upgrade of your applications and the version compatibility of your Nuget packages.

Notable Changes

In this section, we will highlight the most significant changes you can expect from .NET 7. It is becoming noticeable that Short Term Release versions will have fewer major features than versions with LTS, with a majority of the focus going towards improvement and enhancement.

C# 11

Every new release of .NET ships with a corresponding release of C#. Available with the preview SDK, C# 11 comes with new features such as

Required members

You can set the required modifier to properties of a class or a struct that must be initialized.

public class RequiredMember
{
  public required string Name
}

This means that without declaring the Name variable, the compiler will throw an error.

using Blazorise.CSharp11.Features

var requiredMember = new requiredMember { Name = "James" }

You can use the serialized attribute [SetsRequiredMember] to parse the RequiredMember parameter into the constructor and set it with init.

public class RequiredMember

{
    [SetsRequiredMembers]
    public RequiredMember (string name)
    {
        Name = name
    }
}

public required string Name { get; init; }

This indicates that a constructor sets all required members so callers using that constructor must initialize all required members using object initializers.

Auto-default struct

In C# 10, if a struct has a constructor, we have to set the properties within it. In C# 11, if a property is not set, it will be set as its default value.

In our example below, the number will be set to zero

public struct AutoDefaultStruct
{
    public int Number { get; set; }

    public AutoDefaultStruct
    {

    }
}

Generic Attributes

An attribute with a generic type can be used as part of an attribute within a class as a fully constructed type.

public class Attr<T1> : Attribute { }

public class GenericAttribute

{
    [Attr<string>]
    public void myClass ()
    {

    }
}

Extended MAUI Support and Blazor Hybrid

At the time of writing, .NET MAUI is in preview 13. The official release of MAUI will ship with .NET 7 but based on .NET 6 with tooling and performance improvements.

Suggested Reading - What Is .NET MAUI

Blazor Hybrid Support allows us to take existing Blazor Components such as Blazorise (https://blazorise.com/docs/components/) or a WPF or WinForms application and bundle them into a desktop application using a webview control with access to all underlying hardware APIs. It will allow developers to use web technologies to build desktop applications with access to system resources such as the local file system or a webcam.

Containerized Images

In .NET 7, the developer's experience with building and deploying containerized applications will be simplified regarding the setup and configuration required to implement secure authentication and authorization while improving the performance of application startup and runtime execution.

    # create a new project and move to its directory
    dotnet new blazorwasm -n my-container-app
    cd my-container-app

    # add a reference to a (temporary) package that creates the container
    dotnet add package Microsoft.NET.Build.Containers

    # publish your project for linux-x64
    dotnet publish --os linux --arch x64 -
    p:PublishProfile=DefaultContainer

    # run your app using the new container

    docker run -it --rm 5010:80 my-container-app:1.0:0

We also expect to see a preview of Microsoft Orleans, a cross-platform framework for distributed applications.

Other Improvements & features

Let's take a look at some improvements enhancements in .NET 7

Performance Improvements

Additional performance improvements in .NET 7 have made it faster and more efficient. Already, .Net 6 has huge improvements in performance with JIT, AOT, inlining method calls, and devirtualization, and .Net 7 will take this even further. This will improve the performance of containerized applications without altering your source code running in the cloud.

Official HTTP 3 Support

Http 3 was shipped as a preview feature in .Net 6 & will be a part of .Net 7 & enabled by default. In future .Net 7 preview versions, we’ll see performance improvements & additional TLS features. The HTTP/3 specification isn't finalized and behavioral or performance issues may exist in HTTP/3.

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.ConfigureKestrel((context, options) =>
{
    options.ListenAnyIP(5001, listenOptions =>
    {
        listenOptions.Protocols = HttpProtocols.Http1AndHttp2AndHttp3;
        listenOptions.UseHttps();
    });
});

This code configures port 5001 to:

Use HTTP/3 alongside HTTP/1.1 and HTTP/2 by specifying HttpProtocols.Http1AndHttp2AndHttp3 . - Enable HTTPS with UseHttps . HTTP/3 requires HTTPS.

Minimal APIs Improvements

Minimal APIs were introduced in .Net 6 to allow you to create lightweight APIs without the overhead of controllers. These APIs have seen massive improvements with the introduction of the new Microsoft.AspNetCore.OpenApi package to provide APIs for interacting with the OpenAPI specification in minimal APIs.

Also, endpoint filters will allow you to implement crosscutting concerns that you can only do with controllers using action filters today.

Will Blazorise Components Support .NET7

Blazorise 1.1.0 will ship with support for .NET 7 to implement required keywords and INumber interfaces for generic components like NumericEdit and NumericPicker.

Should You Migrate To .NET 7?

Applications running in .NET Core 3.0 or 3.1 must migrate to .NET 6 at the very least, as it is the current version with LTS. Support for .NET Core 3.1 will end in December 2022.

Applications written in .NET 5 should also migrate to .NET 6 as support for .NET 5 ended in May 2022.

Applications running on .NET 6 do not need to migrate unless your you want to take advantage of specific features .NET7

You can use the preview SDK for .NET 7 to test compatibility for your application and Nuget packages before you make migration decisions.

Guide: Create A Login Page In 5 Minutes Using Blazorise Components

James Amattey — Mon, 08 Aug 2022 14:15:00 +0000

Guide: Create A Tabbed Login and Register Page With Blazorise

This post will demonstrate how to use Blazorise Components to embed a login and registration form into an HTML tab. I will also show how to ensure data quality by validating form submissions. We will focus on just the structure and markup of the user interface, which is intended to demonstrate the use of Blazorise components and does not cover advanced topics such as tokens, cryptography, and hashing.

What is a login page?

The login page is an entry point to a web application and grants authorized users access to application resources and functionality.

According to the Open Web Application Security Project Foundation Top 10, the confirmation of the user's identity, authentication, and session management is critical to protect against authentication-related attacks, which is currently no. 7 on the OWASP Top 10.

Security starts with design, whether architecturally or via the UI and the structure and layout must be designed and properly implemented to ensure user information is exchanged quickly and securely.

Creating the login page

The page is structured by using Blazorise Tabs to have both the login and registration form on the same page. That way, new and existing users can be onboarded to the platform without needing to navigate to a different page.

Blazorise components use semantic HTML elements and this gives meaning to both the browser and the developer. For SEO-intensive applications, semantic HTML is a better option than non-semantic elements such as div and span.

1. Prerequisites

To begin, scaffold a new Blazor WebAssembly project if you already don't have any. Follow our How to create a Blazorise WASM application: A Beginner's Guide to learn how to setup Blazor WASM with Blazorise components.

2. Create A Sidebar Menu Item.

To make sure your login page is accessible, you need to add a <nav link> to your sidebar menu.

You can create a new one from scratch by copy/pasting the snippet below into the NavMenu.razor file or edit any of the preexisting div-class elements. The second option might affect other pages in the project.

<div class="nav-item px-4">
    <NavLink class="nav-link" href="login">
        <span class="oi oi-list-rich" aria-hidden="true"></span>Login
    </NavLink>
</div>

3. Create a razor page.

In the Pages folder of your Blazor project, create a new razor file and name it Login.razor

Copy and paste the code snippet below to create the markup.

<Tabs SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged">
    <Items>
        <Tab Name="login">Login</Tab>
        <Tab Name="register">Register</Tab>
    </Items>
    <Content>
        <TabPanel Name="login">
            Place form here
        </TabPanel>
        <TabPanel Name="register">
            Place Form Here.
        </TabPanel>
    </Content>
</Tabs>

The Tabs element allow users to navigate to different sections of a single-page application. We embedded the login and register forms into tabs to allow users to switch easily without creating a single page for each.

The Tab Items represent the various tab menus. It is used to contain the name of the tab.

In the Content element, you can embed other elements or components to complete the markup of the tab. In our case, we will use the TabPanel component to build out our login form and place the content of the actual login.

Now define the selectedTab variable in the @@code block section of the razor page.

@code{
    string selectedTab = "login";

    private Task OnSelectedTabChanged( string name )
    {
        selectedTab = name;

        return Task.CompletedTask;
    }
}

Click here to read more about Blazorise Tabs Component

4. Adding Fields

After creating the tabs component, we have to fill it with content. Since we are building a login form, the Field component will be embedded into the Tab Content element.

<Field>
    <FieldLabel>Email</FieldLabel>
    <TextEdit @bind-Text="@email" Placeholder="Enter email..." />
</Field>
<Field>
    <FieldLabel>Password</FieldLabel>
    <TextEdit @bind-Text="@password" Placeholder="Enter Password.." />
</Field>
<Field>
    <Check TValue="bool" @bind-Checked="@rememberMe">Remember Me</Check>
</Field>

Notice how we used the Fields component used to layout input elements. The purpose of the Field component is to give a form elements proper structure that includes standardized spacing like padding and margin. Without it, we would have to handle spacing manually.

You can repeat the same code for the register tab and add or remove fields based on your project needs.

After creating form fields, add a Button component to submit user input.

<Button Color="Color.Primary">Login</Button>

5. Implementing Validation

Now that we have structured both the login and register tabs, we have to ensure that users enter the correct data. The Validation component allows you to verify user inputs by finding and correcting errors such as email or password length. It guides the user to inform the correct form of data.

You can either validate through method handlers or data annotations.

The code snippet below illustrates how you can validate the email field using the method handlers.

<Validations @ref="@loginValidationsRef" Mode="ValidationMode.Manual" ValidateOnLoad="false">
    <Validation Validator="ValidationRule.IsEmail">
        <Field>
            <FieldLabel>Email</FieldLabel>
            <TextEdit @bind-Text="@email" Placeholder="Enter email...">
                <Feedback>
                    <ValidationNone>Please Enter Your Email. </ValidationNone>
                    <ValidationSuccess>Email is good</ValidationSuccess>
                    <ValidationError>Please Enter A Valid Email</ValidationError>
                </Feedback>
            </TextEdit>
        </Field>
    </Validation>
    <Validation Validator="ValidationRule.IsNotEmpty">
        <Field>
            <FieldLabel>Password</FieldLabel>
            <TextEdit @bind-Text="@password" Placeholder="Enter Password.." />
        </Field>
    </Validation>
    <Field>
        <Check TValue="bool" @bind-Checked="@rememberMe">Remember Me</Check>
    </Field>
</Validations>

Add variable definitions in the @@code section of the razor page

@code{
    string name;
    string email;
    string password;
    bool rememberMe;
}

Final Example

By the end, your razor page should look something like this.

And the full code that includes a register page.

<Tabs SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged" Pills FullWidth>
    <Items>
        <Tab Name="login">Login</Tab>
        <Tab Name="register">Register</Tab>
    </Items>
    <Content>
        <TabPanel Name="login">
            <Card>
                <CardBody>
                    <CardTitle>
                        Welcome Back, Please Login
                    </CardTitle>
                </CardBody>
                <CardBody>
                    <Validations @ref="@loginValidationsRef" Mode="ValidationMode.Manual" ValidateOnLoad="false">
                        <Validation Validator="ValidationRule.IsEmail">
                            <Field>
                                <FieldLabel>Email</FieldLabel>
                                <TextEdit @bind-Text="@email" Placeholder="Enter email...">
                                    <Feedback>
                                        <ValidationNone>Please Enter Your Email. </ValidationNone>
                                        <ValidationSuccess>Email is good</ValidationSuccess>
                                        <ValidationError>Please Enter A Valid Email</ValidationError>
                                    </Feedback>
                                </TextEdit>
                            </Field>
                        </Validation>
                        <Validation Validator="ValidationRule.IsNotEmpty">
                            <Field>
                                <FieldLabel>Password</FieldLabel>
                                <TextEdit @bind-Text="@password" Placeholder="Enter Password.." />
                            </Field>
                        </Validation>
                        <Field>
                            <Check TValue="bool" @bind-Checked="@rememberMe">Remember Me</Check>
                        </Field>
                    </Validations>
                </CardBody>
                <CardBody>
                    <Button Color="Color.Primary" Clicked="@OnLoginClicked">Login</Button>
                    <Button Color="Color.Secondary">Forgot Password</Button>
                </CardBody>
            </Card>
        </TabPanel>
        <TabPanel Name="register">
            <Card>
                <CardBody>
                    <CardTitle>
                        New Here? Create An Account
                    </CardTitle>
                </CardBody>
                <CardBody>
                    <Validations @ref="@registerValidationsRef" Mode="ValidationMode.Manual" ValidateOnLoad="false">
                        <Validation Validator="ValidationRule.IsNotEmpty">
                            <Field>
                                <FieldLabel>Name</FieldLabel>
                                <TextEdit @bind-Text="@name" Placeholder="Enter Your Name" />
                            </Field>
                        </Validation>
                        <Validation Validator="ValidationRule.IsEmail">
                            <Field>
                                <FieldLabel>Email</FieldLabel>
                                <TextEdit @bind-Text="@email" Placeholder="Enter Your Email">
                                    <Feedback>
                                        <ValidationNone>Please Enter your email.</ValidationNone>
                                        <ValidationSuccess>Email is valid</ValidationSuccess>
                                        <ValidationError>Enter Valid email </ValidationError>
                                    </Feedback>
                                </TextEdit>
                            </Field>
                        </Validation>
                        <Validation Validator="ValidationRule.IsNotEmpty">
                            <Field>
                                <FieldLabel>Password</FieldLabel>
                                <TextEdit @bind-Text="@password" Placeholder="Enter Password" />
                                <FieldHelp>Password Strength: <Text TextColor="TextColor.Danger">Strong</Text></FieldHelp>
                            </Field>
                        </Validation>
                    </Validations>
                </CardBody>
                <CardBody>
                    <Button Color="Color.Primary" Clicked="@OnRegisterClicked">
                        Create Account
                    </Button>
                </CardBody>
            </Card>
        </TabPanel>
    </Content>
</Tabs>

@code {
    Validations loginValidationsRef;
    Validations registerValidationsRef;

    string selectedTab = "login";

    string name;
    string email;
    string password;
    bool rememberMe;

    async Task OnLoginClicked()
    {
        if ( await loginValidationsRef.ValidateAll() )
        {
            // do the real login here

            await loginValidationsRef.ClearAll();
        }
    }

    async Task OnRegisterClicked()
    {
        if ( await registerValidationsRef.ValidateAll() )
        {
            // do the real login here

            await registerValidationsRef.ClearAll();
        }
    }
}

Resource

You can get the source code of the sample from the LoginPageDemo in Blazor demo on GitHub.

Conclusion

Registration and login are essential components of web security. Form validation also helps users to submit the correct data and increases data quality in the process.

This post demonstrated how to embed login and registration forms into a tab element. We also showed how you could guide users to enter the correct data into your forms using validations.

From the post, we established how easy it is to build modern web functionality with Blazorise components in a few lines of code. We invite you to try Blazorise components for free or apply for a license on commercial products and get assistance from a dedicated Blazorise Mentor.

A Beginner's Guide To .NET MAUI

James Amattey — Wed, 27 Jul 2022 08:52:00 +0000

Excerpt

This article provides a beginner level introduction to .NET MAUI and explores the history behind its evolution and what makes it a compelling choice for teams developing with tools in the .NET ecosystem.

Introduction

When I first heard about MAUI, I kept referring to the shape-shifter, demigod of the wind and sea and hero of men from my favourite animated movie, Moana.

Initially, I thought it was Microsoft's attempt to venture into animation movies, but at during the announcement of .NET 6, i realized that MAUI is an attempt to conquer the multi-platform market with the emergence of tools such as electron.js and increase market adoption for the C# language.

.NET MAUI or MAUI is a multi-platform framework for native desktop and mobile applications.

MAUI is an acronym that means Multi-platform App UI and expands on its definition and what it was created to do.

Similar to the demigod, MAUI is a shape-shifting UI framework that changes UI icons to match the native environments by relying on native system UI components.

With MAUI, developers can build applications that run on Android, iOS, Windows and macOS, while sharing a single source code.

Origin of MAUI

MAUI is a progression Microsoft's Xamarin project, which was created for cross-platform mobile application development for both Android and iOS platforms.

The lines between native and cross platform developments are getting blurry with tools that help you to deploy a single codebase for different platforms.

Frameworks such as React Native and Flutter have championed the cross-platform market, with Xamarin following closely behind.

What Happened To Xamarin.Forms

Xamarin was founded in 2011 and saw an increased community support because it allows developers to quickly start making apps without having to find out multiple languages.

Xamarin forms however was deprecated in November 2021 and moveit into the core product offering, starting with the discharge of .Net 6.

If you previously worked with Xamarin.Forms, getting started with MAUI will be seamless as it still utilises the same c# and XAML markup language.

In a subsequent blog, we will discuss how to move your Xamarin.Forms project to MAUI.

What's New In MAUI

Starting from .NET 6, MAUI comes fully integrated tooling and support in Visual Studio 2022, Visual Studio for Mac 2022 and Rider.

You can either create a standalone MAUI app or a MAUI Blazor application. Further details on creating a MAUI app to follow subsequently.

What Can You Build With MAUI

MAUI extends Xamarin.forms to build multi-platform apps. This means that with one code-base, your app can run on iOS and Android as mobile apps and at the same time run on Windows and MacOS as desktop apps.

.NET MAUI provides a collection of controls that can be used to display data, initiate actions, indicate activity, display collections, pick data, and more. In addition to a collection of controls, .NET MAUI also provides:

An elaborate layout engine for designing pages.
Multiple page types for creating rich navigation types, like drawers.
Support for data-binding, for more elegant and maintainable development patterns.
The ability to customize handlers to enhance the way in which UI elements are presented.
Cross-platform APIs for accessing native device features. These APIs enable apps to access device features such as the GPS, the accelerometer, and battery and network states.
Cross-platform graphics functionality, that provides a drawing canvas that supports drawing and painting shapes and images, compositing operations, and graphical object transforms.
A single project system that uses multi-targeting to target Android, iOS, macOS, and Windows.
.NET hot reload, so that you can modify both your XAML and your managed source code while the app is running, then observe the result of your modifications without rebuilding the app.

Conclusion

Cross-platform and multi-platform frameworks are here to stay as the lines of native platform develop get blurry with every new innovation and are a worthy alternative to rapid application development and speed to market for small teams on limited resources.

This is MAUI's first stable release so we will keep an eye on updates from Microsoft with regards to future roadmap of MAUI.

If you want to quickly build out rich user interfaces with MAUI Blazor, reach out to our team and we will help you get started quickly with our tested and production-ready UI components.

What Is Blazor WASM?

James Amattey — Tue, 19 Jul 2022 14:45:34 +0000

Excerpt

This article builds on the concepts of WebAssembly as an integral part of Blazor WASM and explores what Blazor WASM is, how it works, the problems it solves, its features and the kind of applications it is suited for.

Introduction

Blazor WASM (or Blazor WebAssembly) is a single-page web application framework that allows you to build single page web applications. Built as part of the .NET Core ecosystem, Blazor uses C# to generate dynamic content for rich client-experience.

How Blazor WASM Works

Traditionally, all web pages are structured with HTML, styled with CSS and use Javascript to introduce dynamic interactivity. C# as a language was not built to run natively in browsers. However, with the presence of WebAssembly, the browser can now host the dotnet runtime, which makes it possible to run and execute C# Code.

What is The Problem With Javascript in The Browser

It is true that Javascript is the native language web browsers and can run in the frontend and backend. But is it really necessary to run c# in the browser?

The following highlight the benefits of running C# in the browser.

Full Stack Enablement

The dotnet core ecosystem provides one of the most secure and most resilient server side implementations. It ranks highly among the most popular backend frameworks with its implementation of ASP.NET.

By extending the .NET runtime into the browser, Microsoft enabled a true full stack experience to allow teams to use the same knowledge and class libraries they are familiar with from the c# language on both stacks.

Easier Integration

In web development, there are developers who focus on either the client side or server side. Whilst code classes do not need to know the implementation details of other classes, developers on the client side hand need knowledge about server-side implementation, and this can sometimes prove difficult using two languages, especially when one is strongly typed and the other is not.

By using Blazor WASM, the client-side and server-side can share a common code base in the same language, which can integrate easily with each other. Client-side developers will have an understanding of server-side logic and how to seamlessly integrate and implement it.

Reduced Development Costs

Programming languages take years to learn and master. As developers do not come cheap, finding and paying developers is a strategic decision for small teams. Having a team of skilled developers who can switch between client and server side applications without losing any understanding of both sides enhances collaboration which is vital for small teams.

Click here to discover how a Blazorise Mentor can quickly help your development teams scale up rapid application development using Blazorise Components.

Enhanced Code Reuse

The DRY Principle is one of the simplest ways to prevent and reduce code smells and spaghetti code. By not having to rewrite new code, coupling is reduced and future changes do not affect other parts of the codebase.

Entire .NET libraries can be shared, and consumed in Blazor WASM. Making use of existing logic, functionality, and capabilities allows for developers to focus on innovating more as they're not required to re-invent the wheel.

Features Of Blazor WASM

Blazor WASM has a unique set of features that make it a compelling choice for client-side development.

Reusable Components

With Blazor, you can create components for use across your application. Components are building blocks for a user interface such as a forms, cards, tables, grids and many more.

These components can be defined once, and called multiple times. At the very core, components are a group of HTML elements that specify the structure of a site.

<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

The above is dropdown menu component with Blazorise. This makes development easier and faster and can be called anytime you want to create a dropdown menu, without having to write lots of code.

Hot Reload

Hot reload triggers the browser to refresh automatically when changes are made to the code base. This helps to improve developer productivity, as they do need to restart the application to see the effects of those changes.

Fast Performance

Blazor WASM on the first load takes a while as runtime environment and other dependancies have to be downloaded. Then onwards, Blazor WASM relies on the downloaded runtime to execute at near native speeds in the browser, making applications faster

What Can Be Built With Blazor

This section highlights some of the best use cases for Blazor

Progressive Web Application

A progressive web application is an application that can be installed and run like a native application. Building PWAs helps teams provide native desktop and mobile experiences for their applications without building specifically for those environments.

For small teams, Blazor can be a way to save up costs without sacrificing performance and delivery.

Single Page Applications

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages

In Blazor WebAssembly, when the client makes a request, it is served up as a bit of HTML, CSS, and JavaScript — like all other web apps. The blazor.webassembly.js file bootstraps the app and starts loading .NET binaries which can be viewed coming over the wire in the browser's Network tab.

Offline Applications

Because Blazor WASM downloads the runtime and dependencies on startup, most of the rendering is done on the client side. As a result, it can function well in scenarios where there is no internet or limited connection.

Debunking Common Misconceptions

Just like all other SPA frameworks, Blazor WASM comes with its shortcomings. Here are a few to take note off

Huge Payload and Slow Initial Size

Blazor WASM applications can get big quickly due to the runtimes required to run C# in the browser. This big size can cause the initial startup to be slow, and this can take a toll on a poor internet connection. Fortunately, this only happens once therefore subsequent loads are faster and smaller as the majority of the heavy lifting has already been done.

No More Javascript

The goal of Blazor WASM is to allow C# to run in the browser, but that does not mean you will not require javascript at all. Blazor WASM cannot interact directly with the DOM or have access to Browser APIs, and as a result these need to be called using javascript, in a process called Javascript Interop. As Javascript is the native language for browsers, it will be required to access browser-based functionalities and

Conclusion

Blazor helps teams build rich UI interfaces. If your team uses Blazor, reach out to us on how we can help you speed up your development with our production-ready UI components.

Exploring WebAssembly, The Underlying Technology Behind Blazor WASM.

James Amattey — Sat, 16 Jul 2022 08:31:46 +0000

Overview

Blazorise is a component library that harnesses the power of Blazor to create rich user interfaces. These components are production grade and highly customizable and allow development teams to deliver client-side applications faster.

Built as a feature of the ASP.NET ecosystem, Blazor WASM allows developers to create rich client-side applications with the same C# used with classic ASP.NET server-side applications.

The key unique selling proposition of Blazor WASM is WebAssembly, which is tooted as faster than client-side javascript and the DOM.

In this post, take a deeper dive into WebAssembly and explain what it is and why its integration with Blazor makes it a faster alternative to popular javascript frameworks such as React and Angular.

What Is WebAssembly

In the words of Jay Phelps “WebAssembly is neither web nor assembly”. In simple terms, WebAssembly or WASM, is a stack-based virtual machine.

Breaking this even further, WebAssembly is a virtual machine that runs on a block of memory. This means that runtimes are responsible for handling operations at the stack level unlike with VMware or VirtualBox which pretend to be computers and handle operations at the CPU level.

The WebAssembly binary format is a virtual machine format. Virtual machine runtimes are responsible for executing operations within, as the name implies, a virtual machine.

WebAssembly was created to boost performance. It is designed to be a compilation target for low-level languages.

[The WebAssembly specification (https://webassembly.github.io/spec/) maintains that the standards apply to more than just the browser host, but also to any other compliant host runtime (what the specification refers to as an embedder).

Features Of WebAssembly

Now that we have covered the basic architecture of WebAssembly, let's explore why Microsoft's decision to build Blazor WASM with WebAssembly benefits your client's user experience.

Speed

The job of the most basic WebAssembly interpreter is to read operation codes and, in response, push or pop values on and off the stack. These kinds of operations are incredibly fast and efficient. A wasm interpreter can supply basic math, memory, and stack management capabilities and thus do its job very quickly and with very little overhead.

This means that Blazorise components will load quickly when users visit your web application as interactions happen at near-native speeds.

Lightweight

An underrated part of WebAssembly is how its operation code are processor and operating system agnostic, a functionality that means that its modules can run and be deployed anywhere, on any architecture, in any operating system (or even microkernel!), so long as the host is a valid WebAssembly runtime.

This means that business logic encoded into the wasm should work anywhere, and even more importantly, the functions your wasm module imports from the host should also be able to work anywhere.

Small

WebAssembly can produce incredibly small artifacts.

The deployment size for wasm is exponentially smaller than most of what we’re building today in the world of containers or serverless “bundles”, and that can have a huge impact on how we think about and plan our distributed applications.

Secure

Wasm code is not allowed to escape the confines of its sandbox. There are no language primitives for accessing the operating system, reading from memory that might belong to another process, communicating with a network, communicating with hardware, the kernel, or an operating system of any kind.

Anything a wasm module does outside its sandbox must go through a host import, a function it asks the host to call. This means the host is free to deny that call at any time. Host imports are the lynchpin of nearly all of the actor models and cloud-native functionality. They are as powerful as they are secure.

What WebAssembly Is Not

With the introduction of every new and shiny piece of technology, it’s easy to assume that it will solve all of our problems. But realistically, every new technology has shortcomings and use cases it does not favour.

It’s true that we can do an amazing amount of things with WebAssembly, but hopefully, through exploring its limitations and true boundaries, you’ll have a better appreciation of exactly which problems it is ideal for solving, and which problems it can only solve with the use of additional code generation, shims, and fancy tricks.

Many of the early WebAssembly technology demonstrations are full of “smoke and mirrors”—illusions or hand-waving where a lot of complexity is hidden from the viewer. As you continue to learn about WebAssembly, wasm code, and technology demonstrations, keep a keen and critical eye out for the boundaries. Watch for where the core WebAssembly stops and the duct tape, bubble gum, and mirrors start.

Conclusion

In this post, we have explored what WebAssembly is and why it makes Blazor WebAssembly a very complete option for frontend development. We highlighted the features of WASM along with a few use cases and concluded the post by explaining what WebAssembly is not and where it is not viable.

In our next post, we will take a deeper dive in Blazor WebAssembly and why you should consider it for your client-side applications.

Shifting From A Product To A Platform Mindset

James Amattey — Sun, 12 Jun 2022 01:03:27 +0000

As product managers, we have to constantly redefine the value our products bring to the market and diversify pricing strategies.

This in many cases, is difficult to execute with just one software product. By definition, a product manager is responsible for the vision and strategy of a product.

Product vision focus on the value proposition and strategy focuses on the roadmap of how to achieve that vision.

In the case of Spotify as a use case

Spotify is a web based platform that allows music lovers to enjoy unlimited supply of music from their favorite artistes available 24/7, whilst delivering new content to keep them engaged and find new sounds.

Users can listen to music for free or pay a monthly subscription for additional features.

This is the heartbeat of the Spotify platform, but the subsidy side of its platform business. I say this because the largest offering on Spotify Premium is the individual plan, which is $9.99

Spotify for Artistes

A service that allows artists to connect with their fans by delivering insights on who, where and how their songs are streamed. This provides data for artistes when doing their marketing, planning tours etc.

Spotify Ad platform
Spotify allows business to send targeted audio campaigns to users based on their location, interests and activity on the platform.

Spotify partners
Spotify grants distribution partners such as Ditto Music the ability to send music from artistes to their streaming platform.

3rd Party Marketing Platforms
Spotify also allows marketing platforms such as Linkfire, Feature.Fm the ability to track streaming data analytics using tracking links for marketing purposes on platforms such as Facebook and Google.

From the above, you immediately notice how Spotify's value proposition is spread across the other products in its platform and how each works towards the platform vision and a total service of the music industry. This way, you cannot talk about a music industry without mentioning Spotify.

Stuffing your value proposition into one product leads to feature junk, value dilution and blurry product position which will be difficult to market. As a user, when you go to Spotify's streaming platform, you know what to expect. This keeps the vision in check and the strategy on point.

Fact is, if you build a stand alone product that has no connection to the existing tech ecosystem, you stifle your product growth and make it difficult to cross the mystical adoption chasm.

Having a value proposition that meets the demands of all these users solidifies your value proposition and establishes your competitive advantage.

Bringing this to African continent, I believe one of the product that has nailed the ecosystem growth mentality is Flutterwave.

Flutterwave Case Study

At its core, Flutterwave is a payment infrastructure. It allows users to perform financial transactions with users across the world. This transaction enables the exchange of value between various actors in the economy.

It bridges the gap between banks, users and international remittance. This proposition as their MVP made sense, but in order to grow, they had to shift from a product to a platform.

Flutterwave Store

Users send money to exchange value. This value can be a physical or digital good or a service. Whilst Flutterwave gives developers the ability to integrate their payment gateway into their websites or apps through their APIs and SDKs, 90% of users, have no business hiring developers to flush out an ecommerce website and integrate their payment into the website.

The intricacies of managing an ecommerce infrastructure, something which Jumia, the biggest ecommerce platform in Africa, has being able to do is not everyone. And the Flutterwave store is a solution to that problem.

It helps you to list your products, set pricing, give discounts and manage your inventory. As a small business owner, that is what you need in most cases.

From a product standpoint, the Flutterwave store falls on the subsidy side of the network effect. Flutterwave does not charge for its use, but it is one effective tactic to ensure product market penetration.

Virtual Cards

Virtual cards are an interesting technology. I am not an expert in the space but from a product perspective, I understand what is going on.

Flutterwave like I stated earlier, is a payment infrastructure. This means that, when users receive money, Flutterwave has the ability to store it into the wallet until its is cleared by all necessary parties for eventual transfer into the target bank account.

Whilst in the Flutterwave wallet, it now acts as an enabler for continuous relationship moments with the customer. By creating a virtual card, users can use their Flutterwave balance to fund their cards. These cards can then be used for online commerce, in the same way physical cards do.

This way, the value keeps circulating in the Flutterwave ecosystem until it eventually makes it way out of the system.

Whilst i am not affiliated to Flutterwave, using the product extensively and strategically brings me to the conclusion that some of these revelations are trade secrets and i will not like to expose them.

To conclude, one of the pillars of product growth is community enablement. But for a product to further its adoption journey and foster user retention, there must be a shift to ecosystem/platform enablement. Just as Youtube users create an audience to allow Youtube content creators to create content for youtube users to consume and data from this consumption is used by advertisers to create targeted campaigns, which is where Youtube makes its money, so must you as a product (platform) manager think of best ways to create and increase the network effect of your products and activate its growth.

The North Star Metrics That Establishes Product Market Fit

James Amattey — Thu, 26 May 2022 23:59:49 +0000

Disclaimer: Products mentioned are purely for reference purposes.

Product management is a pool of jargon. Of all the roles available in tech, I can say with certainty that the role of a PM is the most jargonised of them all.

I am not going to use this blog post to verify that statement, but if there was ever a master jargon in product management, then product market fit is that one.

A simple google search will introduce you to a plethora of definitions and submissions about product market fit.

Let’s apply algorithmic thinking and break the large problem into small chunks and tackle each separately to define such a vague statement.

Product

A product is a good or service that satisfies a need or solve a problem. Satisfying a need and solving a problem are two different things. For example, Ordering pizza through a food delivery app satisfies the need for food in my stomach at a particular time, but does not solve the problem of me not knowing how to cook.

Knowing whether your product solve a problem or satisfies a need is a good place to start.

Market

A market is a place or platform where products are exchanged for things of value at a price that makes sense to the buyer and seller.

Product Market Fit

In my words, product market fit is a measure of how users are using and willing to pay to continue to use your product. Using and paying are in present continuous term and this satisfies the rule of thumb for the long term success of any product.

By this definition, the best combination of metrics to achieve the North Star for any product are retention, recurring revenue, average spend per user and customer satisfaction.

Let's dive into each of them quickly

Retention

Retention is the measure of how many users continue to find use and value for your product. It is a measure of whether or not your product delivers on its value proposition and the size of problem it solves.

User-related metrics such as active users and Repeat Purchase Ratio, are associated with retention but can be tricky as the usage cycle for some products as not as frequent as others. Example, in the case of Tinder, a popular dating app, i will delete or find no use for the app if i find a perfect match and we take our conversations off the app.

In the case of Tinder, metrics such as time spent per user, messages sent per user would be a great measure of success.

Strategies for these kind of products will vary significantly to products in the e-commerce, ride-hailing or food delivery space where users are more likely to return even after a specific value is transferred.

For example, in an e-commerce space, active users, returning users, churned users, number of abandoned carts and purchase frequency are good ways to track your product market fit.

A niche product such as a shoe e-commerce store may not see the same metrics as an online giant like Jumia or Amazon and both have to be approached differently.

Recurring Revenue

Recurring venue is the average amount of revenue earned per month per user over a period and is expected to continue into the future. Recurring revenue targets can be marginal higher or lower than projections, but can be predicted and are usually stable unless there is a shift in market dynamics.

Metrics such as monthly recurring Revenue, Annual recurring revenue, Revenue churn rate can provide you some insights into the value your product brings to your users.

Depending on the product and usage frequency, recurring revenues can be calculated daily, weekly, monthly, quarterly or annually.

Transactional Size, Volume and Frequency

These are the biggest indicators of market size and PMF. They affect and are affected by each other due to their proximity.

Transaction Size

The transactional size is the unit measure for the delivery of value. Transaction size will determine the how many users you need to achieve your revenue targets and influence the volume and frequency.

A $10,000 transactional size needs only 100 users to achieve $1m MRR, unlike the 100,000 users it requires to achieve the same result for a $10 transactional size. Size of transaction will also influence the marginal revenue your company will have, especially in the event where there are multiple beneficiaries involved in a transaction. This is so common in fintech products.

Transaction Frequency

Transactional frequency depicts the number of times a transaction occurs between the user and the product. Ideally, at every value exchange, there should be a transaction, to validate the user proposition.

In contrast to transaction size, the frequency of purchase will be lower for $10,000 product as compared to $10 transactional size.

Time between purchases and number of purchases are some of the ways to track purchase frequency.

Transaction Volume

This is the total number of individual size items in a single transaction order. They can be fixed or vary depending of the transaction size.

For context, take a food delivery app.

The unit price of a medium pizza is the transactional size.
If a user places an order of pizza, coke and some chicken wings, the total price of this order becomes the volume.
How often a user places an order is the transaction frequency.

Conclusion

A product needs to be useful for what the market is today whilst anticipating and adapting to the changing needs of the market.

Creating a Django Movie Recommendation App Using Jaccard Index

James Amattey — Mon, 28 Mar 2022 01:32:04 +0000

My goals for this project

Understand the key components of the django framework
Describe The Basic Principles of a recommendation system
Build a simple movie recommendation app, by applying Jaccard Algorithm based on content filtering mechanism

Github Repository https://github.com/jamattey/Django-Movie-Recommendation

Tech Stack

Django Backend
HTML Frontend
Bootstrap CSS
SQLite Database

About Django Framework

Django splits its application logic into the following three Model-View-Controller like components:

Django Model manages data modelling and database mapping as well as business logic to process data

Django View describes which data is presented, but not how it is presented. Typically, Django View delegates and renders an HTML page, which describes how the data is presented

Django Template generates dynamic HTML pages to present data

When a client sends a request, the Django server routes the request to the appropriate view based on the Django URL configuration and acts as a traditional Controller

Django Models
Django uses Django Models to represent database tables and map them to objects, such as process is called ORM. Django Models tries to make the developer’s life easier by abstracting databases and mapping objects and methods into tables and SQL queries automatically.

You just need to define classes as Django Models, and will be later mapped to database tables accordingly. Then you can simply use Django Models API to perform CRUD on the database tables without writing a single line of SQL

Django Views
In Django, a View is essentially a Python function. Such a function takes a Web request and applies the necessary logic to generate a Web response, such as the HTML contents of a Web page, a redirect, a 404 error, an XML document, an image, or any other Web response. Often, View interacts with Django Models to get required data in the form of QuerySet or objects to generate a Web response.

Django Application Development Process

First, I created a Django project which is a container for Django apps and settings. Here, I can decide to create and add one or more Django apps to the project.

In Core Development, I created Django models to model the data and created views to determine which data need to be presented to the UI. I also map the request URLs to our views so Django can forward requests to corresponding views via URLs. Then we can start designing and building the UI.

This movies are populated in a CSV. The site does not host actual movies but its is a recommendation engine using regular code and a database.

This recommendation engine does not use Machine Learning.......yet 😂😂

To make the recommendation actually work, I needed to first mark the movies a user has watched using Django Admin site. Then I wrote a recommendation algorithm based on watched movies.

Marking Watched Movies In Django Admin

Run Django Server
visit admin url app_url/admin
Then you click into the movie entry and mark it as watched and press Save.

Run make_recommendations CMD to Generate Recommendations

For any recommendation systems, the key idea is always to come up with a good algorithm/model to predict if a specific user will like or dislike his/her unseen item, as shown in the following screenshot:

There are probably hundreds of good recommendation algorithms and can be roughly divided into two categories:

Content filtering based:

The content filtering based recommendation algorithms assume you may like a new movie if you have watched very similar movies before. Or based on your user profile (like age, gender, interests), it will try to find new movies matching your profile.

Collaborative filtering based:

The collaborative filtering algorithms assume you may like a new movie if other users similar to you (similar profile or watched similar movies) have watched this movie.

In this project, we will use content filtering based algorithm, and we will try to recommend unwatched/new movies to you if they are similar to your watched movies.

How do we calculate such movie similarity

Here we will use Jaccard similarity which is probably the simplest but very effective method to calculate similarity between two sets.

Jaccard Similarity is defined as the size of intersection of two sets divided by the size of union of that two sets.