Functional core, imperative shell
Tags: programming, functional, javascript, productivity
Published: 2022-08-29 10:17:00

<p>I&#39;m going to assume that you&#39;re at least somewhat familiar with basic functional programming concepts, but as a quick reminder:</p>
<p>A pure function is a function that:</p>
<ol>
<li><p>is referentially transparent - it will always return the same output for the same input</p>
</li>
<li><p>have no side effects - it doesn&#39;t affect the outside world</p>
</li>
</ol>
<p>This brings us a lot of benefits (referential transparency, unit testing, they are easier to reason about) and we should split as much functionality as possible into pure functions, but how do we get there?</p>
<p>One technique that can help us get there is called the &quot;Functional core, imperative shell&quot;. As the name says, the idea is to separate the effectful, imperative code into the outer shell and keep the inner core pure (functional core).</p>
<p>Purely functional languages will nudge you in that direction due to their design (i.e. IO monads), but you can use and benefit from this technique in pretty much every programming language.</p>
<p>If you&#39;re reading this guide, there&#39;s a good chance that you know at least some JavaScript. So, we&#39;re going to go with that.</p>
<p>In some ways, JavaScript is also kind of nudging us in this direction. You&#39;ve probably used async functions. While they are generally nicer to use than callbacks or promises directly, you soon realize that they don&#39;t really play nicely with the rest of your codebase - values inside promises are a very different beast from normal values, and functions which return promises are very different from normal functions.</p>
<p>This is the important part. Instead of trying to mix those two concepts throughout our codebase (and infect almost everything in the process), the idea is that we take and isolate those async (and impure) stuff into the outer shell, so we can keep our core nice and clean.</p>
<p>Here&#39;s a very simple example that should look familiar if you ever used something similar to express.js:</p>
<pre><code>// imperative shell
async function handler(req, res) {
    var users = await fetchUsers()
    var projects = await fetchProjects()

    var result = render(transformData(users, projects))

    res.send(result)
}

// functional core
function transformData(users, projects) {}

function render(model) {}
</code></pre>
<p>So, we have two parts:</p>
<h2 id="imperative-shell">Imperative shell</h2>
<p><code>handler</code> is an express-like request handler function, which represents our outer imperative shell. You can do pretty much what you want here - usually, you need to first get the data from somewhere (impure part), then transform data (pure part), then send the result (impure part).</p>
<h2 id="functional-core">Functional core</h2>
<p><code>transformData</code> and <code>render</code> are pure functions - you should have all the needed data ready before calling into the functional core, as these functions will use only what they&#39;ll get in the parameters.</p>
<p>This example is arbitrary, but here are a few points which may help you to understand it:</p>
<ul>
<li><code>transformData</code> function transforms (normalizes and prepares) the fetched data for rendering - you can see the returned data as a form of ViewModel - the data is organized in a way that we need for our view and if the outside data format ever changes, we just need to change the mapping function</li>
<li><code>render</code> function takes that model and returns rendered html string - it can call other pure functions which return html parts (i.e. similar to the concepts of components or partial views)</li>
</ul>
<p>As you can see, the idea itself is very simple, but it can take some effort (depending on the nature of the problem you&#39;re solving - i.e. IO-heavy code is harder to organize this way).</p>
<hr><small>
Note: This is a snapshot of the wiki page from the <a href="https://betterways.dev">BetterWays.dev wiki</a>, you can find the latest (better formatted) version here: <a href="https://betterways.dev/functional-core-imperative-shell">betterways.dev/functional-core-imperative-shell</a>.
</small>