Development and Mikado
Tags: refactoring, development, mikado
Published: 2022-08-01 14:05:21

---
title: Development and Mikado
published: true
date: 2022-07-31 14:18:09 UTC
tags: refactoring,development,mikado
canonical_url: https://medium.com/@redin.gaetan/development-and-mikado-6c8228b9f857
---

When I chose the Mikado method

![](https://cdn-images-1.medium.com/max/640/1*HFl48kKpKKD0iNdX5CuRlg.jpeg)
_Image par <a href=”https://pixabay.com/fr/users/wilhei-883152/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=742769">Willi Heidelbach</a> de <a href=”https://pixabay.com/fr//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=742769">Pixabay</a>_

### Context

During a front-end project in a client (in Angular), we got new directives for our project. One consequence of this was to migrate a lot of components into libraries.

My first reaction was “oh my god, it will take a loooooooong time”.

My second reaction was “Ok let’s go but how to do that without breaking the applications”

My third reaction was “How to do that without disturbing too much all the team”.

After some researches, I found an article about the Mikado method and it was the perfect solution for my situation.

### Mikado method

Proposed by [Ola Ellnestam](https://twitter.com/ellnestam) and [Daniel Brolund](https://twitter.com/danielbrolund) in 2012, this method allows to:

- visualize the goal of our modification and the steps to reach it
- lead our modification with little steps which always produce little green commit that can be merged and delivered.
- keep a clean commit’s history

This is a generic representation of a Mikado diagram:

![](https://cdn-images-1.medium.com/max/421/1*jn8h0tYnOiHZ4IikzXMzqg.png)
_Mikado diagram_

### Implementation for my use case

So it’s time to start the migration but from where to start? Well a good first step would be to initialize the target library if it does’nt exist. No impact, quick review from the team that’s perfect.

Now, you have to choose one component to migrate into this library.

Our Mikado diagram looks like this:

![](https://cdn-images-1.medium.com/max/151/1*2jlXw0Shq0f2whTyrLEWHg.png)
_Step 1_

You start to move it inside the library. But wait this component depends on a model:

![](https://cdn-images-1.medium.com/max/151/1*vhEBMxjDUbBoYXrq_Y4-xA.png)
_Step 2_

Let’s revert all of our modifications. Why? Well the method recommends to revert the modification to still be in a stable compilation context. Remember one objective of the method is to only produce green commit (all tests passed, no compilation errors…).

Now move the model in the appropriate library. Once it’s done, your code is compiling, all tests and lint passed. You can opened a merge request and merge this modification. It will be fast to review it, the impact on the team development will be probably minimal. That’s perfect.

Let’s go back to the migration of our _ContactFormComponent._ You move the code and… This component depends on 3 other components:

![](https://cdn-images-1.medium.com/max/571/1*KatSl7yf9fW4CzyaHhHx4A.png)
_Step 3_

Let’s revert all of our modifications (again). Let’s focus on the first one _MobilePhoneField._

Move it. But wait this one depends on a validator which is also a dependency of _HomePhoneField._

![](https://cdn-images-1.medium.com/max/571/1*vpmuQELO03kwvTGDNW3gfQ.png)
_Step 4_

Let’s revert all of our modifications (again and again). Move the validator and open a merge request then merge it. Now ou diagram is like this:

![](https://cdn-images-1.medium.com/max/571/1*7qox6G0cmhJZdk4olya7fg.png)
_Step 4 bis_

Move the _MobilePhoneField_ and only it even if the _HomePhoneField_ has no other dependency. Keep your commit small. Open a merge request then merge it:

![](https://cdn-images-1.medium.com/max/571/1*DOXaBL4EQYTL4HVX3KdcCg.png)
_Step 5_

Keep this logic until the end, one step, one commit, one merge request.

![](https://cdn-images-1.medium.com/max/571/1*kTZETzjd3Gu4v0y4XqoAFQ.png)
_Step 6_

![](https://cdn-images-1.medium.com/max/571/1*GQevuwHXqCLtjeVgorf4Xw.png)
_Step 7_

![](https://cdn-images-1.medium.com/max/571/1*dowXkc_Gm6uzcnZRhvTJqw.png)
_Step 8_

![](https://cdn-images-1.medium.com/max/571/1*4Q7Vf8cSZfCOUZt-2-txng.png)
_Step 9_

Et voilà, you have done with this _ContactFormComponent_.

### Conclusion

This method can be a bit frustrating because of the lot of revert we can do. But keep in mind a good developer is lazy but not too much. The quality must never be neglected. Thanks to this method, your client will thank you to break nothing, your teamates will also thank you to not be a bulldozer which push large commit that can break their developments. More a commit is large, more it takes time to review, more you can get conflicts and more your risk to keep an instable merge request.

This method is really perfect for handling code legacy, refactoring and migration. It’s unappropriate tobug fix.

thanks for reading.

### Learn more

- [Nx + Pnpm + Netlify](https://dev.to/gaetanrdn/nx-pnpm-netlify-2232-temp-slug-5092669)
- [How to Handle Required Inputs in Angular](https://dev.to/gaetanrdn/how-to-handle-required-inputs-in-angular-584o)
- [Angular ControlValueAccessor once for all](https://medium.com/@redin.gaetan/angular-for-every-one-implement-controlvalueaccessor-just-once-3e97eb16a0f7)
- [Angular for everyone: All about it](https://medium.com/@redin.gaetan/angular-for-every-one-table-of-contents-d24232940dd4)