the real world

what are some events in the real world?

how about...

names? keywords? hobbies?

images? signs? dates?

questions? sounds? sensations?

the number of events is nearly infinite 

let's talk about a train crossing real quick

1. the train triggers lights and arms

2. the lights and arms trigger drivers

3. drivers press brakes to stop cars

4. train triggers end of crossing

5. arms retract signaling drivers

6. drivers apply throttle as brake lights dissapear

7. cars resume forward motion

probably missed some events in there

events are how the real world communicates

events in programming

why? why events? what are they for?!

"If you only want to decouple who receives a message from its sender, patterns like Observer and Command will take care of this with less complexity. You only need a queue when you want to decouple something in time."

– Game Programming Patterns

decoupling over time. asynchronicity.

cool... but what about state?

sometimes we need preconditions before we do something.

requiredEvent = function(name, callback, context){
        var that = this
        , stateUpdate = function(nameIn, stateEventsIn){
            var name = nameIn
                , stateEvents = stateEventsIn;

            return function(){
                var truthy = true
                    , key;

                if(typeof stateEvents[name] !== 'undefined'){
                    stateEvents[name] = true;

                    for(key in stateEvents){
                        truthy = truthy && stateEvents[key];
                    }

                    if(truthy && !that.triggeredStateReady){
                        //feels like a little bit of a hack.
                        //  lets the data finish propogating before triggering the call
                        setTimeout(that.stateReady.apply(that), 100);
                        that.triggeredStateReady = true;
                    }
                }
            };
        };

    that.triggeredStateReady = false;
    that.stateEvents[name] = false;
    that.listen(name, callback, context);
    that.listen(name, stateUpdate(name, that.stateEvents), that);
};

the DOM and users

by definition user interactions are async operations

server calls are also async because of latency

DOM programming is built around the addEventListener() function

var loadedHandler = function(){
    alert('loaded');

    //be a good neighbor... remove unneeded listeners
    document.removeListener('DOMContentLoaded', loadedHandler);
};

document.addEventListener('DOMContentLoaded', loadedHandler);

// the more familiar jQuery
$(document).ready(loadedHandler);


//A button
document.querySelect('.button').addEventListener('click', function(){
    //do stuff on click
});

$('.button').on('click', function(){
    //do stuff on click
});

this is the general pattern of event based programming

publish-subscribe (aka: pub-sub)

*oh yeah... events are how Web Components communicate

server side events

be warned: the examples use nodejs' implementation of events

the concepts are totally transferable

routing example...

all this... and so much more.

event based clients

example time!

events free us to deal with the world as it is

asynchronous and messy

questions?

thanks for coming & merry christmas!