Developing large scale JavaScript applications
-
Upload
milan-korsos -
Category
Technology
-
view
2.628 -
download
1
description
Transcript of Developing large scale JavaScript applications
![Page 1: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/1.jpg)
Developing large scale JavaScript applications
Milan Korsos, @korsosmFront End Developer, SoWink Inc
![Page 2: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/2.jpg)
![Page 3: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/3.jpg)
large scale JavaScript
non-trival applications
requiring significant developer effort to maintain,
where most heavy lifting data manipulation and display falls to the browser
![Page 4: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/4.jpg)
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
![Page 5: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/5.jpg)
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
![Page 6: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/6.jpg)
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
![Page 7: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/7.jpg)
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
![Page 8: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/8.jpg)
module
we have a global object for our modules
s = {};
s.quickBrowseAppView = new QuickBrowseAppView();
![Page 9: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/9.jpg)
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
![Page 10: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/10.jpg)
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
![Page 11: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/11.jpg)
backbone.jsModels
interactive data and the logic that surrounding it
Collections
ordered set of models
Views
listen events, reacts and render data models
![Page 12: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/12.jpg)
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);
![Page 13: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/13.jpg)
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
![Page 14: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/14.jpg)
LESS
www.lesscss.org
LESS extends CSS with dynamic behavior such as
variables
operations
functions
![Page 15: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/15.jpg)
code quality
code review
pair programming
www.jshint.com
Never push code to master that breaks the site!
JavaScript: The Good Parts (Douglas Crockford)
![Page 16: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/16.jpg)
hintssave ajax request
get initial data on pageload
buildFromDOM method
use RESTful API with JSON
/api/v1/comment
GET/PUT/POST/DELETE methods
![Page 17: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/17.jpg)
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
![Page 18: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/18.jpg)
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
![Page 19: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/19.jpg)
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
![Page 20: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/20.jpg)
QuickBrowse case study
Profile browser feature.
![Page 21: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/21.jpg)
![Page 22: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/22.jpg)
QuickBrowse case studyModel: Profile
Collections:
BufferItems
UpcomingProfiles
CurrentProfile
VotedProfiles
![Page 23: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/23.jpg)
QuickBrowse case studyViews:
BufferProfilesView
UpcomingProfilesView
CurrentProfileView
VotedProfilesView
QuickBrowseAppView
![Page 24: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/24.jpg)
QuickBrowse case study
Restriction
Ask for new profiles in batches.
So we also need a downloading collection.
LoadingProfiles
LoadingProfilesView
![Page 25: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/25.jpg)
![Page 26: Developing large scale JavaScript applications](https://reader034.fdocuments.us/reader034/viewer/2022051314/54b7b78d4a7959181f8b463e/html5/thumbnails/26.jpg)
Thanks.
We make it ridiculously easy to meet new people offline.