Building large JS apps

Transcript

1. @maccman May 2012

2. I am @maccman (not @mccman)

3. I like CoffeeScript

4. Building hardware

5. None
6. None

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");

27. None
28. None

29. Stylo

30. None

31. styloapp.com

32. github.com/maccman/stylo

33. None
34. None
35. None
36. None

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
38. None

39. H e a d e r Stage Element Element Dimensions

    Background Border Border Radius Shadow Opacity Inspector
40. None
41. None
42. None
43. None

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

52. None

53. Store state in the controllers, not the models, not the

    view

54. Styles

55. No IDs

56. Separate stylesheets for each controller

57. None

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

70. None
71. None
72. None

73. Shortcuts

74. None

75. $0

76. Memory leaks

77. None
78. None
79. None

80. display: none;

81. Less DOM manipulation

82. mousemove handlers need to be fast

83. None

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