In recent years a number of libraries for building large JavaScript applications has appeared. As we no longer need to battle DOM differences between browsers we can finally focus on building highly interactive front-end applications instead. But before we can do a good job with these new libraries we need unlearn our previous DOM-centric approach and need to be aware of good practices and patterns of developing modern javascript app.
It will start with jQuery based old style practices and try to discuss on how can we approach to a modular, decoupled, scalable application architecture. This slide was prepared in very short time for technical session series of Digital World 2014 (http://www.digitalworld.org.bd/technical-session). The event video is here - https://www.youtube.com/watch?v=Gpw7l27MUUc (slide was not properly covered in video).
It has taken inspiration, ideas (, even some contents) from the following sources -
* http://addyosmani.com/largescalejavascript/
* http://addyosmani.com/resources/essentialjsdesignpatterns/book/
* https://www.youtube.com/watch?v=vXjVFPosQHw
* https://www.youtube.com/watch?v=qWr7x9wk6_c
* https://speakerdeck.com/kimjoar/patterns-of-large-scale-javascript-applications-1
2. Who are the target audience?
What is Javascript?
I use JS to do form validation
Javascript is the interactive tool that I use for user intraction
I write the full app in JS
3. What do we actually mean by Large Scale Javascript
Application?
Large in size?
Large in complexity?
Large in developer count?
4. Why do we care?
The ability of browsers have increased
The load on the client, rather than on the server
High level of interaction
8. The secret to building large apps is never build large
apps. Break up your applications into small pieces.
Then, assemble those testable, bite-sized pieces into
your big
– Justin Meyer
10. We have a good main.js
function somethingGood() {
// Good code
}
// few other functions ...
$( document ).ready(function() {
$('#aButton').onClick(function(e) {
// Do something
});
// few event bindings ...
});
11. But at the end, it become bad!
function somethingGood() {
// ## Bad code, full of mess ##
}
// 39 strange functions with 40% repetation
$( document ).ready(function() {
$('#aButton').onClick(function(e) {
// Do something ## became 60 lines! ##
});
// ## 33 bindings ## , some event may bound multiple times
});
53. On demand script loading
if(teamProfile) {
// Load and show team profile
require(['views/TeamProfileView'], function(TeamProfileView) {
var teamInfo = { model : app.reqres.request('core:team', shortName) }
app.main.show(new TeamProfileView(teamInfo));
});
}
68. What about list of Todos?
var Todos = Backbone.Collection.extend({
model: app.Todo,
// Filter down the list of all todo items that are finished.
completed: function () {
return this.filter(function (todo) {
return todo.get('completed');
});
},
// Many other functions related to list ...
});
Collections
69. Create a Todo list
var todoList = new Todos(
{title: 'Do something good'},
{title: 'Another Task'},
{title: 'This task is Done', completed: true},
);
70. Who will create them actually?
collection.fetch(); // Pulls list of items from server
collection.create(); // Create new item in list
// Sync a model
model.fetch(); // Fetch an item from server
model.save(); // Save changes to model
model.destroy(); // Delete a model