Using generators to improve developer productivity

Just a few weeks in the past at N26, we did get stuff done week, throughout this time the product and engineering groups have the chance to attempt or construct something we like.

I made a decision to spend the week including a code era device to the Net mission
automating a little bit of the coding work whereas bettering the developer expertise.

On this article, I will stroll via the expertise and the result of implementing a device to generate code ๐Ÿ‘จโ€๐Ÿ’ป



What’s a code generator?

A code generator is a device that given a algorithm and inputs creates code, information, and folders.

To call a number of common ones ๐Ÿ‘‡

All of them will create code primarily based on particular guidelines considering the inputs offered by the consumer. Here is a easy instance ๐Ÿ‘‡



What’s the issue?

Think about, you begin the day engaged on a brand new job and you’ll want to create a function, earlier than writing any code you have to to think about a number of issues:

  • Folder construction and structure ๐Ÿ“‚
  • Naming information conference ๐Ÿ“‘
  • The place to place the function ๐Ÿ—‚
  • How it’s best to write the exams ๐Ÿงช

I am certain the mission you are engaged on has an inventory of conventions and patterns outlined that explains how it’s best to work within the codebase.

Nonetheless, each time you might be going via this course of it requires you to assume ๐Ÿค” about these conventions to make the choice.

The place is the supply of reality? ๐Ÿง

As software program engineers we work very laborious to not repeat code constructing abstractions, automating handbook workflows…

What about writing code? In the identical approach, we advocate for automating processes akin to deployments, we must also make an effort to the non-creative half of coding akin to scaffolding.



Why it’s best to use them?

Producing code will prevent time โฐ and can enhance the productiveness of the workforce ๐Ÿ“ˆ



Developer expertise

In a workforce that’s always rising it is very important guarantee that everyone seems to be aligned and in a position to construct issues effectively.

Having a great Developer Experience will enhance the arrogance a developer has with the codebase.

Belief, empowers folks to be extra productive and agile โšก๏ธ, to call a number of of the various advantages you may get by utilizing turbines:

  • Guarantee everyone seems to be doing issues “as anticipated” based on the mission conventions ๐Ÿ’–
  • Cut back friction when working with the codebase ๐Ÿค”
  • Ease the onboarding of latest joiners ๐Ÿ†•
  • Lower the event time ๐Ÿš€



Resolution fatigue

An important factor is that your teammates is not going to must spend time on low-value selections, akin to deciding how a part is structured.

Seems our decision-making course of will get worse the extra selections we make.

That is known as decision fatigue. For instance, Steve Jobs, limited his everyday clothing down to 1 outfit to keep away from making a choice.



Utilizing code turbines

Sounds good proper ๐Ÿ˜? Let’s check out how we are able to implement code turbines in our mission ๐Ÿ‘€



Choosing the proper device

I did not need to reinvent the wheel, my focus was set on the result of producing code, not constructing a device that solves this downside.

There are plenty of Open Supply initiatives that may do an superior job producing code. Here is the record of those I thought-about:

I made a decision to go along with Hygen at N26 as a result of:

  • Nice monorepo assist
  • Simple to take care of. You may solely have to care about .EJS template information and prompts.
  • No configuration required
  • Excessive worth with low effort, writing a generator may be very easy.

Plop can be a terrific device however making a generator is extra complicated since you’ll want to spend extra time writing code and the device calls for further time on the configuration half in comparison with Hygen.

Yeoman is one other legitimate choice, however sustaining turbines requires you to handle and publish packages to a registry and I might say the use-case of this device is extra suited to scaffolding initiatives as an alternative of smaller components of a codebase.



Getting began

It is time to create our code generator ๐Ÿฅณ. First, set up Hygen as a devDependency in your mission:

$ npm set up -D hygen
Enter fullscreen mode

Exit fullscreen mode

Outline a script contained in the package deal.json to make use of the script binary:

{
  "scripts": {
    "turbines": "hygen"
  }
}
Enter fullscreen mode

Exit fullscreen mode

Now we are able to run Hygen via the turbines script:

$ npm run turbines
Enter fullscreen mode

Exit fullscreen mode

After operating the command, you may see that Hygen is telling us we have no turbines.

Error: please specify a generator.
Hygen v6.2.0
Enter fullscreen mode

Exit fullscreen mode

By default, hygen will learn the generator information from a folder named _templates.

If you wish to change this conduct, create a file named .hygen.js on the root stage of your mission, like this:

const path = require('path')

module.exports = {
  templates: path.be a part of(__dirname, 'turbines'),
}
Enter fullscreen mode

Exit fullscreen mode



Making a generator

A generator consists of a number of actions, each motion incorporates two gadgets:

  • Templates: *.ejs ๐Ÿงฉ
  • Prompts: immediate.js โ‰๏ธ

Let’s construct a easy generator that creates a React part ๐Ÿค“. On the finish of the publish, you may discover a GitHub repository with plenty of completely different examples ๐Ÿ‘

The very first thing we have to create is the generator folder that may include the motion:

  • Generator: part
  • Motion: react
$ mkdir -p turbines/part/react
Enter fullscreen mode

Exit fullscreen mode



Templates

Template information outline the code that will probably be created after operating the generator, these information are written utilizing a template language known as Embedded JavaScript templates.

Each template begins with a frontmatter header. On this header, you’ll outline the metadata of the template utilizing the following properties ๐Ÿ”

Property Sort Utilization
to String The vacation spot of the file as soon as compiled.
from String Use an exterior file as template.
pressure Boolean Overwrite present information
unless_exists Boolean Execute the generator until file already exists.
inject Boolean Inject the contents into an present file as an alternative of making a brand new one.
after Regex Inject the template after the regex
earlier than Regex Inject the template earlier than the regex
prepend Boolean Inject the template at the beginning of the file
append Boolean Inject the template on the finish of the file
at_line Regex Inject the template on the specified line quantity
skip_if Regex Skip injection if regex matches.
eof_last Boolean Trim the newline from the tip of the injection.
sh String Set off a shell command after compiling the template

Now, let’s add a template file named index.ejs contained in the react motion folder we created beforehand:

$ contact turbines/part/react/index.ejs
Enter fullscreen mode

Exit fullscreen mode

As I discussed earlier than, we need to create a React part, so we have to specify the situation of the file the place the part goes to be created.

We are able to do this utilizing the to property.

---
to: src/parts/<%= h.changeCase.pascalCase(title) %>/index.js
---
Enter fullscreen mode

Exit fullscreen mode

As you possibly can see, we’re utilizing a variable known as title on the header. This worth will probably be offered by the prompts of the generator โ‰๏ธ

Then, we have to write the physique of the template, the place we outline the code that will probably be generated as soon as the template is compiled. I am reusing the title variable within the physique as effectively to create the title and export of the part โœจ

---
to: src/parts/<%= h.changeCase.pascalCase(title) %>/index.js
---

const <%= h.changeCase.pascalCase(title) %> = () => (
  <part>
    <h1>Hey! ๐Ÿ‘‹</h1>
    <h2><code><%= h.changeCase.pascalCase(title) %></code></h2>
  </part>
)

export default <%= h.changeCase.pascalCase(title) %>
Enter fullscreen mode

Exit fullscreen mode



Prompts

In case you’ll want to ask for consumer enter, optionally you should use a immediate file. That is very helpful to customise the output of the generator. Prompts are outlined utilizing a library named Enquirer.

Inside the identical react ๐Ÿ“, we are going to create a immediate.js file to ask for the variable outlined as title within the template:

module.exports = [
  {
    type: 'input',
    name: 'name',
    message: 'Write the name of your component'
  }
]
Enter fullscreen mode

Exit fullscreen mode

There are a ton of various enter sorts accessible ๐Ÿ”ก, take a look at this link to get the complete list.

Now it is time to lastly run our generator ๐Ÿฅณ utilizing the script together with the title and the motion:

$ npm run turbines part react
Enter fullscreen mode

Exit fullscreen mode

You may be requested for the prompts and eventually the magic will occur! ๐Ÿฆ„

Code generator demo



Demo

Check out carloscuesta/codegenerators-demo ๐Ÿ•น if you wish to play and see extra complicated examples!



Automate all of the issues!

It is time so that you can discover out repetitive duties and patterns to extract them right into a generator! ๐Ÿš€

I am very proud of the productiveness enhance and the consistency {that a} device like this may deliver to a workforce โค๏ธ

Add a Comment

Your email address will not be published. Required fields are marked *