Your SlideShare is downloading. ×
Developing large scale JavaScript applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Developing large scale JavaScript applications

2,671
views

Published on

Developing large scale JavaScript applications …

Developing large scale JavaScript applications

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

www.milankorsos.com
www.twitter.com/korsosm
www.sowink.com

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,671
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developing large scaleJavaScript applications Milan Korsos, @korsosm Front End Developer, SoWink Inc
  • 2. large scale JavaScriptnon-trival applicationsrequiring significant developer effort to maintain,where most heavy lifting data manipulation anddisplay falls to the browser
  • 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. 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. 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. 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. modulewe have a global object for our modules s = {}; s.quickBrowseAppView = new QuickBrowseAppView();
  • 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. 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. backbone.jsModels interactive data and the logic that surrounding itCollections ordered set of modelsViews listen events, reacts and render data models
  • 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. underscore.jsstore 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
  • 13. LESSwww.lesscss.orgLESS extends CSS with dynamic behavior such as variables operations functions
  • 14. code qualitycode reviewpair programmingwww.jshint.comNever push code to master that breaks the site!JavaScript: The Good Parts (Douglas Crockford)
  • 15. hintssave ajax request get initial data on pageload buildFromDOM methoduse RESTful API with JSON /api/v1/comment GET/PUT/POST/DELETE methods
  • 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: http://gist.github.com/1391691
  • 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. hintswrite tests use Jasmine BDD and Sinon.JS for Backbone.js apps http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.htmluse $ as the first character in the variable name if thevariable contains a jQuery selectordefine CONSTANTS at the top of the file
  • 19. QuickBrowse case studyProfile browser feature.
  • 20. QuickBrowse case studyModel: ProfileCollections: BufferItems UpcomingProfiles CurrentProfile VotedProfiles
  • 21. QuickBrowse case studyViews: BufferProfilesView UpcomingProfilesView CurrentProfileView VotedProfilesView QuickBrowseAppView
  • 22. QuickBrowse case studyRestriction Ask for new profiles in batches.So we also need a downloading collection. LoadingProfiles LoadingProfilesView
  • 23. Thanks.We make it ridiculously easy to meet new people offline.