Benchmarking your JavaScript code

What is benchmarking? It refers to the process of testing the performance of an implementation with respect to an already established one. For example, in the airspace industry we can assume that an F-16 is the benchmark for the fastest plane. Any new design should then compare (benchmark) itself against the performance of an F-16.

In this way, when we have more than one design, we can choose the best implementation based on its benchmark with the F-16.

However, sometimes its easier just to compare the performance between implementations. This is true especially in software development. If we have two or more implementations of a solution we can run a benchmark and choose the implementation which is the fastest or alternatively the one which consumes the least resources. Whatever suits the requirements. Note here that we don’t have a benchmark, instead we are comparing the results between implementations.

In this article, I’ll show you a super easy way to benchmark your JavaScript code. I have some code which needs to match a string against a list of domain names. Of course, my first thought was to use a RegExp. It works. And then I thought lets iterate over the list, and use String.indexOf(). Which one is faster? Benchmark them!

Requirements:
* Node.js
* Prior experience to npm and ES6

Lets see some code.

Here’s the initial code using a Regexp

let referrer = 'http://bing.com'
let engines = [ 'google', 'bing', 'yahoo', ]

let regex = new RegExp('(' 
              + engines.map(e => { 
                  return e.replace(/\./g, '\\.')
                })
                .join('|') 
              + ')', 'i')
if (referrer.search(regex)) {
  // got a match
}

We basically construct a RegExp object by iterating over engines, then use map to replace a literal period (.) with (\.), and then join the modified list using ‘|’

And then referrer.search(regex) tests whether the domain exists in engines.

Pretty simple and effective. However, its known than String.indexOf() is much faster than using regular expressions. You know the saying –

You see a problem and decide to use a regular expression. Now you have two
problems.

Here’s the code using indexOf():

for (let i = 0; i < engines.length; i++) {
  if (referrer.indexOf(engines[i]) > 0) {
    // got match
    break
  }
}

Benchmarking these two against each other gives us a known observation about which implementation is faster. Note I’m only focusing on execution speed here, and not on other requirements. Good science is experimentation and observation.

We will be using npm to manage our deps, so here’s my package.json

{
  "name": "bench",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "exec": "node o.js",
    "build": "./node_modules/.bin/babel b.js --presets babel-preset-es2015 --out-file o.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "benchmark": "^2.1.3"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-preset-es2015": "^6.24.0"
  }
}

In a working directory of your choice, place this package.json file. Then –

$ npm install

Contents of b.js

import Benchmark from 'benchmark'

let referrer = 'http://bing.com'
let engines = [ 'google', 'bing', 'yahoo', ]
let suite = new Benchmark.Suite

suite.add('RegExp', function() {
  let regex = new RegExp('(' 
                    + engines.map(e => { 
                        return e.replace(/\./g, '\\.') 
                      }).join('|') 
                    + ')', 'i')
  if (referrer.search(regex)) {
    // got a match
  }
})
.add('Array', function() {
  for (let i = 0; i < engines.length; i++) {
    if (referrer.indexOf(engines[i]) > 0) {
      // got match
      break
    }
  }
})
.on('cycle', function(e) {
  console.log(String(e.target));
})
.on('complete', function(e) {
  console.log('Fastest is ' + this.filter('fastest').map('name'))
})
.run({"async": true})

Now build your code. Which is basically using Babel to transpile your ES6 code into ES5.

$ npm run build

This will create o.js. Run the benchmark with –

$ npm run exec

This is the output I get

RegExp x 170,024 ops/sec ±2.18% (73 runs sampled)
Array x 2,878,075 ops/sec ±2.48% (73 runs sampled)
Fastest is Array

Awesome!

Using the Benchmark module is extremely easy. The add method adds a new benchmark. It takes two arguments. The first is the name of the benchmark, the second is a function to execute.

When a particular benchmark is done, the cycle event is called. You can output the results here. When all the benchmarks are done, the complete event is called.

I hope you learned something! Thanks for reading.

Redux+React app starter kit

On my journey to master Redux+React I went on to create a very simple Redux app.

Get the code here – https://github.com/arcofdescent/react-starter

Some details

This repo can be used both as a starter kit for developing Redux+React apps as well as a helpful guide to those wishing to see some simple code (I hope) in action.

Here’s a screen shot of the app

app

We use a very simple store containing two counters. The first counter
increments/decrements by 1. The second counter increments/decrements by 2. We also have a Messenger component which sends messages to the first counter.

In all there are three components all as children of the main App component.

App is a container which is aware of Redux. The three child components below it are not. They act as dumb components which simply update their views based on change in state.

I also hope you understand and appreciate the organization of the source tree.

tree

actions, components, containers, reducers go into their own directories. All styles use SASS.

Global style is defined in styles/app.scss

Component specific style is in the related component’s directory.

I’m using webpack to bundle all this stuff.

If you want to run this app:
* Download this repo (or clone it)
* cd into it
* npm install (assuming you already have node installed)
* npm run test (a very simple test)
* npm run start
* In your browser – http://localhost:8080

Organizing A large JavaScript application

As my project lickcreator keeps getting larger, the need to decide upon and implement a good directory structure becomes pretty important.

I previously had all my .js files in a common directory called src. Well that’s dirty, but its fine if you just have a few files (think less than 7).

I’m using Backbone.js so I would keep my files as

  • src
    • sheet_model.js
    • sheet_view.js
    • measure_model.js
    • measure_view.js
    • … (and so on)

As I expanded my app to roughly five main classes I realized I needed some organization strategy. The first thought for a developer would be to put all models in a model directory, all views in a view directory, and all collections in a collection directory.

What would this look like?

  • src
    • model
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • view
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js
    • collection
      • sheet.js
      • measure.js
      • beat.js
      • note.js
      • audio.js

Looks much better. Of course, its not all about that! But you need to think ahead too. Now what If I add a new class to my app? This would mean creating a new file in each of the three directories – model, view and collection.

And I don’t want to start off with an empty file. (I should be using boilerplate code), so I would usually copy a model class to my new class. Same with the view and collection. You see how tedious this can get?

Here’s a better idea. What is more important to your app? The model directory or a class of your app. For example, Sheet.

Let me digress. lickcreator is a web based music notation app. You can create, edit, and play sheet music right in your browser. Using the wonderful Web Audio API. Now a sheet music usually consists of a Sheet, Measures and Notes. Along the way, you’re going to have Audio playback, interactivity, payments, users, social network integration, etc. So it really made sense to me to view my app as first a collection of top level subsystems. And then under each subsystem, we keep their MVC logic.

So back to the topic, I decided to invest my time in JavaScript ES6 and webpack and the investment is now paying off beautifully.

Here’s my directory layout now

  • src
    • audio
      • model.js
    • beat
      • model.js
      • view.js
      • collection.js
    • toolbar
      • model.js
      • view.js
    • menu
      • model.js
      • view.js
    • measure
      • model.js
      • view.js
      • collection.js
    • sheet
      • model.js
      • view.js
      • collection.js
    • note
      • model.js
      • view.js
      • collection.js
    • index.js

index.js is my entry point. I find this structure much easier on the mind. When I need to import a module, its easy for me to do

import Sheet from "./sheet/model";

and inside sheet/model.js if I need access to another model, I can do

import MeasureCollection from '../measure/collection';

Also creating a new class is easy. I just copy an existing directory into a new directory. 🙂

If you have any questions or just need to talk, you can contact me via Twitter. Thanks for reading!

React with webpack

Today, I’d like to show you how I used the awesome React UI library and the module bundler webpack to build an Android app using Cordova.

You can download my app for free!

Check it out, especially if you’re a guitar player.

Lets touch up on webpack briefly. The immediate beauty is the ability for your app to get an entry point. Have you been one of those unlucky folks who had to deal with a plethora of script tags to include your JavaScript code in your index.html? No more!

Here’s a simple webpack config

module.exports = {
  entry: {
    app: __dirname + '/src/index.js',
  },

  output: {
    path: __dirname + '/www/builds',
    filename: 'bundle.js',
  },
};

So index.js will be the first module to be executed. Of course, you should be using babel to get the advantage which JavaScript (ES6) offers. The ability to import modules.

Here’s my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ChordList from './components/ChordList';
import { Router, Route, hashHistory } from 'react-router';

$(document).on('deviceready', function() {

  ReactDOM.render(
    <Router history={hashHistory}>
      <Route path="/" component={ChordList} />
      <Route path="/chord/:chordName/:chordType" component={ChordDiagram} />
      <Route path="/chord_type/:chordName" component={ChordType} />
      <Route path="/help" component={Help} />
      <Route path="/use_cl" component={UseCL} />
    </Router>,
    document.getElementById('root')
  );

});

react-router is essential so the user can use the back button on their mobile status bar to navigate your app. Further on you can use Link tags to navigate to a certain page. Note that although this is a mobile app, we are using Cordova so it is essentially a web app. Personally I am learning react-native right now for any further mobile app development.

Let have a look at a very simple implementation of the ChordList component.

import _ from 'lodash';
import React from 'react';
import { Link } from 'react-router';

class ChordList extends React.Component {

constructor(props) {
  super(props);
}

get_chords() {
  return [ 'C', 'D__flat__', 'D', 'E__flat__', 'E', 'F',
    'G__flat__', 'G', 'A__flat__', 'A', 'B__flat__', 'B',
  ];
}

render() {

    let style = {
      paddingBottom: 35,
    };

    let lis = [];
    let i = 0;

    let a_style = {
      display: 'block', 
      padding: 15, 
      fontSize: '1.2em', 
    };

    this.get_chords().map(c => {

      let c_display = c;

      let row_color = (i % 2) == 0 ? '#dedba7' : '#cdca96';
      lis.push(<li key={i} className="list-group-item" 
                   style={{border: '1px solid #fff'}}>
               <a style={a_style} 
                dangerouslySetInnerHTML={{__html: c_display}}
                href={"#/chord_type/" + c} />
                </li>);
      i++;
    });

    return(
      <div>
        {lis}
      </div>
    );
  }
}

export default ChordList;

I hope you are familiar with ES6 as most of whats happenning like class, let, import, export, map, constructor is all ES6.

The React specifics which you should be aware of is the render() method where we make use of JSX. We loop over the items returned from the get_chords() method and create an li item.

React offers you a very thin UI framework and then gets out of your way. Make sure you create components which are lightweight and deal with a specific UI element/widget and you should be good to go. My app deals with a lot of SVG under the hood, so it is pretty complex. But using React, webpack and Node, brings a lot of sanity to the development workflow.

I also open sourced a Node module during the development of this app which you can check here – guitar-utils

If you need any help or have any questions you can look me up on twitter. Thanks for reading!

Backbone.js collections, get the next/previous model

I’m using Backbone.js for my project lickcreator. I really love Backbone.js, especially the collections stuff is just awesome. I was looking for an easy way to get to the next model in a collection , but couldn’t find it. Of course, you can iterate over the collection and get to the model you want, but that seems awkward.

Here’s what I came up with. Given a model as an argument, return the next model (or previous model) in the collection. Please note there’s no error handling for this simple example.

var NotesCollection = Backbone.Collection.extend({
  model: Note,

  next_model: function(n) {
    return this.at(this.indexOf(n) + 1);
  },

  prev_model: function(n) {
    return this.at(this.indexOf(n) - 1);
  }
});

Easy peasy! Yay for Backbone!