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
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
PicoRuby on Rails
makicamel
2
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
10
3k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
XP, Testing and ninja testing
m_seki
3
240
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
750
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Writing Fast Ruby
sferik
628
62k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fireside Chat
paigeccino
37
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Scaling GitHub
holman
460
140k
Six Lessons from altMBA
skipperchong
28
3.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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