presentation-widgetize

View Github Repository Open presentation in a new window

tybenz

See all presentation from tybenz

presentation-widgetize

0 1

presentation-widgetize

On Github tybenz / presentation-widgetize

Widget-ize All The Things!

Tyler Benziger

github.com/tybenz   //   @tybenz   //   tybenz.com

Reduce ☛ reuse ☛ refactor

Reduce ☛ reuse ☛ refactor

Reduce ☛ reuse ☛ refactor

Reduce ☛ reuse ☚ refactor

Background

Here We Go

The Options

Blackbox

Framework-based

The Sweet Spot

The Options

Blackbox

Framework-based

The Sweet Spot

$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();
$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();
$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();
$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();
$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();
$.fn.secret = function() {

    return this.each(function() {
        var $this = $( this );

        $this.on( 'mousedown', function() {
            $this.addClass( 'show' );
        });

        $this.on( 'mouseup', function() {
            $this.removeClass( 'show' );
        });
    });

};

$( '#secret' ).secret();

The Options

Blackbox

Framework-based

The Sweet Spot

The Options

Blackbox

Framework-based

The Sweet Spot

var Secret = Backbone.View.extend({
    events: {
        'mousedown': 'apply',
        'mouseup': 'remove'
    },

    apply: function() {
        this.$el.addClass( 'show' )
    },

    remove: function() {
        this.$el.removeClass( 'show' )
    }
});
var Secret = Backbone.View.extend({
    events: {
        'mousedown': 'apply',
        'mouseup': 'remove'
    },

    apply: function() {
        this.$el.addClass( 'show' )
    },

    remove: function() {
        this.$el.removeClass( 'show' )
    }
});
var Secret = Backbone.View.extend({
    events: {
        'mousedown': 'apply',
        'mouseup': 'remove'
    },

    apply: function() {
        this.$el.addClass( 'show' )
    },

    remove: function() {
        this.$el.removeClass( 'show' )
    }
});

The Options

Blackbox

Framework-based

The Sweet Spot

The Options

Blackbox

Framework-based

The Sweet Spot

Component Checklist

☐ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☐ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☐ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☐ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

$.extend( Secret.prototype, widgetMethods, {
    defaultOptions: {
        applyClass: 'show',
        applyEvent: 'mousedown',
        removeEvent: 'mouseup'
    },

    apply: function() {
        this.$el.addClass( this.options.applyClass );
    },

    remove: function() {
        this.$el.removeClass( this.options.applyClass );
    }
});
$.extend( Secret.prototype, widgetMethods, {
    defaultOptions: {
        applyClass: 'show',
        applyEvent: 'mousedown',
        removeEvent: 'mouseup'
    },

    apply: function() {
        this.$el.addClass( this.options.applyClass );
    },

    remove: function() {
        this.$el.removeClass( this.options.applyClass );
    }
});
$.extend( Secret.prototype, widgetMethods, {
    defaultOptions: {
        applyClass: 'show',
        applyEvent: 'mousedown',
        removeEvent: 'mouseup'
    },

    apply: function() {
        this.$el.addClass( this.options.applyClass );
    },

    remove: function() {
        this.$el.removeClass( this.options.applyClass );
    }
});
var Secret = function( el, options ) {
    var widget = this;

    this.$el = $( el );

    this.options = $.extend( {}, this.defaultOptions, options );

    this.$el.on( this.options.applyEvent, function() {
        widget.apply();
        widget.trigger( 'secret-apply' );
    });

    this.$el.on( this.options.removeEvent, function() {
        widget.remove();
        widget.trigger( 'secret-remove' );
    });
};
var Secret = function( el, options ) {
    var widget = this;

    this.$el = $( el );

    this.options = $.extend( {}, this.defaultOptions, options );

    this.$el.on( this.options.applyEvent, function() {
        widget.apply();
        widget.trigger( 'secret-apply' );
    });

    this.$el.on( this.options.removeEvent, function() {
        widget.remove();
        widget.trigger( 'secret-remove' );
    });
};
var Secret = function( el, options ) {
    var widget = this;

    this.$el = $( el );

    this.options = $.extend( {}, this.defaultOptions, options );

    this.$el.on( this.options.applyEvent, function() {
        widget.apply();
        widget.trigger( 'secret-apply' );
    });

    this.$el.on( this.options.removeEvent, function() {
        widget.remove();
        widget.trigger( 'secret-remove' );
    });
};
var Secret = function( el, options ) {
    var widget = this;

    this.$el = $( el );

    this.options = $.extend( {}, this.defaultOptions, options );

    this.$el.on( this.options.applyEvent, function() {
        widget.apply();
        widget.trigger( 'secret-apply' );
    });

    this.$el.on( this.options.removeEvent, function() {
        widget.remove();
        widget.trigger( 'secret-remove' );
    });
};
var Secret = function( el, options ) {
    var widget = this;

    this.$el = $( el );

    this.options = $.extend( {}, this.defaultOptions, options );

    this.$el.on( this.options.applyEvent, function() {
        widget.apply();
        widget.trigger( 'secret-apply' );
    });

    this.$el.on( this.options.removeEvent, function() {
        widget.remove();
        widget.trigger( 'secret-remove' );
    });
};

Component Checklist

☐ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☒ Options

☐ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☒ Options

☒ Browser/User Events

☐ Widget logic

☐ External events

Component Checklist

☒ Options

☒ Browser/User Events

☒ Widget logic

☐ External events

Component Checklist

☒ Options

☒ Browser/User Events

☒ Widget logic

☒ External events

Time to extend

var secret1 = new Secret( $( '#window1' ) ),
    secret2 = new Secret( $( '#window2' ) );

secret1.on( 'secret-apply', function() {
    secret2.apply();
});

secret1.on( 'secret-remove', function() {
    secret2.remove();
});
var secret1 = new Secret( $( '#window1' ) ),
    secret2 = new Secret( $( '#window2' ) );

secret1.on( 'secret-apply', function() {
    secret2.apply();
});

secret1.on( 'secret-remove', function() {
    secret2.remove();
});
var secret1 = new Secret( $( '#window1' ) ),
    secret2 = new Secret( $( '#window2' ) );

secret1.on( 'secret-apply', function() {
    secret2.apply();
});

secret1.on( 'secret-remove', function() {
    secret2.remove();
});

Scrubber

$( '.window' ).each( function() {
    var secret = new Secret( this, {
        applyEvent: 'mouseover',
        removeEvent: 'mouseout'
    });
});
$( '.window' ).each( function() {
    var secret = new Secret( this, {
        applyEvent: 'mouseover',
        removeEvent: 'mouseout'
    });
});
$( '.window' ).each( function() {
    var secret = new Secret( this, {
        applyEvent: 'mouseover',
        removeEvent: 'mouseout'
    });
});
$( '.window' ).each( function() {
    var secret = new Secret( this, {
        applyEvent: 'mouseover',
        removeEvent: 'mouseout'
    });
});
$( '.window' ).each( function() {
    var secret = new Secret( this, {
        applyEvent: 'mouseover',
        removeEvent: 'mouseout'
    });
});

A♭$+r@☪✟|θN

Recap

Component Checklist

☒ Options

☒ Browser/User Events

☒ Widget logic

☒ External events

U.I. Patterns

Tyler Benziger

github.com/tybenz   //   @tybenz   //   tybenz.com

Questions?