React: Dynamically Rendering Different Components without Switch: the Capitalized Reference Technique

React in the form we usually see doesn't really look like it can make components dynamically. Most people end up using switch with case blocks to "choose" the type of component that will be rendered when there are multiple possibilities, which I'd say is an anti-pattern.

For example:

	import React from 'react'; // required in order to use JSX
	import Type1 from './Type1'; // load one type of component
	import Type2 from './Type2'; // load a second type of component
	// a component that will render one or more components
	// based on a switch statement
	export const SwitchedComponent = (props) => {
	let Output; // save the rendered JSX to return
	// check the type of the component given in props
	switch ( props.type ) {
	// render Type1 with props
	case 'Type1':
	Output = (<Type1 { ...props } />);
	break;
	// render Type2 with props
	case 'Type2':
	Output = (<Type2 { ...props } />);
	break;
	// unknown type ... output null to not render
	default:
	Output = (null); // to return nothing, use null
	break;
	}
	return Output; // return the output created in switch/case
	};
	export default SwitchedComponent;

view raw SwitchedComponent.jsx hosted with ❤ by GitHub

We don't want to have to have that switch statement ... as the number of components we might output grows, it's going to start getting really ugly and hard to maintain. The page JSX in Depth in the React documentation holds the key to understanding how to create components dynamically instead, in the section marked "Choosing the Type at Runtime". That page doesn't come up high in searches, though, and it doesn't do a very good job of explaining the technique.

I like to call this technique the Capitalized reference technique.

Here's an explanation of how to use the technique:

1. Import the components we might use
2. Add references to the components to an object literal
3. Create a reference to the dynamic component type we want by:
   1. Creating a new variable (reference) with a first letter that is Capitalized
   2. Using the component type as the key, get the corresponding value from the object literal
   3. Assign the value from the literal, a reference to the component, to the Capitalized reference
4. Include the dynamic component using the Capitalized reference from step 3.1 in our JSX.

The fundamental 'magic' here is that when JSX sees the Capitalized reference, it dereferences back to whatever component the reference is pointed at. Yay references!

In the simplest form:

	import React from 'react'; // required in order to use JSX
	import Type1 from './Type1'; // load one type of component
	import Type2 from './Type2'; // load a second type of component
	// make references to the components by type
	const Components = {
	Type1,
	Type2
	};
	// a component that will render one or more components
	// that it doesn't explicitly include in it's JSX
	export const CapitalizedReferenceComponent = (props) => {
	// make a reference using a Capitalized variable name
	// to the component you need to render
	// where props.type is one of 'Type1' or 'Type2'
	let Component = Components[ props.type ];
	// use the reference to the component with the
	// Capitalized variable name to render it
	return (<Component { ...props } />);
	};
	export default CapitalizedReferenceComponent;

view raw CapitalizedReferenceComponent.jsx hosted with ❤ by GitHub

Requiring us to import any component we might want to render and add it to an object literal isn't very maintainable. We want to keep the list of possible components to render outside of this dynamic component renderer. To do that, we'll send a components dictionary in as part of props. After we externalize the set of possible components to render, we'll achieve good maintainability.

	import React from 'react'; // required in order to use JSX
	import Type1 from './Type1'; // load one type of component
	import Type2 from './Type2'; // load a second type of component
	// make references to the components by type
	const Components = {
	Type1,
	Type2
	};
	// a component that will render one or more components
	// that it doesn't explicitly include in it's JSX
	export const CapitalizedReferenceComponent = (props) => {
	// make a reference using a Capitalized variable name
	// to the component you need to render
	// where props.type is one of 'Type1' or 'Type2'
	let Component = Components[ props.type ];
	// use the reference to the component with the
	// Capitalized variable name to render it
	return (<Component { ...props } />);
	};
	export default CapitalizedReferenceComponent;

view raw CapitalizedReferenceComponent.jsx hosted with ❤ by GitHub

We probably aren't rendering just one component this way, but rendering a wrapper around any number of dynamically-defined children. To work on a collection of dynamic component instances, we need to:

1. Iterate over the collection in JSX
2. For each item:
   1. Reassign the value we get from Components[ component.type ] to the Capitalized reference we've created
   2. Use that Capitalized reference in our JSX in order to render the correct component type

	import React from 'react'; // required to use JSX
	export const CapitalizedReferenceComponentCollectionExternals = (props) => {
	// get references to all possible components
	// that this component might render,
	// and the collection of dynamic components we need to render,
	// using destructuring
	const { components: Components, collection } = props;
	// A Capitalized reference to reuse
	let Component;
	// A reference to the component's props to reuse
	let componentProps;
	// A function which returns component.props if it exists,
	// and otherwise returns props
	const defaultMapPropsToComponent = function (
	{
	component = {},
	props = {}
	} = {}
	) {
	return component.props || props;
	};
	// render the component collection
	return(
	<div>{
	collection.map(
	( component ) => {
	// Reference the proper component
	Component = Components[ component.type ];
	// Get the props you want to use for this component instance
	// here we are assuming that you can specify a mapping function
	// on the component definition, in props, or use the default
	componentProps = (
	component.mapPropsToComponent ||
	props.mapPropsToComponent ||
	defaultMapPropsToComponent
	)( component, props );
	return (<Component { ...componentProps } />);
	}
	)
	}</div>
	);
	};
	export default CapitalizedReferenceComponentCollectionExternals;

view raw CapitalizedReferenceComponentCollectionExternals.jsx hosted with ❤ by GitHub

The method for iterating over a collection in JSX is also covered on the page JSX in Depth, this time in a section titled "javascript expressions as children".

Now that we can easily render components based on a configuration, we've achieved a basic kind of polymorphism -- the type of a component can be changed by changing a value in props. Doing it based off of a collection proves that we can use any kind of technique that walks an object tree to render a hierarchy in order to achieve composition. The arrangement and functioning of an application can be driven based on the collection.

A complete sample project and demo can be found here: react-dynamic-component-demo.

Class Warfare: OrientDB + Tinkerpop / Blueprints

Just a quick note to others starting out with OrientDB and Blueprints ... if you receive an error "Exception during remote processsing" the cause is conflicting versions of OrientDB, Blueprints, etc.

For myself, I kept OrientDB at 1.6.1, and bumped all my Tinkerpop stack jars up to 2.5.0-SNAPSHOT.

Here's the relevant section of the maven pom.xml:

<repositories>
 ...
 <repository>
 <id>sonatype-oss-snapshots</id>
 <url>https://oss.sonatype.org/content/repositories/snapshots</url>
 <releases><enabled>false</enabled></releases>
 <snapshots><enabled>true</enabled></snapshots>
 </repository>
</repositories>
<dependencies>
 ...
 <dependency>
  <groupId>com.tinkerpop.blueprints</groupId>
  <artifactId>blueprints-core</artifactId>
  <version>2.5.0-SNAPSHOT</version>
 </dependency>
 <dependency>
  <groupId>com.tinkerpop</groupId>
  <artifactId>frames</artifactId>
  <version>2.5.0-SNAPSHOT</version>
 </dependency>
 <dependency>
  <groupId>com.tinkerpop.furnace</groupId>
  <artifactId>furnace</artifactId>
  <version>0.1.0-SNAPSHOT</version>
 </dependency>
 <dependency>
  <groupId>com.tinkerpop.gremlin</groupId>
  <artifactId>gremlin-java</artifactId>
  <version>2.5.0-SNAPSHOT</version>
 </dependency>
 <dependency>
  <groupId>com.tinkerpop.gremlin</groupId>
  <artifactId>gremlin-groovy</artifactId>
  <version>2.5.0-SNAPSHOT</version>
 </dependency>
 <dependency>
  <groupId>com.orientechnologies</groupId>
  <artifactId>orientdb-client</artifactId>
  <version>1.6.1</version>
 </dependency>
 <dependency>
  <groupId>com.orientechnologies</groupId>
  <artifactId>orient-commons</artifactId>
  <version>1.6.1</version>
 </dependency>
 <dependency>
  <groupId>com.orientechnologies</groupId>
  <artifactId>orientdb-core</artifactId>
  <version>1.6.1</version>
 </dependency>
 <dependency>
  <groupId>com.orientechnologies</groupId>
  <artifactId>orientdb-enterprise</artifactId>
  <version>1.6.1</version>
 </dependency>
 <dependency>
  <groupId>com.tinkerpop.blueprints</groupId>
  <artifactId>blueprints-orient-graph</artifactId>
  <version>2.5.0-SNAPSHOT</version>
 </dependency>
</dependencies>

jQuery's extend() Method and Prototypes - A Deadly Combination

I recently have been working with some code where an object hierarchy was useful to me, and I implemented it using this sort of pattern:

function ObjectParent () {
}
ObjectParent.prototype = {
    constructor: ObjectParent,
    method: function () { ... },
    property: true,
    objectProperty: {
        subMethod: function () { ... },
        subProperty: true
    }
};
function ObjectChild () {
}
ObjectChild.prototype = new ObjectParent();
    $.extend(true, ObjectChild.prototype, {
        childMethod: function () { ... },
        childProperty: false
    });
function ObjectGrandChild () {
}
ObjectGrandChild.prototype = new ObjectGrandChild();
    $.extend(true, ObjectGrandChild.prototype, {
        grandChildMethod: function () { ... },
        childProperty: 'Now this is just getting weird.',
        objectProperty: {
            grandchildSubProperty: true
        }
    });

And it worked ... kind of.   Mostly?  Sort of?
I was seeing stuff from the grand child in the children and in the parent.  Why?  Well, first I took off the deep copy flag $.extend(true, ... ) becomes $.extend(...) and that made everything work.... sort of.

I had those sub-objects that I wanted to be extending and they weren't making it through properly.  So I made an explicit shallow copy for them, which looks like this:

$.extend(ObjectGrandChild.prototype.objectProperty, { grandchildsubProperty: true });

The question becomes ... where is ObjectGrandChild.prototype.objectProperty located?  If that property is actually coming from some previous level of prototypal inheritance, when we extend it in this way, we extend the carrying prototype and tend to pollute our prototype chain.

What we're actually doing here is saying:  take the item referenced by X (ObjectGrandChild.prototype.objectProperty -> ObjectParent.prototype.objectProperty) and update it with values from Y

I like the pattern I wrote, but the consequences of using correct prototypal inheritance are not always obvious.  Remember that object properties coming from the prototype are references and so changes pass through.  There is no way to overlay string / primitive data type properties in the fashion I was attempting.  You will always have to make a 'clone' of the prototype in order to extend it.

Which is easy enough:

ObjectGrandChild.prototype.objectProperty = $.extend({},
    ObjectGrandChild.prototype.objectProperty,
    { grandchildsubProperty: true });

Note that what we're doing is this:  redefine the reference A (ObjectGrandChild.prototype.objectProperty) to point to the new object B ({}) which has been created by taking all the direct properties of X (ObjectGrandChild.prototype.objectProperty -> ObjectParent.prototype.objectProperty) and adding / replacing them with the direct properties of Y.

Compass / SASS for Placing Elements on a Circle

Need to put some elements on a circle?  Already using Compass / SASS to compile your CSS?

Woot!  Compass has you covered with trigonometric sine and cosine functions and of course the SASSy @for iterator helps, too.

This jsfiddle demonstrates the compiled result.

Your HTML document is composed of a container for the circle, an element for the circle, a container for items placed on the circle, and the items which will appear on the circle.

Your SASS file is composed of the following.  Modify the $positions, $ringSize, and $itemSize variables according to your needs:

// Use either Compass' border-radius mix-in or prefixfree plugin
@import "compass/css3/border-radius";

/**
 * on-circle takes a radius, position on a circle, number of possible positions and returns top and left properties
 *
 * $radius {Number}    radius of the circle in pixels
 * $ordinalPosition {Number} the position of the item on the circle, counting from 1 (North) through N
 * $positions {Number}   the number of positions on the circle
 * $originX {Number}   optional X origin point for the circle, defaults to the radius
 * $originY {Number}   optional Y origin point for the circle, defaults to the radius
 * $offsetX {Number}   optional X offset for the item, you might use 1/2 of the width of an item, default is 0
 * $offsetY {Number}   optional Y offset for the item, you might use 1/2 of the height of an item, default is 0
 */
@mixin on-circle ($radius, $ordinalPosition, $positions, $originX: $radius, $originY: $radius, $offsetX: 0, $offsetY: 0) {

 /*
 Determine the angle for the position:
  Multiply the adjusted zero-based index of the position by the degrees-per-position (360 degrees divided by the 
  number of positions) and subtract 90 degrees (adjusting to begin at North)
  */
 $positionAngleDegrees: ($ordinalPosition - 1)*360/$positions - 90;
 /*
 Convert the angle to radians:
  Multiply the angle by pi and then divide by 180 degrees.

 NOTE: This step is necessary because of a bug in handling of the degrees unit when doing iterations, AFAICT
  */
 $positionAngleRadians: $positionAngleDegrees * pi() / 180;

 /*
 Apply the parametric equation of the circle,
  http://en.wikipedia.org/wiki/Circle#Equations
 via:
  http://stackoverflow.com/questions/839899/how-do-i-calculate-a-point-on-a-circles-circumference

  x = [origin x] + (r * cos angle)
  y = [origin y] + (r * sin angle)
  */
 top: #{$originY + $offsetY + $radius * sin($positionAngleRadians)}px;
 left: #{$originX + $offsetX + $radius * cos($positionAngleRadians)}px;

}

// How many positions will there be on the circle?
$positions: 13;

// How big is the circle (diameter)?
$ringSize: 180;

// How big is an item?  Offsets and margins are based on this value
// such that the center of an item is located on the circle, rather than
// the top left point
$itemSize: 28;

body {
 margin: 50px;
}

.ring-container {
 border: solid 1px black;
 display: inline-block;
}

.ring {
 position: relative;
 // Use border-box so that margin and border are not included and the size of the element containing the
 // rendered circle is the circle size + border + ...
 box-sizing: border-box;
 width: #{$ringSize}px;
 height: #{$ringSize}px;
 margin: #{$itemSize/2}px;
 border: solid 1px black;

 // Make any square into a circle by setting the border radius to it's full width/height
 @include border-radius(#{$ringSize}px);
}

.ring-positions {
 position: relative;
 width: #{$ringSize}px;
 height: #{$ringSize}px;
 top: #{$itemSize/-2}px;
 left: #{$itemSize/-2}px;
}

.ring-position {
 position: absolute;
 width: #{$itemSize}px;
 height: #{$itemSize}px;
 @include border-radius(#{$itemSize}px);

 // Use box-sizing: border-box if you'll have a border
 box-sizing: border-box;
 border-color: black;
 border-style: solid;
}

@for $i from 1 through $positions {
 .ring-position-#{$i} {
  @include on-circle($radius: $ringSize / 2, $ordinalPosition: $i, $positions: $positions);

  // Just for demonstration of placement
  border-width: #{$i/2+3}px;
 }
}

html5 boilerplate build Woes

On Friday I spent a few hours trying to debug doing a build on my current project using the html5 boilerplate build script (ant based).  Didn't happen.

Spent a couple more hours on Monday modifying my project to mirror the configuration for asset directories that the build script uses as its defaults, such as "js" for the scripts directory, where before I was using "javascripts" based on the html5 boilerplate template that I installed with (I forget which) Scout or compass.app.  Thought it would build after changing to the structure it expects / expected.  Didn't happen.

Well, the woes seem to be caused by changes to the default structure that have happened at the same time as the splitting of the build script out into it's own project / repository.

Today I put a little bit more time into the build and got it working by removing my exclusions from the project.properties file and adding the slug.libs property in.

So that's the deal ... if you're going to use something other than "vendors" as your libs directory, you *must* specify not only the dir.js.libs property but the slug.libs property.

Here are the settings I have in my project properties, which seem to match the html5 boilerplate template:

dir.source = ./public
file.stylesheets  = 
dir.js = js
dir.js.main = ${dir.js}
dir.js.libs = ${dir.js}/libs
slug.libs = libs
dir.js.modules = ${dir.js}/modules
dir.css = css
dir.images = img
file.root.stylesheet = style.css
file.root.script = script.js

Good luck with your html5 boilerplate project!

UPDATE:

I also had issues with the error "js/modules/_all.js was specified as an input resource."
I could get past the error by doing an "ant clean" before the "ant build", but obviously the error means there's a problem.

To get past it, modify your build.xml around line 486 to fix the module concatenation which is used to create a checksum, as follows, adding an exclusion for _all.js.

<concat destfile="./${dir.intermediate}/${dir.js.modules}/_all.js" overwrite="no">
    <fileset dir="./${dir.intermediate}/${dir.js.modules}/">
        <include name="*.js">
        <exclude name="_all.js">
    </exclude></include></fileset>
</concat>

UPDATE the Second:

Subdirectories of /libs are not being copied.  :/  This might help ... testing it now...

<copy todir="${dir.publish}/${dir.js}">
  <fileset
        dir="${dir.intermediate}/${dir.js}"
        includes="${file.js.bypass}, ${slug.libs}/*/**, ${slug.modules}/*/**">
        <exclude name="scripts-concat.js"/>
        <exclude name="scripts-concat.min.js"/>
        <exclude name="otherscripts-concat.js"/>
        <exclude name="plugins.js"/>
        <exclude name="${file.root.script}"/>
    </fileset>
    <regexpmapper from="^([^/])*/(.*)$$" to="\1/\2" handledirsep="true"/>
</copy>

Looks good. That's a change for the task around line 532 of build.xml.

Making a Compass Site Relative

I'm creating what at least for now is a single-page webapp and using, among other things, Compass.

One of the extensions I'm using (via Compass.app) is thomas-mcdonald-bootstrap-sass.  I've modified it to use the Font-Awesome icon font which replaces and extends the standard twitter icon library, as well as to add an IcoMoon icon font for even more icons.

To add the icon fonts to the compass bootstrap extension, you need to specify the path to the font.  In the instructions, you're told to put the absolute path to the font (such as "/fonts/fontawesome".  But we don't want to do that, we want to have all relative paths in our files.  If we don't include a beginning "/" in the $fontAwesomePath variable, then Compass will assume that the path is relative to the compass project's font directory (because of how the font-file function is coded).

The default font directory is the css directory plus "/fonts".

That made things awkward for using relative paths, so I did some digging and found a post where someone mentions using "font_dir" to configure the font directory path ... well, it's "fonts_dir", folks, not "font_dir".

To make a long story short, using the image-url function for my image paths, and trying to remove the absolute pathing by changing "http_path" to "" didn't work.

These are the settings in my config.rb that *did* work:

http_path = "./"
css_dir = "css"
sass_dir = "sass"
images_dir = "../img"
javascripts_dir = "js"
fonts_dir = "../fonts"

Of course you should modify that to use the same paths that you're using, such as "javascripts" and "stylesheets" instead of "js" and "css".  Just make sure that you have "./" as the http_path and "../" in front of your images and fonts directory paths.  When those are used, it's in the CSS context and your generated CSS file is going to end up in a directory that's parallel to them.

If somehow your final CSS file is in a different place, make sure that the images and fonts variables are changed accordingly.

Pandora, Stardock Objectdock, Large Number of Chrome Processes

I've been using Stardock's Objectdock for a while, because I'm now coding on a Windows 7 machine.  I also have a subscription to Pandora One ... at some point I saw about a bajillion chrome processes coming up in the dock and making it useless.

Turns out that it's because of Pandora One.  Chrome is my default browser and it seems like Pandora is using it and not closing the handle or something.  Who knows.  Problem solved by not using their standalone Adobe AIR application and going back to having one window open for listening.

UPDATE:  Apparently you have to start Pandora One BEFORE you start Chrome and the problem will not occur.  (Thanks to Pandora tech support for providing the workaround)