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
98
A JavaScript Web App Deconstructed
maccman
6
500
Asynchronous Web Interfaces
maccman
16
2k
Spine
maccman
11
1.2k
Other Decks in Programming
See All in Programming
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
[スクリプト] Swiftの型推論を学ぼう
omochi
0
120
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Building a Smaller App Binary
kateinoigakukun
2
210
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
受託開発でGitLab CI を活用していく
xiombatsg
1
130
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
160
Laravel標準バリデーションでできること
hmb_ok
2
360
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
It's Worth the Effort
3n
180
27k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Being A Developer After 40
akosma
56
580k
Writing Fast Ruby
sferik
619
59k
Facilitating Awesome Meetings
lara
39
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Navigating Team Friction
lara
177
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
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