Revisit Avalonia UI App Development

Back in April 2018, I had the priviledge of sharing about Avalonia UI app development with the Singapore .NET Developers Community. At the time, Avalonia was still in its early stages, exclusively tailored for the creation of cross-platform desktop applications. Fast forward to the present, five years since my initial adventure to Avalonia, there is a remarkable transformation in this technology landscape.

In July 2023, Avalonia v11 was announced. It is a big release with mobile development support for iOS and Android, and WebAssembly support to allow running directly in the browser.

In this artlcle, I will share about my new development experience with Avalonia UI.

About Avalonia UI

Avalonia UI, one of the .NET Foundations projects, is an open-source, cross-platform UI framework designed for building native desktop apps. It has been described as the spiritual successor to WPF (Windows Presentation Foundation), enabling our existing WPF apps to run on macOS and Linux without expensive and risky rewrites.

Platforms supported by Avalonia. (Reference)

Like WPF and Xamarin.Forms, Avalonia UI also uses XAML for the UI. XAML is a declarative markup language that simplifies UI design and separates the UI layout from the application’s logic. Same as WPF, Avalonia also encourages the Model-View-ViewModel (MVVM) design pattern for building apps.

Hence, for WPF developers, they will find the transition to Avalonia relatively smooth because they can apply their knowledge of XAML and WPF design patterns to create UI layouts in Avalonia easily. With Avalonia, they can reuse a significant portion of their existing WPF code when developing cross-platform apps. This reusability can save time and effort in the development process.

Semi.Avalonia Theme

Theming is still a challenge especially when it comes to develop line-of-business apps with Avalonia UI. According to the community, there are a few professional themes available, such as

Currently, I have only tried out Semi.Avalonia.

Semi.Avalonia is a theme inspired by Semi Design, a design system designed and currently maintained by Douyin. The reason why I chose Semi.Avalonia is because there is a demo app which demonstrating all of the general controls and styles available to develop Avalonia apps.

There is a demo executable available for us to play around with Semi Avalonia Themes.

XAML Previewer for Avalonia

In September 2023, .NET Foundation announced on the social network, X, that Avalonia UI offered a live XAML previewer for Avalonia in Visual Studio Code through an extension as well.

The Avalonia XAML Previewer offers real-time visualisation of XAML code. With this capability, developers can deftly craft and refine user interfaces, swiftly pinpoint potential issues, and witness the immediate effects of their alterations.

Unlike Visual Studio, VS Code will reuse the single preview window. Hence, the previewer will refresh everytime when we switch between multiple XAML files.

Besides, the Avalonia for Visual Studio Code Extension also contains support for Avalonia XAML autocomplete.

The Avalonia XAML Previewer somehow is not working perfectly on my Surface Go.

C# DevKit

In addition, there is also a new VS Code extension that needs our attention.

In October 2023, Microsoft announced the general availability of C# Dev Kit, a VS Code extension that brings an improved editor-first C# development experience to Linux, macOS, and Windows.

When we install this extension, three other extensions, i.e. the C# extension, the IntelliCode for C# Dev Kit, and the .NET Runtime Install Tool will automatically be installed together.

With C# Dev Kit, we can now manage our projects with the Solution Explorer that we have been very familiar with on the Visual Studio.

Besides the normal file explorer, we now can have the Solution Explorer in VS Code too.

Since the IntelliCode for C# Dev Kit extension is installed together, on top of the basic IntelliSense code-completion found in the existing C# extension, we can also get powerful IntelliCode features such as whole-line completions and starred suggestions based on our personal codebase.

AI-assisted IntelliCode predicts the most likely correct method to use in VSCode.

Grafana Dashboard

Next, I would like to talk about the observability of an app.

I attended Grafana workshop during the GrafanaLive event in Singapore in September 2023.

Observability plays a crucial role in system and app management, allowing us to gain insights into the inner workings of the system, understand its functions, and leverage the data it produces effectively.

In the realm of observability, our first concern is to assess how well the system can gauge its internal status merely by examining its external output. This aspect of observability is crucial for proactive issue detection and troubleshooting, as it allows us to gain a deeper insight into performance and potential problems of the system without relying on manual methods.

Effective observability not only aids in diagnosing problems but also in understanding the system behavior in various scenarios, contributing to better decision-making and system optimisation.

Grafana engineer shared about the 3 pillars of observability.

There are three fundamental components of observability, i.e. monitoring, logging, and tracing. Monitoring enhances the understanding of system actions by collecting, storing, searching, and analysing monitoring metrics from the system.

Prometheus and Grafana are two widely used open-source monitoring tools that, when used together, provide a powerful solution for monitoring and observability. Often, Prometheus collects metrics from various systems and services. Grafana then connects to Prometheus as a data source to fetch these metrics. Finally, we design customised dashboards in Grafana, incorporating the collected metrics.

A simple dashboard collecting metrics from the Avalonia app though HTTP metrics.

We can get started quickly with Grafana Cloud, a hosted version of Grafana, without the need to set up and manage infrastructure components.

On Grafana Cloud, using the “HTTP Metrics”, we are able to easily send metrics directly from our app over HTTP for storage in the Grafana Cloud using Prometheus. Prometheus uses a specific data model for organising and querying metrics, which includes the components as highlighted in the following image.

Prometheus metrics basic structure.

Thus, in our Avalonia project, we can easily send metrics to Grafana Cloud with the codes below, where apiUrl, userId, and apiKey are given by the Grafana Cloud.

HttpClient httpClient = new();
httpClient.DefaultRequestHeaders.Add("Authorization", "Bearer " + userId + ":" + apiKey);

string metricLabelsText = metricLabels.Select(kv => $"{kv.Key}={kv.Value}").Aggregate((a, b) => $"{a},{b}");

string metricText = $"{metricName},{metricLabelsText} metric={metricValue}";

HttpContent content = new StringContent(metricText, Encoding.UTF8, "text/plain");

await httpClient.PostAsync(apiUrl, content);

Wrap-Up

The complete source code of this project can be found at https://github.com/goh-chunlin/Lunar.Avalonia1. In the Readme file, I have also included both the presentation slide and recording for my presentation in the Singapore .NET Developers Community meetup in October 2023.

My Avalonia app can run on WSLg without any major issues.

Kaizen Journey to be Microsoft Certified

In the rapidly evolving fields like software development, staying static in terms of technical skills and knowledge can quickly lead to obsolescence. Hence, the ability to learn independently is a crucial skill in a rapidly changing world. Self-learning allows software developers to acquire new skills and deepen their knowledge in specific areas of interest.

Renew my Azure Developer Associate Certificate

In the September, I was on a business trip to Hanoi, Vietnam. I thus decided to take the opportunity of my time staying in hotel after work to prepare for my Microsoft certificate renewal test.

To Hanoi, from Singapore!

Well, it took me some time to hit refresh on the latest updates in Microsoft Azure because in Samsung, I don’t work daily with it. Fortunately, thanks to Microsoft Learn, I am able to quickly pickup the new knowledge after going through the online resources on the Microsoft Learn platform.

As usual, I took down the notes of what I learned from Microsoft Learn. This year, the exam focuses on the following topics.

  • Microsoft Identity Platform;
  • Azure Key Vault;
  • Azure App Configuration and Monitoring;
  • Azure Container Apps;
  • CosmosDB.

I did pretty well in all the topics above with the exception of Azure Container Apps, where my responses to questions related to Azure Container Registry were unfortunately incorrect. However, I am pleased to share that despite this challenge, I successfully passed the renewal assessment on my first attempt.

Achieving success in my Azure exam at midnight in Hanoi.

Participating in the AI Skills Challenge

Last month, I also participated in an online Microsoft event. It is the Microsoft Learn AI Skills Challenge where we are allowed to choose to complete one out of the four challenges from Machine Learning Challenge, Cognitive Services Challenge, Machine Learning Operations (MLOps) Challenge, and AI Builder Challenge.

The AI Builder Challenge introduces us to AI Builder. AI Builder is a Microsoft Power Platform capability that provides AI models that are designed to optimise the business processes.

The challenge shows us how to build models, and explains how we can use them in Power Apps and Power Automate. Throughout the online course, we can learn how to create topics, custom entities, and variables to capture, extract, and store information in a bot.

Why Taking Microsoft AI Challenge?

Users login the Samsung app using face recognition technology from Microsoft AI (Image Credit: cyberlink.com)

Since last year, I have been working in the AI module in a Samsung app. I am proud to have the opportunity to learn about Microsoft AI and use it in our project to, for example, allow users login to our app using the face recognition feature in Microsoft AI.

Therefore, embracing this challenge provides me with a valuable opportunity to gain a deeper understanding of Microsoft AI, with a specific focus on the AI Builder. The AI Builder platform empowers us to create models tailored to our business requirements or to opt for prebuilt models designed to seamlessly address a wide array of common business scenarios.

In August, I finally completed the challenge and received my certificate from Microsoft.

WRAP-UP

By adopting a growth mindset, applying Kaizen principles, and following a structured learning plan, we can embark on our self-learning journey and emerge as a certified professional.

Besides Microsoft Learn, depends on what you’d like to learn, you can enroll in other online courses on platforms like Coursera, Udemy, and edX which offer comprehensive courses with video lectures, quizzes, and labs.

Once you have chosen your certification, create a structured learning plan. You can then proceed to outline the topics covered in the exam objectives and allocate specific time slots for each.

Anyway, remember, continuous learning is the path to excellence, and getting certification is only one of the steps in that direction. Just as software development involves iterations, so does our learning journey. We shall continuously refine our technical skills and knowledge.

A Comic Artwork from a Software Developer

I’m proud to have my comic artwork being accepted by the 7th Singapore Original Comics Festival (SGOCF), a month long event which puts the spotlight on comic artworks created in Singapore. SGOCF is co-organised by Singapore National Library Board (NLB). Thus, all the submissions had to be reviewed and approved by NLB before the artworks could be presented to the public in the library. I’m glad that my work is one of the approved artworks this year.

About My Artwork

Min, a young girl who loves coding.

The title of my artwork is called “Min”. Min is the name of the girl in the portrait. Her name Min, or 敏 in Chinese, means smart (聪敏) and agile (敏捷, yes, it is the same “agile” in our beloved Agile methodology).

Min is a programmer who is studying Computer Science. Even though she is young, she has been playing an important role in the national Artificial Intelligence programme, i.e. the PERPUSTAKAAN.

Unlike other common commics which focus on making female superheroes who are also sometimes hypersexualised, my artwork highlights more on the people we meet in our daily life. In this particular artwork, it focuses on Min, a female programmer in our neighbourhood. Hence, even though Min does not have any special abilities like other traditional superheroes, I hope her image as a female programmer makes girls feel confident, inspired, and motivated to learn more about software development.

During one of my sharings in Haulio, I told the team about women who have been forgotten in tech history, for example Ada Lovelace, who is considered by many to be the first computer programmer. The reason why I shared the story of her is because after I have been working in the software industry for more than 10 years, I realised that there was no question women were in the minority in the local tech industry. When I was studying in the university, the number of female students was fewer in the Computer Science field. After the graduation, their number decreased again in the software industry.

Fortunately, I am proud to work with smart and inspiring female software developers, both colleagues and clients. For example, in 2019, as the co-organiser of Singapore .NET Developers Coummunity, I had setup a tech sharing session with the help of Women Who Code (Singapore) for female developers to join and share their software development story.

Priyanka Shah, Microsoft MVP, talked about chat bot in a Women Who Code (Singapore) tech meetup. (Photo Credit: Marvin Heng)

Whenever I have a chance, I’ll always encourage aspiring female talents who are also interested in programming to join the software industry. This is the main reason why I present my artwork Min in this year of SGOCF.

Drawing as a Hobby

Having a hobby is a great way to chill.

Drawing is one of my favourite hobbies because it encourages creativity and innovation in other aspects of my live.

As a programmer who deals with codes daily, I definitely encourage drawing and painting as a past time as compared to watching movies or playing mobile games. We tend to lose a lot of those when we are only using a side of our brain all day everyday. Drawing helps in not only changing our mood, but also encouraging us to experience things from a different perspective.

It’s awesome to see my drawing presented together with other great artworks in a local art exhibition. (Photo Credit: Singapore Original Comics Festival)

Even though I was one of the few students who passed the art test in the national Unified Examination Certificate exam, it took me a long time to master the basic techniques of drawing since I am self taught. I am finally beginning to enjoy this hobby after years of learning from the experts.

What I learned during the learning process are,

  • It’s alright to start from something small in our learning journey as long as we have a growth mindset. I will put in some time every month to draw.
  • It’s important to learn from the mistakes. I’m happy to have my brother, who is also a graphic designer, to give feedback on my drawings. His professional experience helps me to learn fast.
  • Agile. We can use the very similar strategies we apply in our agile software development to our hobby.
  • It’s necessary to develop skills and hobbies that can help us when things in our life get tough so that we can have something to fall back on.

See You in the Exhibition!

SGOCF artwork exhibition at Jurong East.

SGOCF is a month long artwork exhibition happening at Jurong Regional Library, Level 2, Sky Bridge from 1st July to 31st July, 2022. It’s open to public for free. Please drop by to give support to our local commic artists.

Learning to Learn

The fast pace of change in today’s world means we must understand and quickly respond to changes. Hence, in order to survive and be successful in today’s VUCA world, we need to constantly scan for growth opportunities and be willing to learn new skills.

Working in software industry helps me to realise that with all the disruptions in the modern world, especially technology, ongoing skill acquisition is critical to persistent professional relevance. We shall always look for ways to stretch ourselves to get ahead.

Even though I have been dealing with cloud computing, especially Microsoft Azure, for more than 10 years in my career and study, I still would like to find out how well I compare with my peers instead of thinking that I’m already fine at this area. Hence, with that in mind, I focus on learning Microsoft Azure development related skills on Microsoft Learn during the holiday.

Make the Most of Our Limited Learning Time

So much to learn, so little time.

We all have very little time for learning outside of our work. Combine time we have for learning and the importance of the skills, we can get a simple 2×2 matrix with four quadrants.

2×2 matrix to help prioritizing skills to learn (Reference: Marc Zao-Sanders)

I don’t have much time to keep my cloud computing knowledge relevant because nowadays I focus more on desktop application development. Hence, I decided to give myself a one-week break from work and schedule 6-7 hours each day for learning in the holiday.

In order to make sure we’re investing our time wisely, we shall focus on learning what is needed. Unless we need the skill for our job or a future position, it’s better not to spend time and money for training on that skill because learning is an investment and we shall figure out what the return will be. This is why I choose to learn more about developing cloud apps on Microsoft Azure because that has been what I’m doing at work in the past decade.

To better achieve my goals in self learning, I’ve also identified the right learning materials before I get started. Since I already have the experience of developing modern cloud applications early in my career, I choose to focus only on going through all the 43 relevant modules available on the Microsoft Learn.

Make Learning a Lifelong Habit

No matter which technology era we are in, the world will always belong to people who are always keeping themselves up to date. Hence, lifelong learning is a habit many of us would like to emulate.

Before we start our learning journey, we need to set realistic goals, i.e. goals that are attainable, because there are limits to what we can learn. In addition, as we discussed earlier, we need to ask ourselves how much time and energy we can give to our self learning. We have to understand that learning a skill takes extreme commitment, so we can’t get very far on the journey of self learning if we don’t plan it properly.

Learning is hard work but it also can be fun, especially when we are learning together with like-minded people. Don’t try to learn alone, otherwise self learning can feel over-whelming. For example, besides learning from online tutorials, I also join local software development groups where members are mostly developers who love to share and learn from each other.

Azure Community Singapore, for all who are interested in cloud technology.

Finally, to improve our ability to learn, we also have to unlearn, i.e. choose an alternative mental model or paradigm. We should acknowledge that old mental model is not always relevant or effective. When we fail, we also should avoid defending ourselves and capture the lessons we’ve learned.

Certification and Exam

I’m now a Microsoft certified Azure Developer Associate after I passed their exam AZ-204 in November 2021.

The exam is not difficult but it’s definitely not easy as well.

The exam tests not only our knowledge in developing cloud solutions with Azure services such as Azure Compute and Storage Account, but also our understanding of cloud security and Azure services troubleshooting.

Clearing all the relevant modules on Microsoft Learn does not guarantee that one will pass the exam easily. In fact, it’s the skills and knowledge I gain from work and personal projects help me a lot in the exam, for example the service bus implementation that I learnt last year when I was building a POC for a container trailer tracking system.

How Microsoft Learn helps in my self learning is that it provides an opportunity for me to learn in a free sandbox environment. In addition, the learning materials on the platform are normally best practices to follow. Hence, by learning on Microsoft Learn, I find out some of the mistakes I’ve made in the past and things that I can improve, for example resource management with tags, RBAC, VNet setup, etc.

Notes taken when I was going through the learning materials on Microsoft Learn.

I use Notion to take notes. Notion is a great tool to keep our notes clean and organised. Taking notes helps me to do a last-minute quick revision.

Conclusion

In a fast-moving world, being able to learn new skills helps in our life. There are many ways to learn continuously in our life. Earning certificates by going through challenging exams is just one of the methods. You know what works for yourself, do more of it.

Stay hungry. Stay foolish.

References