Mocking Data Quickly

Recently I’ve been needing to make a lot of demos really quickly. Every time I needed to mock out some UI components like a table view or a list view, data was really important. But Lorem ipsum is unpredicatable and most users would never input such shitty Latin. Cierco is never going to use your app, I’m sorry.

By the way, Luke Wroblewski cover this pretty vividly:

Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does. — Luke Wroblewski

I’ve typically stubbed out an object to match the design I needed, copy that same object a dozen times and there, you got yourself a poorly maintained fake array. This data is fake, now if you need to do something quick and dirty, we should aim for something that takes the shape of the data we need and looks similar to the API we need to work with later on. In other words, not as fake data.

I never want to create a manual stub ever again. It is so tedious. Manual stubs aren’t effective because you’d need manually change something everywhere if you need tweak part of your object. Let’s try and avoid that.

Randomly Creating Fake Data

So let’s try something a little different to work with. Create an empty array.

const List = Array(50).fill();

There’s a probably a better way to create a fake array but I can’t think of one. I’m not on trial. Get off my back. I’m sorry writing code in public makes me tense…

Okay, I’m better now.

Now we need to create our fake schema. I’m going to use Chance.js, it’s a great way to randomly produce predictable results we can start to work with.

I need to create a member list for a directory application in a coding interview a month ago and here’s what I did:

import Chance from "chance";

const schema = (chance) => ({
	id: chance.guid(),
	avatar: chance.avatar({ protocol: "https", fileExtension: "jpg" }),
	memberSince: chance.year({ min: 1980, max: 2017 }),
	maritalStatus: chance.weighted(
		["Single", "Engaged", "Married", "Divorced"],
		[1, 2, 3, 4]
	),
	name: chance.name(),
	age: chance.age(),
	phone: chance.phone(),
	email: chance.email(),
	address: [
		{
			name: "Home",
			value: chance.address(),
		},
		{
			name: "Work",
			value: chance.address(),
		},
	],
});

List.map((i) => schema(new Chance()));

We can use Chance to make a schema like object that’s similar to the data we need to work with and not copied and pasted by hand. And when we need to change the shape we can change it in one place and have less to manage.

At the end we’re mapping through the List Array we created because Array.map() returns another Array. Now we’re passing a new instance of Chance to make sure each item in the new Array is unique.

Map through the results and get a new array of each of those empty spaces filled with your schema.

import data from "./path-to-the-other-shit";
import Cell from "./some-stateless-function";

class App extends React.Component {
	state = {
		results: data,
	};

	render() {
		return (
			<Wrapper>
				{this.state.results.map((result, i) => (
					<Cell key={i} {...result} />
				))}
			</Wrapper>
		);
	}
}

Bonus Points

Deploy this sucker! I’ve found that it’s probably a good idea to not make the client-side do something the server will inevitably do, don’t. It’s not so hard to deploy a simple server with an instance of this faked data. Zeit’s now (which I love and it’s what this site is deployed on) makes it less burdensome to work with.

All you need to deploy the same code is:

index.js:

const { send } = require("micro");
const data = require("./path-to-the-other-shit");

module.exports = async (req, res) => send(res, 201, { results: data });

package.json:

{
	"name": "mydemo",
	"start": "node index.js",
	"dependencies": {
		"micro": "latest"
	}
}

Then run this in the root of that project:

now

And now will give you a URL you can do a GET request to and have it return your randomly faked data that similar to what data you’re actually looking for in your demo or proof-of-concept.

I keep finding this takes maybe 10 minutes or less to setup and has so much payoff as I’m working on something.