Phillip Trelford's Array

POKE 36879,255

Fable DJ Drops

This post is part of the F# Advent Calendar in English 2020 series organized by Sergey Tihon on behalf of the F# Programming Language community.

Earlier in the year I picked up a Revo radio for the DAB+ and stayed for the Internet Radio stations, that open up the world of radio, and am now tuning in using an old Raspberry Pi running Pi Music Box connected to the stereo system.

I’ve been enjoying quite a lot of Dub Reggae particularly King Dub Radio which is produced by King Dub Records based out of Marseille, France. Unfortunately it appears to be overloaded right now, so here’s another great station Real Roots Radio coming out of the UK:


To enjoy the rest of this post please crank up your volume and press play on the Internet Radio.

Fable

This month saw the official release of Fable 3 Nagareyama, Alfonso’s F# to JavaScript compiler. Fable itself has been around for a long time, and it’s been my pleasure to contribute a few games samples over the years.

Yesterday I set up and started a new project, which was very easy with only a few command line commands required to create a new project, which sits waiting for you to make changes, a bit like CodePen but running locally.

Web Audio API

The Fable Browser packages provide typed access to most of the browser Web APIs, however unfortunately the Web Audio API is not there yet, but I did find bindings in a massive file in the Fable Import project from Fable 2, which I copied and pasted from and fortunately it just worked!

The Web Audio API lets you generate sounds or play samples, and apply effects, in fact everything you need to augment your Dub, check out the Zongo Dub Siren to enjoy some real-time generated siren effects over your dub music. This is something I’d like to go deeper on in a later post.

DJ Drops

Another common part of Reggae, Dub and Dance Hall music is DJ Drops over the sound. To get some authentic Jamaican drops I commissioned Neil Hype via Fiverr, to produce 4 unique DJ Drops for your enjoyment.

Putting it all together

Follow the link to http://trelford.com/dub select a radio station and hit play, and hit the buttons to play seasonal drops.

Source code: http://trelford.com/dub/FableDub.zip

TypeScript Mario

Earlier this year I had a play with Microsoft’s new compile to JavaScript language, TypeScript. Every man and his dog has a compile to JavaScript solution these days. TypeScript’s angle appears to be to provide optional static typing over JavaScript and some ES6 functionality while compiling out to ES3 by default. It provides a class based syntax similar to C#’s and seems to be aimed at developer’s attempting to scale out JavaScript based solutons.

Last year I ported Elm’s Mario sample to F#, which ended up looking similarly concise. I tried both FunScript and WebSharper for compiling F# to JavaScript, and both worked well:

mario

So I thought I’d try the sample out in TypeScript as a way to get a feel for the language.

TypeScript Interfaces

In F# I defined a type for Mario using a record:

// Definition 
type mario = { x:float; y:float; vx:float; vy:float; dir:string }
// Instantiation 
let mario = { x=0.; y=0.; vx=0.; vy=0.; dir="right" }

In TypeScript I used an interface which looks pretty similar syntactically:

// Definition
interface Character {
    x: number; y: number; vx: number; vy: number; dir: string
};
// Instantiation
var mario = { x:0, y:0, vx:0, vy:0, dir:"right" };

TypeScript transcompiles this to a JavaScript associative array using object notation:

var mario = { x: 0, y: 0, vx: 0, vy: 0, dir: "right" };

Composition

For me the cute part of the Elm and F# versions was using the record “with” syntax and function composition, i.e.

let jump (_,y) m = if y > 0 && m.y = 0. then  { m with vy = 5. } else m
let gravity m = if m.y > 0. then { m with vy = m.vy - 0.1 } else m
let physics m = { m with x = m.x + m.vx; y = max 0. (m.y + m.vy) }
let walk (x,_) m = 
    { m with vx = float x 
             dir = if x < 0 then "left" elif x > 0 then "right" else m.dir }

let step dir mario = mario |> physics |> walk dir |> gravity |> jump dir

I couldn’t fine either of those features available out-of-the-box in TypeScript so I resorted to imperative code with mutation and procedures:

function walk(velocity: CursorKeys.Velocity, character: Character) {
    character.vx = velocity.x;
    if (velocity.x < 0) character.dir = "left";
    else if (velocity.x > 0) character.dir = "right";
}

function jump(velocity:CursorKeys.Velocity, character:Character) {
    if (velocity.y > 0 && character.y == 0) character.vy = 5;    
}

function gravity(character: Character) {
    if (character.y > 0) character.vy -= 0.1;
}

function physics(character: Character) {
    character.x += character.vx;
    character.y = Math.max(0, character.y + character.vy);
}

function verb(character: Character): string {
    if (character.y > 0) return "jump";
    if (character.vx != 0) return "walk";
    return "stand";
}

function step(velocity: CursorKeys.Velocity, character:Character) {
    walk(velocity, mario);
    jump(velocity, mario);
    gravity(mario);
    physics(mario);
}

The only difference between the TypeScript and the resultant JavaScript is the type annotations.

HTML Canvas

TypeScript provides typed access to JavaScript libraries via type definition files. The majority appear to be held on a personal github repository.

Note: both FunScript and WebSharper can make use of these type definition files to provide types within F# too.

Among other things this lets you get typed access over things like the HTML canvas element albeit with some funky casts:

    var canvas = <HTMLCanvasElement> document.getElementById("canvas");
    canvas.width = w;
    canvas.height = h;

This has some value, but you do have to rely on the definition files being kept up-to-date.

Conclusions

On the functional reactive side TypeScript didn't appear to offer much value add in comparison to Elm or F#.

To be honest, for a very small app, I couldn’t find any advantages to using TypeScript over vanilla JavaScript. I guess I’d need to build something a lot bigger to find any.

Sample source code: https://bitbucket.org/ptrelford/mario.typescript

DDD North 2013

I’m heading home on the geek train back from a cracking DDD North, this year held in Sunderland and attracting 430 attendees and three well attended F# talks.

I managed to deliver the first pony of the day in F# eye for the C# Guy:


Starting with live samples of immutable classes in C# and then in F# using the class and record syntax. Then instantiating the classes via the F# interactive (REPL) window and from C# which simply requires a reference to the F# library project, it’s all .Net IL underneath.

Then we moved on to unit testing in F# using a selection of libraries from Nuget including NUnit, FsUnit and Unquote. On the unit testing theme Ian Cooper gave a talk on TDD, where did it all go wrong at the same time which was well received.

Leading on from unit testing we took a look at automated acceptance testing with TickSpec, and how this was used in the open source spreadsheet Cellz.

Finally for fun I showed a couple of FunScript samples including the Mario Tutorial (only working in IE at the moment) and a Pacman Sample. FunScript is an open source F# to JavaScript compiler with a Type Provider to TypeScript type definition files which provides typed access to common JavaScript libraries.

If you’re interested in picking up F# I’d recommend trying the F# Koans (where you can pick up the syntax while making a set of tests pass), the online Try F# site, and the F# Tutorial project in Visual Studio.

Hadoop Kickstarter

Next up in the same room Gary Short gave a great introduction to Hadoop and some of the related tools like Pig.

If you’re interested in trying out Hadoop with F# check out the Hadoop Type Provider online on the Try F# site which gives you typed access with intellisense:

Hadoop 

WTFP?! Functional Programming and why you should care, with examples in F#

Before lunch Grant Crofton gave a great introduction to functional programming with F# using lots of live code snippets in Visual Studio


 

Grant also managed to slip some ASCII art into his scripts :)

WTF ASCII Art

Lightning talks

Lunch time saw a selection of lightning talks including Ben Nunney on Twillio and Anthony Steele on Feature Folders which emphasised the importance of focusing on the problem domain in your architecture.

The Joy of Wires: an introduction to Netduino

After lunch I popped over to see Iain Angus’s lively talk on Netduino which showed how much fun it can be playing with electronics.

You've learnt the basics of F#: What's next?

The last session of the day for me was Ian Russell’s fun talk which covered a selection of F# Type Providers for typed data access and F# Agents for taming concurrency.

Audience at Ian's talk at DDD North

Ian demonstrated the SQL, CSV, JSON and World Bank type providers all available either bundled with F# or via Nuget. For F# agents he showed a simple chat server that he ran from F# interactive using a local web server.

You can get the samples from Ian’s github repository: DDDNorth F# Presentation

Testing Crap in Web Applications Like ASP.Net MVC

The last pony of the day was spotted in Rob Ashton’s talk/rant which unfortunately I missed as it was on at the same time as Ian’s:


Close

Hanging out at the close with my fellow F#ers, Ian and Grant:

FSharpers

 

A big thanks to the DDD North team especially Andy Westgarth for hosting a great event!