ReactJS, MongoDB and Blockly to Generate Data Entry Sites

I’ve been pulling together a proof of concept for some ideas I have about dynamic applications.  The gist is that dynamic languages (like JavaScript), combined with reactive designs (ReactJS/Flux) and with “schema-less” databases) allow a level of fluidity which makes generation of applications from metadata much more attractive.

These ideas have been put together into a production app for the company I currently work for.  The code I will share with you obviously will be a tiny subset of what we have done there, but I think it should be enough to prove to you that this approach has merits for specific types of applications.

The code for this blog is here:

Here’s an example of what the metadata might look like:

Blockly Metadata
Blockly Metadata





A few terms you will see in the metadata:

Use Case is the application you are building.  It contains namespaces which as you might guess define broad areas of the application in exactly the same way you would use them to define area of a code library.  Relations are, in essence, your objects. Namespaces also map directly to the databases you are storing in MongoDB.  Relations map to document collections in MongoDB.

How it works

Each of the blocks within the “Layout” section correspond to widgets created using React.  The widgets talk to each other using the Flux architecture.  Specifically, the app uses Redux.

The metadata itself is composed using the Blockly tool made by Google.  My understanding is that the Blockly tool is intended to be primarily a way to teach logic used in coding.  The blocks are used to generated code (such as JavaScript).  I’ve used them instead to generate JSON that contains metadata describing my application.

The information composed by these blocks is also used to generate a dynamic server side architecture that provides a REST API and writes to MongoDB.

I’ve tried to compose all these pieces using docker in a way that allows you to ignore the details of how everything is wired together.  The idea is to allow you to focus on what the code is doing.  That said, here are the details so you can dig in when you are ready (or if you need to debug a piece that is failing):

Here is what the above metadata generates:

Generated ReactJS App
Generated ReactJS App

High Level Pieces:

MongoDb (prefab docker container)

Database that is traditionally served on port 27017.   We will serve it from docker as localhost. If you want to change this, you will need to edit the mongoUrl constant in /server/src/config.js to use your own hostname and port

Nginx (prefab docker container)

Used to compose all the sites together on port 80 using reverse proxy.  If you don’t mind allowing CORS and pointing directly at port numbers, you can do without this.

Blockly Front End (your code)

This is where you define the metadata that drives your site.  This site is vanilla JavaScript, but uses some ES6 so you’ll want to run it using a modern browser.  I use Chrome (just regular not Canary).  This code is copied into the Nginx container to be served.

ReactJS App Front End (your code):

This requires ReactJS (obviously) which is not going to work well if you don’t run it through the provided NPM start script/WebPack configuration.  There are some things like ES6 modules and spread operators that aren’t supported in most browsers.  This code is copied into the Nginx container to be served.

Backend Server (your code)

This is your NodeJS REST API server.  It uses HapiJs because there aren’t many API focused frameworks that are simpler and yet (what I hope you’ll consider) feature complete.  This code is put into its own container and the Nginx reverse proxies to it.

Site Arrangement:

  • Blockly Front End: port 1350
  • ReactJS App Front End: port 3000
  • NodeJS Backend Server: port 10437

These are copied to or reverse proxied from nginx so that all are available on port 80 as follows:

  • Blockly Front End: /blockly
  • React App Front End (site root): /
  • Back End Server: /api

Nodegyp (or bcrypt) will not build on Windows

Nodegyp often fails to build/rebuild modules on Windows.  This happens to me every time I rebuild my Windows machine (and sometimes when I switch node versions).

Usually I attempt `npm install bcrypt` or similar and the log throws one of many errors related to node-gyp:

  • error: Can’t find “msbuild.exe”. Do you have Microsoft Visual Studio C++ 2008 installed?
  • LINK : fatal error LNK1181: cannot open input file ‘kernel32.lib’
  • msbuild.exe` failed with exit code: 1 (accompanied by something about nodegyp rebuild)
  • Failed to locate: “CL.exe”. The system cannot find the file specified.
  • and others…

Nodegyp is a way to abstract building native modules for NodeJs.   It is supposed to make things easier for cross-platform development using modules that have C or C++ code underlying them.

The problem is that Windows does not really have a simple tool chain for building native stuff.  With `nix systems, acquiring all the necessary tools is usually a single command line entry.  Windows is more a la carte due largely to the number of C++ runtimes that exist.

After a long and hideous season of pain, some folks tried to make some of this easier by creating the npm `windows-build-tools` package.  This will do quite a lot of the hard work of getting dependencies installed.  An alternative manual process is described here.

If this does not work, you may be forced to install Visual Studio 2013 Express.  This is pretty difficult to swallow for those of us who have already gone through the rather long download and install process of getting a newer version of Visual Studio running.

One thing you might try before going there is deleting your node cache.  This may seem like the nuclear option, but my experience is that dependencies can be hanging out in there, messing up the build stream.  My current guess is that this is caused by an install of Nodegyp or a Nodegyp dependency based on a different version of the C++ runtime or a different version of NodeJs.  Unfortunately doing a global uninstall of nodegyp did not fix the problem … so cache delete it was.

To blow away the cache, go to the %appdata% path (just drop that alias in your Windows Explorer path or `cd` to it in your command line), then delete the `npm` and `npm-cache` directories.

If the problem seems isolated to one project, consider blowing away node_modules and doing a fresh npm install.

Sync: Operational Transformation vs. Conflict-Free Replication Data Types (CRDTs)

I need a solution for data sync/replication of offline data that doesn’t require my team to read whitepapers and understand theoretical mathematics.

There is an argument going on right now as to whether Operational Transformations (OT) or Conflict-Free Replication Data Types  (CRDTs) are the way to go here.  Both technologies are intended to solve the thorny problem of handling (or removing the potential) of conflicts when multiple parties are working on the same data without direct awareness of the efforts of another party or parties (perhaps because of temporal or location differences).


I really like the idea of CRDTs, but there isn’t really a practical (or at least popular) implementation of full document CRDTs (think JSON) that I know of right now.  There also seems to be the (old) problem where the CRDTs are replicating correctly, but we are asking them to do the wrong thing… To be a little more clear, we are having difficulty getting the intent of the users expressed in the data structure that prevents conflicts.  We can get eventual consistency between the two bodies of data, but what would the two (or more) parties have created if they did it together side-by-side?

This is a problem that has been explored a little more in the world of Operational Transformation so the solutions (that I am aware of) are a little more mature.

Sync via peer to peer?

The primary downside of OT (that I can see) is that there really needs to be a single source of truth (think server) with Operational Transformations whereas CRDTs allow full mesh or peer-to-peer (P2P) sync.

Because P2P communication is almost as difficult right now as sync itself, it may just be practical to work with OT.

Some libraries to look at

I have been playing a bit with sharedb.  This seems to be the best OT work going on in JavaScript right now.  That said, there isn’t a huge community around the library and the owner’s (though amazing and brilliant people with other real jobs to keep down) do not appear to be super responsive to pull requests and issues.

If you are looking at doing the P2P thing, it seems like Scuttlebutt is a protocol/replication technology that is getting a bit of traction.  I believe it is inherently duplex though… so YMMV.  Here is a JavaScript implementation that might interest you.


Where is my template in karma-ng-html2js-preprocessor?

karma-ng-html2js-preprocessor is great when it works, but it can be fiddly to line up your template URL with the key it stores in $templateCache.

karma-ng-html2js-preprocessor is used for Karma testing when you want an Angular html template to be loaded in the cache.  This is helpful because it will prevent $httpBackend from complaining when your directive tries to use $http to get your template html.  Instead, the directive will find the template in the cache and skip the $http call.

But… the problem is that it can be difficult to figure out what is wrong when things are not set up just right.  The biggest problem I’ve found is actually seeing what is inside the $templateCache.  Often, the key in the cache (which will be the URL for your template) will not have a forward-slash (“/”) in front, or will have a problem with case being different from what was loaded.

The problem with examining $templateCache is that it doesn’t expose its contents as a property.  You have to ALREADY KNOW the key to see if it is inside the cache.

Fortunately, if you are using WebStorm, you can get past this.  WebStorm will show you the function scope of an object constructor.  So you can do this:


If you do not use webstorm, you can place a hack in your karma config:

preprocessors: {
       "**/*.html": ['ng-html2js']
ngHtml2JsPreprocessor: {
    cacheIdFromPath: function(filepath) {
        debug("ng-html2j filepath: " + filepath);
        return filepath;
    prependPrefix: '/',
    moduleName: 'my.templates'

Notice the “moduleName” property in the config above.  Another thing I often forget is to call my template module in the “beforeEach” method for Jasmine/Mocha:


Occasionally, I might also forget to tell Karma (in my karma config file) it can serve the html files:

files: [
   { pattern: 'bower_components/angular/angular.js', watched: false, included: true, served: true },

DerbyJs or Racer on Windows

You could argue this just isn’t meant to be … and you might be right.  Unfortunately for me, flailing around in my Ubuntu VM is just a slow way for me to develop.  I know that makes me a terrible person, but sometimes the tools you use every day belong to the dark side.

In any case, I set out to get DerbyJs and Racer working on my windows machine.

DerbyJs and Racer are created by pretty much the same group of people.  They are JavaScript frameworks that run on Node.Js and use Operational Transformation to synchronize data in real-time across clients.

The tweaks

The first smack in the face is Redis.  You’ll need to install the windows version of that here, but that’s not remotely the hard part.  The difficulty is when you try to do your npm install for the example repositories of DerbyJs or Racer  .  Then all hell breaks loose, and you run into the “we don’t support windows” contingent with npm install redis.

Turns out the lovely people at hiredis do support windows though.  So here’s the trick(s).  Install hiredis globally FIRST (npm install -g hiredis).  Then go into your global npm cache and copy everything from %appdata%\npm\node_modules\hiredis\build\Release one directory down to %appdata%\npm\node_modules\hiredis\build (because REASONS).

Now npm install type things will magically start working — if you’ve put %appdata%\npm\node_modules into your system environment variables as NODE_PATH.  NPM doesn’t do that on installation because… it’s fun to google?

System Node Environment Variable
How to set your npm cache path


Now after all this effort  (at least at the time of this writing)  nothing will work.  You’ve got a couple more tweaks to make.

For Racer

You need to go in and remove all the “release kind of like this one” stuff from your package.json. (See JSON below with red things to remove.)  This is because the current release of Racer will not work with the example code.  No idea why because the problem seems to be somewhere in the Operational Transformation code — which is fiddly stuff.

"dependencies": {
"coffeeify": "~0.6.0",
"express": "~3.4.8",
"handlebars": "^1.3.0",
"livedb-mongo": "~0.4.0",
"racer": "^0.6.0-alpha32",
"racer-browserchannel": "^0.3.0",
"racer-bundle": "~0.1.1",
"redis": "^2.4.2"

BTW, below is, I think, my favorite bit of code ever.  When running the “Pad” example of Racer, it is fired over and over by a dependency (called syntax-error) of browserfy:

module.exports = function (src, file) {
if (typeof src !== 'string') src = String(src);
try {
eval('throw "STOP"; (function () { ' + src + '})()');
catch (err) {
if (err === 'STOP') return undefined;
if ( !== 'SyntaxError') throw err;
return errorInfo(src, file);

I’m sure there is a good reason for it, but I can’t fathom it myself.  I had to comment it out.

 Now for DerbyJs

There is some sort of issue with how it is creating the paths for your views.  To get it to work, there is a patch you’ll need to add to your package.json.

After the patch is installed, you’ll need to go into the index.js of each of the examples and add it before the require(‘derby’):

var app = module.exports = require('derby').createApp('hello', __filename);

I think that should do it.  I was able to get things running fairly well after that.

One last thing, if you happen to be using Visual Studio, I can recommend the Node.Js Tools for Visual Studio with some confidence now.  During the beta stage they were pretty bad about crashing my IDE, but (except when running unit tests) I actually prefer them to WebStorm now .  I know… sacrilege.


Running cucumber.js in WebStorm

If you are like me, the instructions for running Cucumber.js in WebStorm did not yield good results.  The configuration dialog expects an Executable path, but the instructions on the github page only show the .js file  in the command line execution.  I assumed this meant that I needed to run the command line directly in node, but that didn’t seem to work either.  Ugh.

In a nutshell, you need to specify node as your executable in the configuration dialog and pass your cucumber.js file as an argument.  Like so:

WebStorm Cucumber.js Configuration

Turns out this will occasionally fail when WebStorm inserts an argument between your cucumber.js path and node.  Grrrrrr.

To make it work anyway, create a batch file (cucumber.bat) with the following contents:

CALL “<insert your node path here>\node.exe” <insert your cucumber bin path here>\cucumber.js %

Then change your configuration to look like so:

Cucumber Configuration With Batch

I hope this saves you some pain.


Configuring MongoDB with YAML

I just went through the process of configuring the MongoDB server on Windows as a service now that they’ve switched the configuration to YAML.

What a pain in the ass.

All I wanted to do is run it from a directory I typically use on this machine for database files and enable the HTTP interface (including REST).

A couple of pointers that might save you about an hour of hassle.  If you are using Notepad++ tell it to use the YAML configuration for tabs.  I have no idea what it does differently, but that stopped an error where it was complaining about an invalid value at a position right in the middle of a reserved word of the YAML.

Also, if you are specifying that you would like to store your log as a file.  You damn well better specify that destination = file.  I guess specifying the path as a file name wasn’t a big enough hint.

Here is my configuration:

  enabled: true
  RESTInterfaceEnabled: true
 dbPath: “c:\\Data\\mongodb”
 destination: file
 path: “c:\\Data\\mongodb\\log\\mongo.log”

Configuration Reference

Personal Continuous Delivery

I am fairly convinced that Continuous Delivery is the best way to build an application, but I’ve felt for a while that it is a daunting process for an individual to use the same tools that are needed for an enterprise.

There are several offerings that attempt to makes this easier by consolidating your build and delivery process in SAAS or into one package.  CodeShip, Microsoft Team Foundation Server and TeamCity are a few I’ve considered.

I’m going to try TeamCity today because I’ve had good luck with JetBrains tools in the past and because it supports all (or most) of the technologies I develop with.

The download is rather large at half a gig.  At the time of this writing, the link is

I’m installing this (for now) on a virtual machine on my dev laptop.  I have about 12 gigs of RAM, so I think this might work out in the short term.

I begin by accepting all of the defaults in the installer.  This puts the application just off the root directory, but I don’t care because this is a VM with nothing on it.

installing teamcity
Lots of Java getting extracted…


After the extraction, I am asked to select a server port.  Oddly, the default was port 80.  I select 8080 in case I want my default HTTP port later.

I accepted all the default build agent properties, and allow it to run both the build agent and team city server service under the Windows SYSTEM account because I didn’t want to set up a service user right now.

First start up screen

The installer allowed me to open the UI on completion:

Choose a database server
Next, the UI asks me how I’d like to store my data.  I elect the “Internal” HSQLDB because I don’t feel like installing a database server on the VM or using the servers I have on other machines.  I have a feeling I will regret this later.  The configuration does offer all the major relational database servers.


Eula and then Create Admin Account:

On the profile page which follows, I’m guessing the Version Control Username Settings should match my GitHub:ProfileEditor

Next I’m going to try clicking on “Projects” in the navigation header and then click “Create project from URL.” CreateNewProject

PullFromGitHubI’m going to point at a Github repository.






Next, TeamCity tries to guess what steps I need in my build, AutoDetectedNothingbut not much is going on in that empty repository so….


I suppose I better add some code and return to this endeavor in a bit.

So far, pretty straight forward….

Synchronization Using Interval Tree Clocks in JavaScript

As a follow up to my previous post, I’ve implemented the Interval Tree Clock code in JavaScript with tests.  I’ve also begun a synchronization framework to go with it.

Github ITC in Javascript

The framework would be for synchronizing documents in full mesh mode — so peer to peer.

Everything has tests, so you can easily see the direction and progress by just reviewing the tests.

I stab the Synchronization with big knife

Synchronization With Interval Tree Clocks

Sync ProblemsI’ve been working with mobile devices for a long time, and inevitably the most painful piece of the development process is getting data to be consistent across all replicas.
For years, I’ve been trying to find a consistent means of taking care of this in a way which is OS and repository agnostic for all replicas. It isn’t 100% clear to me why this isn’t a solved problem, but I have a feeling there are several contributing factors:

  1. Internecine conflict between all relevant parties.
  2. Rapidly changing means and standards for data storage and transmission.
  3. Figuring out causal relationships between data on different replicas is really, really difficult.

It seems to me that number 1 and 2 having become somewhat better lately because of ubiquitous JavaScript.  I’m not saying it’s trivial, but you can make an app that works just about everywhere now if you write it in HTML and JavaScript.

When dealing with data, browser based apps are still likely to be a problem with large data sets and long periods without connectivity, but it might be worth exploring the possibilities again.

To this end, I’ve been looking at solving the causal problem with Interval Tree Clocks (ITCs) lately.  They are interesting in the way that licking battery terminals is interesting.  They are painfully tedious, but if you can stick with it, you may eventually power a solution (or be brain damaged).

For a long time, I think the standard way to handle the problem of causal relationships has been vector clocks, but they have well documented limitations around space usage which do not apply to Interval Tree Clocks.

Also, you can make pretty diagrams with ITCs.

ITC Node Diagram

So I’ve been trying to rewrite the ITC algorithm in C#.  This may seem ironic since I just told you that JavaScript seems to be one solution to some of the industry’s synchronization problems, but the reality is, I’m much better at exploring ideas with type safe code.

I’ve gotten most of the C# working, and I’ve created tests.  My intent is to use those to safely port the C# over to JavaScript.

You can check the code out here.

If you prefer Java, Erlang or c, there is a repository from the original designers of the algorithm here.  A word of warning: if you try to use that repository to follow along with my code, it will be very difficult.  Conceptually, the code is somewhat similar to what I have written, but my implementation is almost entirely different.

* not a significant source of bad things