Jekyll2020-05-23T19:17:02+00:00http://blog.ridderholt.se/feed.xmlRobinblogging about dev stuffRobin RidderholtMaybe it’s time to stop using null2018-11-02T00:00:00+00:002018-11-02T00:00:00+00:00http://blog.ridderholt.se/posts/maybe-its-time-to-stop-using-null<p>The usage of null was introduced by Tony Hoare back in 1965 in order to be able to create pointers that point to something that doesn’t exists. This ha been called (by Mr. Hoare him self) as the billion dollar mistake.</p>
<p>Today most of us .NET developers doesnt’s use pointers, not directly at least. But still we see a lot of <code class="language-plaintext highlighter-rouge">NullReferenceException</code> and perhaps spend time chasing bugs caused by some variable being null. So shouldn’t we stop using nulls? Well the short answer is yes, in the cases where we know that a <code class="language-plaintext highlighter-rouge">NullReferenceException</code> could occur we should take action and make sure to prevent this.</p>
<h2 id="what-to-do-instead-of-null">What to do instead of null?</h2>
<p>In many functional languages the concept of null simply doesn’t exist, Haskell has it’s <a href="https://en.wikibooks.org/wiki/Haskell/Understanding_monads/Maybe">Maybe monad</a> and F# has an <a href="https://en.wikipedia.org/wiki/Option_type">option type</a>. But C# doesn’t really come with a pragmatic solution out of the box, so I thought that I would show you a simple case of fetching a person from a database using F# and C# and in both cases taking care of the null problem by using an option type.</p>
<h2 id="simple-example">Simple example</h2>
<p>In F# the option type is built in and is defined as an genric type <code class="language-plaintext highlighter-rouge">Option<T></code> and to make use of it’s value you often use pattern matching. If there is a value you will get <code class="language-plaintext highlighter-rouge">Some<T></code> and if there is no value you will get <code class="language-plaintext highlighter-rouge">None</code>.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">person</span> <span class="p">=</span> <span class="nn">Datalayer</span><span class="p">.</span><span class="n">getPersonById</span> <span class="mi">12</span>
<span class="k">match</span> <span class="n">person</span> <span class="k">with</span>
<span class="p">|</span> <span class="nc">Some</span><span class="p">(</span><span class="n">p</span><span class="p">)</span> <span class="p">-></span> <span class="n">printf</span> <span class="s2">"%s %s"</span> <span class="n">p</span><span class="p">.</span><span class="n">firstName</span> <span class="n">p</span><span class="p">.</span><span class="n">lastName</span>
<span class="p">|</span> <span class="nc">None</span> <span class="p">-></span> <span class="n">printf</span> <span class="s2">"No person was found"</span>
</code></pre></div></div>
<p>In this simple scenario we ask the datalayer to fetch the person with id 12 from the database. So if the a person with id 12 doesn’t exist the function will return <code class="language-plaintext highlighter-rouge">None</code> but if the person does exist we will get <code class="language-plaintext highlighter-rouge">Some<Person></code>.</p>
<p>We use pattern matching on the option type and match for the case where we find a person and then prints that person’s full name, otherwise we just print <code class="language-plaintext highlighter-rouge">No person was found</code>.</p>
<p>That’s all fine but what do we do in C#?
I recently came across a great Nuget package for C# called <a href="https://github.com/nlkl/Optional">Optional</a> and it will give us more or less the same functionality as the built in option type in F#.</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="n">Option</span><span class="p"><</span><span class="n">Person</span><span class="p">></span> <span class="nf">GetPersonById</span><span class="p">(</span><span class="kt">int</span> <span class="n">id</span><span class="p">)</span>
<span class="p">{</span>
<span class="p">...</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The method in the datalayer is defined to return <code class="language-plaintext highlighter-rouge">Option<Person></code> (an option of person). The package supports many ways to check and extract the value and one way to do it is call the <code class="language-plaintext highlighter-rouge">Match</code> function on the option type and pass two actions, one for the <code class="language-plaintext highlighter-rouge">Some</code> value and one for the <code class="language-plaintext highlighter-rouge">None</code> value.</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">person</span> <span class="p">=</span> <span class="n">_datalayer</span><span class="p">.</span><span class="nf">GetPersonById</span><span class="p">(</span><span class="m">12</span><span class="p">);</span>
<span class="n">person</span><span class="p">.</span><span class="nf">Match</span><span class="p">(</span>
<span class="n">some</span><span class="p">:</span> <span class="p">(</span><span class="n">p</span><span class="p">)</span> <span class="p">=></span> <span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"</span><span class="p">{</span><span class="n">p</span><span class="p">.</span><span class="n">FirstName</span><span class="p">}</span><span class="s"> </span><span class="p">{</span><span class="n">p</span><span class="p">.</span><span class="n">LastName</span><span class="p">}</span><span class="s">"</span><span class="p">),</span>
<span class="n">none</span><span class="p">:</span> <span class="p">()</span> <span class="p">=></span> <span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">"No person was found"</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div></div>
<p>In cases where you would like to do some opertion and if it succeeded we should use the result of that operation otherwise we should use some sort of default you could do something like this:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">option</span> <span class="p">=</span> <span class="nf">Divide</span><span class="p">(</span><span class="m">2</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span>
<span class="kt">var</span> <span class="n">result</span> <span class="p">=</span> <span class="n">option</span><span class="p">.</span><span class="nf">Match</span><span class="p">(</span>
<span class="n">some</span><span class="p">:</span> <span class="p">(</span><span class="n">res</span><span class="p">)</span> <span class="p">=></span> <span class="n">res</span><span class="p">,</span>
<span class="n">none</span><span class="p">:</span> <span class="p">()</span> <span class="p">=></span> <span class="m">0</span>
<span class="p">);</span>
</code></pre></div></div>
<p>Here the result variable get assiged the value of a succesfull operation or the default value 0.</p>
<h2 id="summary">Summary</h2>
<p>There is tools available to us to start writing code that doesn’t result in <code class="language-plaintext highlighter-rouge">NullReferenceException</code> and also is readable and forces the user of your function to handle both the case when they get a value and if they don’t which is powerful since it all it takes is for some one to forget to write an if-statement to check for null.</p>Robin RidderholtThe usage of null was introduced by Tony Hoare back in 1965 in order to be able to create pointers that point to something that doesn’t exists. This ha been called (by Mr. Hoare him self) as the billion dollar mistake.Moving my blog2018-07-21T00:00:00+00:002018-07-21T00:00:00+00:00http://blog.ridderholt.se/posts/moving-my-blog<p>For a couple of years I have been hosting my blog on <a href="https://www.ghost.org">Ghost.org</a> and I have no complaints but I was paying about $7 per month and I know that others had moved their blog to <a href="https://pages.github.com">Github Pages</a> which is free and I thought that it could be a fun challange to see how much effort it would be to move everything and not spend any money.</p>
<p>So I started researching and I made a short list of features that I wanted:</p>
<ul>
<li>Free</li>
<li>Custom domain</li>
<li>Customizable menu and design</li>
<li>Markdown for writing posts</li>
<li>Encrypted connection (HTTPS)</li>
<li>Comments</li>
<li>Be able to redirect from my old domain</li>
</ul>
<h2 id="jekyll">Jekyll</h2>
<p>I knew from start that it would be fun to build and design my own blog from scratch, I also knew that it would take to long and since my design skillz aren’t the best that it probably wouldn’t be that nice. <a href="https://jekyllrb.com/">Jekyll</a> is recommended by GitHub for GitHub Pages so I started to look at that to begin with. Jekyll is a static site generator that generates HTML from plain text files.</p>
<p>I quickly installed it and installed a theme (which there are a lot to choose from) which allowed me to customize the menu and some design features to make the theme a little bit more personal. With Jekyll I could get the customizable menu and design and uses markdown to write posts, and it’s free.</p>
<h2 id="github-pages">GitHub Pages</h2>
<p>The documentation for GitHub Pages is very easy to read and understand so it didn’t take long to get my Jekyll site up and running. GitHub Pages allows me to have a custom domain (the default domain is: username.github.io but I wanted to use my own domain) and it’s free.</p>
<h2 id="disqus">Disqus</h2>
<p>In my previous blog I had already used <a href="https://disqus.com/">Disqus</a> and I’m very happy with it and since it wasn’t any problem moving comments from my old domain to my new domain with Disqus I decided to continue to use it. So I could cross comments of my list, and it’s free.</p>
<h2 id="cloudflare">Cloudflare</h2>
<p>Since I already had my new domain name and I wanted to have my new blog served with an encrypted connection and I didn’t want to pay for an SSL-certificate I turned to <a href="https://www.cloudflare.com/">Cloudflare</a>. They have a service in which you use their nameservers for your domain and they will encrypt the traffic (and cache content etc.) which was exactly what I needed, and it’s free.</p>
<h2 id="redirect-my-old-blog">Redirect my old blog</h2>
<p>I wanted links to the old blog to conintue to work and the root domain isn’t a problem but I also wanted deep links to work so if someone had bookmarked an old blog post they would still be able to get to that specific post but on my new blog. Such a service isn’t available with my domain registrar so I thought about just writing a small application which would recieve all the request for my old domain and respond with a 301 Redirect to my new blog but that would mean that I had to host that somewhere. After a quick Google session I found <a href="https://301redirect.website/">301redirect.website</a> which does exactly that, and it’s free (if you provide a link to their page on your page).</p>
<h2 id="summary">Summary</h2>
<p>So in the end I was able to meat all my requirements for the new blog without spending any money and I learned a lot doing it.</p>Robin RidderholtFor a couple of years I have been hosting my blog on Ghost.org and I have no complaints but I was paying about $7 per month and I know that others had moved their blog to Github Pages which is free and I thought that it could be a fun challange to see how much effort it would be to move everything and not spend any money.ReasonReact2018-03-20T00:00:00+00:002018-03-20T00:00:00+00:00http://blog.ridderholt.se/posts/reasonreact<p>Since I started to play with functional programming my go-to language has been <a href="https://www.fsharp.org">F#</a>. As a C# developer it was an easy choice since I did’t have to leave the safe environment of .NET. Since then I have played with Haskell, Erlang, Elixir and some other languages and I realized that the syntax felt nice and clean in F#. F# is a <a href="https://en.wikipedia.org/wiki/ML_(programming_language)">ML</a> language mostly influenced by <a href="https://ocaml.org/">OCaml</a> and when I looked into other ML language I found that the syntax in general appealed to me.</p>
<p>When Facebook released <a href="https://reasonml.github.io/">ReasonML</a> it was on my radar to dive into and when Jared Forsyth was on <a href="https://www.functionalgeekery.com/episode-119-jared-forsyth/">Functional Geekery</a> talking about ReasonML and <a href="https://reasonml.github.io/reason-react/docs/en/installation.html">ReasonReact</a> I knew it was time.</p>
<h2 id="redux-built-in">Redux built-in</h2>
<p>One of my preferred ways of working with <a href="https://reactjs.org/">React</a> is using <a href="https://redux.js.org/">Redux</a> where you extract the state from the components and manage it by triggering actions and modify your state through reducers, this and other goodies like router, subscriptions and JSX is baked into ReasonReact.</p>
<h2 id="why-not-fabel">Why not Fabel?</h2>
<p><a href="http://fable.io/">Fabel</a> is a F# to JavaScript compiler and through <a href="https://fable-elmish.github.io/">Fabel.Elmish</a> you get very similar functionality as in ReasonReact. For me the deal breaker is the JSX support.</p>
<p>In Fabel.Elmish you need to write these element functions to create the layout for your components:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">view</span> <span class="n">model</span> <span class="p">=</span>
<span class="nn">R</span><span class="p">.</span><span class="n">div</span> <span class="bp">[]</span>
<span class="p">[</span> <span class="nn">R</span><span class="p">.</span><span class="n">div</span> <span class="bp">[]</span> <span class="p">[</span> <span class="nn">R</span><span class="p">.</span><span class="n">str</span> <span class="p">(</span><span class="n">sprintf</span> <span class="s2">"%A"</span> <span class="n">model</span><span class="p">)</span> <span class="p">]</span> <span class="p">]</span>
</code></pre></div></div>
<p>But when using JSX you can write:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="k">component</span> <span class="p">=</span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="n">statelessComponent</span><span class="p">(</span><span class="s2">"MyComponent"</span><span class="o">);</span>
<span class="k">let</span> <span class="n">make</span> <span class="p">=</span> <span class="p">(</span><span class="n">model</span><span class="p">,</span> <span class="p">_</span><span class="n">children</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="o">...</span><span class="k">component</span><span class="p">,</span>
<span class="n">render</span><span class="p">:</span> <span class="p">_</span><span class="n">self</span> <span class="o">=></span>
<span class="p"><</span><span class="n">div</span><span class="p">></span> <span class="p"><</span><span class="n">div</span><span class="p">></span> <span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="n">model</span><span class="o">))</span> <span class="o"></</span><span class="n">div</span><span class="p">></span> <span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="o">};</span>
</code></pre></div></div>
<h1 id="writing-a-pomodoro-timer-using-reasonreact">Writing a Pomodoro timer using ReasonReact</h1>
<p>If you haven’t already installed ReasonReact, there is a guide for how to do it <a href="https://reasonml.github.io/reason-react/docs/en/installation.html">here</a>. I’m using Reason Scripts (create-react-app) in this example.</p>
<p>The <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique">Pomodoro techinque</a> basically means that you work 25 mintues and take 5 mintues break and then start over. So this exampel is a timer that counts down from 25 mintues to zero.</p>
<h2 id="the-state">The state</h2>
<p>So for that state I’m going to need to keep track of minutes and seconds, I’m also going to need a timer so my state looks like this:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">type</span> <span class="n">state</span> <span class="p">=</span> <span class="p">{</span>
<span class="n">minutes</span><span class="p">:</span> <span class="kt">int</span><span class="p">,</span>
<span class="n">seconds</span><span class="p">:</span> <span class="kt">int</span><span class="p">,</span>
<span class="n">timerId</span><span class="p">:</span> <span class="n">option</span><span class="p">(</span><span class="nn">Js</span><span class="p">.</span><span class="nn">Global</span><span class="p">.</span><span class="n">intervalId</span><span class="p">)</span>
<span class="o">};</span>
</code></pre></div></div>
<p>Notice that the <code class="language-plaintext highlighter-rouge">timerId</code> is an option, since I’m not going to have a timer all the time and <code class="language-plaintext highlighter-rouge">null</code> or <code class="language-plaintext highlighter-rouge">undefined</code> isn’t a concept in ReasonML we need to tell the compiler that their will either be a value or not.</p>
<p>The type <code class="language-plaintext highlighter-rouge">Js.Global</code> is build into ReasonReact to provide an interop to JavaScript and has a limitied set of basic JavaScript functionality.</p>
<h2 id="the-actions">The actions</h2>
<p>There will be a few actions, first of all you need to start and stop the timer and also reset it to start over. The timer will tick every second and we need to react to that tick so we can print the current state of the timer. So my actions looks like this:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">type</span> <span class="n">action</span> <span class="p">=</span>
<span class="p">|</span> <span class="nc">Start</span><span class="p">(</span><span class="nn">Js</span><span class="p">.</span><span class="nn">Global</span><span class="p">.</span><span class="n">intervalId</span><span class="p">)</span>
<span class="p">|</span> <span class="nc">Stop</span>
<span class="p">|</span> <span class="nc">Reset</span>
<span class="p">|</span> <span class="nc">Tick</span><span class="p">;</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">Start</code> action has a value containing the <code class="language-plaintext highlighter-rouge">intervalId</code> for the timer which we will need when stoping the timer and we will save it to the state when recieving the start action.</p>
<h2 id="other-functions">Other functions</h2>
<p>Whenever we recieve the Tick action we need to update the state with new values for minutes and/or seconds.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">calculateTime</span> <span class="p">=</span> <span class="n">state</span> <span class="o">=></span>
<span class="n">switch</span> <span class="p">(</span><span class="n">state</span><span class="p">.</span><span class="n">minutes</span><span class="p">,</span> <span class="n">state</span><span class="p">.</span><span class="n">seconds</span><span class="p">)</span> <span class="p">{</span>
<span class="p">|</span> <span class="o">(_,</span> <span class="mi">0</span><span class="p">)</span> <span class="o">=></span> <span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">minutes</span><span class="p">:</span> <span class="n">state</span><span class="p">.</span><span class="n">minutes</span> <span class="p">-</span> <span class="mi">1</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">59</span><span class="p">}</span>
<span class="p">|</span> <span class="p">_</span> <span class="o">=></span> <span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="n">state</span><span class="p">.</span><span class="n">seconds</span> <span class="p">-</span> <span class="mi">1</span><span class="p">}</span>
<span class="o">};</span>
</code></pre></div></div>
<p>We create a tuple of minutes and seconds and using pattern matching we can see if the seconds has reached zero and we can subtract one from minutes and set seconds to 59 otherwise we just keep subtracting 1 from seconds.</p>
<p>In order to be able to determin if the counter has counted all the way down to zero and stop the timer we can check if both minutes and seconds is zero:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">isFinished</span> <span class="p">=</span> <span class="n">state</span> <span class="o">=></span>
<span class="n">switch</span> <span class="p">(</span><span class="n">state</span><span class="p">.</span><span class="n">minutes</span><span class="p">,</span> <span class="n">state</span><span class="p">.</span><span class="n">seconds</span><span class="p">)</span> <span class="p">{</span>
<span class="p">|</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span> <span class="o">=></span> <span class="bp">true</span>
<span class="p">|</span> <span class="p">_</span> <span class="o">=></span> <span class="bp">false</span>
<span class="o">};</span>
</code></pre></div></div>
<p>To clear the timer we can use the <code class="language-plaintext highlighter-rouge">Js.Global.clearInterval</code> function, since we declared the <code class="language-plaintext highlighter-rouge">timerId</code> to be an option in the state we need to use pattern matching to handle the case when <code class="language-plaintext highlighter-rouge">timerId</code> has a value and when it doesn’t:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">clearTimer</span> <span class="p">=</span> <span class="n">timerId</span> <span class="o">=></span>
<span class="n">switch</span> <span class="n">timerId</span> <span class="p">{</span>
<span class="p">|</span> <span class="nc">Some</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span> <span class="o">=></span> <span class="nn">Js</span><span class="p">.</span><span class="nn">Global</span><span class="p">.</span><span class="n">clearInterval</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span>
<span class="p">|</span> <span class="p">_</span> <span class="o">=></span> <span class="bp">()</span>
<span class="o">};</span>
</code></pre></div></div>
<p>If we get <code class="language-plaintext highlighter-rouge">Some</code> value we can clear the interval but if the <code class="language-plaintext highlighter-rouge">timerId</code> has no value we don’t to anything.</p>
<h2 id="the-reducer">The reducer</h2>
<p>Now that we have our state, actions and some helper functions we can write our reducer.</p>
<p>The reducer is just a function that takes the action and the current state and returns a new state, this a simple concept but notice that we don’t actually mutate the state we return a new one since the state is immutable. Using the spread operator <code class="language-plaintext highlighter-rouge">...</code> we do not have to set every property in the state that we don’t need to change the spread operator means that all other data in the state is copied and just the <code class="language-plaintext highlighter-rouge">timerId</code> is changed.</p>
<p>Let’s start with handling the <code class="language-plaintext highlighter-rouge">Start</code> action:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">counterReducer</span> <span class="p">=</span> <span class="p">(</span><span class="n">action</span><span class="p">,</span> <span class="n">state</span><span class="p">)</span> <span class="o">=></span>
<span class="n">switch</span> <span class="n">action</span> <span class="p">{</span>
<span class="p">|</span> <span class="nc">Start</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span> <span class="o">=></span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">Update</span><span class="o">({...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">Some</span><span class="p">(</span><span class="n">timer</span><span class="o">)})</span>
</code></pre></div></div>
<p>Using pattern matching on the action we check if we get a <code class="language-plaintext highlighter-rouge">Start</code> action with our timer, using the build in <code class="language-plaintext highlighter-rouge">ReasonReact.Update</code> function we create a new state where the <code class="language-plaintext highlighter-rouge">timerId</code> property has been set to <code class="language-plaintext highlighter-rouge">Some(timer)</code>.</p>
<p>Now for the <code class="language-plaintext highlighter-rouge">Stop</code> action:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">counterReducer</span> <span class="p">=</span> <span class="p">(</span><span class="n">action</span><span class="p">,</span> <span class="n">state</span><span class="p">)</span> <span class="o">=></span>
<span class="n">switch</span> <span class="n">action</span> <span class="p">{</span>
<span class="p">|</span> <span class="nc">Start</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span> <span class="o">=></span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">Update</span><span class="o">({...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">Some</span><span class="p">(</span><span class="n">timer</span><span class="o">)})</span>
<span class="p">|</span> <span class="nc">Stop</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">UpdateWithSideEffects</span><span class="p">(</span>
<span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="o">(_</span><span class="n">self</span> <span class="o">=></span> <span class="n">clearTimer</span><span class="p">(</span><span class="n">state</span><span class="p">.</span><span class="n">timerId</span><span class="o">))</span>
<span class="p">)</span>
</code></pre></div></div>
<p>When we recieve a <code class="language-plaintext highlighter-rouge">Stop</code> action we want to set the <code class="language-plaintext highlighter-rouge">timerId</code> to <code class="language-plaintext highlighter-rouge">None</code> in the state and also clear the interval so we use the <code class="language-plaintext highlighter-rouge">ReasonReact.UpdateWithSideEffects</code> function to both update the state and call our <code class="language-plaintext highlighter-rouge">clearTimer</code> function. Note that the side effect function takes <code class="language-plaintext highlighter-rouge">self</code> as a parameter and since we don’t use it in our <code class="language-plaintext highlighter-rouge">clearTimer</code> function we need to name it with an underscore to tell the compiler that we aren’t going to use it.</p>
<p>Next up is the <code class="language-plaintext highlighter-rouge">Reset</code> action where we want to reset the minutes to 25 and seconds to 0 and if the timer is running we want to make sure that it will be stoped:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">counterReducer</span> <span class="p">=</span> <span class="p">(</span><span class="n">action</span><span class="p">,</span> <span class="n">state</span><span class="p">)</span> <span class="o">=></span>
<span class="n">switch</span> <span class="n">action</span> <span class="p">{</span>
<span class="p">|</span> <span class="nc">Start</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span> <span class="o">=></span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">Update</span><span class="o">({...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">Some</span><span class="p">(</span><span class="n">timer</span><span class="o">)})</span>
<span class="p">|</span> <span class="nc">Stop</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">UpdateWithSideEffects</span><span class="p">(</span>
<span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="o">(_</span><span class="n">self</span> <span class="o">=></span> <span class="n">clearTimer</span><span class="p">(</span><span class="n">state</span><span class="p">.</span><span class="n">timerId</span><span class="o">))</span>
<span class="p">)</span>
<span class="p">|</span> <span class="nc">Reset</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">UpdateWithSideEffects</span><span class="p">(</span>
<span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">minutes</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">0</span><span class="o">},</span>
<span class="p">(</span><span class="n">self</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Stop</span><span class="o">))</span>
<span class="p">)</span>
</code></pre></div></div>
<p>We are using the <code class="language-plaintext highlighter-rouge">ReasonReact.UpdateWithSideEffects</code> again and updating the state and this time we use the <code class="language-plaintext highlighter-rouge">self</code> parameter to send the <code class="language-plaintext highlighter-rouge">Stop</code> action which will handle the stopping the timer.</p>
<p>Last we need to handle the <code class="language-plaintext highlighter-rouge">Tick</code> action and it’s a bit special since we have two cases, either the <code class="language-plaintext highlighter-rouge">Tick</code> action will just update the state with new values for minutes and seconds or we have reached zero and we need to stop the timer.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">counterReducer</span> <span class="p">=</span> <span class="p">(</span><span class="n">action</span><span class="p">,</span> <span class="n">state</span><span class="p">)</span> <span class="o">=></span>
<span class="n">switch</span> <span class="n">action</span> <span class="p">{</span>
<span class="p">|</span> <span class="nc">Start</span><span class="p">(</span><span class="n">timer</span><span class="p">)</span> <span class="o">=></span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">Update</span><span class="o">({...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">Some</span><span class="p">(</span><span class="n">timer</span><span class="o">)})</span>
<span class="p">|</span> <span class="nc">Stop</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">UpdateWithSideEffects</span><span class="p">(</span>
<span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="o">(_</span><span class="n">self</span> <span class="o">=></span> <span class="n">clearTimer</span><span class="p">(</span><span class="n">state</span><span class="p">.</span><span class="n">timerId</span><span class="o">))</span>
<span class="p">)</span>
<span class="p">|</span> <span class="nc">Reset</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">UpdateWithSideEffects</span><span class="p">(</span>
<span class="o">{...</span><span class="n">state</span><span class="p">,</span> <span class="n">minutes</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">0</span><span class="o">},</span>
<span class="p">(</span><span class="n">self</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Stop</span><span class="o">))</span>
<span class="p">)</span>
<span class="p">|</span> <span class="nc">Tick</span> <span class="k">when</span> <span class="n">isFinished</span><span class="p">(</span><span class="n">state</span><span class="p">)</span> <span class="o">=></span>
<span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">SideEffects</span><span class="o">((</span><span class="n">self</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Stop</span><span class="o">)))</span>
<span class="p">|</span> <span class="nc">Tick</span> <span class="o">=></span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="nc">Update</span><span class="p">(</span><span class="n">calculateTime</span><span class="p">(</span><span class="n">state</span><span class="o">))</span>
<span class="o">};</span>
</code></pre></div></div>
<p>Using the <code class="language-plaintext highlighter-rouge">when</code> keyword we can add a condition to our pattering matching to say that when the <code class="language-plaintext highlighter-rouge">Tick</code> action is sent <strong>and</strong> the timer <code class="language-plaintext highlighter-rouge">isFinished</code> whe just trigger a side effect by sending the <code class="language-plaintext highlighter-rouge">Stop</code> action. Otherwise we just use our <code class="language-plaintext highlighter-rouge">calculateTime</code> function to update the state with the new values for minutes and seconds.</p>
<h2 id="the-component">The component</h2>
<p>In ReasonReact you start by declaring what type of component you want, in our case we want a reducer component.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="k">component</span> <span class="p">=</span> <span class="nn">ReasonReact</span><span class="p">.</span><span class="n">reducerComponent</span><span class="p">(</span><span class="s2">"counter"</span><span class="o">);</span>
</code></pre></div></div>
<p>Unlike React where you create a class or a function as your component in ReasonReact we crate a <code class="language-plaintext highlighter-rouge">make</code> function:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">make</span> <span class="p">=</span> <span class="p">_</span><span class="n">children</span> <span class="o">=></span> <span class="p">{</span>
<span class="o">...</span><span class="k">component</span><span class="p">,</span>
<span class="n">initialState</span><span class="p">:</span> <span class="bp">()</span> <span class="o">=></span> <span class="p">{</span><span class="n">minutes</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="n">reducer</span><span class="p">:</span> <span class="n">counterReducer</span><span class="p">,</span>
<span class="n">render</span><span class="p">:</span> <span class="n">self</span> <span class="o">=></span> <span class="p"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="p">></span>
<span class="o">};</span>
</code></pre></div></div>
<p>In the <code class="language-plaintext highlighter-rouge">make</code> function we spread the component variable we created earlier and declare what the initial state should look like by creating an instance of our state type. We also pass our <code class="language-plaintext highlighter-rouge">counterReducer</code> function to the component and declare a <code class="language-plaintext highlighter-rouge">render</code> function which we will add some more markup to.</p>
<p>To render a text or in our case a number we can use the <code class="language-plaintext highlighter-rouge">ReasonReact.stringToElement</code> function so lets add markup for displaying the minutes and seconds:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">make</span> <span class="p">=</span> <span class="p">_</span><span class="n">children</span> <span class="o">=></span> <span class="p">{</span>
<span class="o">...</span><span class="k">component</span><span class="p">,</span>
<span class="n">initialState</span><span class="p">:</span> <span class="bp">()</span> <span class="o">=></span> <span class="p">{</span><span class="n">minutes</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="n">reducer</span><span class="p">:</span> <span class="n">counterReducer</span><span class="p">,</span>
<span class="n">render</span><span class="p">:</span> <span class="n">self</span> <span class="o">=></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter"</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__minutes"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="n">pad</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">state</span><span class="p">.</span><span class="n">minutes</span><span class="o">)))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__divider"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="s2">":"</span><span class="o">))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__seconds"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="n">pad</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">state</span><span class="p">.</span><span class="n">seconds</span><span class="o">)))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="o">};</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">pad</code> function is a small function I wrote to display <code class="language-plaintext highlighter-rouge">01</code> instead of just <code class="language-plaintext highlighter-rouge">1</code> to make the timer look a little more clocklike and it looks like this:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">pad</span> <span class="p">=</span> <span class="n">n</span> <span class="o">=></span>
<span class="k">if</span> <span class="p">(</span><span class="n">n</span> <span class="o"><=</span> <span class="mi">9</span><span class="p">)</span> <span class="p">{</span>
<span class="s2">"0"</span> <span class="o">++</span> <span class="n">string_of_int</span><span class="p">(</span><span class="n">n</span><span class="o">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="n">string_of_int</span><span class="p">(</span><span class="n">n</span><span class="o">);</span>
<span class="o">};</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">string_of_int</code> function is built in and it just converts an integer to a string.</p>
<p>Now lets add some buttons to which the user can use to start, stop and reset the timer:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">make</span> <span class="p">=</span> <span class="p">_</span><span class="n">children</span> <span class="o">=></span> <span class="p">{</span>
<span class="o">...</span><span class="k">component</span><span class="p">,</span>
<span class="n">initialState</span><span class="p">:</span> <span class="bp">()</span> <span class="o">=></span> <span class="p">{</span><span class="n">minutes</span><span class="p">:</span> <span class="mi">25</span><span class="p">,</span> <span class="n">seconds</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="n">timerId</span><span class="p">:</span> <span class="nc">None</span><span class="o">},</span>
<span class="n">reducer</span><span class="p">:</span> <span class="n">counterReducer</span><span class="p">,</span>
<span class="n">render</span><span class="p">:</span> <span class="n">self</span> <span class="o">=></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter"</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__minutes"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="n">pad</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">state</span><span class="p">.</span><span class="n">minutes</span><span class="o">)))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__divider"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="s2">":"</span><span class="o">))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="p"><</span><span class="n">span</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__seconds"</span><span class="p">></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="n">pad</span><span class="p">(</span><span class="n">self</span><span class="p">.</span><span class="n">state</span><span class="p">.</span><span class="n">seconds</span><span class="o">)))</span>
<span class="o"></</span><span class="n">span</span><span class="p">></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__actions"</span><span class="p">></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__actions--start"</span><span class="p">></span>
<span class="p"><</span><span class="n">button</span>
<span class="n">className</span><span class="p">=</span><span class="s2">"waves-effect waves-light btn-large green"</span>
<span class="n">onClick</span><span class="o">=(</span>
<span class="p">_</span><span class="k">event</span> <span class="o">=></span>
<span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span>
<span class="nc">Start</span><span class="p">(</span><span class="nn">Js</span><span class="p">.</span><span class="nn">Global</span><span class="p">.</span><span class="n">setInterval</span><span class="o">(()</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Tick</span><span class="o">),</span> <span class="mi">1000</span><span class="o">))</span>
<span class="p">)</span>
<span class="o">)></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="s2">"Start"</span><span class="o">))</span>
<span class="o"></</span><span class="n">button</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__actions--stop"</span><span class="p">></span>
<span class="p"><</span><span class="n">button</span>
<span class="n">className</span><span class="p">=</span><span class="s2">"waves-effect waves-light btn-large red"</span>
<span class="n">onClick</span><span class="o">=(_</span><span class="k">event</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Stop</span><span class="o">))></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="s2">"Stop"</span><span class="o">))</span>
<span class="o"></</span><span class="n">button</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="p"><</span><span class="n">div</span> <span class="n">className</span><span class="p">=</span><span class="s2">"counter__actions--reset"</span><span class="p">></span>
<span class="p"><</span><span class="n">button</span>
<span class="n">className</span><span class="p">=</span><span class="s2">"waves-effect waves-light btn-large orange"</span>
<span class="n">onClick</span><span class="o">=(_</span><span class="k">event</span> <span class="o">=></span> <span class="n">self</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="nc">Reset</span><span class="o">))></span>
<span class="p">(</span><span class="nn">ReasonReact</span><span class="p">.</span><span class="n">stringToElement</span><span class="p">(</span><span class="s2">"Reset"</span><span class="o">))</span>
<span class="o"></</span><span class="n">button</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="o"></</span><span class="n">div</span><span class="p">></span>
<span class="o">};</span>
</code></pre></div></div>
<p>In the <code class="language-plaintext highlighter-rouge">onClick</code> attributes of the buttons we simply send the corresponding action. For the start button we use the <code class="language-plaintext highlighter-rouge">Js.Global.setInterval</code> function to send the <code class="language-plaintext highlighter-rouge">Start</code> action. The <code class="language-plaintext highlighter-rouge">setInterval</code> function will return a <code class="language-plaintext highlighter-rouge">timerId</code> and it takes a function that will be triggered every 1000 millisecond and in our case we want to send a <code class="language-plaintext highlighter-rouge">Tick</code> action every second.</p>
<h2 id="styling">Styling</h2>
<p>I have used <a href="http://materializecss.com/">Materialize</a> as a shortcut to get some nice styling. But you can add some custom CSS by adding a normal stylesheet file to your solution and since this is all powered by <a href="https://webpack.js.org/">Webpack</a> you can require that CSS file. Requiring a CSS file isn’t something that is directly supported by ReasonReact instead you need to interop with Bucklescript by adding this to your file: <code class="language-plaintext highlighter-rouge">[%bs.raw {|require('./Counter.css')|}];</code> this line will render a require statement in the JavaScript version of your Reason file which then will be processed by Webpack.</p>
<h1 id="summary">Summary</h1>
<p>If you are like me and you like ML styled languages and are into React and Redux you should look into ReasonReact. ReasonML is a typesafe functional language with a lot of promise, they work hard to get compiler errors as good as in <a href="http://elm-lang.org/">Elm</a>. The ReasonReact project is still far from done but they have a great thing going and it will be exciting to see where they end up.</p>
<p>I hope that this post has been to some use for you, the source code is available on my <a href="https://github.com/ridderholt/reason-pomodoro">GitHub</a>.</p>Robin RidderholtSince I started to play with functional programming my go-to language has been F#. As a C# developer it was an easy choice since I did’t have to leave the safe environment of .NET. Since then I have played with Haskell, Erlang, Elixir and some other languages and I realized that the syntax felt nice and clean in F#. F# is a ML language mostly influenced by OCaml and when I looked into other ML language I found that the syntax in general appealed to me.Actually usable tuples in C#2017-12-11T00:00:00+00:002017-12-11T00:00:00+00:00http://blog.ridderholt.se/posts/actually-usable-tuples-in-csharp<p>If you, like me, have missed that C# now have support for actually usable tuples then you’re in for a treat.</p>
<p>Previously if you didn’t want to create a DTO class and return that from a function you could use the generic <code class="language-plaintext highlighter-rouge">Tuple<T></code>. And you would write something like this:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">static</span> <span class="n">Tuple</span><span class="p"><</span><span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">></span> <span class="nf">Sum</span><span class="p">(</span><span class="kt">int</span> <span class="n">x</span><span class="p">,</span> <span class="kt">int</span> <span class="n">y</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span> <span class="n">Tuple</span><span class="p">.</span><span class="nf">Create</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="n">x</span> <span class="p">+</span> <span class="n">y</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>This syntax wasn’t really the problem. The real issue was when you used this function:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">tuple</span> <span class="p">=</span> <span class="nf">Sum</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">2</span><span class="p">);</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"The sum of </span><span class="p">{</span><span class="n">tuple</span><span class="p">.</span><span class="n">Item1</span><span class="p">}</span><span class="s"> and </span><span class="p">{</span><span class="n">tuple</span><span class="p">.</span><span class="n">Item2</span><span class="p">}</span><span class="s"> is </span><span class="p">{</span><span class="n">tuple</span><span class="p">.</span><span class="n">Item3</span><span class="p">}</span><span class="s">"</span><span class="p">);</span>
</code></pre></div></div>
<p>It is’nt very clear for the reader what <code class="language-plaintext highlighter-rouge">Item1</code>, <code class="language-plaintext highlighter-rouge">Item2</code> or <code class="language-plaintext highlighter-rouge">Item3</code> is more than that it is an integer.</p>
<h2 id="tuples-in-c-7">Tuples in C# 7</h2>
<p>In C# 7 there is a new version of the tuple which makes it usable and that’s both a better looking syntax and the concept of <code class="language-plaintext highlighter-rouge">named tuples</code>.</p>
<p>First lets rewrite the <code class="language-plaintext highlighter-rouge">Sum</code> fuction with the new syntax:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">static</span> <span class="p">(</span><span class="kt">int</span> <span class="n">x</span><span class="p">,</span> <span class="kt">int</span> <span class="n">y</span><span class="p">,</span> <span class="kt">int</span> <span class="n">sum</span><span class="p">)</span> <span class="nf">Sum</span><span class="p">(</span><span class="kt">int</span> <span class="n">x</span><span class="p">,</span> <span class="kt">int</span> <span class="n">y</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="n">x</span> <span class="p">+</span> <span class="n">y</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>We can get rid of the <code class="language-plaintext highlighter-rouge">Tuple<T></code> type completly and replace it with parentheses and the types along with the names. You will get suggestions in autocomplete for these names.</p>
<p>When you want to use this function the syntax is now more clear with the names from the tuple:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">result</span> <span class="p">=</span> <span class="nf">Sum</span><span class="p">(</span><span class="m">2</span><span class="p">,</span> <span class="m">3</span><span class="p">);</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"The sum of </span><span class="p">{</span><span class="n">result</span><span class="p">.</span><span class="n">x</span><span class="p">}</span><span class="s"> and </span><span class="p">{</span><span class="n">result</span><span class="p">.</span><span class="n">y</span><span class="p">}</span><span class="s"> is </span><span class="p">{</span><span class="n">result</span><span class="p">.</span><span class="n">sum</span><span class="p">}</span><span class="s">"</span><span class="p">);</span>
</code></pre></div></div>
<h2 id="deconstruction">Deconstruction</h2>
<p>Along with the new syntax for tuples there is also syntax for deconstruction. This means that if we rewrite our <code class="language-plaintext highlighter-rouge">Sum</code> function to look like this:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">static</span> <span class="p">(</span><span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">)</span> <span class="nf">Sum</span><span class="p">(</span><span class="kt">int</span> <span class="n">x</span><span class="p">,</span> <span class="kt">int</span> <span class="n">y</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="n">x</span> <span class="p">+</span> <span class="n">y</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Now that we aren’t returning the names for each value in the tuple we can use deconstruction to assing names:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="n">sum</span><span class="p">)</span> <span class="p">=</span> <span class="nf">Sum</span><span class="p">(</span><span class="m">1</span><span class="p">,</span> <span class="m">2</span><span class="p">);</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"The sum of </span><span class="p">{</span><span class="n">x</span><span class="p">}</span><span class="s"> and </span><span class="p">{</span><span class="n">y</span><span class="p">}</span><span class="s"> is </span><span class="p">{</span><span class="n">sum</span><span class="p">}</span><span class="s">"</span><span class="p">);</span>
</code></pre></div></div>
<p>Deconstruction, for now, only works for tuples out of the box. If you want to use deconstruction for your classes you can implement a <code class="language-plaintext highlighter-rouge">Deconstruct</code> function on your class:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="nc">Person</span>
<span class="p">{</span>
<span class="k">public</span> <span class="kt">string</span> <span class="n">Firstname</span> <span class="p">{</span> <span class="k">get</span><span class="p">;</span> <span class="k">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k">public</span> <span class="kt">string</span> <span class="n">Lastname</span> <span class="p">{</span> <span class="k">get</span><span class="p">;</span> <span class="k">set</span><span class="p">;</span> <span class="p">}</span>
<span class="k">public</span> <span class="k">void</span> <span class="nf">Deconstruct</span><span class="p">(</span><span class="k">out</span> <span class="kt">string</span> <span class="n">firstname</span><span class="p">,</span> <span class="k">out</span> <span class="kt">string</span> <span class="n">lastname</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">firstname</span> <span class="p">=</span> <span class="n">Firstname</span><span class="p">;</span>
<span class="n">lastname</span> <span class="p">=</span> <span class="n">Lastname</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>You can then use deconstuction like this:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="p">(</span><span class="n">firstname</span><span class="p">,</span> <span class="n">lastname</span><span class="p">)</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Person</span> <span class="p">{</span> <span class="n">Firstname</span> <span class="p">=</span> <span class="s">"Robin"</span><span class="p">,</span> <span class="n">Lastname</span> <span class="p">=</span> <span class="s">"Ridderholt"</span> <span class="p">};</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"</span><span class="p">{</span><span class="n">firstname</span><span class="p">}</span><span class="s"> </span><span class="p">{</span><span class="n">lastname</span><span class="p">}</span><span class="s">"</span><span class="p">);</span>
</code></pre></div></div>
<h1 id="summary">Summary</h1>
<p>So there you go. This might seem like small changes but I think it’s a nice change. It will get rid of many small classes that I write whenever I need to return more than one value from a function, and along with deconstruction we get a clean syntax.</p>Robin RidderholtIf you, like me, have missed that C# now have support for actually usable tuples then you’re in for a treat.Building and deploying Azure WebJobs with F#2017-03-23T00:00:00+00:002017-03-23T00:00:00+00:00http://blog.ridderholt.se/posts/building-and-deploying-azure-webjobs-with-f<p>If you have read some of my other posts you know that F# is a favorite languge of mine so when I was going to create an Azure WebJob to handle messages from the Azure ServiceBus it felt natural to write it using F#. It all seemed as a great idea but along the way I found some issues both with the building and with the deployment which I tought I would share.</p>
<h2 id="the-building-part">The building part</h2>
<p>The first issue occure right away, I had just installed Visual Studio 2017 and all the Azure tools but there is no template for WebJobs and F# only for C#. But a WebJob is just a console application so I started of by creating a new console application.</p>
<p>My case was a very simple one, I was going to listen for messages on a Azure ServiceBus Topic and then relay that message to a given API endpoint.</p>
<h3 id="packages">Packages</h3>
<p>To create a WebJob you need a Nuget package so I simply installed it:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Install-Package Microsoft.Azure.WebJobs
</code></pre></div></div>
<p>Since I also needed to listen for messages on the ServiceBus I also needed the nuget package for that:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Install-Package Microsoft.Azure.WebJobs.ServiceBus
</code></pre></div></div>
<h3 id="configuration">Configuration</h3>
<p>The configuration of the WebJob is very simple, in my <code class="language-plaintext highlighter-rouge">Program.cs</code> file I created a new instance of the class <code class="language-plaintext highlighter-rouge">JobHostConfiguration</code>. The ServiceBus integration is added by an extension method for the <code class="language-plaintext highlighter-rouge">config</code> object by calling <code class="language-plaintext highlighter-rouge">UseServiceBus()</code>.</p>
<p>Then you need to create a host and pass in the configuration.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">open</span> <span class="nn">Microsoft</span><span class="p">.</span><span class="nn">Azure</span><span class="p">.</span><span class="nc">WebJobs</span>
<span class="p">[<</span><span class="nc">EntryPoint</span><span class="p">>]</span>
<span class="k">let</span> <span class="n">main</span> <span class="n">argv</span> <span class="p">=</span>
<span class="k">let</span> <span class="n">config</span> <span class="p">=</span> <span class="k">new</span> <span class="nc">JobHostConfiguration</span><span class="bp">()</span>
<span class="n">config</span><span class="p">.</span><span class="nc">UseServiceBus</span><span class="bp">()</span>
<span class="k">let</span> <span class="n">host</span> <span class="p">=</span> <span class="k">new</span> <span class="nc">JobHost</span><span class="p">(</span><span class="n">config</span><span class="p">)</span>
<span class="n">host</span><span class="p">.</span><span class="nc">RunAndBlock</span><span class="bp">()</span>
<span class="mi">0</span>
</code></pre></div></div>
<h3 id="listening-for-messages">Listening for messages</h3>
<p>The simpliest way to listen for messages is to create a function with a parameter that represents the incoming message and decorate that parameter with an attribute called <code class="language-plaintext highlighter-rouge">ServiceBusTrigger</code>. The attribute takes two arguments, the first being the name of the <a href="https://docs.microsoft.com/en-us/azure/service-bus-messaging/service-bus-dotnet-how-to-use-topics-subscriptions#what-are-service-bus-topics-and-subscriptions">Topic</a> and the other is which <a href="https://docs.microsoft.com/en-us/azure/service-bus-messaging/service-bus-dotnet-how-to-use-topics-subscriptions#what-are-service-bus-topics-and-subscriptions">Subscription</a> to use.</p>
<p>I created a new module to contain my function, the function can also take another argument of type <code class="language-plaintext highlighter-rouge">TextWriter</code> which lets you log information which will be avaiable to view in the Azure portal.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">open</span> <span class="nn">Microsoft</span><span class="p">.</span><span class="nn">Azure</span><span class="p">.</span><span class="nc">WebJobs</span>
<span class="k">module</span> <span class="nc">Listener</span> <span class="p">=</span>
<span class="k">let</span> <span class="nc">ProcessMessage</span> <span class="o">([<</span><span class="nc">ServiceBusTrigger</span><span class="p">(</span><span class="s2">"[topicname]"</span><span class="p">,</span> <span class="s2">"[subscription]"</span><span class="o">)>]</span> <span class="n">message</span> <span class="p">:</span> <span class="kt">string</span><span class="p">)</span> <span class="p">(</span><span class="n">log</span> <span class="p">:</span> <span class="nc">TextWriter</span><span class="p">)</span> <span class="p">=</span>
<span class="bp">()</span>
</code></pre></div></div>
<p>As long as you function is public it will automatically be discovered when the program runs as the entry point of the message from the ServiceBus.</p>
<p>I knew that the incoming message was going to be in a JSON format so I wrote a simple message parser that checks the message for information about what type of message is is and the parser returns a <a href="https://fsharpforfunandprofit.com/posts/discriminated-unions/">discriminated union</a> with typed information about the message so I could use <a href="https://fsharpforfunandprofit.com/posts/match-expression/">pattern matching</a> to decide what to do with the message:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">match</span> <span class="nn">MessageParser</span><span class="p">.</span><span class="n">parse</span> <span class="n">message</span> <span class="k">with</span>
<span class="p">|</span> <span class="nc">UserAdded</span> <span class="n">info</span> <span class="p">-></span> <span class="n">info</span> <span class="p">|></span> <span class="n">sendUserAddedInfo</span>
<span class="p">|</span> <span class="nc">Empty</span> <span class="p">-></span> <span class="n">log</span><span class="p">.</span><span class="nc">Info</span> <span class="s2">"Recieved empty message"</span>
<span class="p">|</span> <span class="nc">Unknown</span> <span class="n">msg</span> <span class="p">-></span> <span class="n">log</span><span class="p">.</span><span class="nc">Info</span> <span class="p"><|</span> <span class="n">sprinf</span> <span class="s2">"Unknown message: %s"</span> <span class="n">msg</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">sendUserAddedInfo</code> is just a HTTP call that takes the message and passes it to another API.</p>
<h2 id="deploying">Deploying</h2>
<p>Now if we had created a C# console application we could have just right clicked on our project i Visual Studio and selected Publish and published our WebJob from there but for some reason there is no Publish option for F# console applications.</p>
<p>After a lot of googeling I found out that when pulishing a WebJob all you have to do is create a .zip file of the output in your <code class="language-plaintext highlighter-rouge">bin/Release</code> folder. In a production scenario it’s recommended to let a deploy system like <a href="https://octopus.com/">Octupus Deploy</a> take care of this for you but for the purpose of this blog post lets just create a .zip file of the output in your release folder.</p>
<p>The next step is to go to the Azure portal and create a new app service and you will also need a storage account. Once the app service is created you have a menu option called “WebJobs” if you click there and selects “+Add” in the top menu you will get a small menu (see picture).</p>
<p><img src="/assets/img/new_webjob-2.png" alt="" /></p>
<p>Give the WebJob a name and under “File upload” select the .zip file you created of the build output.</p>
<p>In my case I was going to continously listen for messages on the ServiceBus so my WebJob was of the the type “Continous” but you can also create a WebJob that runs like a <a href="https://docs.microsoft.com/en-us/azure/app-service-web/web-sites-create-web-jobs">CRON job</a>.</p>
<p>If you don’t want to store connection strings in a .config file in your code you can set these in the “Application settings” for the app service we created.</p>
<h2 id="summary">Summary</h2>
<p>As shown it is possible to work with WebJobs using F# but the workflow isn’t as polished as it is for C#. One might wonder why but I can’t shake of the feeling that Microsoft isn’t paying F# as much attention as it deserves, I guess we just have to wait and see if the F# community might fill the gap or we will have to wait for Microsoft to catch up.</p>Robin RidderholtIf you have read some of my other posts you know that F# is a favorite languge of mine so when I was going to create an Azure WebJob to handle messages from the Azure ServiceBus it felt natural to write it using F#. It all seemed as a great idea but along the way I found some issues both with the building and with the deployment which I tought I would share.Wox plugin using F#2016-08-03T00:00:00+00:002016-08-03T00:00:00+00:00http://blog.ridderholt.se/posts/wox-plugin-using-f<p>If you’re using Windows and haven’t checked out <a href="http://www.getwox.com">Wox</a> you totally should. It’s a program that gets you easy access to all your files, folder and programs without using your mouse. Simply press ALT+Space and a bar will appear and you can search.</p>
<p>Wox is written using .NET and C# and besides being a very useful program it also have a nice plugin story with about 80+ plugins that you can install.</p>
<p>I started looking at writing a plugin for Wox just out of curiosity and it turns out that according to their website that they support plugins written in C# or Python. So I thought that if they support C# then in theory it would be possible to write a plugin using F#.</p>
<p>For my day job I work with a company providing teams and sport clubs with a website and we have clubs mainly in Sweden but also in Germany, USA and UK so we have to manage time zones. To make this easier we store all dates as a Unix timestamp in the database, this means I constantly find my self converting dates to Unix timestamps and vice versa. There is a plugin for Wox that does this but I couldn’t get it to work on my machine and it seemed like the perfect problem to try writing a plugin for Wox using F#.</p>
<h2 id="writing-the-plugin">Writing the plugin</h2>
<p>It’s a very simple to create a plugin for Wox and it’s documented on <a href="http://doc.getwox.com/en/">their site</a>, however some parts isn’t quite clear but it’s not that hard. You start by installing their Nuget package called <a href="https://www.nuget.org/packages/Wox.Plugin/">Wox.Plugin</a>.</p>
<p>Then you have to create a class and implement one interface <code class="language-plaintext highlighter-rouge">IPlugin</code> with two methods <code class="language-plaintext highlighter-rouge">Init</code> and <code class="language-plaintext highlighter-rouge">Query</code>. The <code class="language-plaintext highlighter-rouge">Init</code> function is pretty self explanatory and it’s triggered when you plugin get initialized. Here’s how my <code class="language-plaintext highlighter-rouge">Init</code> function looks:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">type</span> <span class="nc">Main</span><span class="bp">()</span> <span class="p">=</span>
<span class="k">interface</span> <span class="nc">IPlugin</span> <span class="k">with</span>
<span class="k">member</span> <span class="n">this</span><span class="p">.</span><span class="nc">Init</span><span class="p">(</span><span class="n">context</span><span class="p">)</span> <span class="p">=</span>
<span class="bp">()</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">Query</code> function is the function that handles the query you enter in Wox, it takes a Query object as a parameter and you need to return a list of <code class="language-plaintext highlighter-rouge">Result</code>. And here’s my implementation of the <code class="language-plaintext highlighter-rouge">Query</code> function:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">member</span> <span class="n">this</span><span class="p">.</span><span class="nc">Query</span><span class="p">(</span><span class="n">query</span><span class="p">)</span> <span class="p">=</span>
<span class="k">let</span> <span class="kt">list</span> <span class="p">=</span> <span class="k">new</span> <span class="nc">List</span><span class="p"><</span><span class="nc">Result</span><span class="o">>()</span>
<span class="k">match</span> <span class="n">parseDate</span> <span class="n">query</span><span class="p">.</span><span class="nc">Search</span> <span class="k">with</span>
<span class="p">|</span> <span class="nc">Some</span><span class="p">(</span><span class="n">date</span><span class="p">)</span> <span class="p">-></span> <span class="kt">list</span><span class="p">.</span><span class="nc">Add</span> <span class="p"><|</span> <span class="n">dateResult</span> <span class="n">date</span>
<span class="p">|</span> <span class="p">_</span> <span class="p">-></span> <span class="k">match</span> <span class="n">parseUnix</span> <span class="n">query</span><span class="p">.</span><span class="nc">Search</span> <span class="k">with</span>
<span class="p">|</span> <span class="nc">Some</span><span class="p">(</span><span class="n">unix</span><span class="p">)</span> <span class="p">-></span> <span class="kt">list</span><span class="p">.</span><span class="nc">Add</span> <span class="p"><|</span> <span class="n">unixResult</span> <span class="n">unix</span>
<span class="p">|</span> <span class="p">_</span> <span class="p">-></span> <span class="bp">()</span>
<span class="kt">list</span>
</code></pre></div></div>
<p>Since Wox is all about searching for stuff and F# is great fit because it’s a pretty classic map reduce scenario. However since Wox is written using C# your F# code will have a bit of OO feel to it.</p>
<p>In my plugin I used <a href="http://nodatime.org/">NodaTime</a> which is another great Nuget package that if you’re working with time zones you really should take a look at. The full implementation of my plugin is available at <a href="https://github.com/robinridderholt/wox-plugin-unixtime">GitHub</a>. If you have any questions please leave a comment or ping me on <a href="https://twitter.com/Ridderholt">Twitter</a>.</p>
<p><img src="https://6pfwbq.bn1304.livefilestore.com/y3mlaGy7pPvU5r2fpePn2GLBUZIYXU5yHJkOZL0NXRgzQlfDKAK-RuTj-0aneh5f5XR5wtm1C-slTWV1Rh6Wm2_amMTki959eAO5SasAGg_LpIUB5c7Gx7vIf_GGwnASD_SszvAnsQvcIqmTzYI6PEl1JjxmHUI8xbra3we9AhrbNQ" alt="Result" /></p>
<h1 id="tldr">TL;DR</h1>
<p>It’s possible to write a plugin for <a href="http://www.getwox.com">Wox</a> using F#. Yaay!!!</p>Robin RidderholtIf you’re using Windows and haven’t checked out Wox you totally should. It’s a program that gets you easy access to all your files, folder and programs without using your mouse. Simply press ALT+Space and a bar will appear and you can search.Functional programming with JavaScript and Redux2016-06-12T00:00:00+00:002016-06-12T00:00:00+00:00http://blog.ridderholt.se/posts/functional-programming-with-javascript-and-redux<p>A couple of months ago I joined the team at the company that I work who is build a new product. They are using React, Redux and ASP.NET Core as their technologies.</p>
<p>After I had spent a couple of days writing code in this new project I started to realize that many of the techniques I was using was really functional techniques which I recognized from developing with F# or Haskell. I wondered why I hadn’t realized this right away and I guess that I had never thought of JavasScript as being a functional language and sure it’s not a pure functional language like Haskell but there is a lot of functions being thrown around when working with JavaScript.</p>
<p>So I thought I would share some of my experiences with React and Redux which in fact is a form of functional programming.</p>
<h2 id="redux">Redux</h2>
<p>If you haven’t checked out <a href="http://redux.js.org/">Redux</a> you should. Basically it’s a library that helps you contain the entire state of your SPA app in a single object. The idea is (and I will come back this later on) that you treat the state as an immutable object and each time you want to change some value you create a new copy of the state with that value changed and use that copy as the new state of you application.</p>
<p>This is handle in a specific way in Redux by using <a href="http://redux.js.org/docs/basics/Actions.html">Actions</a> and <a href="http://redux.js.org/docs/basics/Reducers.html">Reducers</a>. Actions is objects with information about how the state should change, these actions are dispatched and then handled by the reducers. The reducers receives the action and decide how the change the state depending of what type of action it is. Each action has a type property telling the reducer what type of action it should take.</p>
<p>I won’t go any deeper into how Redux works but please check it out it will change the way you write JS apps!</p>
<h2 id="functional-thinking-in-js-apps">Functional thinking in JS apps</h2>
<p>To be able to show some code in this post I wrote a simple Todo app (cliché I know) and it’s available on <a href="https://github.com/robinridderholt/ReactTodo">Github</a>.</p>
<h4 id="immutability">Immutability</h4>
<p>The first thing I noticed when working with Redux is that, as I mentioned earlier, the state of the application is treated as an immutable object. So why is this important then? Well, first of all the state isn’t truly immutable when working with Redux out of the box, the state is still a regular JavaScript object and you can change values in the state if you want to but it’s not recommended. If you keep to the guidelines and only return a new copy of the state in your reducers then at least we can say that we treat the state as immutable.</p>
<p>The advantages is that the behavior of your application becomes much more predictable and it’s easier to follow the flow of data trough your application. This is a huge advantage if you consider the fact that there is probably more developers than you who are going to be working on the project.</p>
<p>The Immutability also brings one quite amazing feature, the ability to undo. When the reducer returns a new copy of the state every time some value changes and if you then save the state as it was before the change in a separate place you can very easily implement a undo (and even a redo) feature.</p>
<p>As I mentioned the state isn’t really immutable and you have to trust that every developer sticks to the guidelines and doesn’t modify state directly. There is a way around this and that is to use <a href="https://facebook.github.io/immutable-js/docs/#/">ImmutableJS</a> and implement the whole store using this library.</p>
<h4 id="everything-is-a-function">Everything is a function</h4>
<p>The one thing that defines a functional language is the fact that (almost) everything is a function.</p>
<p>As in F# what looks like a variable declaration is actually a function declaration which simply takes no arguments and always returns the value 1.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">one</span> <span class="p">=</span> <span class="mi">1</span>
</code></pre></div></div>
<p>This is true also in when using Redux. Every action is a function and every reducer is a function.</p>
<p>This is an example from the Todo app which shows the todo reducer:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">todo</span> <span class="o">=</span> <span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">action</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">switch</span><span class="p">(</span><span class="nx">action</span><span class="p">.</span><span class="nx">type</span><span class="p">){</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">ADD_TODO</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="nx">action</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span>
<span class="na">id</span><span class="p">:</span> <span class="nx">action</span><span class="p">.</span><span class="nx">id</span>
<span class="p">};</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">TOGGLE_TODO</span><span class="dl">'</span><span class="p">:</span>
<span class="k">if</span><span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">id</span> <span class="o">!==</span> <span class="nx">action</span><span class="p">.</span><span class="nx">id</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">({},</span> <span class="nx">state</span><span class="p">,</span> <span class="p">{</span>
<span class="na">complete</span><span class="p">:</span> <span class="o">!</span><span class="nx">state</span><span class="p">.</span><span class="nx">complete</span>
<span class="p">});</span>
<span class="nl">default</span><span class="p">:</span>
<span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<p>In Redux there is also a concept called middleware which lets you add cross cutting concern logic such as logging or general error handling and guess what, yes middleware is also functions. You simply register your functions with Redux and stuff just works.</p>
<h4 id="higher-order-functions-hof">Higher Order Functions (HOF)</h4>
<p>A HOF is a function that takes a functions as an argument, returns a function or both of the above. This is also used in Redux when you want to fetch data from the server, and because the fetching is asynchronous you can’t just dispatch your action function and let the reducer modify your state. You have to make the request and when it’s done then you dispatch your action with your data from the server to the reducer which then can modify the state.</p>
<p>To make this easy there is a package you can use called <a href="https://www.npmjs.com/package/redux-thunk">redux-thunk</a>. This package makes it possible to dispatch a function which takes the dispatch function itself as an argument and makes the request and when the request is done it will dispatch the action.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">fetchTodos</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">dispatch</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/api/todos</span><span class="dl">'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">response</span> <span class="o">=></span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">())</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">json</span> <span class="o">=></span> <span class="nx">dispatch</span><span class="p">(</span><span class="nx">todosFetched</span><span class="p">(</span><span class="nx">json</span><span class="p">)))</span>
<span class="p">};</span>
<span class="p">};</span>
</code></pre></div></div>
<p>Here I’m declaring the fetchTodos function which returns a new function (making it a HOF) and the execution of this function will be taken care of using react-thunk. I’m also using the <a href="https://www.npmjs.com/package/isomorphic-fetch">isomorphic-fetch</a> package to make the ajax request.</p>
<h2 id="summary">Summary</h2>
<p>I have shown some examples of how functional thinking has made it’s way into JavaScript. What inspired me to write this post was the fact that I was surprised that it took some time for myself to realize that what I was actually doing in JavaScript was actually functional programming.</p>
<p>Because of the popularity of both React and Redux in the JavaScript community perhaps we will also se a increase of functional thinking in the backend as well.</p>
<p>As you can see in some of the examples I have used some es2015 features like the spread operator and the arrow function, this is transpiled using <a href="https://babeljs.io/">Babel</a>. With this syntax being more and more widley used I think that it will help functional thinking on it’s way due to the terse syntax.</p>Robin RidderholtA couple of months ago I joined the team at the company that I work who is build a new product. They are using React, Redux and ASP.NET Core as their technologies.Validation by types2016-02-06T00:00:00+00:002016-02-06T00:00:00+00:00http://blog.ridderholt.se/posts/validation-by-types<p>First of all, what I’m about to present isn’t my own idea. This has been covered by Scott Wlaschin in his article about <a href="http://fsharpforfunandprofit.com/ddd/">A functional approach to Domain Driven Design </a>. But I recently attended the conference <a href="http://www.swetugg.se">Swetugg</a> and listened to <a href="https://twitter.com/andhallberg">Anders Hallberg</a> talking about secure programming in .NET where he talked about some similar ideas.</p>
<p>Their idea is that if we use the DDD idea about creating small classes or value objects to model our domain such issues as validation becomes more easy to do.</p>
<p>Instead of trying to decorate your models with metadata of how a particular property should be validated you model your aggregate with small value objects which can validate them self upon creation.</p>
<p>Consider this simple example where we will model a simple person type with a name and an email address. If we just create two properties Name and Email both of the type string, then we would have to validate the email for the person every time an email should be sent to the user. But if we model the person with only the Name property with the type of string and creates a value object of the email. Then in the constructor of the email type we can validate the email and if it’s not a valid email then we throw an exception.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">module</span> <span class="nc">Email</span> <span class="p">=</span>
<span class="k">type</span> <span class="nc">T</span> <span class="p">=</span>
<span class="p">|</span> <span class="nc">ValidEmail</span> <span class="k">of</span> <span class="kt">string</span>
<span class="k">let</span> <span class="n">create</span> <span class="n">mail</span> <span class="p">=</span>
<span class="k">match</span> <span class="n">mail</span> <span class="k">with</span>
<span class="p">|</span> <span class="n">m</span> <span class="k">when</span> <span class="n">m</span> <span class="p"><></span> <span class="s2">""</span> <span class="p">-></span> <span class="nc">ValidEmail</span><span class="p">(</span><span class="n">mail</span><span class="p">)</span>
<span class="p">|</span> <span class="p">_</span> <span class="p">-></span> <span class="n">invalidArg</span> <span class="s2">"mail"</span> <span class="s2">"Invalid mail"</span>
<span class="k">module</span> <span class="nc">Person</span> <span class="p">=</span>
<span class="k">type</span> <span class="nc">T</span> <span class="p">=</span> <span class="p">{</span> <span class="nc">Name</span> <span class="p">:</span> <span class="kt">string</span><span class="p">;</span> <span class="nc">Email</span><span class="p">:</span> <span class="nn">Email</span><span class="p">.</span><span class="nc">T</span> <span class="p">}</span>
<span class="k">let</span> <span class="n">create</span> <span class="n">name</span> <span class="n">mail</span> <span class="p">=</span> <span class="p">{</span><span class="nc">Name</span> <span class="p">=</span> <span class="n">name</span><span class="p">;</span> <span class="nc">Email</span> <span class="p">=</span> <span class="nn">Email</span><span class="p">.</span><span class="n">create</span> <span class="n">mail</span><span class="p">}</span>
</code></pre></div></div>
<p>(or if you prefer C#)</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="k">class</span> <span class="nc">Email</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">readonly</span> <span class="kt">string</span> <span class="n">Value</span><span class="p">;</span>
<span class="k">private</span> <span class="nf">Email</span><span class="p">(</span><span class="kt">string</span> <span class="n">mail</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Value</span> <span class="p">=</span> <span class="n">mail</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">public</span> <span class="k">static</span> <span class="n">Email</span> <span class="nf">Create</span><span class="p">(</span><span class="kt">string</span> <span class="n">mail</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="kt">string</span><span class="p">.</span><span class="nf">IsNullOrWhitespace</span><span class="p">(</span><span class="n">mail</span><span class="p">))</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nf">ArgumentException</span><span class="p">(</span><span class="s">"Invalid email"</span><span class="p">,</span> <span class="k">nameof</span><span class="p">(</span><span class="n">mail</span><span class="p">));</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">Email</span><span class="p">(</span><span class="n">mail</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">public</span> <span class="k">class</span> <span class="nc">Person</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">readonly</span> <span class="kt">string</span> <span class="n">Name</span><span class="p">;</span>
<span class="k">public</span> <span class="k">readonly</span> <span class="n">Email</span> <span class="n">Email</span><span class="p">;</span>
<span class="k">public</span> <span class="nf">Person</span><span class="p">(</span><span class="kt">string</span> <span class="n">name</span><span class="p">,</span> <span class="n">Email</span> <span class="n">email</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Name</span> <span class="p">=</span> <span class="n">name</span><span class="p">;</span>
<span class="n">Email</span> <span class="p">=</span> <span class="n">email</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>In this way the person object can’t be created without a proper validation of the email. So where ever you use the person object you can be sure that the person has a valid email. Obviously you shouldn’t just check if the mail parameter is empty or not you should do a some additional regex validation but for the case of a simple example I choose to just verify that the string is not empty.</p>
<p>This is how you would create the person:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">person</span> <span class="p">=</span> <span class="nn">Person</span><span class="p">.</span><span class="n">create</span> <span class="s2">"Robin"</span> <span class="s2">"email@domain.com"</span>
</code></pre></div></div>
<p>C#</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">person</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">Person</span><span class="p">(</span><span class="s">"Robin"</span><span class="p">,</span> <span class="n">Email</span><span class="p">.</span><span class="nf">Create</span><span class="p">(</span><span class="s">"email@domain.com"</span><span class="p">));</span>
</code></pre></div></div>
<h2 id="next-step">Next step</h2>
<p>We have seen how creating value objects may improve and simplify our domain but Anders also spoke about another use of value objects that might not be so obvious at first, and this is an idea that me and my colleagues have been experimenting with in our day to day work.</p>
<p>Let’s say that we have a database which uses integers as primary keys (with auto increment) in our tables. If you have a method that takes a id of a person as a parameter, your method maybe looks like this:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="n">Person</span> <span class="nf">GetPersonById</span><span class="p">(</span><span class="kt">int</span> <span class="n">personId</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span> <span class="n">_personRepository</span><span class="p">.</span><span class="nf">GetById</span><span class="p">(</span><span class="n">personId</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>So how do we know that the value passed to our method is actually a valid id of a person? For all we know the value could be -1 or 0.</p>
<p>To solve this problem we can use a value object instead of the raw value of an integer.</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="k">class</span> <span class="nc">PersonId</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">readonly</span> <span class="kt">int</span> <span class="n">Value</span><span class="p">;</span>
<span class="k">private</span> <span class="nf">PersonId</span><span class="p">(</span><span class="kt">int</span> <span class="n">id</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Value</span> <span class="p">=</span> <span class="n">id</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">public</span> <span class="k">static</span> <span class="n">PersonId</span> <span class="nf">FromInt</span><span class="p">(</span><span class="kt">int</span> <span class="n">id</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="n">id</span> <span class="p"><=</span> <span class="m">0</span><span class="p">)</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nf">ArgumentException</span><span class="p">(</span><span class="s">"Invalid id"</span><span class="p">,</span> <span class="k">nameof</span><span class="p">(</span><span class="n">id</span><span class="p">));</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">PersonId</span><span class="p">(</span><span class="n">id</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Now we have a class that represents our input value and in our method we can be sure that the value is not -1 or 0 when we go searching in the database.</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="n">Person</span> <span class="nf">GetPersonById</span><span class="p">(</span><span class="n">PersonId</span> <span class="n">personId</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span> <span class="n">_personRepository</span><span class="p">.</span><span class="nf">GetById</span><span class="p">(</span><span class="n">personId</span><span class="p">.</span><span class="n">Value</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Another benefit from using this value object is that the code becomes more readable, it’s very clear for a developer what sort of input you are expected to pass this method. And yes, of course you can pass any other integer to the PersonId class but as a developer you get reminded to check what value you are actually passing when you are forced to create an instance of the PersonId class.</p>
<p>A sidenote here, when creating these value objects in C# you may want to implement your own version of IEquatable<T>, Equals, GetHashCode and some operators that will improve how you can work with these value objects (and this comes for free if you're using F#).</T></p>
<h2 id="exceptions-really">Exceptions, really?</h2>
<p>As you have seen in the examples above I have thrown exceptions when the data wasn’t valid and that might seem strange to some people but as Anders Hallberg mentioned is his talk, getting a negative value for a id of a person isn’t expected and in that case you throw an exception. In F# you could expand the union type to include a InvalidEmail type and then use pattern matching to check the type where ever needed but then you as a developer need to remember that and in C# you could go for a inheritance hierarchy but then again you need to remember to check for the invalid type in each method.</p>
<h2 id="immutability">Immutability</h2>
<p>In the examples above F# value objects are immutable by default but in the C# examples I have deliberately made the value objects immutable. This is because after creation and validation of these objects you would like to trust that the value stays valid and if the value object isn’t immutable there is no way to ensure that.</p>Robin RidderholtFirst of all, what I’m about to present isn’t my own idea. This has been covered by Scott Wlaschin in his article about A functional approach to Domain Driven Design . But I recently attended the conference Swetugg and listened to Anders Hallberg talking about secure programming in .NET where he talked about some similar ideas.Functional composition2015-12-17T00:00:00+00:002015-12-17T00:00:00+00:00http://blog.ridderholt.se/posts/functional-composition<p>In functional programming where functions is a first class citizen functional composition is very common. The basic concept is that you pipe the result of one function to the input of another function in order to create a new function. This may seem a little abstract but in this post I will try to show how it can be done in F# and also in C#.</p>
<h2 id="filtering-persons">Filtering persons</h2>
<p>First let’s create a simple example by creating a person type</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">type</span> <span class="nc">Gender</span> <span class="p">=</span> <span class="nc">Female</span> <span class="p">|</span> <span class="nc">Male</span>
<span class="k">type</span> <span class="nc">Person</span> <span class="p">=</span> <span class="p">{</span>
<span class="nc">Name</span><span class="p">:</span><span class="kt">string</span>
<span class="nc">Age</span><span class="p">:</span><span class="kt">int</span>
<span class="nc">Gender</span><span class="p">:</span><span class="nc">Gender</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Now say that we have a list of persons that we want to be able to filter in different ways so we start by defining a basic function that takes a function and a person as two arguments and then applies that function on the person. Type definition <code>('a -> ('a -> 'b) -> 'b)</code>:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">filterPerson</span> <span class="n">person</span> <span class="n">predicate</span> <span class="p">=</span>
<span class="n">predicate</span> <span class="n">person</span>
</code></pre></div></div>
<p>We now have a function that can apply any function to our person. So now if we want to filter our persons list by gender we can create a function that takes a gender and a person as parameters and uses our first function to return a bool value. Type definition <code>(Gender -> Person -> bool)</code></p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">filterByGender</span> <span class="n">gender</span> <span class="n">person</span> <span class="p">=</span>
<span class="n">filterPerson</span> <span class="n">person</span> <span class="p">(</span><span class="k">fun</span> <span class="n">p</span> <span class="p">-></span> <span class="n">p</span><span class="p">.</span><span class="nc">Gender</span> <span class="p">=</span> <span class="n">gender</span><span class="p">)</span>
</code></pre></div></div>
<p>And lastly we can take this even further by creating a function called “filterMales” which may seem a little verbose but the code will be very clear about what its intent is. Type definition: <code>(Person -> Bool)</code></p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">filterMales</span> <span class="n">person</span> <span class="p">=</span>
<span class="n">filterByGender</span> <span class="nc">Male</span> <span class="n">person</span>
</code></pre></div></div>
<p>What we have done now is to start with a very general function that we then use to create new functions which does less general stuff. As you can see in the type definitions for the functions we have removed or hidden arguments and defined them more and more concrete. The last function is very clear in what it does both in the type definition and the name and this is the power of functional composition.</p>
<p>So if we want to put these function into use we could create a list of persons and then use the List.filter function to apply or filterMales function.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">persons</span> <span class="p">=</span> <span class="o">[{</span><span class="nc">Name</span> <span class="p">=</span> <span class="s2">"Jen"</span><span class="p">;</span> <span class="nc">Age</span> <span class="p">=</span> <span class="mi">34</span><span class="p">;</span> <span class="nc">Gender</span> <span class="p">=</span> <span class="nc">Female</span><span class="o">};</span>
<span class="p">{</span><span class="nc">Name</span> <span class="p">=</span> <span class="s2">"Greg"</span><span class="p">;</span> <span class="nc">Age</span> <span class="p">=</span> <span class="mi">27</span><span class="p">;</span> <span class="nc">Gender</span> <span class="p">=</span> <span class="nc">Male</span><span class="o">};</span>
<span class="p">{</span><span class="nc">Name</span> <span class="p">=</span> <span class="s2">"Chandler"</span><span class="p">;</span> <span class="nc">Age</span> <span class="p">=</span> <span class="mi">31</span><span class="p">;</span> <span class="nc">Gender</span> <span class="p">=</span> <span class="nc">Male</span><span class="o">}]</span>
<span class="n">persons</span> <span class="p">|></span> <span class="nn">List</span><span class="p">.</span><span class="n">filter</span> <span class="n">filterMales</span>
<span class="p">|></span> <span class="nn">List</span><span class="p">.</span><span class="n">iter</span> <span class="p">(</span><span class="k">fun</span> <span class="n">p</span> <span class="p">-></span> <span class="n">printf</span> <span class="s2">"%s</span><span class="se">\r\n</span><span class="s2">"</span> <span class="n">p</span><span class="p">.</span><span class="nc">Name</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="c-example">C# example</h2>
<p>Functional composition is a very common practice in function programming but this is also possible in C# however it may not be as elegant as in a functional language like F# or Haskell.</p>
<p>As in the F# example we start with the most general function, applying a given function to a person:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Func</span><span class="p"><</span><span class="n">Person</span><span class="p">,</span> <span class="n">Func</span><span class="p"><</span><span class="n">Person</span><span class="p">,</span> <span class="kt">bool</span><span class="p">>,</span> <span class="kt">bool</span><span class="p">></span> <span class="n">filterPerson</span> <span class="p">=</span>
<span class="p">(</span><span class="n">person</span><span class="p">,</span> <span class="n">predicate</span><span class="p">)</span> <span class="p">=></span> <span class="nf">predicate</span><span class="p">(</span><span class="n">person</span><span class="p">);</span>
</code></pre></div></div>
<p>As you can see the C# code becomes a bit more verbose because we don’t have the same type inference as in F#. Let’s implement the filterByGender function in C#:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Func</span><span class="p"><</span><span class="n">Person</span><span class="p">,</span> <span class="n">Gender</span><span class="p">,</span> <span class="kt">bool</span><span class="p">></span> <span class="n">filterByGender</span> <span class="p">=</span>
<span class="p">(</span><span class="n">person</span><span class="p">,</span> <span class="n">gender</span><span class="p">)</span> <span class="p">=></span> <span class="nf">filterPerson</span><span class="p">(</span><span class="n">person</span><span class="p">,</span> <span class="n">p</span> <span class="p">=></span> <span class="n">p</span><span class="p">.</span><span class="n">Gender</span> <span class="p">==</span> <span class="n">gender</span><span class="p">);</span>
</code></pre></div></div>
<p>And finally the filterMales function:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Func</span><span class="p"><</span><span class="n">Person</span><span class="p">,</span> <span class="kt">bool</span><span class="p">></span> <span class="n">filterMales</span> <span class="p">=</span>
<span class="p">(</span><span class="n">person</span><span class="p">)</span> <span class="p">=></span> <span class="nf">filterByGender</span><span class="p">(</span><span class="n">person</span><span class="p">,</span> <span class="n">Gender</span><span class="p">.</span><span class="n">Male</span><span class="p">);</span>
</code></pre></div></div>
<p>Now we can apply our function in C# using Linq:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">var</span> <span class="n">persons</span> <span class="p">=</span> <span class="k">new</span> <span class="n">List</span><span class="p"><</span><span class="n">Person</span><span class="p">></span>
<span class="p">{</span>
<span class="k">new</span> <span class="n">Person</span> <span class="p">{</span><span class="n">Name</span> <span class="p">=</span> <span class="s">"Jen"</span><span class="p">,</span> <span class="n">Age</span> <span class="p">=</span> <span class="m">34</span><span class="p">,</span> <span class="n">Gender</span> <span class="p">=</span> <span class="n">Gender</span><span class="p">.</span><span class="n">Female</span><span class="p">},</span>
<span class="k">new</span> <span class="n">Person</span> <span class="p">{</span><span class="n">Name</span> <span class="p">=</span> <span class="s">"Greg"</span><span class="p">,</span> <span class="n">Age</span> <span class="p">=</span> <span class="m">27</span><span class="p">,</span> <span class="n">Gender</span> <span class="p">=</span> <span class="n">Gender</span><span class="p">.</span><span class="n">Male</span><span class="p">},</span>
<span class="k">new</span> <span class="n">Person</span> <span class="p">{</span><span class="n">Name</span> <span class="p">=</span> <span class="s">"Chandler"</span><span class="p">,</span> <span class="n">Age</span> <span class="p">=</span> <span class="m">31</span><span class="p">,</span> <span class="n">Gender</span> <span class="p">=</span> <span class="n">Gender</span><span class="p">.</span><span class="n">Male</span><span class="p">}</span>
<span class="p">};</span>
<span class="n">persons</span><span class="p">.</span><span class="nf">Where</span><span class="p">(</span><span class="n">filterMales</span><span class="p">)</span>
<span class="p">.</span><span class="nf">ForEach</span><span class="p">(</span><span class="n">p</span> <span class="p">=></span> <span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="n">p</span><span class="p">.</span><span class="n">Name</span><span class="p">));</span>
</code></pre></div></div>
<h2 id="summary">Summary</h2>
<p>So basically functional composition is all about writing general functions which can be used to create more specific functions which makes up a program with many functions that can be reused in different ways. I found that this approach works as well in C# as in F# although it’s a bit more verbose but it makes the code pretty clean an very easy to read.</p>Robin RidderholtIn functional programming where functions is a first class citizen functional composition is very common. The basic concept is that you pipe the result of one function to the input of another function in order to create a new function. This may seem a little abstract but in this post I will try to show how it can be done in F# and also in C#.Nifty things in F#2015-07-04T00:00:00+00:002015-07-04T00:00:00+00:00http://blog.ridderholt.se/posts/nifty-things-in-f<p>For a couple of years I have had an on and off again relationship with F# I also did a “Introduction to F#” <a href="https://www.youtube.com/watch?v=XhPX3zYCMLA">presentation at a conference</a>. Lately I have been digging more deeply into F# in my spare time and I thought I share two small yet powerful things that is very “nifty” in F#.</p>
<h2 id="no-more-nullreferenceexceptions">No more NullReferenceExceptions</h2>
<p>Anyone who has written any sort of application is likely to have gotten a NullReferenceException. We have all been there, using methods without really thinking about what it will return when given certain values and BOOM you forgot to check for null.</p>
<p>In F# there is a concept called <a href="https://msdn.microsoft.com/en-us/library/dd233245.aspx"><code class="language-plaintext highlighter-rouge">option</code></a> which can be compared with <a href="https://msdn.microsoft.com/en-us/library/b3h38hb0.aspx"><code class="language-plaintext highlighter-rouge">Nullable<T></code></a> in C#. This concept or pattern is very common in F# and it lets us to write functions that return a value or no value. You may be thinking that that’s exactly the same as returning a value or null from a C# method but the smart thing about <code class="language-plaintext highlighter-rouge">option</code> is that the F# compiler will warn you if you don’t write code for managing both the value or the <code class="language-plaintext highlighter-rouge">None</code> value.</p>
<p>When working with <code class="language-plaintext highlighter-rouge">option</code> there are two keywords you need to be familiar with and they are <code class="language-plaintext highlighter-rouge">Some</code> and <code class="language-plaintext highlighter-rouge">None</code>. When returning a value from a functions that returns an option you would write <code class="language-plaintext highlighter-rouge">Some(10)</code> which would return an option of the type <code class="language-plaintext highlighter-rouge">int</code> with the value of 10. When you don’t want to return anything you simply return <code class="language-plaintext highlighter-rouge">None</code>.</p>
<p>A very simple example of where this can be useful is when reading input from the console. Lets say that you’re asking the user to enter a number and your function <code class="language-plaintext highlighter-rouge">readline</code> reads the value from the console and tries to parse it as an integer. If the value that the user entered was not a valid integer then you want to return <code class="language-plaintext highlighter-rouge">None</code> from that function otherwise you return <code class="language-plaintext highlighter-rouge">Some(value)</code> where value is the parsed integer that the user entered.</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">readLine</span> <span class="p">=</span>
<span class="k">let</span> <span class="n">input</span> <span class="p">=</span> <span class="nn">Console</span><span class="p">.</span><span class="nc">ReadLine</span><span class="bp">()</span>
<span class="k">match</span> <span class="nn">Int32</span><span class="p">.</span><span class="nc">TryParse</span> <span class="n">input</span> <span class="k">with</span>
<span class="p">|</span> <span class="bp">true</span><span class="p">,</span> <span class="n">value</span> <span class="p">-></span> <span class="nc">Some</span><span class="p">(</span><span class="n">value</span><span class="p">)</span>
<span class="p">|</span> <span class="p">_</span> <span class="p">-></span> <span class="nc">None</span>
</code></pre></div></div>
<p>In this example we take advantage of <code class="language-plaintext highlighter-rouge">Int32.TryParse</code> which in F# will return a tuple with the first value being a boolean indicating if the value could be parsed and the second item is the parsed value. If the value could not be parsed the second value will be 0. So with some simple <a href="https://msdn.microsoft.com/en-us/library/dd547125.aspx">pattern matching</a> we check for a valid value and then returns <code class="language-plaintext highlighter-rouge">Some(value)</code> or when the value is invalid we return <code class="language-plaintext highlighter-rouge">None</code>.</p>
<p>When using the return value from the <code class="language-plaintext highlighter-rouge">readline</code> function we can use pattern matching to check for the parsed value and as I mentioned earlier the F# compiler will complain if we don’t handle the <code class="language-plaintext highlighter-rouge">None</code> path of the code. This is what a the code may look like when handling both cases:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">integerValue</span> <span class="p">=</span> <span class="n">readLine</span>
<span class="k">match</span> <span class="n">integerValue</span> <span class="k">with</span>
<span class="p">|</span> <span class="nc">Some</span><span class="p">(</span><span class="n">iv</span><span class="p">)</span> <span class="p">-></span> <span class="n">printf</span> <span class="s2">"You entered %d"</span> <span class="n">iv</span>
<span class="p">|</span> <span class="nc">None</span> <span class="p">-></span> <span class="n">printf</span> <span class="s2">"Incorrect value"</span>
</code></pre></div></div>
<p>As I have mentioned this is a very common pattern in F# and a very easy way to avoid getting those NullReferenceExceptions.</p>
<h2 id="unit-of-measure">Unit of measure</h2>
<p>Another nifty feature of F# is the built in way to manage units of measure with types. In some cases when writing an application you may what to handle different units of measure. There is a famous example of the <a href="https://en.wikipedia.org/wiki/Mars_Climate_Orbiter">Mars Climate Orbiter</a> which unexpectedly went out of its orbit and disintegrated. Later when NASA found out what happened it was reveled that the two teams of programmers working on the software for the Orbiter was measuring speed and other inputs using different units of measure, one team measured things using the metric system and the other team used the imperial system.</p>
<p>To make things like this easy F# has a way to declare types as a <code class="language-plaintext highlighter-rouge">Measure</code> like this:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[<</span><span class="nc">Measure</span><span class="p">>]</span> <span class="k">type</span> <span class="n">kmh</span>
<span class="p">[<</span><span class="nc">Measure</span><span class="p">>]</span> <span class="k">type</span> <span class="n">mph</span>
</code></pre></div></div>
<p>This enables you to declare variables and specifying in which unit of measure this variable should be used with. So if we want to declare a speed in Km/h we simply write:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">swedishSpeed</span> <span class="p">=</span> <span class="mi">130</span><span class="p">.</span><span class="mi">0</span><span class="p"><</span><span class="n">kmh</span><span class="p">></span>
<span class="k">let</span> <span class="n">britishSpeed</span> <span class="p">=</span> <span class="mi">70</span><span class="p">.</span><span class="mi">0</span><span class="p"><</span><span class="n">mph</span><span class="p">></span>
</code></pre></div></div>
<p>When we want to make sure that only one type of unit of measure can be passed to a function we can set this as the type of the input:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">toFast</span> <span class="p">(</span><span class="n">speed</span><span class="p">:</span><span class="kt">float</span><span class="p"><</span><span class="n">kmh</span><span class="o">>)</span> <span class="p">=</span> <span class="n">speed</span> <span class="p">></span> <span class="mi">120</span><span class="p">.</span><span class="mi">0</span><span class="p"><</span><span class="n">kmh</span><span class="p">></span>
</code></pre></div></div>
<p>And if we want to convert between unit of measures we have to write a function that takes one measure as the parameter and returns the measure we want to covert to:</p>
<div class="language-fsharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">convertToKmh</span> <span class="p">(</span><span class="n">speed</span><span class="p">:</span><span class="kt">float</span><span class="p"><</span><span class="n">mph</span><span class="o">>)</span> <span class="p">=</span> <span class="n">speed</span> <span class="p">*</span> <span class="mi">1</span><span class="p">.</span><span class="mi">6</span><span class="p"><</span><span class="n">kmh</span><span class="o">/</span><span class="n">mph</span><span class="p">></span>
</code></pre></div></div>
<p>If you specify the type of your parameters the compiler will warn you if you are trying to pass a parameter of the wrong unit of measure to it.</p>
<h2 id="summary">Summary</h2>
<p>Using these two simple and powerful features of F# you can write applications which are less likely to encounter a <code class="language-plaintext highlighter-rouge">NullReferenceException</code> using <code class="language-plaintext highlighter-rouge">Some</code> and <code class="language-plaintext highlighter-rouge">None</code> when a function could return a value or nothing and the compiler will help you to make sure you handle cases when a function may return <code class="language-plaintext highlighter-rouge">None</code>.</p>
<p>We have also looked at the feature <code class="language-plaintext highlighter-rouge">Measure</code> in F# which lets you define units of measure in your code to make sure there is no logical conversion error.</p>
<p>If you have any questions or comments regarding this post please leave a comment below. Thanks for reading!</p>Robin RidderholtFor a couple of years I have had an on and off again relationship with F# I also did a “Introduction to F#” presentation at a conference. Lately I have been digging more deeply into F# in my spare time and I thought I share two small yet powerful things that is very “nifty” in F#.