Building Event-Driven Applications with Twitter Flight

Building Event Driven Applications with Flight.js

Keith Bingman www.wantering.com @kbingman

! https://github.com/ kbingman/demoﬂight

Twitter Flight Extracted from twitter after a major front end
rewrite

Why Not… Backbone, Ember, Angular, Ampersand, Batman, [Insert Framework Here]?

Monolithic Tight coupling between routes/ views/models Diﬃcult to test Too
many relationships SEO Issues

What about existing web apps? Or just web pages? Monolithic
stacks and tool lock in?

And maybe I am not building a Single Page app

Is MV* the right paradigm for the browser?

Flight Solves These Problem By Doing Less

There is no magic

Testability Reusability Decoupled

Built on atomic components

Require.js(for now) standalone / CommonJS jQuery ES5 Shim for older
browsers

Tiny ~5K GZipped / ~16K Miniﬁed

It’s barely a Framework at all

Simply a Tool Just a system for building small reusable
modules and well organized code

Flight is a Framework to Build a Framework - Dan
Webb

Events Components Mixins Testing

[code] Event Bubbling

<html> <body> <div></div> <ul> <li class='item'></li> <li class='item'></li> </ul> </body>
</html> li .item > ul > body > document > window

$(document).trigger('dataShoppingCart', cartContents);

Component Listeners ! Global Listeners

this.trigger([selector,] event [,data])

this.after('initialize', function() { this.on('submit', this.requestTag); });

Anatomy of a Component

Event Event Dom Node Listening Event UI Component Event Event
<div data-node> </div>

Attaches to the DOM

define(function (require) { ! var uiRequestImages = require('ui_request_images'); ! return
initialize; ! function initialize() { uiRequestImages.attachTo('[data-input="search"]'); } ! });

this.node / this.$node

this.attributes()

Selectors this.attributes({ 'tagInput': 'input[name="tag"]', 'searchButton': ‘button[data-search]' });

State this.attributes({ tags: [] });

this.attr this.attr.tags [ 'gastown', 'vanjs', ‘vancouver' ]

this.select ! this.select('tagInput') ! $node.find('[name="tag"]')

Overriding Attributes this.attributes({ 'tagInput': 'input[name="tag"]', 'searchButton': null });

Lifecycle Callbacks

before after around

this.before('initialize', function() { … }); this.around('teardown', function() { … });
this.after('initialize', function() { this.on('click', this.doSomething)… });

Data Component Attached the document itself Used for processing /
persistence AJAX / localStorage Does not render anything

Persistence Layer document Attached to the whole document document Event
Event Event Event Data Component

define(function (require) { ! var uiRequestImages = require(‘data_provide_images’); ! return
initialize; ! function initialize() { dataProvideImages.attachTo('document'); } ! });

! ! function dataInstagram() { ! this.attributes({ … }); !
this.getImages = function(e, data){ … }; ! this.after('initialize', function() { this.on('needsTaggedImages', this.getImages); }); } !

Scaling becomes easy

Component Component Component Component Component Component

Well, almost…

The Hardest Problem in CS

With so many events ﬂying around we need to be
careful naming them

Some Proposed Names

ui data request — uiNeedsStoredData ui user action — uiFollowAction
ui request — uiCloseModal ui moment — uiColumnOptionsShown data — dataCalculateSystems http://www.simplebutgood.com/

A Note About Require.js It’s so 2012 (not cool anymore)
Browserify is the new hotness

Flight UMD http://github/ﬂightjs/ﬂight-umd supports AMD, CommonJS and Window loading

Components Events Mixins Testing

Because we have no references to a component, we need
a way to share functionality

Classical Inheritance

–Angus Croll “And on the 6th day, God created an
abundance of Talking Animals, that they may be used in JavaScript inheritance examples.”

Long Explanation Involving Ducks

Classical Hierarchy

Animal Walking Animal Rhinoceros Flying Animal Bat Swimming Animal Dolphin

So what about a duck?

It’s walking animal, that swims and ﬂies

It turns out, people are really bad at building classiﬁcation
systems

Functional Mixins

Exploits commonalities This turns out to be incredibly ﬂexible and
the number one thing I was missing from backbone

canWalk canSwim canFly withLocomotion

define(function(require) { ! var utils = require('flight/lib/index').utils; ! return withRequest;
! function withRequest() { this.request = function(path, options){ var xhr = { url: this.attr.baseUrl + path, }; xhr = utils.merge(xhr, options); return $.ajax(xhr); }; } ! });

var flight = require('flight/lib/index'); var withRequest = require('mixin/with_request'); ! return
flight.component(withRequest, dataInstagram);

Component Mixin Mixin Mixin

Component Mixin Mixin Mixin Component

Mixin Component Component Component Component Mixin Mixin Mixin Mixin Mixin
Mixin

Yeoman Generator

$ yo flight <app-name>

Search Input Show Search Results JSON API Binding

Mocha.js—FlightMocha Jasmine.js—FlightJasmine http://github.com/flightjs/jasmine-flight http://github.com/flightjs/mocha-flight

describeComponent('ui_request_images', function () { ! it('should be defined', function ()
{ expect(this.component).toBeDefined(); }); ! });

describeComponent('component_ui/ui_images', function () { beforeEach(function () { setupComponent(); this.component.trigger('uiShowTaggedImages', {
meta: { code: 200 }, data: [mockdata] }); }); ! it('should add an image on <uiShowTaggedImages>', function () { expect(this.component.$node.find('img').length) .toEqual(1); }); ! it('should add the correct size to the img src', function () { expect(this.component.$node.find('img').attr('src')) .toEqual('/thumbnail.jpg'); }); });

Event Spys

var eventSpy = spyOnEvent(document, 'needsTaggedImages'); ! expect(eventSpy).toHaveBeenTriggeredOn(document); ! expect(eventSpy).toHaveBeenTriggeredOnAndWith(document, {
tag: ‘gastown’ });

! ! it('should trigger <needsImages>', function () { var eventSpy
= spyOnEvent(document, 'needsImages'); var $input = this.component.$node.find(‘[data-tag]'); $input.val('gastown'); this.component.$node.submit(); ! expect(eventSpy).toHaveBeenTriggeredOn(document); }); !

Fixtures

beforeEach(function () { var html = '<form data-input="tag">'; html +=
'<input type="text" name="tag" />'; html += '<button>Search</button>'; html += '</form>'; ! setupComponent(html); });

describeComponent('ui_request_images', function () { beforeEach(function () { var html =
'<form data-input="tag">'; html += '<input type="text" name="tag" />'; html += '<button>Search</button>'; html += '</form>'; ! setupComponent(html); }); ! it('should be defined', function () { expect(this.component).toBeDefined(); }); ! });

You can also use your templating library to mock you
components

Plays Well with Others

Built on top of jQuery and DOM events

load HTML ﬁrst, then begin with API / single page
behaviour Multiple points of entry Hybrid apps

Using events, can talk to backbone and jQuery applications with
no real change to either Easily integrated

Canvas / WebGL

Flight Components http://ﬂight-components.jit.su

Questions?

Thanks!

Building Event-Driven Applications with Twitter Flight

Building Event-Driven Applications with Twitter Flight

More Decks by kbingman

Other Decks in Technology

Featured

Transcript