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
Building large JS apps
Search
Alex MacCaw
May 31, 2012
Programming
20
2.3k
Building large JS apps
Alex MacCaw
May 31, 2012
Tweet
Share
More Decks by Alex MacCaw
See All by Alex MacCaw
Fronteers
maccman
0
130
A JavaScript Web App Deconstructed
maccman
6
560
Asynchronous Web Interfaces
maccman
16
2.1k
Spine
maccman
11
1.3k
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
170
CSC305 Lecture 05
javiergs
PRO
0
210
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
8
5.6k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
100
Catch Up: Go Style Guide Update
andpad
0
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
470
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
140
Serena MCPのすすめ
wadakatu
4
930
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How to Ace a Technical Interview
jacobian
280
24k
Making Projects Easy
brettharned
119
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
A better future with KSS
kneath
239
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
@maccman May 2012
I am @maccman (not @mccman)
I like CoffeeScript
Building hardware
None
None
Redundancy means decoupled components
This talk isn’t really about Spine
...or about Backbone
It’s about mega.js
Or base.js
Or everythingbutthekitchensink.js
Its about structure and building large apps
CommonJS?
1. Exposing properties
2. Requiring modules
module.exports = User; require('user');
If you’re not using a module system, like CommonJS, you’re
doing it wrong
sprockets-commonjs
program.module.js
module.exports = function(){ alert('Long live the Programs!'); };
this.require.define({"modules/program": function(exports, require, module){ module.exports = function(){ alert('Long live the
Programs!'); }; }});
this.require.define({"modules/program": function (exports, require, module) { module.exports = function ()
{ alert('Long live the Programs!') } }})
Program = require('modules/program')
sprockets-source-url
eval("..." + "\n//@ sourceURL=/application");
None
None
Stylo
None
styloapp.com
github.com/maccman/stylo
None
None
None
None
“The secret to building large apps is never build large
apps. Break your app into small pieces. Then, assemble those testable, bite- sized pieces into your big application.” - Justin Meyer
None
H e a d e r Stage Element Element Dimensions
Background Border Border Radius Shadow Opacity Inspector
None
None
None
None
Abstract components
Treat them like open source libraries
Color Picker Position Picker Context Menu
Decoupled controllers
Rules
1. Controllers can be instantiated multiple times without adverse effects
2. Controllers work without being attached to the DOM
Initially stored state in the DOM
None
Store state in the controllers, not the models, not the
view
Styles
No IDs
Separate stylesheets for each controller
None
Clear over DRY
#app .inspector .background { .edit { margin: 10px } .gradientPicker
{ margin: 0px 5px 5px 5px } &.disabled { .list { opacity: 0.6 } } }
Module communication
Expose a simple API and use events
// Private
PubSub
// color_picker.js this.trigger('change');
// background.js var colorPicker = new ColorPicker; colorPicker.bind('change', function(color){ //
... }); this.append(colorPicker);
Children should’t know anything about their parents
What I learnt
Use the tools
Awesome debugger
None
None
None
Shortcuts
None
$0
Memory leaks
None
None
None
display: none;
Less DOM manipulation
mousemove handlers need to be fast
None
requestAnimationFrame()
var Inspector = function(){ this.stage.selection.bind('change', this.paint.bind(this)); }; Inspector.prototype.paint = function(){
if (this.rendering) return; this.rendering = true; requestAnimationFrame(this.render.bind(this)); }; Inspector.prototype.render = function(){ // ... this.rendering = false; };
Most importantly
Advanced doesn’t mean complicated
Use simple building blocks
Tackle large problems by splitting them up
@maccman
Follow @fakeangus