Leaving implementation details for later with unsafeCrashWith in PureScript

Sometimes, while designing our code, a new idea pops up and we start thinking how well would this thing we currently work on compose with the other bits of our application.

Focusing on implementation details might be a waste of time if we just want to test an idea out.

unsafeCrashWith

In these rare cases, the unsafeCrashWith :: forall a. String -> a function defined in the Partial.Unsafe module comes in handy.

Although, that's not what type safety encourages, it allows us to write function definitions such as this:

capitalize :: String -> String
capitalize = unsafeCrashWith "Not implemented yet"

Type checker does not complain. However, when called, this function would fail miserably:

    throw new Error(msg);
    ^

Error: Not implemented yet

Nevertheless, avoiding the failure is not our point here. We don't want to call this function just yet.

Example

To make a practical example, imagine we had a monolithic function from string to string program :: String -> String.

Could it be split into a composition of smaller functions? What would the types of these smaller functions be?

Let's see an example of turning program into a composition of two functions, capitalize and greet with no actual definitions.

module Main where

import Prelude
import Partial.Unsafe (unsafeCrashWith)

capitalize :: String -> String
capitalize = unsafeCrashWith "Not implemented yet"

greet :: String -> String
greet = unsafeCrashWith "Not implemented yet"

program :: String -> String
program = greet <<< capitalize

This snippet actually compiles and the program function is not monolithic anymore.

Once we're happy with the overall design of our code, all that is left is actually providing the implementation.

Pattern match multiple values without a Tuple in PureScript

To pattern match multiple values in PureScript, it's very tempting to wrap them with Tuple data constructor imported from Data.Tuple as follows:

case (Tuple path role) of
  (Tuple "/admin" Admin) -> Allow
  (Tuple "/admin" _) -> Deny
  _ -> Allow

That's not really necessary!

In fact, it can be easier done with no extra imports and a single comma:

case path, role of
  "/admin", Admin -> Allow
  "/admin", _ -> Deny
  _, _ -> Allow

Integrate PureScript with your JavaScript application

PureScript is a strongly-typed functional programming language that compiles to JavaScript. It means we can benefit from the type safety not only in new, but also existing applications.

PureScript has a top-notch FFI (Foreign-Function Interface) allowing us to call JavaScript functions from within PureScript. Not only this but we can also use PureScript modules from JavaScript.

Installing PureScript

First, we need to install global dependencies — the PureScript compiler, the package manager and the build tool: yarn global add [email protected] psc-package pulp.

Generating project structure

Pulp, the build tool, allows us to generate a basic project structure by running a single command: pulp --psc-package init.

It will create the src and test directories as well as psc-package.json containing a list of dependencies. Once created, pulp will install PureScript packages to .psc-package directory.

You can now compile and run src/Main.purs by typing pulp --watch run. After modifying the contents of src/Main.purs, pulp will automatically recompile and run the module.

Installing code bundler

Since we'd like to build a JavaScript application that integrates with PureScript, a code bundler will come in handy.

Parcel helps to effortlessly transpile ES6 code, bundle modules and automatically reload the code in the browser with no extra configuration. You can install Parcel with yarn add parcel.

Defining npm script and running the bundler

Once installed, it is often a good practice to add a script to the package.json file so that we can easily run the bundler. We're going to define dev script that will bundle the code and serve the application on port 1234 after running yarn run dev in the terminal.

// package.json
"scripts": {
  "dev": "parcel serve src/index.html"
}

Next, we create src/index.html

<!-- src/index.html -->
<html>
  <head>
    <title>PureScript Application</title>
  </head>

  <body>
    <script src="./index.js"></script>
  </body>
</html>

And src/index.js

// src/index.js
console.log('Hello from JavaScript');

Now, after executing yarn run dev, a very basic JavaScript application is up and running on http://localhost:1234/.

Calling PureScript from JavaScript

Now, the final step. We'd like to execute PureScript code from src/Main.purs in our JavaScript application. We still want yarn run dev to be running in the background.

However, instead of running pulp --watch run and executing the PureScript code, we're going to run pulp --watch build to build the code and skip the execution part.

The PureScript module

Now, when both commands are running in the background, we can have a look at our src/Main.purs module.

module Main where

import Prelude
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)

main :: forall e. Eff (console :: CONSOLE | e) Unit
main = do
  log "Hello from PureScript!"

Essentially, we can tell the module is named Main and it only has a single method called main. It imports a bunch of other modules in order to tell the compiler the main function is effectful and the particular side effect involved is JavaScript console. It also imports the log function which takes a string and prints it in the JavaScript console. The main function doesn't produce any value hence the Unit in the type definition.

Importing the module

Next, after we understood the PureScript module, we can import the compiled output from our JavaScript file.

// src/index.js
const Main = require('../output/Main/index');

console.log('Hello from JavaScript');

Main.main();

After opening the browser window again, we can see both the JavaScript code we wrote by hand and the JavaScript code produced by the PureScript compiler both executed and printed text to the JavaScript console.

Excellent! We just integrated existing JavaScript code with PureScript. Now we're free to write in both languages. We can also gradually introduce PureScript in some areas of our codebase as we learn the language.

Next steps

We learned integrating PureScript code with JavaScript doesn't have to be a difficult task. Parcel and Pulp make it a simple process. Parcel's documentation also explains how to bundle our application for production.

When it comes to learning PureScript, I highly recommend the "PureScript by Example" book by Phil Freeman, the author of the language. It's a fantastic resource for learning the language as well as functional programming concepts in general!

Good luck!

ReasonML - Http Server in Node.js

Since the JavaScript interop in ReasonML is really powerful nothing stops us from writing some ReasonML for Node.js.

Here's a very simple Node.js server:

module Http = {
  type lib;
  type server;
  type request;
  type response = {. [@bs.meth] "_end": string => unit};
};
[@bs.module]
external http : Http.lib = "http";

[@bs.send.pipe: Http.lib]
external createServer : ((Http.request, Http.response) => unit) => Http.server = "";

[@bs.send.pipe: Http.server]
external listen : int => Http.server = "";
http
  |> createServer((_, res) => res##_end("hello world"))
  |> listen(3333);

The above produces the following JavaScript code:

var Http = require("http");

Http.createServer((function (_, res) {
  return res.end("hello world");
})).listen(3333);

Type Safety

Because we assigned types to each of the external calls, the following code would not compile:

http |> listen(3333);

(* same as listen(3333, http) *)

The compiler will warn us the listen method cannot accept http as a parameter because the type of http is Http.lib whereas listen expects a parameter of type Http.server and the only way to produce a value of this type is to use createServer:

  This has type:
    (Http.server) => Http.server
  But somewhere wanted:
    (Http.lib) => 'a

  The incompatible parts:
    Http.server
    vs
    Http.lib

ReasonML / BuckleScript JavaScript Interop

JavaScript interop in ReasonML / BuckleScript looks intimidating in the beginning but after some time you learn to love it.

I'm quite amazed by it. The following ReasonML code:

[@bs.module]
external fetch : string => Js.Promise.t('a) = "isomorphic-unfetch";

fetch(url)
|> Js.Promise.then_(response => Js.Promise.resolve(response##text()))
|> Js.Promise.then_(data => Js.Promise.resolve(Js.log(data)));

produces this JavaScript:

var IsomorphicUnfetch = require("isomorphic-unfetch");

IsomorphicUnfetch(url).then((function (response) {
    return Promise.resolve(response.text());
})).then((function (data) {
    return Promise.resolve((console.log(data), /* () */0));
}));