I don&#x27;t get the boilerplate around App.main:<p><pre><code>    var App = {
        main: (function() {
            window.addEventListener(&#x27;load&#x27;, function() {
                &#x2F;&#x2F; ... initialization ...
            });
        })()
    };
</code></pre>
The initialization code is with an event handler function, fine. But then:<p>- Then registering of that event handler is stuffed into a closure, although it doesn&#x27;t declare any variables or pollutes the global namespace in any way.<p>- This closure is then called immediately and its return value is stored into App.main, although it doesn&#x27;t return anything, so App.main is declared as &quot;undefined&quot;.<p>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 &#x2F; load:<p><pre><code>    var App = {};

    window.addEventListener(&#x27;load&#x27;, function() {
        &#x2F;&#x2F; ... initialization ...
    });
</code></pre>
Or, if you want a &quot;real&quot; main function (i.e. an &quot;App.main&quot; that is actually a function):<p><pre><code>    var App = {
        main: function() {
            &#x2F;&#x2F; ... initialization ...
        }
    };
    window.addEventListener(&#x27;load&#x27;, App.main)
</code></pre>
If you put your &lt;script&gt; tags within &lt;body&gt;, right before &lt;&#x2F;body&gt;, you could simplify this further to:<p><pre><code>    var App = {
        main: function() {
            &#x2F;&#x2F; ... initialization ...
        }
    };
    App.main();</code></pre>