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.2k
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
2k
Spine
maccman
11
1.3k
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
320
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
840
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.5k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How STYLIGHT went responsive
nonsquared
100
5.6k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Done Done
chrislema
184
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
184
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing for Performance
lara
610
69k
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