If some doctor by luck read this, please check if the above is healthy. It is time spent in each heart rate zone per day during the last 3 months. I’ve filtered out sleep and exercise to have it include only resting heart rate.

We could then use that and plain F# to get quite far but I would like to try Deedle.

Deedle

Deedle is a library for data and time series manipulation. There are two basic concepts, Series and Frames. A Series is a vector like collection of values indexed by a key. We will mainly work with time series where the keys are time stamps. A Frame is a matrix like collection of series that share the same row key. We will use frames to e.g. group properties of health records.

#load"packages/Deedle/Deedle.fsx"openDeedle

A frame can be constructed in a few ways. One way is using Frame.ofValues from a sequence of tuples:

It takes tuples of row * column * value. We could turn our records into tuples like that by mapping over all Records and use the row index as row in the tuple. Then map over all entries in the dictionary in each row and use dictionary key as column and value as value.

Spread syntax for functions that take multiple arguments when we have eg. an array.
fun(...someArray);

Rest parameters for variable number of arguments to functions.
function fun(id, …args) {}

Arrow functions(a, b) => a + b

We will not use the new class syntax mainly because of personal taste and that it still have issues with how “this” is bound. Instead we will use factory functions and closures.
If you are interested in why people consider the new classes bad go to eg. https://github.com/joshburgess/not-awesome-es6-classes

Rendering DSL

Lets start with a htmlBuilder. Maybe it should be named domBuilder since we will not generate HTML. We will append DOM elements.

Stateful components aka widgets

We already have what we need to create a stateful component that keep its state and re-render itself when state change.
Eg. this counter widget with two buttons to increase/decrease the count

letcounterWidget=()=>{letthat={};letcount=0;letid='counter';// Render a wrapperthat.renderOn=(html)=>html.div({id:id},that.renderContentOn);// and render some content in the wrapperthat.renderContentOn=(html)=>{html.span(‘’+count);html.button({click:()=>{count++;that.update();}},‘+’);html.button({click:()=>{count—;that.update();}},‘-’)};that.update=()=>{// re-render content and replace wrapperletrootElement=document.querySelector(‘#’+id);varhtml=htmlBuilder(rootElement);html.root().empty();that.renderContentOn(html);};

And we have a reusable counter widget that we can create instances of like this:

ES6 or not?

I wish JavaScript would have had all of these nice ES6 features from the start. It make the code a lot more compact and clean.
But I’m not sure it is worth the extra transpile step. I think we will wait until mainstream browsers support ES6 fully. Then we still need transpillation for older browsers but can develop without transpilation.

I doubt anyone will read all of this. If you did why not leave a comment as well :)

We use Ansible at Waulter to automate our infrastructure. We also host our servers on Azure and use IIS on Windows as our application/web server. Unfortunately, there was no support for IIS in Ansible out of the box.