Building large JS apps

Transcript

1. @maccman May 2012
2. I am @maccman (not @mccman)
3. I like CoffeeScript
4. Building hardware
7. Redundancy means decoupled components
8. This talk isn’t really about Spine
9. ...or about Backbone
10. It’s about mega.js
11. Or base.js
12. Or everythingbutthekitchensink.js
13. Its about structure and building large apps
14. CommonJS?
15. 1. Exposing properties
16. 2. Requiring modules
17. module.exports = User; require('user');
18. If you’re not using a module system, like CommonJS, you’re doing it wrong
19. sprockets-commonjs
20. program.module.js
21. module.exports = function(){ alert('Long live the Programs!'); };
22. this.require.define({"modules/program": function(exports, require, module){ module.exports = function(){ alert('Long live the Programs!'); }; }});
23. this.require.define({"modules/program": function (exports, require, module) { module.exports = function () { alert('Long live the Programs!') } }})
24. Program = require('modules/program')
25. sprockets-source-url
26. eval("..." + "\n//@ sourceURL=/application");
29. Stylo
31. styloapp.com
32. github.com/maccman/stylo
37. “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
39. H e a d e r Stage Element Element Dimensions Background Border Border Radius Shadow Opacity Inspector
44. Abstract components
45. Treat them like open source libraries
46. Color Picker Position Picker Context Menu
47. Decoupled controllers
48. Rules
49. 1. Controllers can be instantiated multiple times without adverse effects
50. 2. Controllers work without being attached to the DOM
51. Initially stored state in the DOM
53. Store state in the controllers, not the models, not the view
54. Styles
55. No IDs
56. Separate stylesheets for each controller
58. Clear over DRY
59. #app .inspector .background { .edit { margin: 10px } .gradientPicker { margin: 0px 5px 5px 5px } &.disabled { .list { opacity: 0.6 } } }
60. Module communication
61. Expose a simple API and use events
62. // Private
63. PubSub
64. // color_picker.js this.trigger('change');
65. // background.js var colorPicker = new ColorPicker; colorPicker.bind('change', function(color){ // ... }); this.append(colorPicker);
66. Children should’t know anything about their parents
67. What I learnt
68. Use the tools
69. Awesome debugger
73. Shortcuts
75. $0
76. Memory leaks
80. display: none;
81. Less DOM manipulation
82. mousemove handlers need to be fast
84. requestAnimationFrame()
85. 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; };
86. Most importantly
87. Advanced doesn’t mean complicated
88. Use simple building blocks
89. Tackle large problems by splitting them up
90. @maccman
91. Follow @fakeangus