Developing large scale JavaScript applications

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.