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
550
Asynchronous Web Interfaces
maccman
16
2k
Spine
maccman
11
1.3k
Other Decks in Programming
See All in Programming
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
240
Investigating Multithreaded PostgreSQL
macdice
0
150
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
250
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
複数アプリケーションを育てていくための共通化戦略
irof
2
700
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.4k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
TypeScript LSP の今までとこれから
quramy
0
110
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
7
1.2k
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
がんばりすぎないコーディングルール運用術
tsukakei
1
180
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Making Projects Easy
brettharned
116
6.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Invisible Side of Design
smashingmag
299
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Site-Speed That Sticks
csswizardry
7
590
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
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