Let’s say we’re building a react based web application using the redux library for state management. We’re writing our first view which looks like this:

// src/views/HelloWorldView.js
import React from "react"
import { connect } from "react-redux"
import SomeSpecificCode from "some-specific-module"

class HelloWorldView extends React.Component {
    render() {
        SomeSpecificCode.doSomething()
        return <div>Hello World</div>
    }
}

function connect(state) {
    return {}
}

export default connect(select)(HelloWorldView)

You see there is some boilerplate, like the import-statements and the export-statement. But there is also some domain specific code, the SomeSpecificCode.doSomething()-call.

Now we want to create a second view. As our second view also requires react, react-redux and a connect function we can just copy and paste the code from the HelloWorldView and then remove the domain specific code. It looks like this:

// src/views/UserView.js
import React from "react"
import { connect } from "react-redux"
import SomeSpecificCode from "some-specific-module"

class UserView extends React.Component {
    render() {
        return <div>Hello {this.props.user.name}</div>
    }
}

function connect(state) {
    return {
        user: state.user
    }
}

export default connect(select)(UserView)

Did you catch the mistake? We’ve not removed the import SomeSpecificCode statement although it’s not required for our second view.

Code Generators

Copy and pasting boilerplate code is a very error prone process. The best way to solve this issue is by removing the need for most of boilerplate code. But at the end you will still have a few lines of boilerplate code structure. For this remaining code you want to use code generators.

When not using code generators you will most likely either copy and paste the code structure or you will rewrite it from scratch in a minute.

The first approach is very error prone as seen in the example above.

The second approach will cost you some time and brain power: You first have to think about which common import statements are required, you have to make sure you are exporting your class and you have to think about the code convention you have for class and file names. Also new developers first have to look in multiple files to get a idea of the common required boilerplate code before they can create their own modules.

The solution to all of these problems is to just automate the process. Automated processes are usually not error prone and will work without you having to think about them too much. Let’s build an example code generator for the views above:

// generators/view
#!/usr/bin/env php
<?php
if (!isset($argv[1])) {
    echo "Usage: generators/view NAME\n";
    echo "Will generate a new view stub with react and redux already included\n";
}

$className = $argv[1];

ob_start();
?>
import React from "react"
import { connect } from "react-redux"

class <?=$className?> extends React.Component {
    render() {
        return <div>TODO: Implement <?=$className?>.prototype.render</div>
    }
}

function connect(state) {
    return {
        // TODO: Implement
    }
}

export default connect(select)(<?=$className?>)
<?php
$body = ob_get_clean();
$fileName = __DIR__ . "/../src/views/$className.js";
file_put_content($fileName, $body);
echo " + $fileName \n";

Now we can just execute generators/view HelloWorldView to generate a new empty view module.

Advantages of Code Generation

The biggest advantage of code generation is: It’s very fast. Instead of spending a minute on getting the boilerplate code together, you just spend two seconds on telling the computer to do the work. And you can be sure the boilerplate code will work, you don’t have to fix a bug because you forgot to add a missing import-statement.

Another point ist that you don’t have to keep in mind the whole structure of a module. You don’t have to think about the common boilerplate code, like importing react and react-redux. It let’s you solve the real problem instead of thinking about the meta problem of structuring your code.

You cannot forget exporting your class, it’s already done for you. You just need to fill in the remaining holes. The boilerplate is also free of typos and other mistakes you sometimes make when in a rush. Code generators successfully eliminate a whole class of bugs.

It’s also very easy for new developers to start contributing to your project. They don’t need to learn about the code structure first, they can just generate it.

The code generators can also make sure you are following naming conventions, so developers don’t have to wait for the code review until they know that they are violating a naming convention.

Takeaways

Use code generators where possible. They are fast, remove a whole class of bugs by design and keep you focussed on your domain problem.

Thanks for reading :) Follow me on twitter if you’re interested in more of this stuff!