requireJs, bundling and minification

When you start building large-scale web applications, it will become apparent to you later on that you can’t just put all of your code into one or two javascript files. If you had been programming the object-oriented way before, you probably know what I’m talking about. Buzzwords like “separation of concerns”, decoupling, “spaghetti and ravioli” would sound familiar. Unfortunately (as of this writing anyways), javascript does not¬†yet¬†natively provide means for javascript programmers to organize their codes that follow these software architecture paradigm.

requireJS is one of the many tools that helps us solve this problem.

So why would you use requireJS when you already have bundling and minification?

  •  For the sake of just using it, and being geeky/cool
  •  My “bundle” became a very huge file (from 100 separate modules), performance became an issue, and I don’t really need to load this entire bundle the whole time

So anyway, it’s already very late, long story short… I had a very good use-case for using both of these awesome technologies.

@section scripts {
    <script type="text/javascript">
        var require = {
            urlArgs: "ts=" + new Date().getTime(), // cache-buster, remove during production
            waitSeconds: 15,
            baseUrl: '@Url.Content("~/Scripts/app/bing")',
            paths: {
                "bingmap": '@Scripts.Url("~/bundles/bingmap")',
                "coordsvm": '@Scripts.Url("~/bundles/coordsvm")',
                "toolsvm": '@Scripts.Url("~/bundles/toolsvm")', 
                "config": '@Scripts.Url("~/bundles/config")', 
                "ko": '@Scripts.Url("~/bundles/knockout")',
                "amplify": '@Url.Content("~/Scripts/lib/amplify.min")'
            shim: {
                "amplify": {
                    deps: ["jquery"],
                    exports: "amplify"
    <script data-main='@Scripts.Url("~/bundles/bingmain")'  src="@Scripts.Url("~/bundles/require")"></script>

What I did was to create bundles that point to my modules. And then pre-define them before invoking the requireJS magic script tag.

And then on the module(s), I can then invoke named reference(s) to my bundles, loaded asynchronously…

define(['ko', 'tool','Microsoft','config'],
    function (ko, tool, Microsoft, config) {
        "use strict";
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.
Tagged with: , ,
Posted in SPA