This is an example of how we can simplify Gutenberg's custom block API - this is only an illustrative example

simplify-gutengerg.js

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType, RichText, UrlInput, InspectorControls, PanelColor, ColorPalette } = wp.blocks;

/**
 * This class registers a custom block type, by creating the
 * controls and updating the values automatically. It also allows passing a single
 * render function to avoid repetitive code in edit and update.
 */
class MyCustomComponent{

    constructor(blockId, props, render){
        this.blockId = blockId;
        this.props = props;
        this.render = render;
        this.init();
    }

    init(){
        const props = Object.assign(this.props, {
            edit: this.edit.bind(this),
            save: this.save.bind(this)
        });
        registerBlockType(this.blockId, props);
    }

    edit(props){
        const atts = this.props.attributes;
        const elements = [this.render(props, 'edit')];

        const onValueChange = (attrId, newValue)=>{
            let newAtts = {};
            newAtts[attrId] = newValue;
            props.setAttributes(newAtts);
        };

        for (let attrId in atts) {
            if (!atts.hasOwnProperty(attrId)) continue;

            switch(atts[attrId].type) {
                //TODO: support all controls here
                case 'color':
                    elements.push(
                        <InspectorControls key="inspector">
                            <ColorPalette
                                value={ atts[attrId] }
                                onChange={ ( newValue ) => onValueChange( attrId, newValue ) }
                            />
                        </InspectorControls>
                    );
                break;
            }
        }

        return elements;
    }

    save(props){
        return this.render(props, 'save');
    }

}

/**
 * This component can be used to support an inline RichText control. Please see
 * the render function below for an example how it is used.
 */
class MyTextComponent extends React.Component{
    render(){
        const {attrId, mode, props } = this.props;

        let onValueChange = (newValue) => {
            let newAtts = {};
            newAtts[attrId] = newValue;
            props.setAttributes(newAtts);
        };

        if(mode == 'save'){
            return props.attributes[attrId];
        }else if(mode == 'edit'){
            return (<RichText
                onChange={ onValueChange }
                value={ props.attributes[attrId] }
            />);
        }
    }
}

/**
 * And this is how we register the component
 */
new MyCustomComponent( 'myplugin/button', {
        title: __( 'My Button' ),
        icon: 'button',
        category: 'common',
        attributes: {
            btntext: {
                type: 'plaintext',
                selector: 'button',
            },
            bgcolor: {
                type: 'color',
                label: __('Select color'),
                selector: 'button',
                attribute: 'color'
            }
        }
    },
    function(props, mode){
        let atts = props.attributes;

        return (
            <button color={atts.bgcolor} style={ { backgroundColor: atts.bgcolor } }>
                <MyTextComponent props={props} mode={mode} attrId="btntext" />
            </button>
        );
    }
);