Developing large scale JavaScript applications
4 likes2,035 views
The document discusses developing large-scale JavaScript applications, emphasizing the importance of modularity and loose coupling to manage complexity. It introduces various tools and frameworks like jQuery, Backbone.js, and Underscore.js, which aid in structuring applications and enhancing code quality. Additionally, it highlights best practices for coding, testing, and performance optimization in JavaScript development.
Developing large scale JavaScript applications
- 1. Developing large scale JavaScript applications Milan Korsos, @korsosm Front End Developer, SoWink Inc
- 3. large scale JavaScript non-trival applications requiring significant developer effort to maintain, where most heavy lifting data manipulation and display falls to the browser
- 4. large scale JavaScript ‘The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application.’ Justin Meyer, author JavaScriptMVC
- 5. module module 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
- 6. module any single module should be able to live on its own loose coupling allows you to make changes to one module without affecting the others each module is like a puzzle piece
- 7. module only call your own methods don’t access DOM elements outside of your box don’t access non-native global objects don’t create global objects don’t directly reference to other modules
- 8. module we have a global object for our modules s = {}; s.quickBrowseAppView = new QuickBrowseAppView();
- 9. module Modules 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
- 10. backbone.js Model-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
- 11. backbone.js Models interactive data and the logic that surrounding it Collections ordered set of models Views listen events, reacts and render data models
- 12. backbone.js Backbone 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 events You can bind custom events to functions. collection.bind(‘changed’,view.render);
- 13. underscore.js store the templates in the HTML file use variables <%= variable %> use loops or conditions <% if (condition) { %> <% } %> always load the template only once! More: http://gist.github.com/1329750
- 14. LESS www.lesscss.org LESS extends CSS with dynamic behavior such as variables operations functions
- 15. code quality code review pair programming www.jshint.com Never push code to master that breaks the site! JavaScript: The Good Parts (Douglas Crockford)
- 16. hints save ajax request get initial data on pageload buildFromDOM method use RESTful API with JSON /api/v1/comment GET/PUT/POST/DELETE methods
- 17. hints debugging 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: http://gist.github.com/1391691
- 18. hints don’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 deployment write javascript in strict mode performance, eliminate pitfalls, prep. for future versions
- 19. hints write tests use Jasmine BDD and Sinon.JS for Backbone.js apps http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html use $ as the first character in the variable name if the variable contains a jQuery selector define CONSTANTS at the top of the file
- 20. QuickBrowse case study Profile browser feature.
- 22. QuickBrowse case study Model: Profile Collections: BufferItems UpcomingProfiles CurrentProfile VotedProfiles
- 23. QuickBrowse case study Views: BufferProfilesView UpcomingProfilesView CurrentProfileView VotedProfilesView QuickBrowseAppView
- 24. QuickBrowse case study Restriction Ask for new profiles in batches. So we also need a downloading collection. LoadingProfiles LoadingProfilesView
- 26. Thanks. We make it ridiculously easy to meet new people offline.