Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | milan-korsos |
View: | 2,625 times |
Download: | 1 times |
Developing large scale JavaScript applications
Milan Korsos, @korsosmFront End Developer, SoWink Inc
large scale JavaScript
non-trival applications
requiring significant developer effort to maintain,
where most heavy lifting data manipulation and display falls to the browser
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
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
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
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
module
we have a global object for our modules
s = {};
s.quickBrowseAppView = new QuickBrowseAppView();
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
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
backbone.jsModels
interactive data and the logic that surrounding it
Collections
ordered set of models
Views
listen events, reacts and render data models
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);
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
LESS
www.lesscss.org
LESS extends CSS with dynamic behavior such as
variables
operations
functions
code quality
code review
pair programming
www.jshint.com
Never push code to master that breaks the site!
JavaScript: The Good Parts (Douglas Crockford)
hintssave ajax request
get initial data on pageload
buildFromDOM method
use RESTful API with JSON
/api/v1/comment
GET/PUT/POST/DELETE methods
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
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 deployment
write javascript in strict mode
performance, eliminate pitfalls, prep. for future versions
hints
write tests
use Jasmine BDD and Sinon.JS for Backbone.js appshttp://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
QuickBrowse case study
Profile browser feature.
QuickBrowse case studyModel: Profile
Collections:
BufferItems
UpcomingProfiles
CurrentProfile
VotedProfiles
QuickBrowse case studyViews:
BufferProfilesView
UpcomingProfilesView
CurrentProfileView
VotedProfilesView
QuickBrowseAppView
QuickBrowse case study
Restriction
Ask for new profiles in batches.
So we also need a downloading collection.
LoadingProfiles
LoadingProfilesView
Thanks.
We make it ridiculously easy to meet new people offline.