Effective “Copy & Paste” for Quick CRUD Application Development

Stop updating the file names, classes or variables one by one!

Why Copy &Paste?

As an experienced developer, I clearly know “copy & paste” is our job every day. That happens all the time. We might already have a mature solution or a similar module. However, it was not built as a generic template or a library. We cannot use it directly, at least at this moment.

We need it, but nobody wants to type every word again.

How did we copy & paste?

Step #1. Find out the files
Step #2. Copy the files to a new directory
Step #3. Update the file names one by one
Step #4. Jump into every file and update the class names one by one
Step #5. Jump into every file and update the variables one by one
Step #6. Use the files

Why Copy & Paste is boring?

For back-end, that’s fine as normally the number of files is not that big. To add a new table, we just need 4 more new files.

# Data Model
# Data Service (class + interface)
# Endpoint (Controller)

However, a front-end module might contain bunches of files.

An Angular module may contain at least 2 components: one for the list, and another one is for the editor. Sometimes a container component is necessary as well. Considering the relevant data models, services, module, routes, tests, etc, it’s not surprised to find 20+ files in one module.

With React, it’s similar. React components contain less files, but Best Practices require us to provide bunches of redux files for states, actions, reducers.

It’s really a boring job to update them one by one.

How to “copy & paste” quickly?

All the class names and variables could be replaced easily in any editor.

However, what about the file names? Are you updating them one by one?

You could run Linux commands to do it. Git bashis for you if you’re working under Windows environment.

Let’s assume that we are building a new module to manage Departments, and hope reuse the same solution of the module Users.

First, we copy all the files from Users module:

cp admin-users/ admin-departments/ -rf

You could copy all other relevant files (models, services, routes, …) into a temporary directory under admin-departments to keep things simple.

Then, enter the new directory admin-departments and build commands to rename files

ls | grep user | awk '{print $1, $1}'| awk '{gsub(/user/, "department", $2); print $1, $2}'  | sed 's/^/mv /g'

You don’t have to understand it, but there are 3 things you have to be aware of

1. Update 'user' & 'department' as whatever you need;
2. 'user' & 'department' are case sensitive;
3. Be careful of the plurals.

Next, simply copy and paste the generated commands and run them on your console.

If you want to update the class names and the variables as well. Here are the commands for you.

find ./ -type f -iname "*" -print | xargs sed -i 's/user/department/g'
find ./ -type f -iname "*" -print | xargs sed -i 's/User/Department/g'

Done!

Please let me know if you have any questions. Enjoy!