I really love C#. It's by far my favorite programming language. And who wouldn't agree? I mean with a piffy, roll of the tounge Wikipedia description like this, what is not to love?

C# is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

"Yeah, yeah", I hear you say dear reader. "I know C# is great to use if you want to write better Java apps, even so, this is the Bekk Functional advent calendar. What are you rambling about?"

I know you love your pure, scalable functions in Haskell and your fancy web pages written in Elm, but did you spot the magic word in the description above? It said:

... functional ...

Yes! As the late Sean Connery said so excitedly:

C# is not only useful on the backend, while writing iOS and Android apps, replacing JS in the browser or as a scripting language, it also becomes more and more functional-friendly with every new language version!

However, what does it mean to be a functional-friendly programming language?

Functional advantages

Enrico Buonanno argues in his book Functional Programming in C#: How to write better C# code that we should care about functional programming because it gives us the following:

Power: We can get more done with less code. Functional programming raises the level of abstraction, allowing us to write high-level code while freeing us from low-level technicalities that add complexity but no value.

Safety: A program written in the imperative style may work well in a single-threaded implementation but due to the mutable state that is in its nature, cause all sorts of bugs when concurrency comes in. Code in the functional style might offer better guarantees in concurrent scenarios.

Clarity: We spend more time maintaining and consuming existing code than writing new code, so it’s important that our code be clear and intention-revealing. As we learn to think functionally, achieving this clarity will become more natural.

C# supports a lot of functional building blocks, such as function delegates, higher order functions, expressions instead of statements, method chaining, extension methods, yield, LINQ, tuples and local functions. Despite all that, the core functional tenet of immutability of data has always been a C# pain point. Until now.

Immutability in C#

C# second greatest error[^error] was to one-up Java and introduce the concept of properties as a first class language feature with the poorest defaults of all time: the default property syntax made it all too easy to create classes with mutable properties. The deed is as simple as:

Alas, premature aging can take its toll and we should've listened to the dog, hound, wolf or whatever, and make the age property immutable. It came with a cost however, amounting to a lot more work and boilerplate code. I mean, I got bored by just writing out this small example from the past:

C# 6 made the pit of success a bit deeper by introducing read-only properties using only a get accessor:

C# 7.2 made declaring our intent more explicit by allowing a struct to be marked as readonly:

This is all well and good, yet consider when our class or struct has multiple readonly properties and we need to construct a new copy with an updated value in one or more of them. My head hurts just by thinking about it. The boilerplate has tested my Christmas spirit, why must we endure this error prone, manual waste? A better way must exist!

Records in C# 9

And finally this year, at the end of the worst year ever, it does! Microsoft bestowed .Net 5 and C# 9 upon us, giving us my most requested feature: language support for immutable data types, Record types!

A record is immutable in that none of the properties can be modified once it's been created. When we define a record type, the compiler provides several useful methods for us:

Methods for value-based equality comparisons

Override for GetHashCode()

Copy and Clone members

PrintMembers and ToString()

Seems like we're finally winning the war against boilerplate, and if we need to create a copy with an updated value, we can now easily use the with keyword:

With such quality functional features in C# like immutable records, not even time's inevitable flowing towards my 40th birthday and usage of 24(!) year old memes can break this aging developer's Christmas spirit!

[^error]: C#'s greatest error was to introduce the concept of null and not fixing it until C# 8.

Functional ... C#?

When writing view-logic, there's always tons of stuff that needs to be processed in some small way. Either texts that need to be translated, numbers that need a thousand-separator, etc. Oftentimes, these things can clutter up the code and make it harder to understand what really is going on. Let's look at an example.

Say you're writing some code to show a shopping cart at a web-shop. For each item you need to show the item's name, its description and its price. The name needs to be displayed, the description is a type that can be translated to the user's language and the price should be formatted with the correct thousand-separators and currency:

This looks cluttered for a new developer. What could help make it clearer? Well, to start off, we could try to extract part of the code into local variables, such as the formatted price:

Turns out, we can't really do that as we only have access to the item-value inside the lambda-function given to List.map. What we instead could do is use a function that accepts an item and returns the formatted value. However, adding such a small function next to the shoppingCart-function to do just that one little thing makes it difficult to see the more important functions such as shoppingCart. Also, it is only going to be used in the shoppingCart-function. There should be a better way.

This is where local functions come in! let-in-blocks do not only allow us to create local variables, but also local functions that can only be used within the surrounding function. Let's see how that looks:

And now our view-logic for the shopping cart should be more clear while not cluttering our global scope! We can also keep going and move our lambda function into a local function:

This makes it even clearer what the actual view-logic is, as we can more easily separate view-logic from the logic that generates the view for each item. Additionally, local functions can be type-annotated, as such:

This can make it clearer what the code does, but can also hurt readability. Remember to think about whether the type annotation helps making the code clearer, or if it just introduces visual clutter.

Now go on and let the functions in!

Letting functions in

In March our team started working remotely, as many other teams did. Suddenly our new norm in communication was slack messages, sub-par video chats, and tagging each other in Trello.

Despite not being able to see each other physically, it was still important for me as a designer that our team was able to communicate well. In creative workshops, I wanted everyone to feel that they could openly share their thoughts. In morning meetings, I strived to create a good atmosphere where everyone felt safe talking to the camera. When prioritizing tasks, I focused on getting everyone to feel that they were being heard. To achieve this, it was beneficial to get to know each other on a personal level, and not just through the tasks we are working on.

So, how do you get to know your team members, despite being spread out across the city, or even across countries? With help from some colleagues, I’ve put together a list of activities that can be carried out in social settings with your team or in other settings to get to know each other better. Of course, to really build trust you should probably dig deeper than these activities, but they are a great way to get started!

⁉️ Host a quiz

Quizzes come in many shapes and sizes. Make a Kahoot quiz with questions about the participants (or choose a premade quiz), host a music quiz from a specific era, or get people in groups and quiz them on a range of categories!

🎮 Play an online game

There are plenty of sites with multi-player games, where Among Us seems to be all the rage right now. Other games include Skribbl (drawing), Placeit (maps), Drawasaurus (drawing), Haxball (soccer) and Geoguesser (geographic discovery game).

👒 Morning dress-up

Choose a theme, such as the 90s, hats, or movie characters, and have everyone dress up! This could be fun to do at stand-ups or morning meetings as a simple, energy-boosting way to start the day.

🤹‍♀️ Charades

Traditional charades can easily be played on video. Choose a theme or topic, such as famous actors or Christmas. Each team member acts out a word of their choosing, and the rest of the participants guess what they are acting out either by yelling out or writing in a chat.

🍕 Host a crash course

Teach each other about a topic you’re passionate about! Have one person at a time host a short, online class such as a cooking lesson (pizza dough!), plants 101, how to make cocktails, how to knit, do origami, and so on. If planned ahead of time, the other team members can get what they need to participate, such as ingredients for pizza dough.

🎬 Post a picture of...

To get to know your team members even better, have everyone share various photos from their lives. Make a board in Figma or Miro and write down the titles for as many categories as you want, such as favorite movie, what you had for dinner yesterday, or you as a 5-year-old. Everyone posts photos within the categories. You can do one each day for a month, or do them all in one session.

👨‍👩‍👧‍👧 16 personalities

Each team member takes the “16 personalities” test and reviews their results with each other. Each person could make a short presentation of their results and how they think the results match their personality or have the other team members reflect on their results.

😸 Mini-presentation

It’s always fun to learn new, random things about each other. Have each person on your team make a 5-minute presentation about.. anything! It can be their cat, a game they like to play, themselves, or their favorite country. They can either make a full-blown keynote or just show something from their flat on video.

🍫 Rate the food item

This activity requires some planning - but is worth it. Choose a food category, such as chocolate or ice cream, and assign each team member to a day. On their specified day, they will present their favorite food item within the category and everyone will taste and rate it. Make an online score-board and rate the item within categories such as taste, smell, feel, and look.

🧘‍♀️ Stretching session

Find a stretching video on youtube, or have someone on the team guide everyone through a short stretch on video. This is great to do in the middle of the workday, especially if you spend most of the day sitting at a desk.

🎶 Shared playlist

Create a playlist where everyone on the team has to add songs. You can either have a daily category such as “a song from your favorite band” or “a song that reminds you of your teenage years”, or just have everyone add 5 songs they like. This isn’t necessarily an activity that lasts in one session, but is a good way to get to know each other over time.

🏡 Flat crawl

A great way to get to know someone is to see what their home is like. Host a flat crawl, where you take turns showing each other your flats or houses. You can choose one room, or the entire flat, but make sure to put a timer on each person. As a bonus, each person can have a theme in their flat, which can include decorations and a short activity.

🤯 Guess the riddle

Break up team members into groups of 2 or 3, and give them a riddle or two to solve. This can be a quick activity or last for a while depending on the level of the riddles. If a holiday is near, such as Easter or Christmas, you can theme the riddles as well!

👩‍🎨 Paint n’ Sip

Each team member finds a paper and a pencil (or an easel and paint if feeling fancy) and something to drink. One person is responsible for instructing everyone through a chosen painting step-by-step, although everyone can add their own flair to their painting. If no one wants to be the instructor, you can also rent someone to do this for you.

🎯 Bingo!

Bingo can also be played virtually in a variety of ways. If playing traditional bingo, each team member gets a different board with numbers and one person uses a random number generator to pick numbers. The first one with five in a row gets bingo! You can also switch out the numbers with facts, where everyone has to talk to each other to find someone who matches each fact. Or, switch out the numbers with words/names related to your workplace, and write a story about your workplace where everyone has to cross off the word if they hear it in the story.

🤷‍♀️ Guess who

This activity can be done in many ways - get everyone to send you a fun fact about themselves, a photo from their flat, their favorite food, what they wanted to be when they grew up.. the possibilities are endless! You all guess who is who, before the big reveal, where everyone can share a story about their fact/photo.

🕵️‍♂️ Scavenger hunt

Have everyone run around their flat looking for an object within a category, where they then have to present it to the others. These categories can be very specific, such as “something to drink” or “a photo of you”, or more abstract such as “something that makes you happy”.

17 activities to get to know your team remotely

If you're anything like me, you run all your code in managed services. But believe it or not, you might come across a problem that you can't solve with fully managed cloud services, and that's why Kelsey Hightower made Kubernetes... right?

Well, that was at least my world view until about a year ago, until I tried to stuff a Kafka cluster in Kubernetes. Yes, I know. Confluent reccomends running Kafka in Kubernetes, and it is possible, and maybe even a good idea! However, we had some very specific requirements that made it unviable to use Kubernetes. This isn't a blog post where I'll try to justify not using Kubernetes, but if you find yourself in a position where you need more control over your runtime environment, and you want to get closer to a Docker-like workflow, please read on.

One of the things I absolutely love aboud Docker, is that it gives you a really great way to package your applications. It certainly has alot of other things going for it as well, in terms of build speed and reusing layers, but I really like to be able to package and deploy an immutable package of my app.

When we started thinking about how to deploy our Kafka cluster we wanted to get as close as possible to this type of workflow. We wanted to have an immutable package that we could roll out, so that we could roll out new versions to our cluster without worrying about random errors when our virtual machines booted.

We knew that we wanted to rely as much as possible on Infrastructure as Code, and not depend on manual config, ssh-ing into virtual machines etc. Given the complexity of Kafka by itself, we also wanted a solution that did not introduce too many new variables. That gave us a few options.

Bake the images with e.g. Packer

Let Ansible or similar config management tools setup the machines for us

A combo of the above

While we acknowledged that using something like Packer in combination with Ansible would be really good for a problem like this, none of the team members working on this had any experience with neither. On the other side, we had plenty experience with Terraform and good old shell scripts, so we wanted to solve the problem with those tools.

Skip forward a few weeks and we have a pretty solid rig set up.

It goes a little something like this:

Terraform creates a virtual machine

Virtual machine has a startup-script that installs all required software

Virtual machine is stopped, and a machine image is created.

Script tags the image with git-hash

After the last step is completed we have a versioned pre-baked image that we can start.

When we boot our Kafka machines, we just point them to the newest image we have created, and supply them with a slim startup script. This startup-script has one main task, and that is to pull runtime-config from metadata-storage and interpolate this into the config files. Poor man's Docker!

One of the main benefits of this approach, is that you negate the need for hefty downloads and install procedures when you boot the virtual machine. This also reduces the risk of something going sideways because of network timeouts or other random events. Secondly, you can be confident that you're running the same version on all instances, and there will be no version- or config drift.

If you want to see an example on how to solve this on GCP, please check out the Github repository!

Who needs Docker anyway?

On how you might unintentionnaly test people's multitasking skills during your presentations

When preparing a presentation it can be tempting to put up informative slides, clearly underpinning what you will talk about. It’s comforting to be backed by text during presentations. Also, it’s reassuring to have a fallback in case one slips out of the flow on stage. Sometimes it may also give a sense of authority: Having such massive slides by my side, this must be worth listening to, right?

There’s just one problem: When exposed to both speech and visuals, people tend to stop listening and focus on what's displayed instead. It’s difficult to listen and read simultaneously, and that also applies to your spectators. However, your objective is to convey a message in a clear manner, not test the audience’s multitasking abilities.

A good rule of thumb is to up a maximum of one sentence of text per slide - preferably only a few words capturing the essence of your message.

How about the fear of losing the thread? Make use of your own set of personal notes and do not forget to train for the talk whilst actively using these as support. And perhaps rehearsing in front of a friend will actually make you assured than having the wall of text behind your back?

Needless to say, sometimes it makes sense to display in detail. Say you’re holding a presentation about the geography of France: It will certainly be useful to put up a map to illustrate the ocean, the sea, and the alps. But when doing so, make sure to walk the audience through the content. And do so quickly - as soon as new items are displayed, the crowd will switch from listening to reading mode.

Now, what to put on your slide deck instead? Photos or simple illustrations, setting the tone for your talk can often trigger your spectators' emotions and capture their curiosity and attention.

Good luck with your minimalistic talk!

Capture your Audience's Attention by Doing Less

Elliptic curves are seemingly ubiquitous in modern cryptographic protocols, and may turn up again later this December. Let’s take this opportunity to gain insight on what they are and why they are used.

It is well known that prime numbers are important for cryptography, although it has not always been true. The advent of primes came with several groundbreaking papers almost 50 years ago. Pioneers in introducing asymmetric cryptography, Whit Diffie, Martin Hellman, Ron Rivest, Adi Shamir and Leonard Adleman, used results from number theory to build key agreement, encryption, and signatures. Prime numbers hold a very special position in number theory, and this carried over to cryptography.

From Primes to Crypto

Cryptographic protocols are typically working modulo some prime p. This can be likened to turning the number line into a coil, such that 0, p, 2p, etc. all join at the same place. From then on, whenever we add or multiply the number such that we go beyond p, we can simply remove as many multiples of p as necessary until we come between 0 and p again.

Now, imagine that we used a composite number instead, for example 12. Then 0 and 12 are "the same" in this situation, but that also means that 3 multiplied by 4 is ... 0! One of the intuitions when working with normal numbers is that if ab = 0, then either a or b would have to be 0. Hence, when using composite numbers, there is simply stuff that no longer works the way we’re used to. Fortunately, this is not the case when using the primes — for instance 7 — as our so-called modulus.

Let’s make a rule, and let’s call it m. We take the coil we just made from the number line, and since we can always reduce numbers to below p, we label our points on this circle from 0 to p-1. Given two points a and b on the circle, we decided that the output of the rule m(a, b) should be the point which is represented by the product ab, possibly after reducing modulo p. It may look like a very natural rule, but it is nonetheless a rule we just agreed on. If you play around with this rule a bit, you will notice some properties:

If a = 1, then m(a, b) = b (and the other way around).

For any a, b not equal to 0, m(a, b) is never zero. So, if we removed 0 from the circle entirely, no harm would happen — the rule would still be well-defined.

For any nonzero a, there is always some b such that m(a, b) = 1.

These nice properties — together with a property called associativity — are the properties we need to be able to do cryptographic computations.

Now focus on a particular number on the circle, and let’s call it g. If we take m(g, g), or — to return to the more usual notation — g², we will reach a new point on the circle. We can continue this process and compute g³, g⁴, etc. At some point, we will reach 1.

All the points we have visited in this process are members of the set of numbers generated by g, and if the number of points on the coil is a large prime, then we have a very good candidate for doing cryptography, for example Diffie-Hellman key exchange. Let h be some number in this set generated by g. That means that h = gᵉ for some exponent e. If it is easy to find this e from g and h, we would have trouble. Fortunately, it turns out that if we use large enough primes, then this e appears to be very difficult to find.

From Coils to Curves

Coiling up the number line is not the only way of finding suitable primitives for cryptography. Let’s make a new rule. Instead of using a circle like we did in the previous section, we consider the following equation:

y² = x³ + ax + b, where a and b are fixed constants.

If we graph this in our usual coordinate system, it may look like this curve:

We will now make a rule on how to combine two distinct points P and Q on this curve. The agreed upon notation is to call this rule addition, but we will have to define what we mean by that. Programming languages often include this mental concept as operation overloading. Draw the straight line between P and Q. It will intersect at a third point, say, R. This could have been a nice candidate for P + Q, but since we are making the rules, let’s make this a bit more interesting. Draw a vertical line through R. It will intersect the curve on the opposite side of the x-axis, and we define this point as P + Q. Just as before, this is a rule we’re deciding here and now. However, this also turns out to be a very useful rule, with the same properties as before:

Instead of having the point 1 on the circle, we imagine a point infinitely far up. (Remember what you see when looking at railway tracks: parallel lines actually meet beyond the horizon, at infinity.) So, now the line intersecting R and P + Q is indeed also intersecting a third point: the point at infinity. This can be made precise, but requires maths from algebraic geometry, which is far beyond the scope of this blog post. This point at infinity has all the same properties as 1 had above.

For any point S on the curve, there is always a point T such that we get a line intersecting S, T and the point at infinity. This means that for any point S, we can find a point we can call -S.

You can test this rule interactively in a simple GeoGebra demonstration.

In this case we assumed that P and Q were distinct. If P = Q, then we simply use the tangent to the curve at point P instead, and proceed as before.

In particular, take a point G, and compute 2G = G + G, 3G, 4G, etc, that is, we add G to itself many times. Eventually, we reach the point at infinity, and then back to G, see illustration below. We have now spent about 1000 words of this blog post getting here, just to do the same as we did above (where some fixed number g was multiplied by itself over and over again until we reached 1 modulo p), and what was the point? Above, we said that computing exponents are secure if the primes were large enough. It turns out that "large enough" is currently about 3072 bits, or a number with approximately 925 digits. That is somewhat strenuous even for a computer, but the elliptic curve version only requires us to work on numbers of size 256 bits, or 77 digits, which is far more efficient.

Elliptic Curve Diffie-Hellman Key-Exchange

The Diffie-Hellman key-exchange protocol is widely used today, and its instantiation using elliptic curves is ranked as the best choice in modern cryptographic protocols like TLS and SSH. The protocol is fairly simple. The public information is an elliptic curve E and a generator G for the points on this curve. One party, Alice, samples a random integer a and computes a point A = aG. Another party, Bob, samples a random integer b and computes B = bG. Then they exchange the values A and B, and compute the shared key K = bA = aB = abG. As long as both a and b stay secret, even when an attacker knows G, A and B, then the key is secure.

Reference: https://asecuritysite.com/encryption/go_x3dh. Used with permission.

To achieve long-term security, to protect previous messages in the case where someone’s secret keys are leaked after the fact, Alice and Bob can do an ephemeral key-exchange every time they communicate. If a and A is Alice’s long term key pair where A is public to everyone, and similar for Bob, they can run the following protocol to agree upon a one-time session-key. Alice samples a random integer c and computes C = cG, and Bob samples a random integer d and computes D = dG. Then they exchange C and D, and compute the shared key as (ab + cd )G.

The interested reader can check out this simple example written in Go. Are you able to extend the basic protocol to the ephemeral key-exchange on behalf of Alice and Bob?

We finally point out that this protocol is vulnerable to a man-in-the-middle attack, and we need to also send signatures computed on the messages to ensure that the communication is authentic. Are you able to attack the protocol as described above, when signatures are not used? If you found these problems interesting, we encourage you to check out similar challenges at cryptohack.org.

Common Curves

Not all elliptic curves are suitable for cryptography. There could also be power in choosing a curve and the distinguished base point(s). Hence, implementations tend to choose among a small number of well-known curves. The US National Institute of Standards and Technology maintains a list of recommended curves; P-256 is perhaps the most popular among these.

Among others, there is also the SafeCurves collection proposed by Dan Bernstein and Tanja Lange. In particular, their Curve25519 has proven to be a popular choice.

Elliptic curve libraries will typically have tailored support for certain curves.

From Coils to Curves - A Primer on Elliptic Curve Cryptography

In this article, we will look at one of webpack's exciting new features, Module Federation. This feature will allow dynamic code reloading from another project at runtime. Using module federation will enable sharing code from other projects with only a little tweaking in your webpack config. It can make a website consisting of multiple frontend applications appear as one seamless SPA. Neat, huh?

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

In webpack 5, a new exciting feature was released. Module Federation, a webpack plugin enabling dynamic code loading from multiple webpack builds at runtime. It supports dependency sharing, i.e.:

Application A, importing code from application B, will attempt to use its own dependencies before downloading payloads from B. Nevertheless, A will download the dependencies from B if they are missing from A.

This way of sharing code between webpack applications opens up a sea of possibilities. For instance, you may use react components from other projects while receiving updates, both during build and runtime. Moreover, if your website consists of many applications, you can have a dedicated app to load and route between all projects. Another use case is to incorporate a design system at runtime. Since you are fetching the components from a different origin at runtime, you can get the latest version from your design system without rebuilding and deploying.

Example

I am more of a learning by doing kind of gal, so let us have a look at an example to see how it is done. We will create a Christmas calendar using module federation. For illustrative purposes, we will be using two separate npm projects:

calendar-container: Contains the calendar component.

calendar-card: Contains the calendar card component.

We will use module federation to import components from calendar-cardinto the calendar-container during runtime.

The wonderful thing about module federation is that we can easily outsource the development of various card components to fellow programmers, and reap the fruits of their efforts later on.

The complete example can be found here!

App 1: The Container

Let's start by creating our first application, calendar-container. calendar-container will be a simple react application containing a title and a container that, later on, will render the calendar cards. The application will run on localhost:3001.

App 2: Calendar Window

Next, we will create the CalendarCard-component in an application we call calendar-card. Initially, you will only see the day of the month the window is hiding. If you click the card, it will tell you how many days there are until Christmas. This application will run on localhost:3002.

Module federation

Now that we have created the calendar container and the calendar card in separate applications, we are ready to set up the module federation to share code between the applications. This is done in each app's webpack.config.js utilizing webpack's ModuleFederation-plugin.

We need to expose the CalendarCard-component that we want to import into the calendar-container-application. This is done in calendar-card's webpack.config.js. We need to add the ModuleFederationPlugin to the list of plugins. In the config, we need to give the app a filename, letting the module federation know to emit a remote entry. Then we must expose the component we want to use, in our case, the CalendarCard-component. Finally, we will add react and react-dom to the list of shared dependencies. That way, calendar-container will use its own react and react-dom dependencies if available. If one of the dependencies is not available, module federation will provide a fallback dependency from calendar-card anyway.

Now that the CalendarCard is exposed, we need to tell calendar-container where to find it. This is done in calendar-container's webpack.config.js. The set up is similar to calendar-card, but we let webpack know that it is expecting a remote module called calendar_card. This is done in the remotes-field. Here, we also specify the location of the remote entry, which is http://localhos:3002/remoteEntry.js. As no other project is importing code from calendar-container - yet - there is no need to expose anything in this application. We need to list the shared dependencies in calendar-container as well, to let calendar-card know it will not need to provide them as fallback dependencies.

Putting it all together

We need an async way to load the application, this can be done by moving all the code from index.js into a new file bootstrap.js. We do this in both applications:

Then we dynamically import the content in index.js:

Now we are ready to import the CalendarCard-component from calendar-card:

And voilà! We have a Christmas calendar that imports code from a separate application at runtime!

In this article, we took a quick look at webpack 5's Module Federation feature, enabling runtime code sharing between applications. This is an exciting new feature that can assist in building micro-frontends and cross-platform code sharing.

We made a simple Christmas calendar showcasing some Module Federation based features. There are still other features to explore. The next step could be to share code in both directions, or perhaps create several applications and add routing between them in a container app.

Module Federation: Micro-frontends with webpack 5 

If you have been following our JavaScript Christmas calendar, chances are you have some interest, and perhaps even proficiency, in the JavaScript programming language. For this blog entry in particular, I hope you also have at least some interest in data science and machine learning. I will demonstrate how you can use your JavaScript skills to develop entry-level data science and machine learning applications, argue why you may want to do so, and provide you with lots of external resources to further expand your knowledge of this subject.

What is machine learning?

For those unaware, machine learning is a field focusing on the development of algorithms which are trained rather than explicitly programmed. Training or fitting a machine learning model means tuning internal model parameters according to some algorithm for successive iterations. Such algorithms can be used to solve problems like classification, regression, sequence mining, computer vision, speech recognition, and much more. Interest in machine learning has skyrocketed the last decades, much thanks to the increased processing capabilities of modern computers. Tools like PyTorch and TensorFlow have made model training accessible for the masses, and users with consumer grade GPUs or even CPUs can now experiment with state-of-the-art machine learning methods.

In general, machine learning consists of gathering data from a domain of interest, performing actions and transformations on this data for it to meet certain desirable properties, train or fit some machine learning model, and interpret the results to draw some form of conclusion. In pseudocode, this may look something like this:

Why JavaScript?

Considering that JavaScript is widely and primarily used to develop interactive web pages, one might ask why you should use JavaScript for machine learning? After all, there are more popular options available, like Python or R. Firstly, the interactivity of JavaScript is very sought-after and useful when making educational or entry-level applications. Furthermore, numerous helpful packages are available through package managers like npm or yarn, many of which you may already be familiar with. Lastly, if JavaScript is your primary programming language, the entry barrier for starting with machine learning using a library like TensorFlow.js is almost non-existent, given you are willing to do some theoretical research first.

Tools and packages readily available in JavaScript, together with some HTML and CSS knowledge, can be used to enhance the user experience at each step of the previously presented pseudocode. For instance:

Model parameters can be chosen from a selection of available options through an interface, rather than being specified as code

Data before and after preprocessing can be visualized

The structure of the machine learning model can be visualized

Model training can be monitored using graphs and callbacks

Model evaluation can be performed interactively

... and much more!

Some popular libraries for machine learning in JavaScript are ConvNet.js for deep learning, Brain.js for neural networks, and TensorFlow.js for machine learning in general.

Theoretical and practical example

To keep this blog somewhat short and concise, I will explain and demonstrate an entry-level example of neural networks for regression analysis. This is a good starting point for any beginner in the machine learning domain. Even without going into great detail, some theoretical knowledge is required to understand what is going on. I give a brief explanation of the most critical concepts in neural networks, before we look at implementing and training a neural network model using TensorFlow.js.

A brief theoretical introduction to neural networks

Data preprocessing means preparing your data to be used with your defined machine learning method. Firstly and most importantly, null-values or empty data entries must be removed. Additionally, you may want your data to meet certain statistical properties which can help your machine learning model train better. This is called feature scaling. A popular form of feature scaling is standardization, for which each dataset column is scaled so that the mean value is zero and variance is one.

In regression analysis, the goal is to find some function which maps a set of input variables x to some dependent output variables y as accurately as possible. This approximation may be found through the training of a neural network. A neural network takes as input a set of parameters, passes those parameters through a series of connected layers, and finds a corresponding set of output parameters by performing mathematical calculations. Training a neural network means tuning the variables used in these mathematical calculates, called weights, so that the difference between calculated and expected output decreases.

The above figure is taken from the book "Neural Networks and Learning Machines" by Simon Haykin, and shows an example of a neural network consisting of an input layer of 10 variables, one hidden layer (meaning it is neither an input nor output layer) of four units, and an output layer of two variables. In general, there can be any number of inputs, units and outputs, as well as any number of hidden layers. Each unit is connected to every unit in the following layer, known as a fully connected network. For each of these connections, the model stores a weight which the incoming value is multiplied with. Additionally, some (potentially nonlinear) transformation may be applied to the sum of all incoming connections at each individual unit. This means the network is able to calculate an output as a nonlinear transformation of the input values.

Some required parameters when defining a machine learning model are as follows:

Network structure: the number of neural network layers, and the number of units in each layer. A model may for instance have an input layer of four features x, one hidden layer of 128 units, and an output layer of two targets y.

Epochs: the number of iterations for which your machine learning model should train. This number must be high enough to ensure model convergence, but training for an excessive number of epochs can be very time consuming

Batch size: the number of training samples your model should use for each weight update. Because the batch size typically is set much lower than the number of dataset samples, the weights are updated multiple times within the same epoch. This ensures faster convergence

Error/loss metric: the way which the performance of your model should be measured. This is typically some type of difference between expected and calculated output

Optimizer: the algorithm explaining how your model should perform weight updates. Stochastic gradient descent or certain variations of this algorithm are typically used

Activation function: the transformation applied at each layer unit, allowing the neural network to find nonlinear relations between its input and output

Callbacks: specific actions which your model should perform while it is training, such as reporting back its current loss

The last thing you need to know is that data is usually split into three categories. Training data is used for model training. Validation data is used during training to validate the model on data which was not used for training. Testing data is used to evaluate the performance of the trained model, by measuring the difference between the calculated and the expected output. Crucially, each of these partitions must have the same statistical properties. A usual strategy is to shuffle the data, before using perhaps 60% for training, 20% for validation and 20% for testing.

Practical example using TensorFlow.js

Finally, you are ready to see some code examples using TensorFlow.js! Note that the syntax and approach is very similar to what you would see when using TensorFlow in a language like Python.

1. Loading, parsing and transforming data

First, you must load your data into your program. Using JavaScript, this is unfortunately not entirely straight forward. TensorFlow.js offers some functionality for this purpose, however it is not trivial to use when loading data uploaded from sources other than URLs. Feel free to try it out for yourself using the TensorFlow documentation. If you instead want to rely on your own JavaScript parsing skills, I wrote a small guide how to do this with react-csv-reader, available in this GitHub readme file. In short, it involves loading and parsing your data to a desirable format.

Assuming you made it past the hurdle of loading your data using the above guidelines and have managed to split it based on your input and output parameters, you should be left with four JavaScript arrays: x_train, x_test, y_train, and y_test. Arrays prefixed with x are inputs, while y are outputs. We will use the training data to fit our machine learning model, and keep the testing data for later in order to evaluate the model performance. Suppose all loading and preprocessing was done using an imaginary loadAndPreprocessData method:

We must transform our arrays to tensors, which are the data structures used by TensorFlow:

2. Defining a neural network model

Next, we define our neural network model with a desirable structure, in this case a single hidden layer of 128 units, and input and output layers according to the size of our training data. The tf.sequential function lets us define our model sequentially, starting with the input layer and adding successive layers until we reach the output layer. The tf.layers.dense function returns a layer which is fully connected to the previous layer:

Note that we do not have to explicitly define the input layer. "Relu" is a rectifier used as activation function in the hidden layers. Meanwhile, a linear activation function is required in the output layer.

We compile our model using the desired optimizer (how the model will update weights) and loss (the metric which will be used to measure model performance). We use the Adam optimizer with an initial learning rate of 0.01 and mean absolute error loss metric:

Then, we define some callbacks which will continuously update a graph bound to a div with id "lossCanvas" on our frontend with loss and validation loss values as our model trains through its epochs and batches:

3. Model training and evaluation

Finally, the model can be fitted:

The "trainValidationSplit" parameter of 0.25 ensures 25% of the training data is used for model validation instead of training. The batch size is usually chosen based on the size of your dataset, but should be small enough to fit an entire batch in memory. The number of epochs may be adjusted to ensure convergence. Training should preferable be terminated (for instance using the Early Stopping callback) when the performance of the model no longer increases for successive iterations.

When the model is done training, it can be used to make predictions for previously unseen data samples, such as the training data we defined previously:

We may now evaluate how well the neural network approximates the relation between input and output variables, for instance by calculating the coefficient of determination, or by using empirical analysis and expert knowledge.

Final thoughts

Of course there are several reasons why most machine learning practitioners use programming languages other than JavaScript for their daily work. Model training directly in the browser is usually very slow, and consumer grade hardware often have memory or processing limitations. Additionally, we only looked at a tiny fraction of what machine learning has to offer in this blog post, not all of which are equally suitable for JavaScript applications. Even so, there are numerous interesting areas for which frameworks like TensorFlow.js can be applied, perhaps most successful if combined with appropriate backend frameworks for model training. Machine learning research in general is still making huge strides, for instance in areas like protein folding and robotic manipulation.

Supplementary to this blog post, I have written a small machine learning application using React and TensorFlow.js which you may check out. You can try the application here, and see the code here. It implements a simple GUI, and allows user to upload a .csv file (given it has appropriate formatting), select some desired input and output parameters, train a predefined neural network regression model, and evaluate its performance.

Machine learning with JavaScript

I´ve never heard an intelligent discussion about “cost of capital”.

Sitatet kommer fra en 96-åring ved navn Charlie Munger. Siden 1978 har han jobbet med å håndtere investeringene til Berkshire Hathaway. Selskapet er nå et av de høyest verdsatte selskapene på S&P 500, etter å ha oppnådd dobbelt så høy avkastning som indeksen mellom 1965 og 2019. En slik uttalelse fra en så sentral skikkelse i selskapet er med andre ord oppsiktsvekkende, og bør vekke interessen for alle som jobber med strategi og forretningsutvikling.

Strategiutvikling handler nemlig i grove trekk om å foreta velbegrunnede prioriteringer. Ingen selskaper kan satse på alle produkter, i alle geografiske markeder, til alle segmenter. Til det er den tilgjengelige kapitalen for liten.

Heldigvis, skulle en tro, har bedriftsøkonomiske fag i mange år hatt svaret på hvordan en slik prioritering bør foretas. Nøkkelen er i alle lærebøker en beregning av nettopp «cost of capital»; heretter kalt avkastningskrav. Beregningen angir hvilken avkastning som alternativt kan oppnås dersom kapitalen investeres i andre prosjekter. I henhold til teorien er det relativt kort vei til mål når denne er beregnet: Investeringen foretas hvis, og bare hvis, forventet avkastning er høyere enn den avkastningen som kan oppnås ved å plassere kapitalen et annet sted.

Hvis Munger har rett i at avkastningskravet stort sett ikke beregnes riktig faller imidlertid teorien i grus. Strategiske veivalg vil være fundert på feil antagelser. Konsekvensen er sløste ressurser og dårlige resultater.

Når konsekvensene av gale avkastningskrav er så store er det et paradoks at Munger sier det han sier. Hvorfor skulle det være så vanskelig å sette riktig avkastningskrav?

Hadde forfatteren hatt et fullgodt svar på dette spørsmålet hadde det uansett ikke vært plass til en lengre diskusjon om dette i en julekalender. En årsak kan imidlertid være at det sjelden er åpenbart hva som er den beste alternative investeringen, og skulle det være åpenbart vil det kreve tid og ressurser å beregne avkastningen på denne alternative investeringen. Tid og ressurser det ofte vil være svært lite attraktivt å bruke på å beregne avkastningen til en alternativ investering man ikke har en intensjon om å gjennomføre i utgangspunktet.

Da er det langt enklere å legge eksempelvis historisk avkastning på børsen til grunn når avkastningskravet skal bestemmes, uavhengig av om det er et reelt alternativ å investere pengene på børsen hvis prosjektet ikke skulle igangsettes og uavhengig av hva man skulle tro om fremtidig avkastning på børsen.

Er egentlig strateger gode på å prioritere?

Hvilken rolle skal konsulenter ta i innovasjonsarbeidet hos en oppdragsgiver?

Vinh Nguyen, Valentina Sørlie, Kristoffer Solberg og Jens Andreas Huseby diskuterer produktutvikling, innovasjon og konsulentenes roller.

Skal konsulenter drive med innovasjon?

IDE's commonly include a lot of useful tools that can make our lives as developers easier. Some are pure productivity tools to speed up our development, while others may actually help our understanding of the code we are implementing. The toolset included with the IntelliJ IDEA IDE is no exception. In this article we will take a look at the Bytecode Viewer and Java Bytecode Decompiler integrated tools in IntelliJ, and how they may help us getting a better understanding of how our Kotlin code is represented on the JVM, and how it could potentially look in Java.

How to use the tools

First of all it is required that you have IntelliJ IDEA installed. You can use the Community or Ultimate edition, since both come bundled with the necessary tools. Then simply create or open a Kotlin file of your chosing and select Tools > Kotlin > Show Kotlin Bytecode from the menu. A new side panel will open and, given that you have a Kotlin file currently selected, will display the corresponding bytecode generated for that specific file. From here you can study the actual bytecode, or jump to another Kotlin file of your liking. The Bytecode Viewer will update automatically with the Kotlin file currently being viewed:



Now, the bytecode itself might not make much sense, unless you're already adept in interpreting it. However, if you're keen on making sense of the what the different statements actually mean, take a look at this excellent overview of the different bytecode instructions. Where things really start getting interesting, though, is when you utilize the decompilation functionality provided by clicking the Decompile button. Upon clicking the button, a file with a .decompiled.java extension will be generated for the currently selected Kotlin file. Behind the scenes, IntelliJ uses the Fernflower Java Decompiler to, in a sense, "reconstruct" Java code from the compiled bytecode. Essentially, we're able to compare our Kotlin code to a corresponding Java representation of the same code, on-the-fly. How cool is that!

A practical example

Kotlin expands upon Java by offering additional language features, while at the same time providing interoperability. It's easy to take this fact for granted, and it might seem as a bit of magic sometimes. By combining the Bytecode Viewer and Decompiler tools we now have the ability to compare Kotlin source code side-by-side with Java. If you're coming from a Java background, and you've just started with Kotlin, this can be very convenient if you quickly want to compare your Kotlin code to something more familiar.

Let's take a look at a concrete example with top-level functions in Kotlin, which Java currently do not support. Let's say we want to get an idea of how this could be represented in Java. We'll define a Kotlin file, TopLevel.kt, and declare the following top-level function:

Let's open the Bytecode Viewer and then decompile the bytecode that IntelliJ produces. The Java Decompiler will serve us the following generated Java source code:

The @Metadata annotation is generated by the Kotlin compiler upon compiling to bytecode. If you want to study what the different metadata-parameters mean, you can take a look at the official source code here. If we disregard the metadata information though, we will see something more familiar. The TopLevel.kt Kotlin file we defined, has been decompiled as a Java class named TopLevelKt, containing a static method named myTopLevelFunction which corresponds to the top-level function we declared earlier. This means that, in this particular case, if we wanted to use this function from Java we would be able to reference it as a static function on TopLevelKt and invoke it as any other static function in Java:

We've barely scratched the surface here with this simple example, but hopefully this will have shed some light on how useful these tools can be! Consider trying them out for example the next time you quickly want to compare some concept in Kotlin to Java.

A note on decompilers

An important thing to remember about decompilers is the fact that they make presumptions about the underlying bytecode. More specifically, they may assume that the bytecode was produced through very specific compilation patterns. Generally this means that the source code produced by a decompiler, i.e. the Java Decompiler that IntelliJ uses, should be treated as indicative only. For use-cases such as the one in this article, it can give us a pinpoint as to how a concept in Kotlin may be represented in Java. However there is no guarantee that every Kotlin concept can be represented entirely by native Java features.

5-Dec

Today's posts