I don't get the boilerplate around App.main: var App = { main: (function() { window.addEventListener('load', function() {

I don't get the boilerplate around App.main: var App = { main: (function() { window.addEventListener('load', function() { // ... initialization ... }); })() }; The initialization code is with an event handler function, fine. But then: - Then registering of that event handler is stuffed into a closure, although it doesn't declare any variables or pollutes the global namespace in any way. - This closure is then called immediately and its return value is stored into App.main, although it doesn't return anything, so App.main is declared as "undefined". So there are two layers around that code which serve no purpose at all. Why not simplifying it? All you want is an App namespace and an event handler for window / load: var App = {}; window.addEventListener('load', function() { // ... initialization ... }); Or, if you want a "real" main function (i.e. an "App.main" that is actually a function): var App = { main: function() { // ... initialization ... } }; window.addEventListener('load', App.main) If you put your <script> tags within <body>, right before </body>, you could simplify this further to: var App = { main: function() { // ... initialization ... } }; App.main();