Extract the code from the microloader that still is useful

[cburgdorf]

Beside loading the js and css files, the microloader also puts some conditional meta tags into the head. We need to look at the code from the microloader and extract the bits that are still useful (like putting in those conditional meta tags)

Here is an example microloader stolen from here:

http://cburgdorf.github.com/octotett/#start

<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");b=0;for(e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');b=0;for(e=d.length;b<
e;b++)a=d[b],"string"!=typeof a&&(a=a.path),document.write('<script src="'+a+'"><\/script>')}})(this);;Ext.blink({"id":"36a722d6-a55a-4a63-a8b6-3f88ee171bfb","js":[{"update":"delta","path":"app.js","type":"js","bundle":true},{"type":"js","path":"libs/quartettjs/quartett.js"},{"type":"js","path":"libs/quartettjs/quartett.data.js"},{"type":"js","path":"libs/jsdeferred/jsdeferred.nodoc.js"}],"css":[{"update":"delta","type":"css","path":"resources/css/app.css"},{"update":"delta","type":"css","path":"resources/css/app-overwrites.css"},{"update":"delta","type":"css","path":"resources/css/GameView.css"},{"update":"delta","type":"css","path":"resources/css/CardActionOverlay.css"}]})</script>

[mattgoldspink]

Beautifying the JS so I can see what it's doing more easily.

Just to check - it looks like this data comes from the app.json file. I typically don't use this (and hence I don't use the microloader). What's your thoughts on keeping the app.json? Do you prefer using it?

The reason I ask is that I'd need to parse that app.json instead and build delta updates, etc which makes the task more complex. If people are happier just to use regular html, then the default sencha-touch-debug.js file will add these meta-tags for you.

<script type="text/javascript">
    (function (h) {
        function addMetaTag(name, content) {
            document.write('<meta name="' + name + '" content="' + content + '">')
        }
        if ("undefined" === typeof g) var g = h.Ext = {};
        g.blink = function (c) {
            var d = c.js || [],
                c = c.css || [],
                b, e, a;
            addMetaTag("viewport", "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
            addMetaTag("apple-mobile-web-app-capable", "yes");
            addMetaTag("apple-touch-fullscreen", "yes");
            b = 0;
            for (e = c.length; b < e; b++) a = c[b], "string" != typeof a && (a = a.path), document.write('<link rel="stylesheet" href="' + a + '">');
            b = 0;
            for (e = d.length; b < e; b++) a = d[b], "string" != typeof a && (a = a.path), document.write('<script src="' + a + '"><\/script>')
        }
    })(this);;
    Ext.blink({
        "id": "36a722d6-a55a-4a63-a8b6-3f88ee171bfb",
        "js": [{
            "update": "delta",
            "path": "app.js",
            "type": "js",
            "bundle": true
        }, {
            "type": "js",
            "path": "libs/quartettjs/quartett.js"
        }, {
            "type": "js",
            "path": "libs/quartettjs/quartett.data.js"
        }, {
            "type": "js",
            "path": "libs/jsdeferred/jsdeferred.nodoc.js"
        }],
        "css": [{
            "update": "delta",
            "type": "css",
            "path": "resources/css/app.css"
        }, {
            "update": "delta",
            "type": "css",
            "path": "resources/css/app-overwrites.css"
        }, {
            "update": "delta",
            "type": "css",
            "path": "resources/css/GameView.css"
        }, {
            "update": "delta",
            "type": "css",
            "path": "resources/css/CardActionOverlay.css"
        }]
    })
</script>

[cburgdorf]

I don't want to continue using the app.json file. I just wondered if the microloader still has bits in it that we need to write in the html manually now that we drop using it. I thought the microloader would write different meta tags based on the device. But as it seems it doesn't detect for the device. So would we just put those meta tags directly in the index..html file then?

[mattgoldspink]

I'm going to close this - the latest version now supports app.json and it's up to the end user to decided to keep the microloader in or not. The grunt-sencha-dependencies task just gives the list of classes that the app loaded, but beyond that it's up to the user to do what they see fit with those files (i.e. concat, validate, modify their index.html)