Monday, July 20, 2020

What's Blazor WebAssembly and why should you care?


There was a peaceful time where web application development was simple. With ASP.NET, all we had to do was just open the IDE and drag UI elements from a toolbox to design a web page. Double-click on a button and we could write code in C# to be executed when that button was clicked, without needing to worry about how the web works. Needless to say, Microsoft devotees like me were living the dream. Well, JavaScript was still there, but it was the black sheep in the family, due to its amateurish design and issues with compatibility.  Nobody took it seriously unless they wanted some fancy animations. And then, someone saw it through and started standardizing it across browsers. It didn't take long for AJAX to come along and turn things upside down. We survived the first wave but when jQuery hit us, it hit us hard. Just when we were coping with the repercussions, a plethora of JavaScript-based SPA frameworks started to mushroom. All hell broke loose.


Does the above sound relatable? Well then guess what, Microsoft's Blazor WebAssembly is exactly what you've been dreaming of. Finally, a framework where you could forget about JavaScript and write client-side code in C# over WebAssembly. Sounds crazy right? But what on earth is WebAssembly anyway? It's another type of code that can be run on the JavaScript runtime which already comes built-in to browsers. WebAssembly in its purest form is not exactly readable. Hello, it's called Web *Assembly*! Ring any bells? But the thing is, you can convert code written in other languages to WebAssembly and make them run on the browser. That's how you get to write C# code instead of JavaScript. But wait, isn't C# compiled into IL and needs a .NET runtime? Well, how correct you are. That's why the Microsoft guys have ported the .NET runtime to WebAssembly which in turn runs your compiled code. Sweet!


I must mention that there is a different way to use Blazor on the server-side, having no dependency on WebAssembly whatsoever. It's called the 'Blazor Server' where the client-side becomes extremely lightweight and the plumbing happens via SignalR. But that's not everybody's cup of tea, at least not mine. And probably a topic for another day so don't get confused when I say 'Blazor', it's short for Blazor WebAssembly. Before you get all skeptical, Blazor WebAssembly is now production-ready and is officially released in May 2020. What's even better is that the 3rd party UI component builders like Telerik, DevExpress, Infragistics and the rest have already hopped in the bandwagon with their library counterparts for Blazor. It is open-source and free therefore it's receiving immense community support from around the world as a lot of additional component libraries, frameworks and whatnot are being created for Blazor as we speak. The ecosystem is booming and trust me it will be huge when .NET 5 hits the shores in November. So, this would be the best time to start investing, if you know what I mean.

Let's briefly look at a couple of things Blazor provides you out of the box. If you happen to create a Blazor app using the template which uses ASP.NET Core as the back-end, you can enable authorization with a single line of code. The authorization bearer tokens would be included in the request headers without you needing to do any manual work, thanks to the boilerplate code created by the project template. Localization is a similar cross-cutting concern but .NET has a proven way of nailing it for decades. Yes, you guessed it right, Resource Files FTW! You just have to wrap your string literals with @Localize[""] and the magic happens behind the scenes. The same goes for other i18n aspects like the number and date formats. .NET thread culture is set automatically to the browser's culture so there is very little left for you to do.



Interoperability with JavaScript is another cool feature that shouldn't go unnoticed. Blazor supports calling JavaScript from .NET and vice versa. It becomes quite handy when you want to reuse an existing JavaScript library without wanting to rewrite it in Blazor. Incidentally, you might also want to write your own piece of JavaScript code and make it available for Blazor. Whatever the requirement, it's a piece of cake to hook these two together. If you are conscious about offline support, you'll need to use IndexedDB, the NoSQL storage provided by the browser. And if you've already used it by any chance, you know its asynchronous API is a disaster to work with. But the good news is, there are NuGet packages already being built for Blazor which lets you consume it similar to EF, letting you only worry about the data and not how you store or retrieve it. 


One other great feature you get when developing with Blazor is full-stack debugging support in Visual Studio. For example, you can seamlessly put breakpoints in your server code, client code or even in JavaScript code which you interop with and simultaneously step through them in a single session. There are no messy debugger statements or switching between IDEs, just true full-stack debugging. And you can even do the same in Visual Studio Code. Since Blazor uses regular .NET assemblies on the client, code sharing becomes a breeze. How many times have you had to duplicate your DTOs in your server and client? Since it's all in .NET now, you can just define them in a shared library and refer it either from server or client, being totally oblivious to the fact that the latter runs on a browser.


There is more to Blazor apps like its ability to convert them into Progressive Web Apps and to be hosted as pure static sites. So it's definitely something you should try out to see where it stands in the crowd. And if you are a .NET enthusiast, it's undoubtedly a crucial skill set to add to your arsenal. It's already a game-changer and there is so much yet to come. Keep an eye out for stuff like Hot reloading, AoT compilation and CSS isolation when Blazor gets shipped with .NET 5. Visit https://blazor.net today and give it a try. The tables have started to turn, so grab your seat. It's now or never!



References:
  1. https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/
  2. https://www.pluralsight.com/courses/web-assembly-big-picture
  3. https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
  4. https://youtu.be/My_XOzQWwc4


Sunday, May 10, 2020

Singleton: Are you doing it right?

"Tell us about a design pattern that you've used."

Probably one of the most asked questions in a programming interview. And the canned answer always happens to be "Singleton". Why? Because that's the easiest design pattern which you cannot go wrong with. Or is it?

If you don't remember what singleton code looks like, I don't blame you because I don't either. But after giving a little bit of thought, you might be able to come up with this:


Well, true it doesn't have all the bells and whistles like thread-safety and whatnot, but it's a good start. To be frank, I hate locks. It makes the code looking out of place. May be it's just me.

But I have to admit, thread syncing is crucial if you are serious about multi-threaded execution. And you might even want to use "double-checked locking" to favor performance. But what if we could get the same without using locks?


Notice that the above code makes use of how static type initialization works. Static type initialization is guaranteed to happen only once per AppDomian hence line 3 will be executed by the runtime only once, no matter how many threads asked for it.

So what's the caveat? Hmm, glad that you asked. Well, apparently you cannot guarantee when this initialization kicks off, so spawning of our singleton instance will not exactly be "lazy". In fact, it would even be initialized without the class being referred at all. Yikes! Can we fix it?

That's why we've slapped a static constructor in line 6. Mind you, you could've written the same code without it and it'll still work. But with that in place, the compiler generates IL code which fires the initializers in a more predictable fashion. Now the initialization would only happen whenever you refer the static class for the first time. But still, it's not ideal. At least in theory.

What if you have other static members in this class? They could get referred elsewhere and your singleton instance would be spawned prematurely. It's a valid case hypothetically. To circumvent this, you could add a nested static class only to hold your singleton instance and return it when needed. But that's overkill in my opinion. I'm pretty content with the above.

Ok, but can't we achieve this lazy behavior with something much more simple? Sure you can. Lazy<T> to the rescue!


This seems to be the most elegant solution of all. It has everything we tried to achieve: performance and laziness in one package. Have you coded your singletons like this? I have to confess that I have not. In fact, I've only used the style shown in the 2nd code snippet. But I'm looking forward to try out the Lazy<T> implementation when I get my next chance. probably you should give it a shot too. Cheers!

PS: One more thing to note before wrapping up. By using locks or static initialization, you are only making your "singleton instance initialization" thread-safe. It doesn't magically make your other instance methods that do the real productive work thread-safe. You'll need to handle those case by case, if they are prone to be problematic in multi-threaded environments. 

Saturday, May 2, 2020

Demystifying pass by value & pass by reference

Here's a simple code block. Try to figure out the possible output.


When you run this, the test1.Name will still write "original" to the console. If you thought that accessing test1.Name after it being set to null will throw a NullReferenceExceptionthen you definitely need to keep on reading :)

If you got the correct answer, then good for you but you might also be wondering why I pulled out a silly question like this which the outcome is fairly obvious. Well, it turned out that it's not fairly obvious to an untrained eye, despite how many years it might have looked at code.

I had a somewhat heated argument with one of my colleagues regarding this phenomenon, who happened to be a seasoned programmer. And finally, I had to type the above code in Visual Studio to prove my point. So I believe that this is a tricky area where most programmers tend to trip sooner or later. Hopefully, this post will set things straight.


Back to Basics
So what are value types and reference types? In .NET, value types are derived from System.ValueType and reference types are derived from System.Object. While value types are generally stored in the stack, reference types are stored in the managed heap. Examples of value types are Int, Char, DateTime, Enum or Struct whereas String, Delegate, Interface or Class are examples of reference types.

You can think of a variable as a container. When the variable is of a value type, the variable's value is stored inside the container itself. But when the variable is of a reference type, what the container contains is not its actual value but a light-weight meta value pointing to a different place where you would find the actual value.

The best analogy I can think of is the meta redirect tag on an HTML page. When you access this page's URL from a browser, some HTML would be rendered. But due to the meta redirection, what's rendered would be fetched from a different URL. The original page is the container of your reference type variable. However, when you access it, it will bring you the value from a different place.

I hope I didn't make it sound more confusing. I'm trying my best to explain without talking about pointers.

Ok so if you've been following me thus far, you would still scratch your head why on earth a reference type variable still holds its value even after being set to null. For that, you have to understand what happens when you pass variables around.


Pass by value & pass by reference
When you pass a variable to a method by value, you pass a copy of that variable. So whatever you do to that variable does not affect the original. But when you pass by reference, you work with the same copy and therefore all changes are sort of "global".

In the above example, what you saw is an example of a variable passed by value.

Wait, what? Isn't that a reference type variable? Don't they get passed only by reference? You may ask.

Well, that's what you used to believe because whenever you manipulate an object's properties via a passed in variable, the original object retains those changes throughout. But if that was passed by value as I say, how could those changes persist? Yes, it's highly confusing when the phrase "objects are passed by reference" is already baked into your head.

Back to basics. Go back and read how I explained the variables using a container analogy. When you pass a reference type variable to a method, by value, shown in the example above, a copy of the variable is passed in just like for any value type. In this cause, what do we have inside the variable's container? A meta value pointing to a different place.

Was a copy of the value which it points, created? No. Then? Only a copy of the variable with its content was created. A reference type variable does not contain its value inside it, so now we just have two variables pointing to the same actual value. What happens when we set this new copy to null? Does it change what it pointed earlier? No. Just like when you change the meta redirect tag in an HTML page. Just because it redirects to a new URL now, it doesn't magically delete the HTML page which it redirected earlier. That page will still continue to exist.

If you want to change the original content of a variable from inside a method which it was passed in, you need to pass in by reference using refout or in keyword.

Woah, wait. Then how did my code work all this time? I happen to mutate my objects all over the place without a problem not worrying about how I passing them in.

Err... well yeah that's probably because most of the time, if not all that you did was the dot (.) dance on your objects. Back in the day, we had to explicitly say go fetch data using the arrow (->) notation when dealing with reference type variables, so this confusion was not commonplace I suppose. But now, dotting on a reference type variable or on a value type variable (think of a Struct) works more or less the same way, thanks to the compiler.

Retrospect
If you take the above example and change the line inside ModifyTest1 method to test1.Name = "fake"; the output would print "fake" instead of "original". Because as soon as you do test1.(something) it applies to the destination object instance. But when you do test1 = null; or even test1 = new Test1("fake"); for that matter, you are basically changing your variable's (container's) content, not what its previous content was pointing at. Since the calling code still has a test1 variable pointing to the original content, setting the copy of the test1 variable to point to null or to a different instance by the ModifyTest1 method does not affect the original content.

Running the above code would have resulted in a NullReferenceException if the method signature happened to be ModifyTest1(ref Test1 test1) and the call was done as test2.ModifyTest1(ref test1);. And that's the same way you generally pass your value type variables, as reference, at times (Remember int.TryParse()?).

I sincerely wish that I have not made you completely go nuts with this explanation. This is just my understanding of how value types and reference types work when you pass them around. I wish I could include how string type behaves like a value type even though it's a reference type, but this post has become too long already so maybe that's for another day. Cheers!

Wednesday, April 22, 2020

How to sort divs based on visitor's country


Recently I've got an opportunity to participate in revamping our company's official website.

One of the suggestions that came up there was to sort the clients' testimonies according to their relevance. And how would you know that you may ask? Well, one way to infer that is by capturing the visitor's geolocation and arranging the testimonials so the closest would show up first. Time to get to work!

To get the visitor's geolocation, initially, I tried the following service:
https://www.geoplugin.com (BTW later I ended up using this instead)

Well, that was the easy part. You just include their script and call a method to get country information.

<html>
 <head>
  <script src="http://www.geoplugin.net/javascript.gp"></script>
 </head>
 <body>
  <script> 
    alert(geoplugin_countryName()); 
  </script>
 </body>
</html>


The hard part was rather to get the testimonies sorted. Here's what I did.

We have clients from europe, america, middleast and australia. If someone from Norway visits our site, testemonies by Norgegian clients should show up first, then may be Swidish ones and so on.









So it's not just sorting by one country. You need something like "ORDER BY this, this too, this as well" which should work up to many degrees. I was much more interested in writing the sorting algo, overlooking the mechanism to compute the order by sequence. So the order by sequence was merely hardcoded for each potential geographic:
let computeSortOrder = function(countryCode) {
 switch (countryCode) {
  case 'NO':
   return ['NO', 'SE'];
   break;
    
  case 'SE':
   return ['US', 'CA'];
   break;
    
  ...

  default:
   return [countryCode];
   break;
 }
}

Now we got ourselves an array of counties that we would like our testimonies to be recursively sorted. How would you implement that? Custom sort with recursion!




 1. let sortClients = function(sortOrder, containerId) { 
 2. let divs = $('#' + containerId).find('.testimony');
 3. let orderedDivs = divs.sort(
 4.  function(a, b) {
 6.   let index = 0;
 7.   return innersort();
 8.   function innersort() {
 9.    var matchA = getMatch(a);
10.    var matchB = getMatch(b);
11.    if (matchA && !matchB) {
12.     return -1;
13.    } else if (!matchA && matchB) {.
14.     return 1;
15.    } else if (!matchA && !matchB) {
16.     index++
17.     if (index < sortOrder.length) {
18.      return innersort();
19.     }
20.    }
21.    return 0;
22.   }
23.   function getMatch(item) {
24.    return $(item).data('country') === sortOrder[index];
25.   }
26.  });
27. $('#' + containerId).append(orderedDivs);
30. }
Let me explain. The "sortOrder" is the array of countries returned from my earlier (ugly) function. The "containerId" is the id of the div which encloses all testimonies. Each testimony div is tagged with a class called "testimony".





In line 2, we get hold of all testimony divs we are interested in sorting. From line 3, the custom sort starts.
Basically the sorting function takes two arguments, essentially two adjacent items in the unsorted array say a & b and returns an integer where a negative value means a < b, positive means a > b and 0 means a = b. It is repeated many times for many pairs until all the elements in the array are in sorted order. The algorithm used will depend on your browser's implementation of ECMAScript. Does anyone still remember how bubblesort works? :) Here's some headsup.



So here, the modification to the general sort is we do the matcing recursively for everything in our sortOrder array. In line 15, when we don't find a match for the currently sorted country, we try to find a match for the next potential country in line at the sortOrder array. And it's repeated till the array is exhausted. The beauty is, it's not depending on any fixed degree of sorting. You can pass in an array of all the countries in the world and still get your divs sorted accordingly.



Alright, I hope you got some idea of the code now. By the way, the "data('country')" is how I tagged a testimony to a country in its div. Example below.



<div class="testimony"  data-country='NO'>
 bla bla bla
 ...
</div>

That's all for now. Stay safe and don't forget to wash your hands! #covid19

Friday, March 20, 2020

COVID-19 Status - Sri Lanka

COVID-19 is rapidly spreading in Sri Lanka at the moment. The Epidemiology Unit, Ministry of Health in Sri Lanka publishes a report at 10AM every day with data collected from all hospitals treating COVID-19 cases. I thought of creating a timeline using ArcGIS map to better visualize this data. 

Currently, it's hosted here: https://srilanka-covid19.netlify.com/


PS: Now it's showing the realtime counts too, thanks to the API provided by the Health Ministry.

What's Blazor WebAssembly and why should you care?

There was a peaceful time where web application development was simple. With ASP.NET, all we had to do was just open the IDE and drag UI ...