From JavaScript to Functional Web Development (part 1)

As a kid I loved math and I’ve been always interested in programming. For a long time I thought programming was a big and scary monster, but after a friend of mine got me into it, I realized it’s not all that big nor scary.

Like most of the people I’ve started with web development, because that seemed the easiest and gave a quick feedback on my work. I wrote a red box, hit refresh and a magical red box appeared on my screen.

A red box

Time went by, learned more complex programming languages, starting with Adobe’s ActionScript3 (this only has its own story: I wanted to be a Flash game developer until they announced they’d no longer support it in browsers), C++, Java, then a strange turn has happened: I learned Haskell, my first functional programming language.

After Haskell, I got introduced to F# and this is where this whole story begins. While Haskell was good to get used to the functional programming style, F# granted a comfortable, quick way to develop useful applications. At this point I got back to the web development again. I’ve found WebSharper. With WebSharper I was able to write websites in F# just as quick (if not quicker) as in JavaScript or PHP, but I’ve had the safety of a strongly typed functional language.

With F# and WebSharper I’m able to write the website’s client and server side all in F#. A lot of well known JavaScript libraries are in WebSharper as an extension, but if for some reason I need a JavaScript library and it’s not up as an extension yet, I can easily bind that library and make my own extension.

In the following few stories I’ll show you how to make simple website using F# and WebSharper.

First of all we have to install WebSharper. Download it from here, then install it for Visual Studio (be sure to have F# downloaded and installed for Visual Studio as well). In these stories I’m going to use Visual Studio 17. After we’ve installed WebSharper, we’ll be able to create our very first WebSharper project.

Our first WebSharper project

With a WebSharper 4 Single Page Application we’re able to create a a single html page with calculations written in F# (compiled to JavaScript). After a build we are ready to use our first website written in F#.

Single Page Application

This example might seem a little bit complex at the beginning, but don’t worry, you’ll learn everything about it with me.

Before wrapping up this post let’s modify our first project:

Let’s begin with displaying “Hello World!” in a placeholder.

Our hello here is the div containing the “Hello World!” string. We can just call the Doc.RunById "main" on our hello and this will search for the DOM element with the id="main" and fill it with out content. So now our index.html only have to contain a <div id="main"></div> somewhere. For example (here my project’s name is SPA):

Congratulations, you have created your very first website in WebSharper!

Part 2 is out! Read it now!


Be sure to leave a 💚, it helps me know what stories you want to read, and leave a comment if you have any question! Hope you had fun reading the post and found your love for F# and for WebSharper.