Higher level mathematics in WebSharper

WebSharper allows you to use higher level mathematics with two of its extensions: MathJS and MathJax. With these libraries calculating with (for example) complex numbers or matrices could be done with ease.

Some changes has been done to the usage of MathJS. In JavaScript it’s easier to achieve function parameters with multiple types, but in F# we have to use a wrapper to do the same. This wrapper is called MathNumber. A little example:

When we’d write this in JavaScript:

math.add("5", 1.7, true);

We have to write this in F#:

Math.Add(MathNumber("5"), MathNumber(1.7), MathNumber(true))

Exception is when you use either only float, int, or Math.Unit

//Only floats
Math.Add(1., 2., 3.)
//Only ints
Math.Add(1, 2, 3)
//Only Units
Math.Add(Math.Unit("1 cm"), Math.Unit("2 cm"), Math.Unit("3 cm"))


F# already supports BigInteger (System.Numerics.BigInteger or bigint), but JavaScript does not by default. With WebSharper the usage of these types and their operators are just as easy as working with integers.

Constructing BigInteger:

open System.Numerics
open WebSharper.MathJS
//The .NET way
let myBignum = bigint 100
//A new way
let myBignumFromString = Math.Bignumber("100")

Operations with these numbers are possible with the .NET way:

let addBignum = myBignum + myBignum //Math.Add(MathNumber(myBigint), MathNumber(myBigint))

Complex number

Just like BigInteger, Complex is a member of System.Numerics too, but JavaScript does not support them. To use the Complex type in our program we could construct it as we're used to it from .NET, but now we're able to do it with Math.Complex() too which is able to construct a Complex number by taking a string with the complex value.

open System.Numerics
open WebSharper.MathJS
//The .NET way
let myComplex = Complex(1., 1.)
//A new way
let myComplexFromString = Math.Complex("1 + 1i")

After constructing the numbers, we can use them as we’re used to it:

let addComplex = myComplex + myComplex //Math.Add(MathNumber(myComplex), MathNumber(myComplex))


The original float type in JavaScript has limitations with its precision, but it's solved with the Math.Fraction type which has a much higher precision with its operations. To use this new Math.Fraction, we have to call the Math.Fraction()constructor.

We have many ways to create a Fraction, for example:

open WebSharper.MathJS
//From string
let fraction1 = Math.Fraction("1/2")
//By giving the numerator and denominator
let fraction2 = Math.Fraction(1, 2)
//From float
let fraction3 = Math.Fraction(0.5)


For vector operations in WebSharper we have to use the MathJS.Math functions and in those functions we have to use the MathNumber wrapper for the vectors. There are few exceptions when we don't have to wrap these vectors. If the function only accepts vectors or matrices, then the wrapper isn't needed (but can be used). (Note that if you wrap these in MathNumber, you might get a MathNumber return value.)

open WebSharper.MathJS
let myVector = [| 1.; 2.; 3. |]
let addVector = Math.Add(MathNumber(myVector), MathNumber(myVector))


The same as for vectors, WebSharper grants a huge variety of Matrix operations and functions, but to use those, we need to wrap the matrices in MathNumber. As we have seen at the vectors, there are some functions where matrices can be used without the MathNumber wrapper. (Note that if you wrap these in MathNumber, you might get a MathNumber return value.)

open WebSharper.MathJS
let myMatrix = [| [| 1.; 2. |]; [| 3.; 4. |] |]
let addMatrix = Math.Add(MathNumber(myMatrix), MathNumber(myMatrix))


WebSharper allows you to calculate with units too. Most of the functions from Math accept Math.Units to work with. Units are a special kind of types. They have a value and a measurement. Values with different kind of measurements can be used in operations and it will calulate with the given measurements. Units can be freed from their measurements (for example) by dividing.

open WebSharper.MathJS
//With a value and a unit
let myUnit = Math.Unit(5, "cm")
//Or simply by a string
let myUnitFromString = Math.Unit("5 cm")

An example for expressions

There are many functions in MathJS that calculates an expression, solves a problem. In this example we'll use the Math.Derivative function to get a Node with the result in it. A Node then can be converted to a string, but with the MathJax extension we can render the result. To do that we have to set up MathJax to parse and render TeX formulas then by using the Node's ToTex() function we convert the result into a string with the formula in TeX formatting.

(Most of the functions don’t result in a Node, but they can be converted to a Node by Math.Parse() or by other means.