Refactoring

Why, when, how?

Why refactoring code?

  • Something is getting too complex ("Code smells")
  • A new feature needs to be implemented 
  • To get a better understanding of the code

Avoid being slow down by a hard-to-use component (= maintainability)

A new feature in a component/module means that requirements changed, so better rework it to get a clean result (=extensibility)

As you read the code, solving a few small "code smell" can help getting familiar with the code

  • Any idea?

It's not rocket science

  • Rename variable
  • Extract function
  • Extract class
  • Use/make a better abstraction

Most refactorings comes from a simple idea

Most refactorings can be done progressively while you're coding, as you need it.

How to?

  • Add a test case
  • Identify what refactoring you want to do
  • Apply the refactoring
  • Launch the test case
  • Repeat until it's good enough :)

The idea: do small changes to be sure that nothing will break

Making small changes is easier

Every step looks too simple to be worth doing 

Example

Demo time

  • Use an abstraction of the state of the app (Redux) to have Container component only dispatching actions?

To go further:

UserList and Feed are displaying infinite list of items with a very similar logic, let's refactor them.

Reference

Refactoring - Improving the Design of Existing Code

by Martin Fowler

(with Kent Beck, John Brant, William Opdyke, and Don Roberts)

refactoring

By Florian Rival