React.JS

React and Angular are popping up a lot in job interviews these days. I decided to try React, since it is rumored to be the simpler of the two. So I created the old Chinese stone game Go in a Codepen. Normally I post code and talk about it in this case, but I think I will just let the Codepen speak for itself. Here, I report my experiences.

There is a lot of learning material out there, but the best resources start out right away with productive examples that get you working quickly. This tutorial video from Traversy Video does a very good job. I used this React demo from Facebook to model my architecture after.

The least trivial part of the game was the capture algorithm. The game engine must figure out if a newly placed stone results in another stone being surrounded. To figure this out, I implemented a recursive breadcrumb algorithm. The method searches recursively in four directions, resulting in a wide descending tree, but marks visited spots on the matrix to prevent infinite recursion. If at any point an empty space (liberty, in game terms) is found, the call stack starts bubbling up with that information. The recursive call will say whether or not a liberty was ever found. If it was, I run a second method to erase all visited points on the matrix, otherwise I run a different method to restore the marked spots back to original.

Here is my reaction (?) to React :

  • JavaScript is fun for web programming in limited amounts, but Object-Oriented frameworks like ES2015, Babel, etc. inevitably make it worse. this.method.bind(this)? Yucko.

  • Hidden inherited methods are traps waiting to happen. My IDE (Codepen) did not alert me to inherited methods, so this may be my own fault for not using a JetBrains tool or some such. Pick unique method names just in case.

  • I don’t really see the payoff. I understand the principle of data flow and limiting state on classes, but a real class-driven language does this in a more flexible way without need of a framework.

I know a little bit of CSS and HTML, so I was able to decorate it a bit, so that it kind of looks like an old wood board.

Functional JavaScript

Fun Fun Function is a wonderful video series for learning JavaScript and functional programming. I decided to try my own Map/Reduce filter in JS and uploaded it to my toybox. Some random notes of things I learned along the way:

  • JavaScript has four different variable scoping modifiers: let, var, const, and default (no modifier). let scopes to a block (like a loop), const also scopes to a block and prevents reassignment (though referenced objects may still be mutable), var scopes to a function, and the absence of modifiers indicates a global variable. As always, beware of hoisting which allows a variable to be scoped after it has already been used in code. Not all of these are available in all versions of JavaScript.
  • Running his examples using babel as an ES2015 transpiler is not trivial. To get it to run, I had to do:
    • npm install –save-dev babel-cli
    • npm install –save-dev babel-preset-es2015
    • export PATH=”./node_modules/.bin:$PATH”
    • babel –presets=es2015 medalOTM.js | node
  • JS map takes one parameter and returns one result. This is what you would expect of a mapping or relation.
  • JS reduce is more complex. It reduces the entire pipeline to a single object. This function takes a single callback function parameter and an optional initial value.
    • The initial value can be thought of as the starting point for an object to be built up by the reduce callback over many iterations of the pipeline. Our value is just {}, an empty object.
    • The callback builds up the object. It takes the object to be built up as the first parameter, and it returns a new value for that same object. The second parameter consists of the current pipeline element.
    • The general idea is to use each pipeline element to build up the object.

Functional is fun! And JavaScript is deep!

Thanks to  Kos on StackOverflow for helping me with my basic command-line syntax issues.