Getting Fat. Tips and tricks for when you're building a single-page app

Transcription

1 Getting Fat Tips and tricks for when you're building a single-page app

2 Me Nick Front End Engineer Berlin based

3

4 Next SoundCloud

5 Pain points Dependencies CSS Management Packaging for efficient delivery

6 Dependencies

7 Dependencies Global namespaces window.sc = window.sc {}; SC.Sound = SC.Model.extend({ })

8 <script src="/lib/localstorage.js"></script> <script src="/lib/oauth-connection.js"></script> <script src="/lib/backbone-sync.js"></script> <script src="/lib/backbone-history.js"></script> <script src="/lib/url.js"></script> Dependencies <script src="/lib/time.js"></script> <script src="/lib/tmpl-manager.js"></script> <script src="/lib/images.js"></script> <script src="/lib/cache.js"></script> <script src="/lib/audio.js"></script> <script src="/lib/tracker.js"></script> <script src="/lib/page.js"></script> <script src="/lib/form.js"></script> <script src="/lib/followings.js"></script> <script src="/lib/page-list.js"></script> <script src="/lib/lists.js"></script> <script src="/lib/comment.js"></script> <script src="/lib/authorization.js"></script> <script src="/lib/connections.js"></script> <script src="/lib/swipe.js"></script> <script src="/lib/replace-diacritics.js"></script> <script src="/application.js"></script> <script src="/application-view.js"></script> <script src="/search-view.js"></script> <script src="/track/track.js"></script> <script src="/playlist/playlist.js"></script> <script src="/user/user.js"></script> <script src="/home/home.js"></script> <script src="/search/search.js"></script> <script src="/suggestions/suggestions.js"></script> Combining avoids this, but... Must load everything Ordering done manually No correlation between code and file names

9 Solution: Modules! RequireJS + AMD...but not Write CommonJS, serve AMD

10 Modules var Sound = require('models/sound'), URL = require('lib/url'); module.exports = { }; define( 'path/to/my-module', ['models/sound', 'lib/url'], function (require, exports, module) { var Sound = require('models/sound'), URL = require('lib/url'); module.exports = { }; } );

11 Graphs!

12 <script src="/lib/localstorage.js"></script> <script src="/lib/oauth-connection.js"></script> Dependencies <script src="/lib/backbone-sync.js"></script> <script src="/lib/backbone-history.js"></script> <script src="/lib/url.js"></script> <script src="/lib/time.js"></script> <script src="/lib/tmpl-manager.js"></script> <script src="/lib/images.js"></script> <script src="/lib/cache.js"></script> src="/lib/audio.js"></script> <script src="/lib/tracker.js"></script> src= require.js <script src="/lib/page.js"></script> data-main= application > <script src="/lib/form.js"></script> <script src="/lib/followings.js"></script> <script src="/lib/page-list.js"></script> <script src="/lib/lists.js"></script> <script src="/lib/comment.js"></script> <script src="/lib/authorization.js"></script> <script src="/lib/connections.js"></script> <script src="/lib/swipe.js"></script> <script src="/lib/replace-diacritics.js"></script> <script src="/application.js"></script> <script src="/application-view.js"></script> <script src="/search-view.js"></script> <script src="/track/track.js"></script> <script src="/playlist/playlist.js"></script> <script src="/user/user.js"></script> <script src="/home/home.js"></script> <script src="/search/search.js"></script> <script src="/suggestions/suggestions.js"></script> Must load everything Ordering done manually No correlation between code and file names

13 CSS {{insert witty meme image here}}

14 CSS body#pages.sounds #main-wrapper #mainwrapper-inner #soundpage #primary.socialsharing.share-plugin.last.twitter-sharebutton { } width: 101px!important;

15 CSS Problems Everything loaded at once Fragile to template changes Slow!

16 Our Solution Lots of small-to-medium sized views One CSS file per view.soundtitle info { display: inline-block; vertical-align: baseline; font-size: 11px; }.soundtitle title { display: block; width: 100%; }.soundtitle playbutton { margin-right: 5px; }.soundtitle tag { line-height: 12px; }

17 CSS JS Yep.

18 CSS JS define( "views/search/search-item.css", [], function(require, exports, module) { var style = module.exports = document.createelement("style"); style.appendchild( document.createtextnode( '.soundtitle info{display...}' ) ); } );

19 CSS Problems Everything loaded at once Fragile to template changes Slow!

20 Packaging

21 Packaging Combine + Minify Use the AST for great win Find just what you need Application files + assets

22 JS CSS Templates Vendor Templates Everything else vn-5c3afb.js tm-ae0623.js sc-f1800e.js

23 Minify UglifyJS Great out of the box With more poking, fantastic.

24 Preprocessors Development-only code function render() { //#IFDEF debug console.log('rendering'); //#ENDIF... }

25 Use the AST!

26 Using the AST var client_id = ENV === 'production'? 'abc' : 'def'; if ( DEBUG_MODE && somecondition) { console.log(client_id); } Mangle. Shortens variables, substitutes constants var a = 'production' === 'production'? 'abc' : 'def'; if (false && somecondition) { console.log(a); }

27 Using the AST var a = 'production' === 'production'? 'abc' : 'def'; if (false && somecondition) { console.log(a); } Squeeze. Many things, including dead code removal var a = 'abc';

28 Summing up Modular JS! Modular CSS! Modular JS + modular CSS + ASTs = win!

29 Kiitos! Questions? Nick #nextsoundcloud