Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developing large scale JavaScript applications


Published on

Developing large scale JavaScript applications

24/11/11 @ Front end meetup, Budapest (Hungary)

Published in: Technology
  • Be the first to comment

Developing large scale JavaScript applications

  1. 1. Developing large scaleJavaScript applications Milan Korsos, @korsosm Front End Developer, SoWink Inc
  2. 2. large scale JavaScriptnon-trival applicationsrequiring significant developer effort to maintain,where most heavy lifting data manipulation anddisplay falls to the browser
  3. 3. large scale JavaScript‘The secret to building large apps is never build large apps.Break your applications into small pieces. Then, assemblethose testable, bite-sized pieces into your big application.’ Justin Meyer, author JavaScriptMVC
  4. 4. modulemodule theory: everything is a module credit: Nicholas Zakas (@slicknet) module is an independent unit of functionality that is a part of the total structure of a web application
  5. 5. moduleany single module should be able to live on its ownloose coupling allows you to make changes to one modulewithout affecting the otherseach module is like a puzzle piece
  6. 6. moduleonly call your own methodsdon’t access DOM elements outside of your boxdon’t access non-native global objectsdon’t create global objectsdon’t directly reference to other modules
  7. 7. modulewe have a global object for our modules s = {}; s.quickBrowseAppView = new QuickBrowseAppView();
  8. 8. moduleModules consist of HTML + JavaScript + CSS we use jQuery to simplify JavaScript we use jQuery plugins, but NOT jQuery UI we use Backbone.js for MVC structures we use Underscore.js for templating we use LESS to extend CSS w dynamic behavior
  9. 9. backbone.jsModel-View-Controller pattern separate the different aspects of the application (input logic, business logic, UI logic)jQuery is a tool, but it doesn’t provide structure for the app Backbone.js provides an MVC like pattern
  10. 10. backbone.jsModels interactive data and the logic that surrounding itCollections ordered set of modelsViews listen events, reacts and render data models
  11. 11. backbone.jsBackbone is an event driven library a module that can be mixed in to any object, giving the object the ability to bind and trigger custom eventsYou can bind custom events to functions. collection.bind(‘changed’,view.render);
  12. 12. underscore.jsstore the templates in the HTML file use variables <%= variable %> use loops or conditions <% if (condition) { %> <% } %>always load the template only once!More:
  13. 13. LESSwww.lesscss.orgLESS extends CSS with dynamic behavior such as variables operations functions
  14. 14. code qualitycode reviewpair programmingwww.jshint.comNever push code to master that breaks the site!JavaScript: The Good Parts (Douglas Crockford)
  15. 15. hintssave ajax request get initial data on pageload buildFromDOM methoduse RESTful API with JSON /api/v1/comment GET/PUT/POST/DELETE methods
  16. 16. hintsdebugging never use alerts for debugging don’t use console.log(‘hello world’); for debugging define cookie controlled custom outputs for the modules quickbrowseConsole.log(‘hello world’)More:
  17. 17. hintsdon’t store ID’s in class names don’t do ugly things like this <p class=”comment-id-12”> use the HTML5 data attribute for this <p data-id=12>minify the code before deploymentwrite javascript in strict mode performance, eliminate pitfalls, prep. for future versions
  18. 18. hintswrite tests use Jasmine BDD and Sinon.JS for Backbone.js apps $ as the first character in the variable name if thevariable contains a jQuery selectordefine CONSTANTS at the top of the file
  19. 19. QuickBrowse case studyProfile browser feature.
  20. 20. QuickBrowse case studyModel: ProfileCollections: BufferItems UpcomingProfiles CurrentProfile VotedProfiles
  21. 21. QuickBrowse case studyViews: BufferProfilesView UpcomingProfilesView CurrentProfileView VotedProfilesView QuickBrowseAppView
  22. 22. QuickBrowse case studyRestriction Ask for new profiles in batches.So we also need a downloading collection. LoadingProfiles LoadingProfilesView
  23. 23. Thanks.We make it ridiculously easy to meet new people offline.