DEV Community: Marius Muntean

Operationalize TensorFlow Models With ML.NET

Marius Muntean — Thu, 17 Aug 2023 22:50:35 +0000

Let’s have a look at how to use a pre-trained TensorFlow model with ML.NET to make landmark predictions.

Get the Model

First we’re going to go ahead and pick a pre-trained model. There are multiple good sources for pre-trained models like Hugging Face and tfhub. We’re going to use a model from tfhub that predicts north American landmarks from images — https://tfhub.dev/google/on_device_vision/classifier/landmarks_classifier_north_america_V1/1

Transform and Optimize the Model

Theoretically we could start using the model as it is, but we can do better. The TensorFlow model isn’t easy to use on all possible platforms like Linux, macOS and Windows, and on all CPU architectures like ARM64.

ONNX is a format for representing machine learning models in a portable way. Additionally, ONNX models can be easily optimized and thus become smaller and faster.

The easiest way to transform the downloaded TensorFlow model to an ONNX model is to use the tool tf2onnx from https://github.com/onnx/tensorflow-onnx

Follow the instructions to install it (use a dev container with python 3.10 to keep your machine clean) and then run this command:

python -m tf2onnx.convert --opset 16 --tflite lite-model_on_device_vision_classifier_landmarks_classifier_north_america_V1_1.tflite --output lite-model_on_device_vision_classifier_landmarks_classifier_north_america_V1_1.onnx

You should now have a file called lite-model_on_device_vision_classifier_landmarks_classifier_north_america_V1_1.onnx that contains the optimized ONNX model. The file size shrank from 50.9MB to 42.7MB. Nice!

If you happen to start with an ONNX model that you still want to optimize, then you can use the official ONNX optimizer tool https://github.com/onnx/optimizer.

Make the ONNX Model Available to ML.NET

In this step we’re telling ML.NET what the inputs and outputs of the model are and we’re packaging the model in a way that ML.NET can work with it.

Inputs and Outputs

The documentation already tells us that the “Inputs are expected to be 3-channel RGB color images of size 321 x 321, scaled to [0, 1]”, and that the output is “A vector of 99424 similarity scores”.

We need to find out the exact input and output tensor names. A tool like Netron makes this super easy. Open the original .tflite and/or the ONNX model in Netron and click the Model Properties button in the lower left corner.

For our model the input is called uint8_image_input and the output is called transpose_1. We’ll make a note of those.

Package Model for ML.NET

Create a new console application, add these package references and restore them

<PackageReference Include="Microsoft.ML" Version="2.0.1" />
<PackageReference Include="Microsoft.ML.ImageAnalytics" Version="2.0.1" />
<PackageReference Include="Microsoft.ML.OnnxRuntime" Version="1.15.1" />
<PackageReference Include="Microsoft.ML.OnnxTransformer" Version="2.0.1" />

Next, to make our life easier and the code tidier, let’s define a few constants and types for the model input and output.

public static class LandmarkModelSettings
{
    public const string OnnxModelName = "lite-model_on_device_vision_classifier_landmarks_classifier_north_america_V1_1.onnx";
    public const string Input = "uint8_image_input";
    public const string Output = "transpose_1";

    public const string MlNetModelFileName = "landmark_classifier_onnx.zip";
    public const string LabelFileName = "landmarks_classifier_north_america_V1_label_map.csv";
}

public class LandmarkInput
{
    public const int ImageWidth = 321;
    public const int ImageHeight = 321;

    public LandmarkInput(Stream imagesStream)
    {
        Image = MLImage.CreateFromStream(imagesStream);
    }

    [ImageType(width: ImageWidth, height: ImageHeight)]
    public MLImage Image { get; }
}

public class LandmarkOutput
{
    [ColumnName(LandmarkModelSettings.Output)]
    public float[] Prediction { get; set; }
}

The code is relatively self explanatory. What I’d like to point out is that on the tfhub page, where we’ve downloaded the model from, there’s also a .csv file with the labels for each prediction result. I saved it locally with the name from the constant LabelFileName.

Now we’re ready to describe the inputs and outputs from ML.NET, we’re also loading the ONNX model and saving it in ML.NET’s own format

// Configure ML model
var mlCtx = new MLContext();

var pipeline = mlCtx
    .Transforms
    // Adjust the image to the required model input size
    .ResizeImages(
        inputColumnName: nameof(LandmarkInput.Image),
        imageWidth: LandmarkInput.ImageWidth,
        imageHeight: LandmarkInput.ImageHeight,
        outputColumnName: "resized"
    )
    // Extract the pixels form the image as a 1D float array, but keep them in the same order as they appear in the image.
    .Append(mlCtx.Transforms.ExtractPixels(
        inputColumnName: "resized",
        interleavePixelColors: true,
        outputAsFloatArray: false,
        outputColumnName: LandmarkModelSettings.Input)
    )
    // Perform the estimation
    .Append(mlCtx.Transforms.ApplyOnnxModel(
            modelFile: "./" + LandmarkModelSettings.OnnxModelName,
            inputColumnName: LandmarkModelSettings.Input,
            outputColumnName: LandmarkModelSettings.Output
        )
    );

// Save ml model
var transformer = pipeline.Fit(mlCtx.Data.LoadFromEnumerable(new List<LandmarkInput>()));

mlCtx.Model.Save(transformer, null, LandmarkModelSettings.MlNetModelFileName);

Let’s walk through the code.

First we’re telling ML.NET to resize any image it receives to the size that the downloaded model expects; in this case 321x321 pixels. The resized image should be placed in the “resized” column. From the “resized” column we’re extracting the image pixels into a 1D array of floats and we’re outputting that data into the column **transpose_1 **because that’s what the model expects. In the last step we’re invoking the model to make the prediction.

Finally, the model is saved with the name landmark_classifier_onnx.zip. It now shrank even more to 39.6MB.

Load the ML.NET Model and Make a Prediction

Before we continue, we should make sure that the ML.NET model actually works as expected. For this we’re loading the model from the **landmark_classifier_onnx.zip **file and we’re feeding it a .jpg file with the statue of liberty. The prediction should contain multiple entries, but the one with the highest probability should be our statue of liberty.

// Load ml model
var mlCtx2 = new MLContext();
var loadedModel = mlCtx2.Model.Load(LandmarkModelSettings.MlNetModelFileName, out var _);
var predictionEngine = mlCtx2.Model.CreatePredictionEngine<LandmarkInput, LandmarkOutput>(loadedModel);

// Predict 
var sw = new Stopwatch();
sw.Start();
await using var imagesStream = File.Open("Landmarks/Statue_of_Liberty_7.jpg", FileMode.Open);
var prediction = predictionEngine.Predict(new LandmarkInput(imagesStream));
Console.WriteLine($"Prediction took: {sw.ElapsedMilliseconds}ms");

// Labels start from the second line and each contains the 0-based index, a comma and a name.
var labels = await File.ReadAllLinesAsync(LandmarkModelSettings.LabelFileName)
    .ContinueWith(lineTask =>
    {
        var lines = lineTask.Result;
        return lines
            .Skip(1)
            .Select(line => line.Split(",").Last())
            .ToArray();
    });

// Merge the prediction array with the labels. Produce tuples of landmark name and its probability.
var predictions = prediction.Prediction
        .Select((val, index) => (index, probabiliy: val))
        .Where(pair => pair.probabiliy > 0.55f)
        .Select(pair => (name: labels[pair.index], pair.probabiliy))
        .GroupBy(pair => pair.name)
        .Select(group => (name: group.Key, probability: group.Select((p) => p.probabiliy).Max()))
        .OrderByDescending(pair => pair.probability)
    ;

// Output
var predictionsString = string.Join(Environment.NewLine, predictions.Select(pair => $"name: {pair.name}, probability: {pair.probability}"));
Console.WriteLine(string.Join(Environment.NewLine, predictionsString));

As you might have noticed, I had a picture named Statue_of_Liberty_7.jpg in my Landmarks folder.

What’s custom for this model is that the prediction contains duplicates, i.e. the output array of floats contains multiple entries for the same landmark. The tfhub documentation page says to just use that prediction of a landmark that has the highest probability. Depending on the model that you chose, you might not need to do this and simply assigning a label to each position from the output might be enough.

On my M1 Pro Macbook Pro the output looks like this

Prediction took: 108ms
name: Liberty Island, probability: 0,9176943
name: New York Harbor, probability: 0,798547
name: Liberty State Park, probability: 0,7981717
name: The Terminal Tower Residences, probability: 0,6972256

Congrats 🎉, you’re ready to use the model! Read on if you want to integrate it in an AspNet.Core application.

Expose it as a Web API

Create a new AspNet.Core Web API project and add the following package references

<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.9"/>
<PackageReference Include="Microsoft.Extensions.ML" Version="2.0.1" />
<PackageReference Include="Microsoft.ML" Version="2.0.1" />
<PackageReference Include="Microsoft.ML.OnnxRuntime" Version="1.15.1" />
<PackageReference Include="Microsoft.ML.OnnxTransformer" Version="2.0.1" />

The last ones are necessary only at runtime. If you skip them you’ll get errors like

System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
— -> System.IO.FileNotFoundException: Could not load file or assembly ‘Microsoft.ML.OnnxTransformer, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51’. The system cannot find the file specified.

File name: ‘Microsoft.ML.OnnxTransformer, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51’

An unhandled exception has occurred while executing the request.
System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
— -> System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
— -> System.TypeInitializationException: The type initializer for ‘Microsoft.ML.OnnxRuntime.NativeMethods’ threw an exception.
— -> System.DllNotFoundException: Unable to load shared library ‘onnxruntime’ or one of its dependencies. In order to help diagnose loading problems, consider setting the DYLD_PRINT_LIBRARIES environment variable:
dlopen(

You might expect that loading the model looks exactly like we did before when we made our first prediction, but Microsoft recommends something different. Since the PredictionEngine isn’t thread safe and expensive to create, we should use a **PredictionEnginePool **—link to the docs.

Make sure to have the constants, input and output types available and add this line in to the Program.cs

builder.Services
    .AddPredictionEnginePool<LandmarkInput, LandmarkOutput>()
    .FromFile(Path.Combine(
        Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)!,
        LandmarkModelSettings.MlNetModelFileName
    ));

It add a PredictionEnginePool for our input and output types for the ML.NET model from the specified path.

You can organize your code as is best for your project, but I added a dedicated singleton service that loads the labels and sorts them

internal class NorthAmericanLabelProvider : INorthAmericanLabelProvider
{
    private Lazy<string[]>? _lazyLabels;

    public string[] GetLabels()
    {
        _lazyLabels ??= new Lazy<string[]>(() =>
        {
            var labelFilePath = Path.Combine(
                Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)!,
                LandmarkModelSettings.LabelFileName);
            var labelLines = File.ReadAllLines(labelFilePath);
            return labelLines.Skip(1)
                .Select(line => line.Split(","))
                .Select(lineTokens => (Index: int.Parse(lineTokens[0]), LandmarkName: lineTokens[1]))
                .OrderBy(tuple => tuple.Index)
                .Select(tuple => tuple.LandmarkName)
                .ToArray();
        });

        return _lazyLabels.Value;
    }
}

It reads the content of the file, parses and sorts it only once using a Lazy.

Next, I created a service called NorthAmericanLandmarkPredictor that does the actual prediction. It makes use of the PredictionEnginePool that we’re registered earlier and of the INorthAmericanLabelProvider

internal class NorthAmericanLandmarkPredictor : INorthAmericanLandmarkPredictor
{
    private readonly PredictionEnginePool<LandmarkInput, LandmarkOutput> _predictionEnginePool;
    private readonly INorthAmericanLabelProvider _northAmericanLabelProvider;

    public NorthAmericanLandmarkPredictor(PredictionEnginePool<LandmarkInput, LandmarkOutput> predictionEnginePool, INorthAmericanLabelProvider northAmericanLabelProvider)
    {
        _predictionEnginePool = predictionEnginePool;
        _northAmericanLabelProvider = northAmericanLabelProvider;
    }

    public List<LandmarkPrediction> PredictLandmark(Stream imageStream)
    {
        var labels = _northAmericanLabelProvider.GetLabels();

        // Make prediction
        // Post process prediction - the output contains duplicates, so we should group by label and take the entry with the highest probability.
        // Docs - https://tfhub.dev/google/on_device_vision/classifier/landmarks_classifier_north_america_V1/1
        var landmarkOutput = _predictionEnginePool.Predict(new LandmarkInput(imageStream));
        return landmarkOutput.Prediction
            .Zip(labels, (probability, landmarkName) => (LandmarkName: landmarkName, Probability: probability))
            .GroupBy(tuple => tuple.LandmarkName)
            .Select(group => new LandmarkPrediction(
                group.Key,
                group.MaxBy(tuple => tuple.Probability).Probability
            ))
            .OrderByDescending(prediction => prediction.Probability)
            .ToList();
    }
}

Finally, in a controller we can inject the INorthAmericanLandmarkPredictor and make predictions from uploaded images

[ApiController]
[Route("[controller]")]
public class LandmarkPredictionController : ControllerBase
{
    private readonly INorthAmericanLandmarkPredictor _northAmericanLandmarkPredictor;

    public LandmarkPredictionController(INorthAmericanLandmarkPredictor northAmericanLandmarkPredictor)
    {
        _northAmericanLandmarkPredictor = northAmericanLandmarkPredictor;
    }

    [HttpPost("NorthAmerica")]
    public async Task<List<LandmarkPrediction>> Get(IFormFile image)
    {
        var prediction = _northAmericanLandmarkPredictor.PredictLandmark(image.OpenReadStream());
        return prediction;
    }
}

In the built in Swagger UI this looks like this

Conclusion

That’s all folks!

Now you’re ready to operationalize many different ml models with ML.NET and expose them in a nice Web API.

You can find the whole source code at https://github.com/mariusmuntean/Operationalize.ML.NET

It is under MIT license so you’re free to use it at your heart’s content.

Hit me up on Twitter/X if you’d like to buy me a coffee 😁

Structure that MAUI App!

Marius Muntean — Mon, 27 Feb 2023 20:38:41 +0000

Premise

I recently found myself giving DotNet MAUI a whirl. The goal was to build a desktop app that connects to RabbitMQ, then sends and receives messages that were protobuf serialized. I got to the goal fast and efficiently enough.

Here’s the source code https://github.com/mariusmuntean/ProtoRabbit

And this is how it looks like on Windows

Motivation

What I didn’t like was that the main page of the app was a mess, tons of little UI elements, databound to the viewmodel. The viewmodel itself wasn’t much better. It had code to create connections, handle sending and receiving messages and so on. “There must be a way to structure this” I thought, and there was. Read on to find out what I settled on.

Step #1 — Custom controls

I first split up the code in three custom controls:

ConnectionControl — Creates a new connection to RabbitMQ.
SendMessageControl — Sends messages to an exchange.
SubscribeAndReceiveMessageControl — Displays messages.

This cleaned up the main page so much that it only contained a Grid layout and the three custom controls. Nice and simple, have a look.

Step #2 — Nested ViewModels

Now it was the MainPageViewModel’s turn. I almost never used nested viewmodels in the past, except for displaying collections of objects. But this is exactly what helped here to tame the complexity.

Basically, each custom control got a dedicated viewmodel and the MainPageViewModel is their parent:

ConnectionViewModel — Established and stops the RabbitMQ connection.
SendMessageViewModel — Defines what message templates can be used and sends protobuf serialized messages to RabbitMQ.
SubscribeAndReceiveMessageViewModel — Manages “subscriptions” to a certain message type from a certain Exchange in RabbitMQ.

This is how the MainPageViewModel looks like after extracting the three sub-viewmodels.

Fin

That’s all I had to say about this topic this time.

As always feel free to browse my GitHub repo and play with the code. It’s all MIT licensed, so go nuts with it.

If you enjoyed this post, follow me to stay up to date.

Redis as a Database — Data Migration With RedisOM, RedisGears and Redlock

Marius Muntean — Sun, 22 Jan 2023 18:28:02 +0000

Systems evolve and so does their data. Instead of making our code endlessly complex just to be able to work with old data models and new ones, we can simply massage the existing data into a new shape to better fit the newest domain models. This is the definition of data migration I’m going with today.

In this article I’m using Visualizer, my pet project, to show how to update existing data to conform to a new data models.

I’m going to make use of another Redis module, called RedisGears to perform the data transformation itself. Another cool thing that I’m going to use is Redlock, a distributed lock algorithm for Redis.

Background

I talked about Visualizer in my Redis as a Database series, so I encourage you to read the other articles as well. The gist of it is that Visualizer ingests tweets directly from Twitter, stores them in Redis and offers a GraphQL API to search and retrieve them and has multiple GraphQL subscriptions to get live updates.

You don’t really need read up on Visualizer to understand this article, but if you’re enjoying this one, then you‘d enjoying the others as well.

Current Data Model

We’re not going to look at the entire data model of the application. Instead, we’re going to look at how a single tweet is modeled and stored.

You may notice the Document attribute. That’s because I’m using Redis OM to store and retrieve data. The experience is similar to using Entity Framework.

More importantly, the class defines properties for a unique tweet ID; the actual text of the tweet; the username of the author and the tweet language.

All these properties have either the Indexed or the Searchable attributes, making the tweets easily and efficiently searchable in Redis.

This is how it looks in Redis

Target Data Model

My intention is to extend the data model with a property that contains the ‘sentiment’ of the tweet. Think machine learning based sentiment analysis.

Please note the new property called Sentiment. It is indexed as well, for performant searching and contains a hint for Redis OM (which uses Newtonsoft.JSON under the hood) how serialization should be handled.

The TweetSentiment itself is just an enum.

Migration Strategy

Schema

So now the TweetModel has the Sentiment property. We need to tell Redis about this.

The way I’m doing it in Visualizer is by droping the existing Redis OM (or rather RediSearch) index and recreating an updated version of it.

I’m making use of a IHostedService from Asp.Net, which runs at startup, but before the application accepts network requests.

The first part is done. Our data model is now aware of the Sentiment *property and so is the RediSearch module. Whenever a new tweet is added, its *Text and Lang properties can be passed to an ML model to perform a sentiment analysis and the result can be stored in the Sentiment property. Thanks to the updated index, queries that include the Sentiment should be blazindly fast 😉.

Data

At this point, new tweets are stored together with their estimated Sentiment. They’re also searchable. But what about those tens of thousands of tweets that are already in Redis? Those were stored before the new fancy sentiment analysis feature was released, and thus have no value in their Sentiment property.

We might try to programatically load every tweet that has no Sentiment value, then compute and store it. This would be slow though and probably increase the monthly cloud bill due to all the data that needs to be shoved back and forth. If only there were a way to do this more efficiently.

Here is where RedisGears comes into play. It allows us to run arbitrary Python code (no C# yet 😔) directly on Redis.

My approach is inspired from DbUp. In my application I’m going to have a folder where I place all my data migration scripts. The scripts are numbered such that the order of their execution is clear. Whenever a script is executed successfully, its name is permanently recorded. Scripts are only executed when the application starts up and only those scripts are executed whose name was not previously recorded.

I think that the data should be migrated before the schema migration is performed. So, right before starting the Asp.Net application I’m triggering the data migration like this

The extension method is there just to keep the Program.cs *clean and looks like this

Instead of doing everything in the extension method, I’m resolving *IDataMigrationService to benefit from dependency injection

Instead of pasting the entire implementation of the IDataMigrationService here, I want to ease you into it.

First have a look at the data migration project and the folder with data migration scripts

Notice the extension method class, the numbered scripts and the DataMigratorService class.

Now, the DataMigratorService needs to determine which of the available scripts have been executed already and which are new ones. To get the list of available scripts it just looks into the DataMigration directory and enumerates the files. They all have their build action set to Content. The already executed scripts can be found in a set (data structure) in Redis, under the PerformedMigrationsKey.

Then, it returns the new scripts, sorted alphanumerically in an ascending order.

Next, if any new scripts were detected, one by one they have to be executed and their name has to be stored in the Redis set from before.

The new scripts have been executed and the application can now proceed to start. There’s one small problem though. Depending on the deployment strategy, multiple instances of the application might start up simultaneously and thus try to perform the data migration concurrently. If the data migration scripts aren’t idempotent (that’s up to you), then you’ll have unexpected/corrupted data.

To account for this, I’m making use of RedLock, a distributed lock algorithm that is guaranteed to be deadlock free.

The first thing that the DataMigratorService tries to do it to acquire a named distributed lock. I named mine PerformedMigrationsLock. It will continuously retry to acquire the lock and when it succeeds, it gives the lock an expiry time. The expiry time is pushed ahead as long as the application lives and guarantees that the lock is released even when the service crashes and fails to explicitly release the lock..

Thus, MigrateData() looks like this

How do the scripts look like?

My script to populate the Sentiment field of the stored json documents looks like this

Most RedisGears python scripts start with a GearsBuilder instance. On that instance you define the actual transformations that shall be performed on each loaded key and a pattern that decides which keys to even consider.

Notice that I’m using random values to populate the Sentiment field. You might compute the values for your fields based on other fields or actually use an ML model to perform the transformation. E.g. you could make use of m2cgen to transform trained models to pure python code and load them in RedisGears to be executed in a GearsBuilder* instance. Another option is to pull out the big guns and go straight to RedisAI.

Pro tip: if you’re following a zero downtime deployment strategy, you will have old and new service instances running in parallel. The new ones might perform schema and data migrations while starting up. For this reason it is best to do a release where you only add new fields to your data model. After all old service instances have been replaced with new ones, you can perform a new deployment in which you remove unused fields from the data model, if necessary.

Conclusion

You saw how I’m doing the schema and data transformations in Visualizer. My project is open source so if you like looking at code more than reading an article here you go https://github.com/mariusmuntean/Visualizer

I hope that the concepts are generic and can be transferred to other projects without too much work. Let me know how you do data migration in Redis and how I can improve this article. The best way to get in touch with me is Twitter (my handle is @MunteanMarius) and GitHub issues.

Give the article a ❤️ and follow me for more Redis content.

Redis as a Database — Live Leaderboards With PubSub and GraphQL Subscriptions

Marius Muntean — Sun, 11 Dec 2022 19:06:00 +0000

Say you’re tracking the score of the players in your game. To each player name you associate a score. I’d be nice to always know who the top 50 or so players are and to get updates if the ranking changes.

To implement such a feature, we can make use of Redis’ Sorted Set data structure, Pub/Sub and GraphQL subscriptions.

This post dovetails with a previous one, called **Redis as a Database — Live Data Updates With PubSub and GraphQL Subscriptions**, so I highly recommend you check that one out first.

TL;DR

I’m using Visualizer, **my pet project that I’ve talked about it in my previous posts about Redis, to show how to implement a leaderboard . The gist of it is that **Visualizer ingests tweets from Twitter’s v2 API and stores them locally, in a Redis instance. Using the many capabilities of Redis, Visualizer offers a set of nice features, including a leaderboard (though in Visualizer it call it differently).

Algorithm: continuously track the top of the leaderboard, compare the current version with the previous one and publish an update in case that there are differences.

Find the backend code here and the frontend code here.

Ranked Hashtags

In Visualizer, instead of a game leaderboard, I’m tracking all hashtags that are used in the ingested tweets. Hashtags are ranked according to their frequency, i.e. the more they’re used the higher their rank will be. The frontend can subscribe to the top n hashtags with a GraphQL subscription. When there is a change in the top n hashtags, i.e. the rank of some hashtags changes, the frontend will receive an update with the current top n hashtags.

Backend

Both Visualizer API and Visualizer Ingestion are involved in offering an up to date list of the top n hashtags.

Whenever the frontend subscribes to the top n hashtags via a GraphQL subscription, Visualizer API keeps track of the subscription amount and the subscription object.

Meanwhile, Visualizer Ingestion might be ingesting tweets. Every encountered hashtag is first added to the hashtags Sorted Set which automatically ranks it and then the hashtag is published with its new rank in the HashtagRanked Pub/Sub channel.

Back in Visualizer API, every time a ranked hashtag message arrives in the HashtagRanked *channel, every subscriber is updated if necessary. For each subscriber, the key to the Sorted Set containing the previous top *n** hashtags is computed. Then, each PreviousRankedHashtagsForAmount:n Sorted Set is compared with the current top n hashtags from the hashtags Sorted Set. In case a discrepancy between the current top n hashtags and the previous top n hashtags is detected, then the current top n hashtags are published to the GraphQL subscription and the PreviousRankedHashtagsForAmount:n *Sorted Set **is overwritten with the current value.

**Note*: there may be a more efficient way of checking if an update has to be sent out to the subscribers using ZDIFF/ZDIFFSTORE (see all sorted set command), but I haven’t tried. Let me know if you’re interested in that.

To finish the backend part, let’s have a look at the GraphQL subscription definition.

Subscribing to topRankedHashtags is handled in GetRankedHashtagsObservable(…) where _t*weetHashtagService.GetTopRankedHashtagsObservable(amount)* is called, which creates or returns an existing subscription for the requested amount (see the first code gist).

Frontend

Visualizer Frontend uses the excellent Apollo client together with the graphql-codegen to make my life easier when working with a graphQL API.

First, the frontend retrieves the current top n hashtags so that it can display something.

But instead of manually calling this query, graphql-codegen generates a nice little hook that I can call

Next, the frontend subscribes to topRankedHashtags.

Which looks like this with the generated hook

From here on nothing super interesting happens. Whenever new data is available from the subscription, the useTopRankedHashtagsChangedSubscription hook triggers a re-render and the current data is shown in a word cloud — permalink to the whole component https://github.com/mariusmuntean/VisualizerFrontend/blob/8db3b9f1770b9ea74a60ac88fedc4a89c0301e71/src/components/rankedHashtagsChanged/liveRankedHashtags.tsx#L130

So the essence of a feature like a live updating leaderboard is to leverage Redis’ Sorted Sets to get an up to date view of the data and compare it to the previous state.

Thanks for reading. If you liked this post give it a ❤️ and follow me to stay up to date with Redis.

Redis as a Database — Live Data Updates with PubSub and GraphQL Subscriptions

Marius Muntean — Sun, 13 Nov 2022 19:37:50 +0000

My pet project, which I named Visualizer and that I use to learn more about Redis, can start ingesting tweets from Twitter’s volume stream or from their filtered stream.

While it is doing so, Visualizer can produce a live stream of all the hashtags that are currently encountered in the ingested tweets and it ranks them too.

In this post I want to go over those parts of the system that handle new tweets, extract and publish the ranked hashtags and finally push them to the frontend to create that nice word cloud.

If you just want to see the code, here’s the GitHub link for the backend and here’s the link to the frontend. Btw. this is my third post on using Redis, so make sure to read the others too.

Visualizer Partial Architecture

Visualizer is made up of three components.

Visualizer Ingestion — An ASP.NET Core 6 service that handles the stream of tweets and stores them in Redis as indexed documents (in JSON format). It also publishes each encountered hashtag together with its rank, i.e. a count of how many times it was ever encountered by Visualizer.

Visualizer API — Another ASP.NET Core 6 service that offers access to the stored tweet data and to the live stream of ranked hashtags. GraphQL is another technology that I love and its subscriptions are ideal to push the stream of ranked hashtags to any consumer.

Visualizer Frontend — A React Typescript + ViteJs SPA to show of Visualizer’s features.

In a future post I’ll talk more about my reasons for this architecture, so follow me no to miss it.

Publishing Ranked Hashtags

As I mentioned, Visualizer Ingestion gets tweets from Twitter’s API v2 and besides persisting them it also publishes any encountered hashtag together with its rank.

The tweet data retrieval isn’t very interesting. Suffice it to say that I’m using Tweetinvi for this.

For every extracted hashtag a few things happen:

Store and Rank: I’m storing every hashtag in a Redis Sorted Set. This Redis data structure has the expected time and space characteristics of a set, with the addition that adding an element multiple times will increase its rank each time. This is excellent for my use case as I don’t have to do much besides pumping all the hashtags in my sorted set.

Here’s the code to get an instance of IDatabase. It is probably best to add it to your DI container.

Afterwards I’m adding the hashtag to a sorted set and I’m telling Redis to increment the rank of this hashtag by 1. Notice that I get the new rank as a response.

Publish Hashtag with Rank: After I got the new rank of the hashtag I’m publishing it. Here I’m making use of Redis’ Pub/Sub which allows me to publish string messages to a channel. This effectively decouples Visualizer Ingestion **from **Visualizer API.

First, you’ll need an ISubscriber instance. Like most reusable objects, I’m adding it to my DI container.

With that subscriber I can then publish my ranked hashtag to a channel

Notice that I’m using a RankedHashtag DTO to represent the hashtag and its rank and that I’m serialising it to a JSON string before publishing. Also notice that I’m using a constant for the channel name. That’s because the constants live in a shared project in the same solution and are reused by Visualizer API.

Consuming Ranked Hashtags

The stream of ranked hashtags is consumed by Visualizer API. It does so by subscribing to the same channel that Visualizer Ingestion uses to publish each hashtag with its current rank.

In a singleton service, I’m registering a handler for new hashtags in that stream

In the handler, each channel message is deserialised to an instance of RankedHashtag *and passed on to any GraphQL subscriber

The *_rankedHashtagStream that you see there is a plain Reactive Extensions ReplaySubject with a buffer of 1

It immediately broadcasts any notification to its subscribers. But who are its subscribers, I hear you asking? Its the GraphQL API users that subscribed to the ranked hashtags; they are the subscribers.

The way that’s done in Visualizer is quite specific to my needs and to the library that I’m using, called GraphQl-Dotnet.

Please notice that the GraphQL rankedHashtag subscription takes an argument called sampleIntervalSec with a default value of 0. That value is used to determine if a subscriber should receive all the ranked hashtags as soon as they come (commonly referred to as real-time, but not in its strict sense), or if the subscriber should receive another stream of ranked hashtags which is obtained by sampling the “real-time” stream every sampleIntervalSec seconds.

Visualizer Frontend

This might be the least interesting part of the system because it only deals with data retrieval and rendering. It uses Apollo Client for React to connect to **Visualizer API **and react-wordcloud to render the data.

At a high level, the frontend retrieves the top 50 hashtags, sorted descendingly by their rank (not shown in this post, but it is a simple sorted set operation). This is in order to have something to display in the wordcloud.

Then it subscribes to the stream of ranked hashtags and whenever a ranked hashtag arrives, it either overwrites one of the existing 50 hashtags or it is added to the same set.

Subscribe to Ranked hashtags

I’m using the codegen feature of Apollo Client to create a nice React hook for subscribing to the ranked hashtags

Then my component is re-rendered every time a new ranked hashtag is available. I’m merging the new ranked hashtag with the initial 50

Ranked Hashtags Wordcloud

Conclusion

Displaying a nice little word cloud involves a few system components and multiple concepts, but each is easy to understand.

Let me know if you like these posts, with more code than usual. Give the post a ❤️ to let me know and follow me not to miss any future posts on Redis.

Redis as a Database — Speed Test with K6

Marius Muntean — Sun, 13 Nov 2022 15:55:36 +0000

In my previous post on using Redis as a Database I mentioned how I’m using it to store and retrieve tweets in the context of Visualizer, my pet project.

Now I want to show some performance characteristics of Visualizer.

Test Setup

The tests were performed on my M1 Pro Macbook Pro with 32 GB of ram, connected to WiFi and on battery power. I’m running both Visualizer microservices in Release mode with Jetbrains Rider, Redis Stack in the command line, Visualizer Frontend in VSCode and the current version of macOS Ventura.

Data Ingestion

Here’s the code to store a single tweet in Redis

This runs in a dedicated microservice and is executed every time a new tweet is retrieved from Twitter’s sample stream. In a future post I’ll present the architecture of Visualizer.

Using RedisInsight I can see that with my current setup I can manage to send around 700 commands per second, mostly storing tweets.

Data Retrieval

Retrieving data is handled by another microservice, which only reads from Redis.

Using K6 I wrote a script that retrieves 10 tweets from the GraphQL API

The results are … a bit disappointing

The average duration of 110 requests, over a period of 6 seconds, is ~3.7 seconds. I definitely need to investigate that. My suspicion is that I’m a bit inefficient with the deserialisation and that the GraphQL API has an inherent overhead.

Fortunately K6 has native support for Redis 😎 so I wrote another K6 script that basically does the same thing that the Visualizer microservice does behind the scenes, i.e. formulate and send a command to Redis to retrieve data from a certain index, sorted and paginated. But this time there’s no deserialization and GraphQL overhead

And the results are much better

FYI, the Iteration_duration includes setup+request+teardown. This time around the average request duration was around 7.6 milliseconds.

With up to 60 concurrent virtual users (a K6 term) Redis managed to serve over 29000 requests in 9 seconds, which works out to be around 3300 requests per second.

Conclusion

The system performed excellently on my battery-powered Macbook Pro, managing to store hundreads of tweets per second.

The read performance through my Visualizer microservice is disappointing and I definitely need investigate this further. Fortunately the problem doesn’t seem to be with Redis, which means I have a change to improve it.

Stay tuned for more updates from my journey in Redisland.

If you liked this post let me know on Twitter 😉 (@MunteanMarius), give it a ❤️ and follow me to get more content on Redis, Azure, MAUI and other cool stuff.

Redis as a Database with Redis OM

Marius Muntean — Sun, 13 Nov 2022 15:53:57 +0000

My newest interest is Redis, an in-memory data store for key-value pairs, streaming, message brokering and a database.

In this post I’ll give you an introduction into using Redis as a normal database. The code snippets will use C# and the final result will look very familiar to anyone who used Entity Framework.

What you’re not getting is a spoon-feeding, instead you’re going to see the relevant parts of Visualizer, a pet project of mine, where I’m using Redis to ingest and query tweets from Twitter’s sample steam.

Tools

Setting up all the tools is beyond the scope of this post, but I still want to mention the most essential things.

Redis Stack: a suite of multiple components, that includes a Redis instance, multiple Redis modules and RedisInsight. Two modules, RediSearch and RedisJSON are essential here, as they allow us to use Redis as a proper DB. The simplest way to get going is to use the official Docker container.

Redis OM .NET: an official .NET library that offers (CLR) object mapping and query translation. I can recommend it wholeheartedly, even though it isn’t perfect. The excellent community and maintainers go above and beyond the call of duty. Ask them anything on the official Discord server.

A good .NET IDE: like VS Code, Visual Studio Proper or Rider.

And finally, a few spare minutes.

Data Modeling

In Visualizer, I’m receiving a stream of tweets, including their many properties and nested data, which represent 1% of the “real-time” tweets.

The fields are described in the official Twitter API documentation, look for Response Fields.

To store and retrieve the data, I’m using Redis OM, which wants a normal C# class whose properties are annotated.

The data model for a single tweet looks like this

You can find the full file here.

Notice that the class is annotated as a Document *with *StorageType JSON. This lets Redis OM know that we want to store instances of this class in a searchable way and in JSON format. The Prefixes is just for our convenience, to make it easier to distinguish the data in Redis, in case that we have multiple document types.

Each property is also annotated, to instruct Redis OM (and indirectly RediSearch and RedisJSON) which fields should be searchable and how exactly.

The attribute RedisIdField is manadatory and you can interpret it as the primary key of a tweet.
Indexed does exactly what you’d expect.
Searchable is powerful, because it allows full text search in the string property.

CascadeDepth tells Redis OM how deep it should look for annotated properties. My TweetModel class has an array of ReferencedTweet instance. The ReferencedTweet class is not marked as a Document because it is nested inside the TweetModel. It will however contain its own annotated properties. That’s why I set the depth to 1.

All attributes are described here.

Create the Index

After the data is modelled, a so-called index needs to be created in Redis.

First, create a RedisConnectionProvider. In my Visualizer project I’m adding one to the DI container with an extension method

Then, let Redis OM send the command that instructs RediSearch/RedisJSON which field is searchable and how. I’m doing it when one of my microservices starts up.

In Redis, the index will have the name tweetmodel-idx. You can list them all by issuing FT._LIST in the Redis CLI or get a detailed explanation of an index with FT.INFO tweetmodel-idx.

Data Storing

After you have a few tweets (I’m using a library called Tweetinvi) you want to store them.

Redis OM makes this easy by offering us a RedisCollection, where T is our data model, e.g. TweetModel. If it helps, this is analogous to a DbSet in Entity Framework,

To get a hold of such a collection, you make use of the RedisConnectionProvider that you registered previously

On it you call InsertAsync() *and provide your *TweetModel instance

That’s it, your tweet is now stored in Redis. You can now have a look at your data with RedisInsight. This is how it looks for me

Filter, Sort and Paginate Tweets

I usually work with relational DBs (mostly Postgres), where filtering, sorting and paginating results is as common as it gets.

In Redis, especially using Redis OM, this is as easy as we’re used to as Entity Framework users.

First, we need a DTO that defines all the necessary filtering, sorting and pagination fields.

Visualizer offers a GraphQL API, hence the “Input” in the DTOs name.

Next, we have to formulate a query based on the DTO and retrieve the tweets that match that query.

First, get a new RedisCollection instance like you saw in the previous section

Then you can start filtering, e.g. by a tweet’s ID

Remember that TweetModel.Text was annotated as Searchable, which allows for full text searches. To filter only tweets that contain a certain word in their text you’d write something like this

Note that there’s no call to Contains() or anything like that, just a simple ==.

The TweetModel.CreatedAt property is Indexed and Searchable

Tweets can be filtered by date like so

A cool feature of Redis is its native support for the geolocation data type. Tweets can include geolocation information and to filter the tweets that are at a certain distance from a location you’d write something like this

Sorting and pagination are nothing special

Finally, you’d want to materialize the query and get your tweets

Visualizer has a simple React frontend that allows to query for tweets

And even to filter them by location

There's More to Come

I’m planning to write a few more posts about Visualizer, where I show Redis’ PubSub, quick ranking with SortedSets and GraphQL subscriptions.

If you liked this post let me know on Twitter 😉 (@MunteanMarius), give it a ❤️ and follow me to get more content on Redis, Azure, MAUI and other cool stuff.

How I prepared for and passed the AZ-900 exam

Marius Muntean — Sat, 27 Nov 2021 15:11:41 +0000

I recently passed the Azure Fundamentals exam (AZ-900) and I decided to share my experience in preparing for and taking the exam

My background

I'm a .NET software engineer and I've worked with various Azure services over the last 6 years. The main services that I use at work are App Service for web APIs with ASP.NET Core, Azure Functions, SignalR, IoTHub, CosmosDB, EvenHub and Azure AD B2C.

Motivation

In time I had the impression that I'm using the same few Azure services over and over again. Every other week a new fancy Azure service would be announced, significantly reducing the time and effort to deliver a customer project, but I never got to use them and after a while I would just forget that they exist.
So I decided to take the AZ-900 knowing that it doesn't go all to deep into any particular service, but instead it covers many different services and topics. I thought about it as a big picture exam.

Preparation

The first thing I did was to follow Microsoft's recommended learning path for this exam. Just scroll down on this page and jump in https://docs.microsoft.com/en-us/learn/certifications/exams/az-900

I quickly realized that some things bored me because I must have used them 100 times, like creating yet another web API. But in other topics I obviously had gaps in my knowledge, e.g. stuff about data governance and details on SLAs.

This took me around a week. After work, after unwinding for a while, I would sit on my couch with my notebook and try to get as far through the learning path as I could. Often times I realized I could keep going in a zombie-like fashion where I would read the text but not really absorb and internalize the information. Usually that's when I stopped for the day.

Next I proceeded to test my knowledge with free online tests. I cannot recommend enough Adam Marczak's site and YouTube channel (https://marczak.io/az-900/). He has videos and tests on all topics that are covered by the AZ-900.

This was probably enough to pass the exam, but for some reason I felt that a dedicated Whizlabs course was necessary 😁. I used this one https://www.whizlabs.com/microsoft-azure-certification-az-900/
And never regretted it. The videos are on point, the labs are clear and it comes with a ton of practice tests. The practice tests really cemented the information for me. I would do a test, then go over the answers, especially those I got wrong and read up on that topic. 👌👌👌

Test day

I scheduled my exam with Pearson VUE, on a Saturday. You will have to install a tool from them that checks you computer and makes sure it has the necessary system requirements, like working speakers, microphone and a webcam.
You'll also be reminded that you have to take the exam in a quiet room, alone, with no distractions in sight (whiteboard, monitors or TVs). You should only have your computer and your ID on the table/desk where you take the exam. Phones should not be in arm's reach.

Exam

You should check into your exam half an hour before it is scheduled to start. I had to provide multiple pictures of my room and desk (from 4 angles) and a valid government ID. The system didn't accept the picture of my ID at first. My pulse started to shoot up, but I retook the photo and uploaded it again. It went through.
Immediately after finishing the checkin I was allowed to start the exam, a few minutes before it was scheduled. I was pumped and so I went for it.

The tool that verified my computer is the same tool that you use to take the exam. Actually it is the only application that is allowed to run while you take the exam. It will complain if it detects other running applications. Its UI is like a wizard that shows you some information and you have to confirm that you read and accept it. Sometimes you can go back and other times you cannot.

Right before the actual exam questions show up, your webcam will be turned on and record you. It is an anti cheat measure.

When I got to the actual exam questions a timer showed up and started counting down from 45 minutes. I had 35 questions. They're mostly multiple choice questions. Sometimes you have to drag a box with a label from the left of the screen to the matching concept on the right of the screen. Everything's explained to you in the app.
I found all the questions clear and fair. No surprize there.
What surpized me was that the proctor (that person that watches you through the webcam while you take the exam) suddenly contacted me via chat. That was my first and only notice that I should not take my eyes off the screen, otherwise he'd stop the exam right then and there and I would not be able to retake it.
I was intimidated a bit and didn't have the inclination to ask what triggered that reaction. I can only guess that I was thinking about a question and had that 10000 miles look on my face.

I powered through. You can mark any questions for review. When you're done answering all of them you will be shown every question and your answer. I presume that if I had marked any question for review, that I could still change my answers at this point in the test because there was plenty of time left and the timer was still running.
After "reviewing" all of my answers (they were greyed out for me so I just clicked next, 35 times) I submitted them.
Immediately I was greeted with my score of 865, I had passed 😁 🎉

Conclusion

My impression is that the exam was good for me. I got to refresh some terms and concepts that I hadn't had contact with in years and I learned some new things too.
The exam isn't very technical, so anyone hoping to sharpen their skills by preparing for this exam should just keep in mind that this is a Fundamentals exam. Even so, I think it is beneficial for many software engineers.
In hindsight the Whizlabs course would have been enough for me. The site often has discounts and if you use the Honey browser extension you'll be able to get courses at less than half the price 😉
Speaking of technical skills, I'm starting to think that the AZ-204 could be the next achievable certification for me.

Good luck!

Build the Game of Life with Blazor

Marius Muntean — Sun, 29 Aug 2021 17:28:03 +0000

Welcome to my series of posts where I'm building the famous Game of Life with different UI technologies.
In this post I'll show you how it is done in Blazor Webassembly.

Let me know in the comments if you're interested in seeing implementations in Xamarin.Forms/MAUI, WPF or Flutter.

Here's the code: https://github.com/mariusmuntean/GameOfLife

Prerequisites

.NET - I bet you knew this one. Out of curiosity I went with .NET 6 Preview 7.
Visual Studio Code or Visual Studio ('proper' or 'for Mac') or Rider - I really wanted to use VSCode for this but OmniSharp would not play ball so I resorted to Rider.

Create the Blazor Webassembly project

If you're using Visual Studio proper or Visual Studio for Mac or even Rider, creating the project is just a series of clicks to create a new solution, then choose Blazor Webassembly App as the project type and give it a name.

I went the CLI way and used this command to create the project

dotnet new blazorwasm -o gol.blazorwasm

Start the project, just to make sure that everything works as expected.
You now have the option to choose between a normal run with or without the debugger and the hot-reload feature.
I went with hot-reloading. Just open a terminal/CLI window (my IDE has an integrated one) and run this command

dotnet watch

You should now be able to update files in your IDE and upon saving, they should be picked up automagically and the browser window will refresh.
At some point you'll be asked this

Do you want to restart your app - Yes (y) / No (n) / Always (a) / Never (v)?

I chose Always.

Business Logic

In your project create a new directory and call it Models. Inside Models create an enum called CellState

public enum CellState
{
    Dead,
    Alive
}

The game consists of a 2D grid where each slot is taken up by a cell. A cell can be either dead or alive. Now add the Cell class, in another file

using System;
using System.Text.Json.Serialization;

namespace gol.blazorwasm.Models
{
    public class Cell
    {
        /// <summary>
        /// For the deserializer.
        /// </summary>
        /// <param name="currentState"></param>
        /// <param name="nextState"></param>
        [JsonConstructorAttribute]
        public Cell(CellState currentState, CellState nextState)
        {
            CurrentState = currentState;
            NextState = nextState;
        }

        public Cell(CellState currentCellState = CellState.Dead)
        {
        }

        public CellState CurrentState { get; private set; } = CellState.Dead;
        public CellState NextState { get; set; } = CellState.Dead;

        public void Tick()
        {
            CurrentState = NextState;
            NextState = CellState.Dead;
        }

        public void Toggle() => CurrentState = CurrentState switch
        {
            CellState.Alive => CellState.Dead,
            CellState.Dead => CellState.Alive,
            _ => throw new ArgumentOutOfRangeException()
        };
    }
}

The CurrentState of a Cell tells us how the cell is currently doing. Later we'll have to compute the new state of each Cell based on the state of its neighbors. To make the code simpler, I decided to store the next state of the Cell in the NextState property.
When the game is ready to transition each Cell into its next state, it can call Tick() on the Cell instance and the NextState becomes the CurrentState.
The method Toggle() will allow us to click somewhere on the 2D grid and kill or revive a Cell.

Let's talk about life. At the risk of sounding too reductionist, it's just a bunch of interacting cells. So we'll create one too

using System;
using System.Collections.Generic;
using System.Linq;

namespace gol.blazorwasm.Models
{
    using CellsChanged = Action<Cell[][]>;

    public class Life
    {
        private readonly Cell[][] _cells;
        private readonly int _rows;
        private readonly int _cols;

        public Life(int rows, int cols)
        {
            if (rows <= 0 || cols <= 0)
            {
                throw new ArgumentOutOfRangeException(nameof(rows) + " " + nameof(cols), "the rows and columns cannot be 0 or less");
            }

            _rows = rows;
            _cols = cols;
            _cells = new Cell[rows][];
            for (var row = 0; row < rows; row++)
            {
                _cells[row] ??= new Cell[cols];
                for (var col = 0; col < cols; col++)
                {
                    _cells[row][col] = new Cell(CellState.Dead);
                }
            }
        }

        public Life(Cell[][] initialCells, CellsChanged onNewGeneration = null)
        {
            var newRows = initialCells.GetLength(0);
            var newCols = initialCells.GetLength(0);

            if (newRows <= 0 || newCols <= 0)
            {
                throw new ArgumentOutOfRangeException("one or both dimensions of the provided 2d array is 0");
            }

            _cells = initialCells;
            _rows = newRows;
            _cols = newCols;
        }

        public Cell[][] Cells => _cells;
    }
}

Let's break down what we just created. Life is a class that keeps track of a bunch of cells. For that we're using Cell[][] _cells which is just a 2D array of our simple Cell class. Having a 2D array allows us to know exactly where each cell is and who its neighbors are.
Traversing the 2D array can be cumbersome so I keep track of its dimensions with the fields _rows and _columns.

There are two ways in which I want to be able to create a new Lifeinstance

From scratch - meaning I just tell it how many rows and columns of Cells I want and the Life just initializes its 2D _cells array with Cells in the Dead state.
Basically, that's what the first constructor does.
From a file - think of a saved game state. We'll later save the state of the game into a file and then load it up. When loading the saved game state, we need to tell the Life instance what each of its Cell's state should be.

At this point we can create a new Life, where all the cells are either dead (first constructor) or in a state that we received from 'outside' (second constructor).

Our Life needs a bit more functionality and then it is complete. The very first time we load up the game, all the cells will be dead. So it would be nice to be able to just breathe some life into the dead cells.
For that, Life needs a method that takes the location of a Cell and toggles its state to the opposite value.

    public void Toggle(int row, int col)
    {
        if (row < 0 || row >= _rows)
        {
            throw new ArgumentOutOfRangeException(nameof(row), row, "Row value invalid");
        }

        if (col < 0 || col >= _cols)
        {
            throw new ArgumentOutOfRangeException(nameof(col), col, "Column value invalid");
        }

        _cells[row][col].Toggle();
    }

The Life instance just makes sure that the specified location of the Cell makes sense and then tells that Cell to toggle its state. If you remember, the Cell class can toggle its state, if told to do so.

The last and most interesting method of Life implements the 3 rules of the Game of Life.

Any live cell with two or three live neighbours survives.
Any dead cell with three live neighbours becomes a live cell.
All other live cells die in the next generation. Similarly, all other dead cells stay dead.

public void Tick()
{
    // Compute the next state for each cell
    for (var row = 0; row < _rows; row++)
    {
        for (var col = 0; col < _cols; col++)
        {
            var currentCell = _cells[row][col];
            var cellNeighbors = GetCellNeighbors(row, col);
            var liveCellNeighbors = cellNeighbors.Count(cell => cell.CurrentState == CellState.Alive);

            // Rule source - https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life#Rules
            if (currentCell.CurrentState == CellState.Alive && (liveCellNeighbors == 2 || liveCellNeighbors == 3))
            {
                currentCell.NextState = CellState.Alive;
            }
            else if (currentCell.CurrentState == CellState.Dead && liveCellNeighbors == 3)
            {
                currentCell.NextState = CellState.Alive;
            }
            else
            {
                currentCell.NextState = CellState.Dead;
            }
        }
    }

    // Switch to the next state for each cell
    for (var row = 0; row < _rows; row++)
    {
        for (var col = 0; col < _cols; col++)
        {
            var currentCell = _cells[row][col];
            currentCell.Tick();
        }
    }
}

private List<Cell> GetCellNeighbors(int row, int col)
{
    var neighbors = new List<Cell>(8);

    for (var rowOffset = -1; rowOffset <= 1; rowOffset++)
    {
        for (var colOffset = -1; colOffset <= 1; colOffset++)
        {
            if (rowOffset == 0 && colOffset == 0)
            {
                // Skip self
                continue;
            }

            var neighborRow = row + rowOffset;
            var neighborCol = col + colOffset;
            if (neighborRow < 0 || neighborRow >= _rows)
            {
                continue;
            }

            if (neighborCol < 0 || neighborCol >= _cols)
            {
                continue;
            }

            neighbors.Add(_cells[neighborRow][neighborCol]);
        }
    }

    return neighbors;
}

Let me quickly walk you through the code. I'm traversing the 2D array of Cells, making use of the rows and columns. For each cell I'm looking at its neighbors and based on the 3 game rules I'm computing the next state of the Cell.
When I'm done with that, I'm traversing the 2D grid again (I know, not very efficient of me, but I went for readable code) and telling each Cell to switch to its next state.

We're done with the business logic. It's time for the UI.

UI

Similarly to React (see the previous post in this series), Blazor also uses a hierarchy of components. The similarities don't end here, in Blazor you can also mix code with markup and even go code-only, though I wouldn't recommend this.

When you're mixing code and markup you're making use of the Razor syntax. There's usually a @code{}' block that holds UI logic and some markup which can also be sprinkled with @directives that allow you to write inline code that emits HTML.

As far as I know the location of the @code{} block is not important and I prefer having it immediately after the @using and @inject statements. The markup lives just below the @code{} directive. That's also similar to React.

Canvas drawing in Blazor

My first attempt was to use one of the Blazor libraries for drawing onto the canvas. These two looked the most promising

Blazor.Extensions.Canvas - https://github.com/BlazorExtensions/Canvas
Excubo.Blazor.Canvas https://github.com/excubo-ag/Blazor.Canvas

They're both easy to set up and you'll have some pixels on your canvas in no time. The issue is that I needed to draw hundreds of rectangles every time the data in the game changes. To produce each rectangle, a call from the C# code to Javascript is necessary, which still has a big overhead.
I tried batching too, but no dice.

In the end I gave up on these libraries and conceded that in Blazor development you still have to use Javascript, despite Microsoft's promise "Use only C# in the browser, no more JavaScript!".

SimpleLife.razor

This component will use a Life instance to render the game. The Life instance will be created by the component or be loaded from a file.

Let's start by adding a Components directory. Inside this directory add a new razor Component and call it SimpleLife.razor. If you're adding it as a simple text file and then renaming its, just make sure that the Build Action is set to "Content".

Add these @using statements to the top of the file

@using gol.blazorwasm.Models
@using Microsoft.AspNetCore.Components.Web

The first one just helps us in using our modes. The second one made Rider (my IDE) happy.

Now let the framework inject the Javascript runtime interop service. Add this @inject directive below your @usings

@inject IJSRuntime _jsRuntime;

We'll use this interop service in a bit.

Get ready, we're adding the @code block. Below @inject add this this

@code
{
    private const int SpaceForButtons = 30;

    ElementReference _canvasRef;

    private Life? _life;
    private int _cellEdgeAndSpacingLength;
    private double _cellEdgeLength;
    private int _canvasWidth;
    private int _canvasHeight;

    [Parameter]
    public int Columns { get; set; }

    [Parameter]
    public int Rows { get; set; }

    [Parameter]
    public int PixelWidth { get; set; }

    [Parameter]
    public int PixelHeight { get; set; }

    protected override void OnParametersSet()
    {
        InitData();
    }

    private void InitData()
    {
        _life = new Life(Rows, Columns);

        // Glider
        _life.Toggle(2, 2);
        _life.Toggle(3, 2);
        _life.Toggle(4, 2);
        _life.Toggle(4, 1);
        _life.Toggle(3, 0);

        UpdateCellAndCanvasSize();
    }

    private void UpdateCellAndCanvasSize()
    {
        _cellEdgeAndSpacingLength = Math.Min(PixelWidth / Columns, (PixelHeight - SpaceForButtons) / Rows);
        _cellEdgeLength = 0.9 * _cellEdgeAndSpacingLength;

        _canvasWidth = _cellEdgeAndSpacingLength * Columns;
        _canvasHeight = _cellEdgeAndSpacingLength * Rows;
    }
}

(Read in young Keanu Reeves' voice) Whoa what's going on here?
We're declaring a constant for the vertical space to reserve for some buttons.
Then we're declaring a variable _life for the Life instance that's going to be rendered.
The next two variables hold the values for a rendered Cell's edge length, with and without the space between cells.
The last variables will hold the exact canvas dimensions, in pixels.

Next up are the properties. If you pay close attention you'll notice the [Parameter] attributes. This means that they're going to be passed in from outside, when another component uses this one.
The Rows and Columns properties let us know how many rows and columns our game should have.
The PixelWidth and PixelHeight properties tell our component what the available space is. We could've made the component responsive to layout changes, but I went for simple code. I'm open to simple solutions, so please let me know in the comments how to make it responsive.

As its name implies, OnParametersSet() will be called when the parent component provided values for our parameter properties. I'm using this component lifecycle method to initialize a new Life and compute the values for the variables in InitData().
_life is assigned to a new instance of Life that directly uses the Rows and Columns that were passed to our component. Immediately after that I'm making use of the Life's Toggle() method to toggle a few cells to the Alive state. They form a so-called 'Glider', one of the canonical shapes in the Game of Life.
Then I'm doing a bit of computation to figure out the necessary Cell edge length so as to fit the requested columns and rows in the available space.

Before continuing with the @code block, let's add some markup. Add this code just below your @code block

@if (_life != null)
{
    <div>
        <canvas width="@_canvasWidth"
                height="@_canvasHeight"
                @ref="@_canvasRef">
        </canvas>
    </div>
}
else
{
    <div>get a Life</div>
}

Yay, some Razor syntax! 🎉
So, if our code that initializes the Life instance ran, then _life is set and the other values were computed. In that case render the canvas with the computed dimensions and store a reference to that canvas in _canvasRef. Otherwise just emit a <div>with a sad message.

Before continuing, let's recap: we react to the component parameters being set by initializing an instance of Life with the requested number of rows and columns, then we're computing the size of the canvas that's going to contain the game's cells and the optimal size Cell edge length to fit them all on the canvas.

Phew, that was a lot! We're almost ready to see the little Cellss.

Crossing boundaries

As I mentioned before we won't be using any drawing library for Blazor. Instead we're going to use the elegant canvas api.
That's not directly possible from WebAssembly, so we're making use of the Javascript interop here.
We're going to write a Javascript function that can use the canvas API to draw our cells and we're going to attach it to the window object.
In your wwwroot/index.html add the following script tag to the body of the document

<script>
    window.renderCellsOnCanvas = (canvas, mask, maskColors, _cellEdgeAndSpacingLength, _cellEdgeLength) => {
        mask.forEach((row, rowIndex) => {
            row.forEach((cellState, colIndex) => {
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = maskColors[cellState];
                ctx.rect(colIndex * _cellEdgeAndSpacingLength, rowIndex * _cellEdgeAndSpacingLength, _cellEdgeLength, _cellEdgeLength);
                ctx.fill();
            })
        })
    }
</script>

The function takes:

canvas - a reference to an HTML <canvas>
mask - a 2D array where each element stands for the state of the Cell at those coordinates. 0 means the Cell is dead and 1 means the Cell is alive.
maskColors - a 1D array containing the color to use for each Cell state. So it is a mapping from the values from mask to usable colors.
_cellEdgeAndSpacingLength - the length of a Cell's edge, including the space to the next Cell.
_cellEdgeLength- the length of a Cell's edge.

It then loops over the 2D array and maps every value to a color and then draws a square of that color, at the current Cell position.

Back to the SimpleLife

With this Javascript function available on the window object, we can go back to the SimpleLife component and add another lifecycle method that computes the necessary parameters for the Javascript function and then calls it. Below OnParametersSet() add this override

   protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var mask = new byte[Rows][];
        for (var row = 0; row < Rows; row++)
        {
            mask[row] = new byte[Columns];
            for (var col = 0; col < Columns; col++)
            {
                var currentCell = _life.Cells[row][col];
                mask[row][col] = (byte)currentCell.CurrentState;
            }
        }
        var maskColors = new[] { "black", "red" };

        await _jsRuntime.InvokeVoidAsync("renderCellsOnCanvas", _canvasRef, mask, maskColors, _cellEdgeAndSpacingLength, _cellEdgeLength);
    }

It builds the mask parameter by adding a 0 or a 1 for each Cell in our _life. This is also the place where we decide the colors for each CellState.

All that's left is to call the Javascript function with our injected Javascript interop service.

Render the SimpleLife

To see the SimpleLife component in action we need to use it on a page.
In your Pages directory, add a new one called GOL.razor and give it this content

@page "/"
@using gol.blazorwasm.Components
@inject IJSRuntime _jsRuntime

@code
{
    public int PixelWidth { get; set; }
    public int PixelHeight { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // This only works because I added an appropriate Javascript function to the "window" object. See index.html.
            var dimensions = await _jsRuntime.InvokeAsync<WindowDimensions>("getWindowDimensions");
            PixelWidth = Math.Min(dimensions.Width, dimensions.Height);
            PixelHeight = Math.Min(dimensions.Width, dimensions.Height);
            StateHasChanged();
        }
    }

    public class WindowDimensions
    {
        public int Width { get; set; }
        public int Height { get; set; }
    }
}

<SimpleLife Rows="50"
            Columns="50"
            PixelWidth="@PixelWidth"
            PixelHeight="@PixelHeight" />

This page also makes use of a Javascript function that returns the window dimensions. Now that you know how to do it, just add this new <script> tag to your index.html's body

<script>window.getWindowDimensions = function () {
    return {
        width: window.innerWidth,
        height: window.innerHeight,
    };
};</script>

Replace the content of your App.razor with this

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData"/>
    </Found>
    <NotFound>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

If you still have your dotnet watch command running you should now see a new instance of the Game of Life with a simple Glider.

Back to the SimpleLife, part 2

That was a lot! I know, but you should get away with copy pasting code. 😉

We're ready to make the SimpleLife component interactive. First is toggling Cells from dead to alive and back.

Dead or Alive

In the markup section, locate the <canvas> element and add this attribute

@onclick="@(e => OnCanvasClick(e.OffsetX, e.OffsetY))"

And now implement the method that we're referencing. Just add this method to the @code block

    private void OnCanvasClick(double pixelX, double pixelY)
    {
        if (pixelX < 0 || pixelX > _canvasWidth)
        {
            return;
        }
        if (pixelY < 0 || pixelY > _canvasHeight)
        {
            return;
        }

        // Translate pixel coordinates to rows and columns
        var clickedRow = (int)((pixelY / _canvasHeight) * Rows);
        var clickedCol = (int)((pixelX / _canvasWidth) * Columns);

        _life?.Toggle(clickedRow, clickedCol);
    }

The coordinates of a click event on the canvas as passed to the OnCanvasClick method, which converts pixel coordinates to Cell coordinates, i.e. row and column. Then the appropriate Cell is told to toggle its state.
You should now be able to click anywhere on the canvas to make ⬛️ cells 🟥 and vice versa.

That's nice and dandy, but we want to actually play the Game.
of Life.

They're alive!

For that we want to apply the 3 rules of the game to the current game state and progress to the next game state.

Below the <div>that wraps the <canvas> add a new button like so

<button @onclick=@(e => OnTickClicked()) class="btn btn-primary">Tick</button>

And in the @code block, add this method

    private void OnTickClicked()
    {
        _life?.Tick();
    }

Whenever you click the new button, the Life's Tick() method is invoked. That method applies the game rules and moves every Cell from its current state to its next state.
Through Blazor magic, a re-render is triggered which calls our overriden OnAfterRenderAsync() method which paints the current state onto the canvas.

By the way, if you wonder where the CSS classes come from you should know that Bootstrap is baked into Blazor.

This Tick business was easy! Now it pays off that we've encapsulated that logic in Life.

Let's continue and keep the critters under control.

Restoring order

Let's assume that the game got out of hand and the Cells are plotting to overthrow the current world order. We need a way to clear the game board.
Start by adding a new button, below the previous one

<button @onclick=@(e => OnClear()) class="btn btn-primary">Clear</button>

In the @code block add this method

    private void OnClear()
    {
        InitData();
    }

There's not much to it, the method just calls our old InitData() method which overwrite out Life instance with a fresh one.

Saving game state

Come on, admit it, you've grown fond of some of the critters and you want to play with them later.
No problemo! we'll save the game state to a file.
Below the existing @using statements, add this one

@using System.Text.Json;

this gives us access to the new Json serializer from Asp.Net.

Next step is to add yet another button like so

<button @onclick=@OnDownload class="btn btn-primary">Save</button>

The referenced method should look like this

    private async Task OnDownload()
    {
        var cellsJsonStr = JsonSerializer.Serialize(_life?.Cells);
        var fileName = $"game state {DateTime.Now.ToShortDateString()} {DateTime.Now.ToShortTimeString()}.json";
        await _jsRuntime.InvokeAsync<bool>("downloadStringAsFile", cellsJsonStr, fileName);
    }

The method serializes the Lifes cells as a JSON string, generates a name for the file that will hold the saved game state and ... huh, Javascript interop again.
You already know the drill. Add this new Javascript function

<script>window.downloadStringAsFile = function (content, fileName) {
    const anchor = document.createElement("a");
    anchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
    anchor.download = fileName;
    document.body.appendChild(anchor);
    try {
        anchor.click();
    } catch (e) {
        console.log(e);
        return false;
    } finally {
        document.body.removeChild(anchor);
    }
    return true;
};</script>

The Javascript function uses a pretty standard way of downloading dynamically generated content.
And bam! Your browser should inform you that a new file will be downloaded. Just save if somewhere you remember because we'll need it shortly.

Loading saved game state

Loading saved game state will follow these high-level operations

Pick a file with the game state that you want to restore.
Deserialize its content to a 2D array of Cells.
Create a new Life instance with that 2D array of Cells.

Add this element just bellow the last button

<InputFile OnChange="@OnSelectedFileChanged" class="btn"></InputFile>

Now add the referenced method

    private async Task OnSelectedFileChanged(InputFileChangeEventArgs eventArgs)
    {
        if (!eventArgs.File.Name.EndsWith(".json"))
        {
            Console.WriteLine("Stick to JSON files");
            return;
        }

        using var fileStream = eventArgs.File.OpenReadStream();
        var deserializedCells = await JsonSerializer.DeserializeAsync<Cell[][]>(fileStream);
        if (deserializedCells == null)
        {
            Console.WriteLine("Couldn't deserialize the cells. So sad.");
        }

        if (deserializedCells.Length != Rows || deserializedCells[0].Length != Columns)
        {
            Console.WriteLine($"Expected to load cells with {Rows} rows and {Columns} columns");
            return;
        }

        InitData(deserializedCells);
    }

The method is invoked when you click the InputFile and pick a file. It makes sure you chose a JSON file and then opens a .NET Stream to the file content.
Using the JSON Serializer from before, it tries to deserialize the file content to a Cell[][] and if that works and the resulting 2D array of Cells has the correct shape it is passed to yet another method that should look like this

    private void InitData(Cell[][] cells)
    {
        _life = new Life(cells);

        UpdateCellAndCanvasSize();
    }

This new method makes use of the second constructor of Life which takes the Cells from 'outside' and just works with them.

Conclusion

For this second post in the series I had even more fun than before, but I also was frustrated a lot more than expected.
I was disappointed by the bad interop performance while trying the two Blazor canvas libraries. That's not a fault of the libs, but of the general state of Blazor.
Nonetheless with a little Javascript foo I got around that and the performance of this Blazor implementation is as good as that of the React implementation.

Another way of improving the performance that I found early on was to use Ahead-of-Time compilation.
For that you need to add this to your .csproj file, right inside the first <PropertyGroup> tag

<RunAOTCompilation>true</RunAOTCompilation>

And then publish a Release build of your app, which looks like this from the CLI

dotnet publish -c Release

If it complains about a missing workload, you can install it with

sudo dotnet workload install wasm-tools

After 10 minutes you'll have an AOT-compiled app that should be much faster than the one you saw while developing.

To try out the AOT version locally either use

npx serve

if you have it, or if you're like me and like to stay in the .NET world as much as possible you can use dotnet-serve. Fist install it

dotnet tool install --global dotnet-serve

Then navigate to the publish folder and run

dotnet-serve

Thanks for reading!

Build the Game of Life with React

Marius Muntean — Sun, 29 Aug 2021 13:53:33 +0000

Motivation

I've recently read a post about an interviewer who likes to ask of their candidates to implement Conway's Game of Life. Naturally I started thinking how I would do it. Since I'm intrigued by Blazor (because C#) and I use React at work (because it's better), here we are about to see how you can build the Game of Life, first with React and in a later post with Blazor.

I plan to group these posts into a series, so that each stays digestible and you can read the one that interests you.

Let me know in the comments if you're interested in seeing implementations in Xamarin.Forms/MAUI, WPF or Flutter.

Here's the code: https://github.com/mariusmuntean/GameOfLife

Create the React project

Create a new React project with npx, give it a name and choose Typescript

npx create-react-app gol.react --template typescript

Business Logic

In the src directory, create a new one for the new types that you're going to add. I named mine models. Add a file for an enum that represents the state of a single cell

export enum CellState {
  Dead = "Dead",
  Alive = "Alive",
}

The game consists of a 2D grid where each slot is taken up by a cell. A cell can be either dead or alive. Now add the Cell class, ideally in another file

import { CellState } from "./CellState";

export class Cell {
  public CurrentState: CellState = CellState.Dead;
  public NextState: CellState = CellState.Dead;

  constructor(currenCellState?: CellState) {
    if (currenCellState) {
      this.CurrentState = currenCellState;
    }
  }

  public tick = () => {
    this.CurrentState = this.NextState;
    this.NextState = CellState.Dead;
  };

  public toggle = () => {
    this.CurrentState = this.CurrentState === CellState.Alive ? CellState.Dead : CellState.Alive;
  };
}

The CurrentState of a Cell tells us how the cell is currently doing. Later we'll have to compute the new state of each Cell based on the state of its neighbors. To make the code simpler, I decided to store the next state of the Cell in the NextState property.
When the game is ready to transition each Cell into its next state, it can call tick() on the Cell instance and the NextState becomes the CurrentState.
The method toggle() will allow us to click somewhere on the 2D grid and kill or revive a Cell.

Let's talk about life. At the risk of sounding too reductionist, it's just a bunch of interacting cells. So we'll create one too

import { Cell } from "./Cell";
import { CellState } from "./CellState";
import { EmptyCellsType } from "./EmptyCellsType";
import { InitialCellsType } from "./InitialCellsType";

export class Life {
  readonly columns: number;
  readonly rows: number;
  readonly onNewGeneration?: (newCells: ReadonlyArray<ReadonlyArray<Cell>>) => void;

  private _cells: Cell[][];

  public get cells(): Cell[][] {
    return this._cells;
  }

  constructor(input: InitialCellsType | EmptyCellsType, onNewGeneration?: (newCells: ReadonlyArray<ReadonlyArray<Cell>>) => void) {
    if (input instanceof InitialCellsType) {
      this._cells = input.initialCells;
      this.rows = this._cells.length;
      this.columns = this._cells[0].length;
    } else {
      this.columns = input.columns;
      this.rows = input.rows;
      if (this.columns <= 0 || this.rows <= 0) {
        throw new Error("Width and height must be greater than 0");
      }
      this._cells = [];
      for (let row: number = 0; row < this.rows; row++) {
        for (let col: number = 0; col < this.columns; col++) {
          this._cells[row] = this._cells[row] ?? [];
          this._cells[row][col] = new Cell(CellState.Dead);
        }
      }
    }

    this.onNewGeneration = onNewGeneration;
  }
}

Let's break down what we just created. Life is a class that keeps track of a bunch of cells. For that we're using _cells:Cell[][] which is just a 2D array of our simple Cell class. Having a 2D array allows us to know exactly where each cell is and who its neighbors are.
Traversing the 2D array can be cumbersome so I keep track of its dimensions with the properties Rows and Columns.

There are two ways in which I want to be able to create a new Life

From scratch - meaning I jest tell it how many rows and columns of Cells I want and the Life just initializes its 2D _cells array with Cells in the Dead state.

For that, you need to add this new type

export class EmptyCellsType {
  public columns: number = 0;
  public rows: number = 0;
}

It just holds a pair of numbers corresponding to the desired amount of Cell rows and columns.

From a file - think of a saved game state. We'll later save the state of the game into a file and then load it up. When loading the saved game state, we need to tell the Life instance what each of its Cell's state should be. For now, just create this new class

import { Cell } from "./Cell";

export class InitialCellsType {
  public initialCells: Cell[][] = [];
}

At this point we can create a new Life, where all the cells are either dead or in a state that we received from 'outside'.

  public toggle = (row: number, col: number) => {
    if (row < 0 || row >= this.rows) {
      throw new Error("Row is out of range");
    }

    if (col < 0 || col >= this.rows) {
      throw new Error("Col is out of range");
    }

    const cellToToggle = this.cells[row][col];
    cellToToggle.toggle();
  };

The Life instance just makes sure that the specified location of the Cell makes sense and then tells that Cell to toggle its state. If you remember, the Cell class can toggle its state, if told to do so.

The last and most interesting method of Life implements the 3 rules of the Game of Life.

Any live cell with two or three live neighbours survives.
Any dead cell with three live neighbours becomes a live cell.
All other live cells die in the next generation. Similarly, all other dead cells stay dead.

  public tick = () => {
    // Compute the next state for each cell
    for (let row: number = 0; row < this.rows; row++) {
      for (let col: number = 0; col < this.columns; col++) {
        const currentCell = this._cells[row][col];
        const cellNeighbors = this.getNeighbors(row, col);
        const liveNeighbors = cellNeighbors.filter((neighbor) => neighbor.CurrentState === CellState.Alive).length;

        // Rule source - https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life#Rules
        if (currentCell.CurrentState === CellState.Alive && (liveNeighbors === 2 || liveNeighbors === 3)) {
          currentCell.NextState = CellState.Alive;
        } else if (currentCell.CurrentState === CellState.Dead && liveNeighbors === 3) {
          currentCell.NextState = CellState.Alive;
        } else {
          currentCell.NextState = CellState.Dead;
        }
      }
    }

    // Switch each cell to its next state
    for (let row: number = 0; row < this.rows; row++) {
      for (let col: number = 0; col < this.columns; col++) {
        const currentCell = this._cells[row][col];
        currentCell.tick();
      }
    }

    this.onNewGeneration?.(this.cells);
  };

  private getNeighbors = (row: number, col: number): Cell[] => {
    const neighbors: Cell[] = [];

    for (let colOffset: number = -1; colOffset <= 1; colOffset++) {
      for (let rowOffset: number = -1; rowOffset <= 1; rowOffset++) {
        if (colOffset === 0 && rowOffset === 0) {
          // skip self
          continue;
        }

        const neighborRow = row + rowOffset;
        const neighborCol = col + colOffset;
        if (neighborRow >= 0 && neighborRow < this.rows) {
          if (neighborCol >= 0 && neighborCol < this.columns) {
            neighbors.push(this._cells[neighborRow][neighborCol]);
          }
        }
      }
    }

    return neighbors;
  };

You might be wondering what this onNewGeneration() function is good for. Well, at this point in time I had no idea how the UI will function and I imagined that it would be nice to have a callback that lets me know when all the Cells were updated to their new state. It just so happens that we don't need that callback after all.

We're done with the business logic. It's time for the UI.

UI

In the src directory, create a new directory called SimpleLifeComponent. Inside this new directory create an index.ts file with this content

export { SimpleLife } from "./simple-life.component";

Immediately after that, add a new file called simple-life.component.tsx next to the index.ts (this way VS Code will stop yelling at you that it can't find the referenced file).

KonvaJs

After some decent (10 minutes, but with my noise-cancelling headphones on) research (googled '2D drawing in React') of my own, I decided to go with KonvaJs.
It has excellent support for React. Take a look at this snippet from their docs and you'll be ready to draw in no time

import { Stage, Layer, Rect, Circle } from 'react-konva';

export const App = () => {
  return (
    // Stage - is a div wrapper
    // Layer - is an actual 2d canvas element, so you can have several layers inside the stage
    // Rect and Circle are not DOM elements. They are 2d shapes on canvas
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect width={50} height={50} fill="red" />
        <Circle x={200} y={200} stroke="black" radius={50} />
      </Layer>
    </Stage>
  );
}

So, all you have to do is install it like so

npm install react-konva konva

SimpleLife

This is going to be the component that takes care of rendering the game and it will allow us to interact with the game. As usual, it is possible to break up a React component in multiple smaller ones, but my intention was for YOU to see as much code as possible, at a glance.

Start by adding these imports

import React, { FC, useCallback } from "react";
import { useState } from "react";
import { Layer, Stage, Rect } from "react-konva";
import { Cell } from "../models/Cell";
import { CellState } from "../models/CellState";
import { Life } from "../models/Life";
import { InitialCellsType } from "../models/InitialCellsType";
import { EmptyCellsType } from "../models/EmptyCellsType";

Nothing fancy here, just the normal React imports, Konva and our own types.

Next step is to add the props type

interface Props {
  width: number;
  height: number;

  rows: number;
  columns: number;
}

The component will receive the number of rows and columns that define how many cells there's going to be. It also takes a width and a height, in pixels. The pixel dimensions tell our component how much space it has for its cells and it will 'fit' the cells in the available space. Don't overthink it, I didn't 😁.

We will need an instance of Life when the component lights up the very first time. For that, add this next function just below the Props interface

function getInitialLife(columns: number, rows: number, onNewGeneration: (newCells: ReadonlyArray<ReadonlyArray<Cell>>) => void): Life | (() => Life) {
  return () => {
    const initialLife = new Life({ columns, rows } as EmptyCellsType, onNewGeneration);

    // Glider
    initialLife.toggle(2, 2);
    initialLife.toggle(3, 2);
    initialLife.toggle(4, 2);
    initialLife.toggle(4, 1);
    initialLife.toggle(3, 0);

    return initialLife;
  };
}

The function doesn't do much, but it's honest work. It takes the number of rows and columns (and that unused callback I mentioned above) and returns a function that returns a Life with the specified amount of rows and columns. It also toggles some of the Cells to the Alive state. The shaped those live cells make is a canonical shape and is called a 'Glider' because, as you will see, they will glide through the 2D space.

Add the SimpleLife component, below the previous function.

export const SimpleLife: FC<Props> = ({ width, height, rows, columns }) => {
  const onNewGeneration = (newCells: ReadonlyArray<ReadonlyArray<Cell>>) => {
    // console.dir(newCells);
  };

  const [life, setLife] = useState<Life>(getInitialLife(columns, rows, onNewGeneration));
  const [, updateState] = useState({});
  const forceUpdate = useCallback(() => updateState({}), []);

  const onCellClicked = (row: number, column: number) => {
    life.toggle(row, column);
    forceUpdate();
  };

  const cellEdgeAndSpacingLength = Math.min(width / columns, (height - 30) / rows);
  const cellEdgeLength = 0.9 * cellEdgeAndSpacingLength;

  const canvasWidth = cellEdgeAndSpacingLength * columns;
  const canvasHeight = cellEdgeAndSpacingLength * rows;

  return (
    <>
      <Stage width={canvasWidth} height={canvasHeight}>
        <Layer>
          {life &&
            life.cells.map((cellRow, rowIndex) => {
              return cellRow.map((cell, columnIndex) => {
                return (
                  <Rect
                    key={(rowIndex + 1) * (columnIndex + 1)}
                    x={columnIndex * cellEdgeAndSpacingLength}
                    y={rowIndex * cellEdgeAndSpacingLength}
                    width={cellEdgeLength}
                    height={cellEdgeLength}
                    fill={cell.CurrentState === CellState.Alive ? "red" : "black"}
                    onClick={(e) => onCellClicked(rowIndex, columnIndex)}
                  ></Rect>
                );
              });
            })}
        </Layer>
      </Stage>
    </>
  );
};

Let's break it down.
The component has a Life instance, which is its internal state. It is created with the getInitialLife() function that you added jus above the component.
The forceUpdate() is just a little trick that allows us to force re-rendering.

Next up is the 4 lines with the computation. Their goal is to obtain the optimal cell edge length and canvas size, given the amount of rows and columns and the available space for our component.

Finally some TSX. Inside a <Stage>, which is a wrapper <div> for the canvas, I'm adding a <Layer> (Konva renders this as an HTML canvas) that contains many rectangles, one rectangle for each of our Cells.

Remember that life.cells is an array of arrays of Cell. So there I'm using two nested calls to map() that allow me to traverse the whole data structure and emit a new Konva <Rect> for each Cell.
x and y are the <Rect>'s pixel coordinates on the final canvas and with and height are the <Rect>'s pixel dimensions. A <Rect> will be ⬛️ when the Cell is dead and 🟥 when the Cell is alive. I've also wired up the <Rect>'s onClick handler to call our onCellClicked() function, which tells the Life instance to toggle the appropriate Cell's state.

To actually see something on the screen, use the <SimpleLife> component in the App.tsx file. Something like this should work

import React from "react";
import { SimpleLife } from "./SimpleLifeComponent";

function App() {
  return <SimpleLife width={window.innerWidth} 
                     height={window.innerHeight} 
                     rows={35} 
                     columns={35}></SimpleLife>;
}

export default App;

At this point you should be able to see the game and click cells to toggle their state.

It's alive!

Let's add a button that tells the Life instance to progress to the next generation of Cell states.
Back in the SimpleLife component, bellow onCellClicked(), add this function

  const onTick = () => {
    life.tick();
    forceUpdate();
  };

And in the TSX, below the closing Stage tag (</Stage>) add this line

<button onClick={() => onTick()}>Tick</button>

Now open the link with canonical shapes in the Game of Life in a new browser window and create a few shapes by clicking in your game. By clicking the new button that you added, you should see how your shapes are doing in the Game of Life.

Oh my!

Let's add a new button to clean up the mess you made :D
First add this new function below onTick()

  const onClear = () => {
    setLife(getInitialLife(columns, rows, onNewGeneration));
  };

and this line of TSX below the previous button

<button onClick={() => onClear()}>Clear</button>

Now you're able to clear the board and get the Glider back.

I'll save you, my little creatures, 4 ever!

"Wouldn't it be nice to be able to save the game state and reload it later?" I hear you ask. Excellent question and yes, that would be nice!

Let's start by preparing some infrastructure code. In your src directory, add a new one and call it utils. Inside utils create a file called download.ts and add this function

export const download = (filename: string, text: string) => {
  var element = document.createElement("a");
  element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
};

The function takes a file name and some text, and tells your browser that it wants to save that text as a file with the specified name.

Back in the SimpleLife component, add this import

import { download } from "./../utils/download";

Then add this function below onClear()

  const onSave = () => {
    download(`game state ${new Date().toTimeString()}.json`, JSON.stringify(life.cells));
  };

And finally, add this button to the TSX, just below the other buttons

<button onClick={() => onSave()}>Save</button>

Now, whenever you have an assortment of creatures that you're particularly fond of, you can save them as a JSON file.

"But how can I get them back?" Go back to download.ts and add this function

export const pickFile = (onLoadedSuccessfully: (fileContent: string) => void) => {
  const filePickerInput = document.createElement("input");
  filePickerInput.type = "file";
  filePickerInput.id = "file";
  filePickerInput.className = "file-input";
  filePickerInput.accept = ".json";
  filePickerInput.style.display = "none";
  filePickerInput.onchange = (e) => {
    const filereader = new FileReader();
    filereader.onloadend = (ee) => {
      if (!ee) {
        return;
      }

      onLoadedSuccessfully(filereader.result as string);
    };
    filereader.readAsText((e.target as any)?.files?.[0]);
  };

  document.body.appendChild(filePickerInput);
  filePickerInput.click();
  document.body.removeChild(filePickerInput);
};

When invoked, it opens the browser's file picker dialog and lets your callback know whenever you pick a JSON file.
Back in SimpleLife, adjust the previous import to look like this

import { download, pickFile } from "./../utils/download";

Now add this nasty little function, below onSave()

  const onLoad = () => {
    pickFile((fileContent) => {
      const reloadedCellData = JSON.parse(fileContent);
      if (!reloadedCellData) {
        return;
      }

      const reloadedCellsMissingPrototypeChain = reloadedCellData as Array<Array<Cell>>;
      if (!reloadedCellsMissingPrototypeChain) {
        return;
      }

      const reconstructed: Cell[][] = [];
      const rows = reloadedCellsMissingPrototypeChain.length;
      const cols = reloadedCellsMissingPrototypeChain[0]?.length;

      for (let row: number = 0; row < rows; row++) {
        reconstructed[row] = reconstructed[row] ?? [];
        for (let col: number = 0; col < cols; col++) {
          reconstructed[row][col] = new Cell(reloadedCellsMissingPrototypeChain[row][col].CurrentState);
        }
      }

      const initialCell: InitialCellsType = new InitialCellsType();
      initialCell.initialCells = reconstructed;
      setLife(new Life(initialCell));
    });
  };

It triggers the file picker and when the right file is selected it will deserialize it into an instance of Cell[][]. Unfortunately, the deserialized object is lacking type information, which Typescript needs. So I'm just looping over the data and creating a proper Cell[][] instance.

finally, add yet another button to the TSX

<button onClick={() => onLoad()}>Load</button>

And now you can load previous game states that you saved.

Conclusion

I had fun building this little game and I hope you had too. KonvaJs turned out to be an excellent little library and now I can't stop thinking about my next drawing adventure in React.

Keep your eyes open for new posts in this series. Blazor should be next!

Explore the SpaceX GraphQL API by building a Xamarin Forms app

Marius Muntean — Tue, 02 Mar 2021 22:47:20 +0000

What's this about

We're going to build a Xamarin.Forms app that connects to the SpaceX GraphQL API and displays some cool rocket launch pictures. You'll see how to generate C# classes for typesafe coding, send queries with the GraphQLHttpClient, build an elegant UI in XAML and use a Xamarin.Forms Behavior.

3
2
1
🚀

Generate types from the GraphQl schema

Here's the endpoint where you can get the schema from https://api.spacex.land/graphql

If you have your own way of generating the types, you can skip this section but this is how I did it.

In a folder of your choice, initialize a new yarn project

yarn init

Next, install these dev dependencies

yarn add -D graphql @graphql-codegen/c-sharp @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript

Then add the following script property to your package.json

  "scripts": {
    "generate": "graphql-codegen --config codegen.yml"
  }

Now we're done with the packages.json and we can move on to configuring the node module that will take care of generating the classes.

Here's how that YAML file needs to look like

overwrite: true
schema: "https://api.spacex.land/graphql"
#documents: "src/**/*.graphql"
generates:
  gen/Models.cs:
    plugins:
      - "c-sharp"
    config: 
      namespaceName: SpaceXGraphQL.SpaceX.gen
      scalars:
        timestamptz: DateTime
        uuid: Guid
  ./graphql.schema.json:
    plugins:
      - "introspection"

Let me translate: get the schema from https://api.spacex.land/graphql, using the "c-sharp" plugin generate classes with the namespace SpaceXGraphQL.SpaceX.gen into the file (relative to self) gen/Models.cs.

The scalars property is a mapping between custom types from the GraphQL schema and matching C# types. It looks like they use Postgres under the hood. timestamptz stores date and time info including the time zone and uuid is just a 128 -bit quantity for identifying entities.

GraphiQL (https://api.spacex.land/graphql/)

Now install the referenced dependencies with

yarn install

And run the script

yarn generate

Our classes were generated! Yay! 🎉

Thats it! We now have types to work with.

Write the Xamarin.Forms App

Create a new Xamarin.Forms app and add the following NuGet packages

<PackageReference Include="GraphQL.Client" Version="3.2.1" />
<PackageReference Include="GraphQL.Client.Serializer.Newtonsoft" Version="3.2.1" />
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
<PackageReference Include="Xamarin.Essentials" Version="1.6.1" />
<PackageReference Include="GraphQL.Client.Serializer.Newtonsoft" Version="3.2.2" />

Next, add the generated classes to your shared project. I actually added the whole yarn project folder

Now let's have fun!

Set up this global style

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SpaceXGraphQL.App">
    <Application.Resources>

        <!-- Styles -->
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="#384355"/>
            <Setter Property="BarTextColor" Value="#FF543D"/>
        </Style>
        <!-- Styles -->

    </Application.Resources>
</Application>

The app will have two pages.
The first page shows a list of rocket launches, uses infinite scrolling and shows a pulsing indicator for "upcoming" launches.

To keep things simple I didn't use any third party UI library nor did I integrate Prism or MvvmCross, though I'm a big fan of those.

Start with the view model, I named mine LaunchesPageViewModel. It implements INotifyPropertyChanged like so

 public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

It needs a few properties to hold the rocket launches, to indicate that it is fetching data and a command to load the next batch/page of launches

        public Command LoadMoreCommand
        {
            get => _loadMoreCommand;
            set
            {
                _loadMoreCommand = value;
                OnPropertyChanged();
            }
        }

        public bool IsLoading
        {
            get => _isLoading;
            set
            {
                _isLoading = value;
                OnPropertyChanged();
            }
        }

        public ObservableCollection<Types.Launch> Launches
        {
            get => _launches;
            set
            {
                _launches = value;
                OnPropertyChanged();
            }
        }

Next, in the constructor I'm doing a bit of init work. The LoadMoreCommand fetches rocket launches and, in case that it is executed again while the previous fetching isn't done, it just returns. When I'm done with the init, I start fetching.

 public LaunchesPageViewModel()
        {
            _client = new GraphQLHttpClient("https://api.spacex.land/graphql", new NewtonsoftJsonSerializer());
            Launches = new ObservableCollection<Types.Launch>();

            LoadMoreCommand = new Command(async () =>
            {
                if (_isFetchingMore)
                {
                    return;
                }

                try
                {
                    _isFetchingMore = true;
                    await GetLaunches();
                }
                finally
                {
                    _isFetchingMore = false;
                }
            });

            IsLoading = true;
            GetLaunches().ContinueWith((_, __) => IsLoading = false, null);
        }

And now for the last piece, the actual GraphQL query. We're making use of the "launches" query, which allows use to tell it how many launch events to return and how many to skip, effectively offering a paginated api.
Notice that I'm using the amount of launches that I currently have as offset.

        private async Task GetLaunches()
        {
            var launchesRequest = new GraphQLRequest
            {
                Query = @"query getLaunches($limit: Int, $offset: Int)
                                {
                                  launches(limit: $limit, offset: $offset) {
                                    id
                                    is_tentative
                                    upcoming                                    
                                    mission_name
                                    links {
                                      article_link
                                      video_link
                                      flickr_images
                                      mission_patch
                                    }
                                    launch_date_utc
                                    details
                                  }
                                }",
                Variables = new
                {
                    limit = 15,
                    offset = Launches.Count
                }
            };

            var response = await _client.SendQueryAsync<Types.Query>(launchesRequest);
            if (!(response.Errors ?? Array.Empty<GraphQLError>()).Any())
            {
                foreach (var launch in response.Data.launches)
                {
                    Launches.Add(launch);
                }
            }
        }

And that's all for the LaunchesPageViewModel.
The LaunchesPage, is implemented exclusively in XAML, except for a selection handler.

Basically I'm making use of a CollectionView (for its virtualization) to show the launches. Notice the properties RemainingItemsThreshold and RemainingItemsThresholdReachedCommand. Whenever theres 5 items or fewer to show, the CollectionView calls the LoadMoreCommand, which sends a query to the GraphQL API to fetch the next batch of launches.

LaunchesPage.xaml

<!-- Loading -->
        <ActivityIndicator IsVisible="{Binding IsLoading}"
                           IsRunning="True"
                           Color="#FF543D"
                           VerticalOptions="Center" HorizontalOptions="Center"
                           WidthRequest="120" HeightRequest="120" />

        <!-- Launches -->
        <CollectionView ItemsSource="{Binding Launches}"
                        ItemSizingStrategy="MeasureFirstItem"
                        SelectionMode="Single"
                        SelectionChanged="OnLaunchSelected"
                        RemainingItemsThreshold="5"
                        RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}"
                        Margin="10">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="5.0" />
            </CollectionView.ItemsLayout>

            <!-- Launch Template -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame CornerRadius="15"
                           Padding="0" Margin="5,0,5,0"
                           HasShadow="False"
                           BackgroundColor="#041727"
                           IsClippedToBounds="True">
                        <Grid RowDefinitions="*,*"
                              ColumnDefinitions="Auto,*"
                              HeightRequest="80">

                            <!-- Mission patch -->
                            <Image HeightRequest="60" WidthRequest="60"
                                   Margin="10"
                                   Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
                                   Aspect="AspectFit"
                                   HorizontalOptions="CenterAndExpand"
                                   VerticalOptions="CenterAndExpand"
                                   Source="{Binding links.mission_patch}" />
                            <Label Grid.Row="0" Grid.Column="1"
                                   VerticalOptions="End"
                                   TextColor="White"
                                   FontAttributes="Bold"
                                   Text="{Binding mission_name}" />
                            <Label Grid.Row="1" Grid.Column="1"
                                   FontSize="Small"
                                   TextColor="#FF543D"
                                   VerticalOptions="Start"
                                   Text="{Binding launch_date_utc}" />

                            <!-- Upcoming indicator -->
                            <BoxView Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
                                     HeightRequest="10" WidthRequest="10"
                                     Margin="20"
                                     CornerRadius="5"
                                     HorizontalOptions="End" VerticalOptions="Center"
                                     Color="#FF543D"
                                     IsVisible="False">
                                <BoxView.Behaviors>
                                    <behaviors:PulseBehavior />
                                </BoxView.Behaviors>
                                <BoxView.Triggers>
                                    <DataTrigger TargetType="BoxView"
                                                 Binding="{Binding Path=upcoming}"
                                                 Value="True">
                                        <DataTrigger.Setters>
                                            <Setter Property="IsVisible" Value="True" />
                                        </DataTrigger.Setters>
                                    </DataTrigger>
                                </BoxView.Triggers>
                            </BoxView>
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

LaunchesPage.xaml.cs

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LaunchesPage : ContentPage
    {
        public LaunchesPage()
        {
            InitializeComponent();
            BindingContext = new LaunchesPageViewModel();
        }

        private async void OnLaunchSelected(object sender, SelectionChangedEventArgs e)
        {
            if (e.CurrentSelection.Any() && e.CurrentSelection.First() is Types.Launch launch)
            {
                await Navigation.PushAsync(new LaunchPage(new LaunchPageViewModel(launch.id)));

                if (sender is CollectionView cw)
                {
                    cw.SelectedItem = null;
                }
            }
        }
    }

PulseBehavior.cs

using Xamarin.Forms;
using Xamarin.Forms.Internals;

namespace SpaceXGraphQL.Behaviors
{
    public class PulseBehavior : Behavior<View>
    {
        private const string PulsingAnimation = "Pulsing";
        private bool _running = false;
        private bool _isReversed = false;

        protected override void OnAttachedTo(View bindable)
        {
            base.OnAttachedTo(bindable);

            _running = true;
            bindable.Animate(PulsingAnimation,
                d =>
                {
                    var newScale = _isReversed ? 1.0d - d : d;
                    bindable.Scale = newScale.Clamp(0.3, 1.0);
                },
                length: 1000,
                easing: Easing.CubicInOut,
                repeat: () =>
                {
                    _isReversed = !_isReversed;
                    return _running;
                });
        }

        protected override void OnDetachingFrom(View bindable)
        {
            base.OnDetachingFrom(bindable);

            _running = false;
            bindable.AbortAnimation(PulsingAnimation);
        }
    }
}

We're done with the first page and the result looks like this

Now for the second page. It is going to show some launch details like the coolest images of the launch, the launch name and patch, a link to the original article and a way of sharing the images.

We're starting with the view model which I named LaunchPageViewModel. It uses the exact same INotifyPropertyChanged implementation, so I'm skipping over it here.
This view model needs properties to hold the data of a single launch and commands to open the original article link and to share a launch image.

        public Types.Launch Launch
        {
            get => _launch;
            set
            {
                _launch = value;
                OnPropertyChanged();
            }
        }

        public Command ArticleLinkTappedCommand { get; set; }
        public Command ImageTappedCommand { get; set; }

In the constructor, the view model initializes its members and the two commands, making use of Xamarin Essentials for opening links and sharing data.
You'll notice that the constructor take as argument a launch id. That's the id of the launch whose data we're querying and showing.

Finally, here's how the GetLaunch() method looks like

private async Task GetLaunch()
        {
            Launch = null;
            var launchRequest = new GraphQLRequest
            {
                Query = @"query getLaunch($id: ID!) {
                                      launch(id: $id) {
                                        id
                                        is_tentative
                                        upcoming
                                        mission_name
                                        links {
                                          article_link
                                          video_link
                                          flickr_images
                                          mission_patch
                                        }
                                        launch_date_utc
                                        details
                                      }
                                    }",
                Variables = new
                {
                    id = _launchId,
                }
            };

            var response = await _client.SendQueryAsync<Types.Query>(launchRequest);
            if (!(response.Errors ?? Array.Empty<GraphQLError>()).Any())
            {
                Launch = response.Data.launch;
            }
        }

Again, the page is almost exclusively implemented in XAML.
LaunchPage.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:SpaceXGraphQL.Converters;assembly=SpaceXGraphQL"
             x:Class="SpaceXGraphQL.LaunchPage"
             BackgroundColor="#041727"
             x:Name="ParentPage">

    <ContentPage.Resources>
        <converters:GetLastItemConverter x:Key="GetLastItemConverter" />
    </ContentPage.Resources>

    <ScrollView Padding="20, 0">
        <StackLayout>
            <!-- Top image -->
            <Grid VerticalOptions="Start">
                <Frame CornerRadius="20"
                       Padding="0"
                       HasShadow="True"
                       IsClippedToBounds="True">
                    <Image Source="{Binding Launch.links.flickr_images, Converter={StaticResource GetLastItemConverter}}"
                           HorizontalOptions="FillAndExpand"
                           BackgroundColor="#384355"
                           Aspect="AspectFill"
                           HeightRequest="250" />
                </Frame>

                <!-- Patch, name and date -->
                <StackLayout Orientation="Horizontal"
                             HorizontalOptions="Start" VerticalOptions="Start"
                             Margin="20">
                    <Image Source="{Binding Launch.links.mission_patch}"
                           Aspect="AspectFit"
                           HeightRequest="40" WidthRequest="40" />
                    <StackLayout>

                        <Label Text="{Binding Launch.mission_name}"
                               TextColor="White"
                               FontAttributes="Bold" FontSize="Large"
                               HorizontalOptions="Start" VerticalOptions="Center" />
                        <Label Text="{Binding Launch.launch_date_utc}"
                               TextColor="LightGray"
                               FontAttributes="Bold" FontSize="Micro"
                               HorizontalOptions="Start" VerticalOptions="Center" />
                    </StackLayout>
                </StackLayout>
            </Grid>

            <!-- Article link -->
            <Label VerticalOptions="End" HorizontalOptions="End"
                   Margin="0, 5, 20,0">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Article Link" TextColor="RoyalBlue"
                              FontSize="Small" FontAttributes="Bold">
                            <Span.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding ArticleLinkTappedCommand}" />
                            </Span.GestureRecognizers>
                        </Span>
                    </FormattedString>
                </Label.FormattedText>
            </Label>

            <!-- Description -->
            <Label Text="Description" TextColor="#FF543D" FontSize="Large"
                   FontAttributes="Bold"
                   Margin="0, 20,0,5" />

            <Label Text="{Binding Launch.details}"
                   FontSize="Body"
                   TextColor="White" />

            <!-- Media -->
            <Label Text="Media" TextColor="#FF543D"
                   FontSize="Large" FontAttributes="Bold" Margin="0, 20,0,5" />
            <StackLayout BindableLayout.ItemsSource="{Binding Launch.links.flickr_images}">
                <BindableLayout.EmptyView>
                    <Label Text="Loading ..." TextColor="White" FontSize="Small"
                           HorizontalOptions="Center"/>
                </BindableLayout.EmptyView>

                <!-- Images -->
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <SwipeView>
                            <SwipeView.RightItems>
                                <SwipeItems>
                                    <SwipeItem Text="Share"
                                               BackgroundColor="#FF543D"
                                               Command="{Binding Source={x:Reference ParentPage}, Path=BindingContext.ImageTappedCommand}"
                                               CommandParameter="{Binding .}" />
                                </SwipeItems>
                            </SwipeView.RightItems>
                            <Frame CornerRadius="20"
                                   Padding="0" Margin="0,0,0,5"
                                   HasShadow="True"
                                   IsClippedToBounds="True">
                                <Image Source="{Binding .}"
                                       HorizontalOptions="FillAndExpand"
                                       BackgroundColor="#384355"
                                       Aspect="AspectFill"
                                       HeightRequest="250" />
                            </Frame>
                        </SwipeView>

                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</ContentPage>

LaunchPage.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace SpaceXGraphQL
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LaunchPage : ContentPage
    {

        public LaunchPage(LaunchPageViewModel viewModel)
        {
            InitializeComponent();
            BindingContext = viewModel;
        }
    }
}

GetLastItemConverter.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using Xamarin.Forms;

namespace SpaceXGraphQL.Converters
{
    public class GetLastItemConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is IEnumerable<object> enumerable)
            {
                return new List<object>(enumerable).Last();
            }

            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

We're done with the second and last page and the result looks like this

Conclusion

Except for the hiccup while generating the types, connecting to the GraphQL API was pretty easy. Kudos to them for providing the data for free!
Let me know if you're using another tool for code generation which can handle SpaceX's GraphQL schema.

I have to say that implementing the app in two afternoons was a lot of fun. I was pleasantly surprised by how good the Xamarin.Forms hot reload has become. Last time I checked, which was in the summer of 2020, it was much less stable. This time around I could actually use it to prototype my app.

If you've made it this far, I got a bonus for you! Here's the link to my GitHub repo with all the code: https://github.com/mariusmuntean/SpaceXGraphQL

Coordinator Layout with Xamarin.Forms

Marius Muntean — Sun, 26 Jul 2020 10:08:43 +0000

Coordinator Layout with Xamarin.Forms

In this article we’ll create a simple Xamarin Forms app that uses the Coordinator Layout. The app is inspired by a view from the Blinkist app and it will have similar animations for its title section and the buttons right below it.

The Coordinator Layout allows you to synchronise a top view and a bottom view by changing the top view based on the scrolling position of the bottom view.

Have a look at the gif below and notice how the title view is expanding and the label is increasing in size while scrolling down. Source.

Heads Up

In a production-ready app you’d use MVVM and have the content be provided by a viewmodel from a data source. Since the focus of this article is to use CoordinatorLayout, I decided not to muddle the waters by providing any code that’s not directly relevant.

To build the app you’ll need:

Visual Studio with the Mobile app workload or Rider.
Android Emulator or a real device.
Basic Xamarin.Forms knowledge.
A few spare minutes.

Let’s go

Create a new blank Xamarin.Forms application. I’m using Rider and for me that looks like this

Upgrade the preinstalled Xamarin.Forms library and add a reference to the CoordinatorLayout.XamarinForms NuGet package to all the projects.

Build and run the Android app, just to make sure everything is working as expected. In case you encounter some error, it should be easier to fix it now rather than later.

In the MainPage.xaml add an xml namespace for CoordinatorLayout.XamarinForms and add a CoordinatorLayout element. To see anything in your app add a Label to the CoordinatorLayout.TopView and another Label with overflowing text to the CoordinatorLayout.BottomView.

The CoordinatorLayout control has default values that allow you to expand the top view by dragging on the bottom view up and down.

Bottom View

Let’s finish up the bottom view, since that’s the easiest. Just give the Label the following values for Padding and BackgroundColor

BackgroundColor="SteelBlue" Padding="10,30,10,10"

Action View

The Action View is an optional view that sits on the border between the Top View and to Bottom View.

We’ll use that to create the Read and Listen buttons from the first screenshot.

Since the ActionView just “hovers” on the aforementioned border region, it partially overlaps the Top and Bottom Views. This means that it can’t really compute its required height and we have to tell it how tall it should be.

The CoordinatorLayout allows us to express the Action View’s height proportionally to its own height using the property ProportionalActionViewContainerHeight. For this sample app we’ll set it to ”0.1".

By default, the Action View is hidden when the Top View is collapsed. For this app we don’t want that, so we’ll turn off that behaviour by setting AutohideActionView=”False”.

To display those rounded buttons with a separator in between I’m using a Grid with three columns, containing a Button, a BoxView and another Button respectively. For the rounded corners I’m using a Frame with a CornerRadius of 20.

Action View containing two buttons with rounded corners.

At this point the app should look like this

It would be really fancy to change the width and the corner radius of the buttons depending on the expansion progress of the Top View. The CoordinatorLayout has an event called ExpansionEventHandler that contains the expansion progress. The progress is reported as a value between 0.0 (top view is completely shrunk) and 1.0 (top view is completely expanded).

To leverage that event we’ll need to give the Frame element a name, like “ActionFrame” and to add a callback method for the ExpansionEventHandler.

In the callback method all we have to do is vary the Frame’s corner radius and margin between a minimum and a maximum value.

Adjusting the Frame’s corner radius and the margin based on the expansion progress.

At this point the Action View smoothly changes from a button bar to a sticky button header when scrolling up.

Top View

The top view will start in the expanded state and will show a background image, the author name, a title and a partial underline. When shrunk, those elements will fade out and a new smaller title will fade in.

To achieve this, we’ll set InitialExpansionState=”Expanded” on the CoordinatorLayout and add all the necessary elements to the Top View.

Notice that the smaller title (called SecondaryTitle) starts out with its Opacity=”0.0”.

Top View with named elements.

Using the same callback method for the expansion progress that we used before, we can implement the described behaviour of the Top View.

Since the expansion progress is 0.0 when the Top View is shrunk and 1.0 when it is fully expanded, we can use that value as it is for the opacity of the background image and the title.

For the secondary title, we’ll use a formula that fades the Label in when the Top View is almost completely shrunk and fades it out otherwise.

Take a moment to drag up and down on the CoordinatorLayout and observe the nice animations. While you expand the Top View, its content slowly fades into view and the Action View moves downward while at the same time morphing from a rectangular button bar into a rounded button area.

The last step is to add the transparent buttons to the left and right of the top view. There are multiple ways of creating those buttons and for this sample app we’ll leverage Xamarin’s support for custom fonts and the FontImageSource class.

First download the Material Design Icons from here and extract the zip file. Add the .ttf font file to your shared project and set its Build action to EmbeddedResource.

Build action for the .ttf file should be EmbeddedResource.

A couple of versions ago Xamarin.Forms got really good support for custom fonts, such that all you need to do is add this line to your App.xaml.cs

[assembly: ExportFont("materialdesignicons-webfont.ttf", Alias = "MaterialDesign")]

ExportFont attribute in the App.xaml.cs class.

We are now ready to add the buttons. The easiest way is to nest the entire CoordinatorLayout in a Grid element and then to add the buttons on top of the CoordinatorLayout.

The buttons are defined below the CoordinatorLayout, but still inside the Grid.

Conclusion

You should now have an app that looks like this

The snapping behaviour is built into CoordinatorLayout but you can tweak it or even turn it off. Here’s an explanation of all the adjustable properties https://github.com/mariusmuntean/CoordinatorLayout.Forms#property-reference

Disclaimer

I am the creator of CoordinatorLayout.XamarinForms and I’ve recently released version 1.3.0, which improves touch input support for the Bottom View. Give it a try and let me know what you built with it.

The source code of the library contains a full-blown sample app that highlights everything CoordinatorLayout.XamarinForms can do.

While you’re there, have a look at my other open source projects. I publish all my projects under the MIT license and you’re free to do anything with my code. Have fun!

DEV Community: Marius Muntean

Operationalize TensorFlow Models With ML.NET

Get the Model

Transform and Optimize the Model

Make the ONNX Model Available to ML.NET

Inputs and Outputs

Package Model for ML.NET

Load the ML.NET Model and Make a Prediction

Expose it as a Web API

Conclusion

Structure that MAUI App!

Premise

Motivation

Step #1 — Custom controls

Step #2 — Nested ViewModels

Fin

Redis as a Database — Data Migration With RedisOM, RedisGears and Redlock

Background

Current Data Model

Target Data Model

Migration Strategy

Schema

Data

Conclusion

Redis as a Database — Live Leaderboards With PubSub and GraphQL Subscriptions

TL;DR

Ranked Hashtags

Backend

Frontend

Redis as a Database — Live Data Updates with PubSub and GraphQL Subscriptions

Visualizer Partial Architecture

Publishing Ranked Hashtags

Consuming Ranked Hashtags

Visualizer Frontend

Conclusion

Redis as a Database — Speed Test with K6

Test Setup

Data Ingestion

Data Retrieval

Conclusion

Redis as a Database with Redis OM

Tools

Data Modeling

Create the Index

Data Storing

Filter, Sort and Paginate Tweets

There's More to Come

Other content on this topic

How I prepared for and passed the AZ-900 exam

My background

Motivation

Preparation

Test day

Exam

Conclusion

Build the Game of Life with Blazor

Prerequisites

Create the Blazor Webassembly project

Business Logic

UI

Canvas drawing in Blazor

SimpleLife.razor

Crossing boundaries

Back to the SimpleLife

Render the SimpleLife

Back to the SimpleLife, part 2

Dead or Alive

They're alive!

Restoring order

Saving game state

Loading saved game state

Conclusion

Build the Game of Life with React

Motivation

Create the React project

Business Logic

UI

KonvaJs

SimpleLife

It's alive!