Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Learning to Fly — Twitter Flight and Mixins
Search
Angus Croll
August 23, 2013
Technology
23
4.6k
Learning to Fly — Twitter Flight and Mixins
Presented at BrazilJS, Porto Alegre, August 22nd 2013
Angus Croll
August 23, 2013
Tweet
Share
More Decks by Angus Croll
See All by Angus Croll
The Book Nerd's Guide to JavaScript
anguscroll
14
4.3k
Stop being Perfect
anguscroll
11
1.6k
ES6 Uncensored
anguscroll
72
12k
JavaScript is Literature is JavaScript
anguscroll
21
3.4k
The Politics of JavaScript
anguscroll
122
23k
Parlez-Vous JavaScript
anguscroll
33
6.4k
Break all the Rulez
anguscroll
42
16k
How we Learned to Stop Worrying and Love JavaScript
anguscroll
90
22k
Other Decks in Technology
See All in Technology
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
300
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
190
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
310
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
slog.Handlerのよくある実装ミス
sakiengineer
4
290
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Balancing Empowerment & Direction
lara
3
620
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Learning to fly Twitter Flight and Mixins @angustweets Thursday, August
22, 13
the most difficult part of JS inheritance... And on the
6th day, God created an abundance of Talking Animals, that they may be used in JavaScript inheritance examples. Thursday, August 22, 13
So, talking animals it is! meow!! Thursday, August 22, 13
Flight flightjs.github.io An event driven web framework by Twitter Thursday,
August 22, 13
Flight powers... twitter.com tweetdeck gumroad yinzcam crashalytics and more... Thursday,
August 22, 13
A set of components which bind functionality to DOM Nodes...
Thursday, August 22, 13
github.com/flightjs/example-app Thursday, August 22, 13
github.com/flightjs/example-app Thursday, August 22, 13
Components are completely decoupled and communicate via event bubbling Thursday,
August 22, 13
Thursday, August 22, 13
Components often share behaviours Thursday, August 22, 13
Components often share behaviours So we needed a re-use technique
Thursday, August 22, 13
Inheritance classical composition mixins Functions Object.create Constructor.prototype function passing /
callbacks Objects call/apply functional mixins (Some) JavaScript Re-use Patterns Thursday, August 22, 13
Inheritance classical composition mixins Functions Object.create Constructor.prototype function passing /
callbacks Objects call/apply functional mixins (Some) JavaScript Re-use Patterns Thursday, August 22, 13
Classical Inheritance Thursday, August 22, 13
ES 6 is giving us class. Some libraries have their
own versions. Thursday, August 22, 13
implementation varies widely and abstraction is often leaky (const, static)
class, extend and super are reserved words in particular, the relationship between this and super is difficult... Thursday, August 22, 13
//Prototype.js var SwimmingAnimal = Class.create(Animal, { type: 'SwimmingAnimal', speak: function($super)
{ return $super() + ", glug"; } }); //https://github.com/ded/klass var Alien = SuperHuman.extend({ speak: function() { this.supr(); //speak like a SuperHuman } }); Thursday, August 22, 13
Do you even want classes? Thursday, August 22, 13
Animal Walking Animal Swimming Animal Flying Animal Cat Elephant Crocodile
Whale Eagle Bat Egg-laying Animal Migrating Animal Thursday, August 22, 13
Crocodile Animal Walking Animal Swimming Animal Flying Animal Cat Elephant
Whale Eagle Bat Egg-laying Animal Migrating Animal Thursday, August 22, 13
Crocodile Animal Walking Animal Swimming Animal Flying Animal Cat Elephant
Whale Eagle Bat Egg-laying Animal Migrating Animal WTF? I walk too!! Thursday, August 22, 13
Animal Walking Animal Swimming Animal Flying Animal Cat Elephant Crocodile
Whale Eagle Bat Egg-laying Animal Migrating Animal Thursday, August 22, 13
Duck? Animal Walking Animal Swimming Animal Flying Animal Cat Elephant
Crocodile Whale Eagle Bat Egg-laying Animal Migrating Animal Thursday, August 22, 13
Duck? Animal Cat Elephant Crocodile Whale Eagle Bat Thursday, August
22, 13
Duck? Animal Cat Elephant Crocodile Whale Eagle Bat Walking Animal
Swimming Animal Flying Animal Egg-laying Animal Migrating Animal Thursday, August 22, 13
Classical inheritance Requires up-front knowledge of general case Single rooted
hierarchy We’re really bad at classification Thursday, August 22, 13
Constructor.prototype chaining Thursday, August 22, 13
awkward and unnatural Thursday, August 22, 13
var Animal = function(gender, says) { this.gender = gender; this.says
= says; }; var WalkingAnimal = function(gender, says) { Animal.call(this, gender, says); } WalkingAnimal.prototype = new Animal(); Thursday, August 22, 13
...and new Constructor syntax is classical inheritance Thursday, August 22,
13
Beyond classification... Thursday, August 22, 13
19th century British philosophers Whewell and Jevons argued that there
are no objectively “right” classifications Thursday, August 22, 13
“In general, when working with prototypes, one typically chooses not
to categorize but to exploit alikeness.” –Antero Taivalsaari (Nokia Research Center) Thursday, August 22, 13
liberates prototype chaining from classification Object.create Thursday, August 22, 13
var animalProto = { speak: function() { console.log(this.says); } }
var walkingAnimalProto = Object.create(animalProto); // then augment walkingAnimalProto here... Thursday, August 22, 13
but, that second argument :’’( Thursday, August 22, 13
var animalProto = { speak: function() { console.log(this.says); } }
var walkingAnimalProto = Object.create( animalProto, { walk: { value: function() { console.log('walking'); } } //... } ); Thursday, August 22, 13
and inheritance is still single rooted Thursday, August 22, 13
The sad thing is that we even care about inheritance
hierarchies... Thursday, August 22, 13
The sad thing is that we even care about inheritance
hierarchies... ...because in JavaScript they’re quite unnecessary... Thursday, August 22, 13
JavaScript has first class functions Any function can be assigned
to any object Thursday, August 22, 13
Mixins Thursday, August 22, 13
//A property copy mixin var withWalking = { walk: function()
{ console.log('walking'); }, turn: function(direction) { console.log('turning', direction); }, stopWalking: function() { console.log('stopped walking'); } }; Thursday, August 22, 13
var extend = function(destination, source) { for (var k in
source) { if (source.hasOwnProperty(k)) { destination[k] = source[k]; } } return destination; }; extend(Crocodile.prototype, withWalking); extend(Crocodile.prototype, withSwimming); Thursday, August 22, 13
No hierarchical constraints Functionality is grouped by what it does
not who it belongs to Define special cases first; common code later Thursday, August 22, 13
Mixin must know about target Properties can only clobber But...
Thursday, August 22, 13
Functional Mixins Thursday, August 22, 13
var withWalking = function() { this.walk = function() { console.log('walking');
}; this.turn = function(direction) { console.log('turning', direction); }; this.stopWalking = function() { console.log('stopped walking'); }; }; Thursday, August 22, 13
function Crocodile(name, gender) { this.name = name; this.gender = gender;
} Crocodile.prototype.stalkTourists = function() { //.. }; withWalking.call(Crocodile.prototype); withSwimming.call(Crocodile.prototype); Thursday, August 22, 13
Flight uses functional mixins Thursday, August 22, 13
github.com/flightjs/example-app Thursday, August 22, 13
function withSelect() { this.defaultAttrs({ selectedIds: [] }); this.selectItem = function($item,
append) { $item.addClass(this.attr.selectedClass); this.attr.selectedIds.push($item.attr('id')); this.trigger('uiSelectionChanged', {selIds: this.attr.selectedIds}); }; this.unselectItem = function($item) { $item.removeClass(this.attr.selectedClass); this.attr.selectedIds.splice(getIdIndex($item), 1); this.trigger('uiSelectionChanged', {selIds: this.attr.selectedIds}); }; } Thursday, August 22, 13
defineComponent(mailItems, withSelect); defineComponent(folders, withSelect); defineComponent(moveToSelector, withSelect); Thursday, August 22, 13
The Advice Mixin Thursday, August 22, 13
advice.js is a mixin Thursday, August 22, 13
advice.js is a mixin it lets you add custom code
before(), after() or around() an existing function. Thursday, August 22, 13
all flight mixins get advice.js for free Thursday, August 22,
13
all flight mixins get advice.js for free so mixins can
augment functions, not clobber them Thursday, August 22, 13
withAdvice.call(Crocodile.prototype); function withFlu() { this.before('walk', function() { console.log('sniff'); }); }
var sickCrocodile = new Crocodile(); withFlu.call(sickCrocodile); sickCrocodile.walk(); //"sniff, pad, pad, pad, pad" Thursday, August 22, 13
function withSelect() { this.defaultAttrs({ selectedIds: [] }); this.toggleItemSelect = function(ev,
data) { var $item = $(data.el), append; if ($item.hasClass(this.attr.selectedClass)) { this.unselectItem($item); } else { this.selectItem($item, isMultiSelect(ev)); } }; this.selectItem = function($item, append) {/*..*/}; this.unselectItem = function($item) {/*..*/}; this.after('initialize', function() { this.on(this.select('itemSelector'), 'click', this.toggleItemSelect); }); } Thursday, August 22, 13
So why do we like functional mixins? Thursday, August 22,
13
Mixins as verbs instead of nouns. Mixins are functions. We
can take advantage of closure scope and arguments. A mixin can be applied to any object type: prototype, instance, whatever. Advice allows functional mixins to augment existing functions, not clobber them. Thursday, August 22, 13
Works with the language Simple to understand No surprises! Thursday,
August 22, 13
Obrigado! @angustweets javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at- javascript-mixins/ Thursday, August 22, 13