[Question] - Builder versus configuration object

Question as to why you used the builder pattern instead of a configuration object pattern for configuring instances.

The following has ten total method calls just for one button.

var CustomButton = new MKButton.Builder()
  .withBackgroundColor(MKColor.Teal)
  .withShadowRadius(2)
  .withShadowOffset({width:0, height:2})
  .withShadowOpacity(.7)
  .withShadowColor('black')
  .withOnPress(() => {
    console.log('hi, raised button!');
  })
  .withTextStyle({
    color: 'white',
    fontWeight: 'bold',
  })
  .withText('RAISED BUTTON')
  .build();

The MooTools configuration pattern uses just one

var CustomButton = new MKButton({
    backgroundColor : MKColor.Teal,
    shadow : {
        radius  : 2,
        opacity : .7,
        color   : 'black',
        offset  : {
            width  : 0,
            height : 2
        }
    },
    textStyle {
        color      : 'white',
        fontWeight : 'bold'
    },
    onPress : () => {
        console.log('onPress')
    }

});

[xinthink]

Hi @jaygarcia, thanks for the valuable question.

The same question has been frustrating me 😖, until I realize that I’m not going to obsolete the object pattern by introducing builder. I just can’t, configuration object is built into the heart of ES7 (Object Spread) and thus React (Props Transferring). For example, you’re always free to do this:

var coloredButtonProps = {
  style: {
    marginLeft: 20,
    marginRight: 20,
  },
  backgroundColor: MKColor.Purple,
  rippleLayerColor: MKColor.Lime,
  onPress: () => console.log('button clicked'),
};

var buttonTextProps = {
  pointerEvents: 'none',
  style: {
    color: 'white',
    fontWeight: 'bold',
  },
};

<MKButton {...coloredButtonProps}>
  <Text {...buttonTextProps}>
    Halo!
  </Text>
</MKButton>

the props objects can be reused & extended:

var accentButtonProps = {
  ...coloredButtonProps,
  backgroundColor: MKColor.DeepOrange,
};

<MKButton {...accentButtonProps}>
  <Text {...buttonTextProps}>
    Accent colored raised button
  </Text>
</MKButton>

So, my reasoning is that the builder is just another way to make and reuse view definitions, hoping those who feel familiar to builder pattern or method chaining will like it.

An additional reason to introduce builder pattern is that it can make the best out of IDE’s code completion feature (e.g. WebStorm).

It is not an either-or situation, you can even mix them up, to leverage the pre-defined theme:

var accentButtonProps = {
  ...MKButton.coloredButton().toProps(),
  backgroundColor: MKColor.DeepOrange,
};

<MKButton {...accentButtonProps}>
  <Text {...buttonTextProps}>
    Accent colored raised button
  </Text>
</MKButton>

Hope my choice is reasonable, 🍻. I’ll leave this issue open in case of someone interested wanna join the discussion.

[kristian-puccio]

It would be great to able to combine the approaches. So use the builder pattern to configure widgets that you will use then be able to customise them at runtime using props. I know you can do this with some props but not all.

Specifically Text doesn’t work, I’m not sure about other props yet.