Creating fuse applications with fable

So as promised here’s a guide to creating your first fable |> fuse application

I’ve made a template available so this can be tried out quickly and easily, I’ll run through the requirements and describe whats in the template.

Requirements

First of all here are the requirements.

Yeoman

As fable uses npm modules for dependencies fable |> fuse template will also be based on them. I have used Yeoman as it’s very flexible and works nicely.

So what you need to get Yeoman is:

npm install -g yo

And then to install the fable |> fuse template for Yeoman:

npm install -g generator-fable-fuse

Nice and easy.

Fable

Installing Fable is covered in the Fable documentation, but it’s essentially just another npm install:

npm install -g fable-compiler

Fuse

Fuse can be downloaded at their site here

That’s pretty much all the requirements, let’s try this out!

Creating a fable |> fuse application?

OK, so with everything installed how do you get going?

This is really easy:

mkdir fable-fuse-test
cd fable-fuse-test
yo fable-fuse

And then follow the prompts, here’s a asciinema session showing the process:

Now that the template has been created let’s have a look at whats inside.

Project Structure

The structure of a fable |> fuse application is as follows (Using a project name of test):

├── App
│   ├── MainView.ux
│   └── test.unoproj
├── build.bat
├── build.sh
├── node_modules
│   ├── fable-core
│   ├── fable-fuse
│   └── fable-import-fetch
├── package.json
└── src
    ├── fableconfig.json
    ├── test.fs
    └── test.fsproj

Lets go through the root files first

package.json

This file has the dependencies for fable |> fuse. Currently these are:

  • fable-core : This has the main definitions for Fable.
  • fable-fuse : This has the bindings for the Fuse JavaScript API’s.
  • fable-import-fetch : This has the F# bindings for JavaScript Fetch API.

build.sh / build.bat

These two files contain the script to transpile the F# source into JavaScript. So upon typing ./build.sh the F# files will be transpiled into JavaScript and placed into the App/js folder. In addition Fable will continue to watch the F# files and transpile the files if they change so you get realtime updating of the fuse application.

Now the directories:

App

The App directory has all the necessary files that Fuse requires to build

test.unoproj

This is the project file for Fuse, it has settings for the different platforms and controls which gets embedded in the application.

MainView.ux

This is the main view markup file for the user interface.

src

The src folder has all the F# source files that Fable transpiles into JavaScript.

fableconfig.json

This is the configuration file for Fable which allows you to run scrip before or after compilation and set various defaults.

test.fs

This is the main source file for F# and is the same as the one you saw in the previous post:

namespace App
open Fable.Core
open Fuse
open Fable.Import
open Fable.Import.Fetch

module test =
    let data = Observable.create()

    promise {
        let! req = GlobalFetch.fetch (Url "http://az664292.vo.msecnd.net/files/ZjPdBhWNdPRMI4qK-colors.json")
        let! json = req.json ()
        do (data.value <- json) } |> ignore

This is fairly easy to follow, the promise block is a custom computation expression that allows each successful JavaScript promise to execute before the next promise is ran. In this example GlobalFetch.fetch and req.json() both return JavaScript promises. The promise block runs the GlobalFetch.fetch function and if it succeeds it runs the req.json() function. If that too is successful then the observable value data is updated to the resulting json data.

node-modules

These are our dependencies, there’s fable-core which is required by Fable, also included are fable-fuse which are the F# bindings to the Fuse JavaScript libraries, and fable-import-fetch which is the F# bindings for the Fetch JavaScript API.

Running

To get a fable |> fuse application running all you have to do is run the build script ./build which transpiles the F# files into JavaScript and then watches for any updates to the F# files. Running a Fuse application is also really easy, you can do this from within Atom via the plugin, or sublime via that plugin, or simply just run fuse preview ./App/ from the project root.

Any Problems?

If you have any problems with the Yeoman generator for fable |> fuse then please log an issue on its GitHub repo: generator-fable-fuse. If you have any issues with the fable-fuse module itself then please got an issue on its GitHub repo: fable-fuse.

If you have an improvements or suggestions then a PR is very welcome too!

Whats next?

If there is enough interest around using fable |> fuse I’ll port some of the more intricate samples from the Fuse examples over to fable |> fuse and also create a GitHub site with all the content relating to it.

Let me know what you think!!

Until next time!

Tags: fable fsharp fuse javascript