Template projects and code duplication

Scenario

Lets say you are working within an organization. You have 10 teams developing frontend applications. Each application will be deployed on the same website. They provide different features, but share many things like colors, test frameworks, mock objects, general code structure…

Problem

I would say, the main problem here is maintenance.

Solution

First of all, try to add as much as you can into shared libraries. Let the template project depend on shared packages. But that will not solve everything. You will still have something left in the template project. If you move something to a shared package, the template project will still have to specify that package and version.

  • .editorconfig
  • .gitattributes
  • .travis.yml
  • package.json
  • .gitignore

Create a dictator

I created a concept with a “dictator”. The dictator has “dictatables” that dictates the file system when used in an application. I created a tool that I call dictator-builder, it implements features needed by a dictator. Using that tool I created a dictator, my example here is dictator-react-boilerplate.

{
"message": "Copy react-boilerplate",
"actions": [
{
"beSupersetOfJsonFile": "react-boilerplate/package.json",
"target": "package.json"
},
{
"copyFrom": "react-boilerplate",
"target": "."
},
{
"haveLineContaining": ["*.tgz"],
"target": ".gitignore"
}
]
}
  • Let the package.json in an application be a superset of the package.json in the dictator.
  • Copy all files from folder react-boilerplate to root
  • Add “*.tgz” to .gitignore

Use the dictator

You can run the dictator as a command line tool , if not using NPM:

npx dictator-react-boilerplate
{
"name": "react-boilerplate-example",
"version": "1.2.3",
"description": "asdasasd",
"scripts": {
"prepare": "dictator-react-boilerplate"
},
"devDependencies": {
"dictator-react-boilerplate": "0.0.8"
}
}
{
"ignore": [
"/README.md",
"/.github/*",
"/.github/**/*",
"/app",
"/package-lock.json",
"/Changelod.md"
]
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store