This is Fundbase Nerds, written by the team behind Fundbase.

Go to Fundbase  

Leave a Trail

Posted by Giorgio Polvara on

I know I’m gonna be repetitive, but once again I’m going to mention Douglas Crockford in one of my posts. I just can’t help it because he’s so good. The insight he gave me this time:

Try to learn as many programming languages as you can. Each new language will make you a better developer.

So, let me tell you how the last weekend I became a better developer by a 0.0001%.

First, I’m going to share a secret with you: Fundbase is moving to React. Yes, after 3+ years with AngularJS we finally decided to switch. The reasons are various and will maybe be covered in a future post. For now, I would like to talk about something else.

Right on its homepage, React tells you that the library is just the V in MVC. This means that when you want to build something as complex as Fundbase, you need some other tools to assist you.

Sure enough, you can just take a MVC framework and put React in the middle of it. But the great majority of React developers are doing things differently. A short time after open sourcing React, Facebook released Flux. Flux is an architecture that substitutes MVC. It’s basically a design pattern with a very small implementation (the official script is just 367 lines).

Flux’s ideas are so powerful and the code so small that people started implementing their own versions, adding changes and improvements. Among the various forks Redux by Dan Abramov is becoming the go-to implementation. In case you were wondering, yes, the new Fundbase is going to use Redux.

Redux takes Flux and adds Elm ideas to it. To be precise, it is very close to being a javascript port of “The Elm Architecture”.

How is Elm and its architecture? That’s precisely what I did not know and what I was studying last weekend.

Elm is an excellent functional language that compiles to HTML and JS. It was created to build fast online applications while leveraging the functional programming paradigm. I’m not the one to explain Elm in detail, for that I strongly suggest you to read the official docs.

So, how did Elm make me a better developer?

With this code:

type alias Circle =
    { x : Float
    , y : Float
    , radius : Float
    }

That right there is a type declaration. If you had used some pure functional language before, or even C, you will recognize it. For now, it is not important what it does but the style convention used in the example.

In Elm commas go at the beginning of the line rather than at the end. The reason being if you want to remove the line with radius you just do it. If you had commas at the end of the line you would also had to modify the line above. So, in order to remove one line you end up with a diff on two lines. Something like this:

 type alias Circle =
     { x : Float,
-      y : Float,
-      radius : Float
+      y : Float
     }

Since I like to keep my diffs clean, I wanted to apply the same principle to JavaScript, so I tried to write code like this:

const obj = {
    a: 1
  , b: 2
  , c: 3
};

const arr = [
    1
  , 2
  , 3
];

The idea works but, in my opinion, the code is just so ugly.

I was wondering if other people had the same issue and found a better way. As it turns out, Ruby has a brilliant solution for this problem: the last element of an object or an array can have a trailing comma. You can put commas at the end, like I’m used to, and you also end up with clean diffs.

arr = [
  "I'm",
  "a ruby",
  "array",
  "I feel so",
  "much better",
  "than JS",
  "look a comma ->",
]

I thought that was not possible in JavaScript, but after searching around the net I found out that not only is it possible, it has been since ECMAScript 3! The reason no one was doing it is that IE 8 and lower did not support it.

So, here is the good news folks: if you don’t need to support IE 8, or you transpile/minimize your code, you can simply write this:

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

const arr = [
  1,
  2,
  3,
];

Nice code and even nicer diffs. You get the best of both worlds!

I hope you feel 0.0001% better.


Giorgio Polvara

Giorgio is a Fullstack developer at Fundbase. He's passionate about all things programming with an accent on UI/UX and JavaScript.