Developing large scale JavaScript applications 24/11/11 @ Front end meetup, Budapest (Hungary) www.milankorsos.com www.twitter.com/korsosm www.sowink.com

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.