Meteor-platform packages and loading screens

Most people are confused about Meteor and what it consists of, its like a black box with confusing packages and dependencies.

To bring a little light in this I will drop here a list of all the packages, which make up the meteor-platform package. If you remove it from you app, you have a plain app, without any meteor in it:

application-configuration
autoupdate               
base64                   
binary-heap              
blaze                    
blaze-tools              
boilerplate-generator    
callback-hook            
check                    
ddp                      
deps                     
ejson                    
fastclick                
follower-livedata        
geojson-utils            
html-tools               
htmljs                   
http                     
id-map                   
jquery                   
json                     
launch-screen            
livedata                 
logging                  
meteor-platform          
minifiers                
minimongo                
mobile-status-bar        
mongo                    
observe-sequence         
ordered-dict             
random                   
reactive-dict            
reactive-var             
reload                   
retry                    
routepolicy              
session                  
spacebars                
spacebars-compiler       
templating               
tracker                  
ui                       
url                      
webapp                   
webapp-hashing

Disclaimar This is mostly for myself to look up 🙂

much packages, much size?

The last time i checked it was 317 KB. Thats the cost of Meteor’s amazing toolset.

On top of that comes your code and your templates. Currently there is not way to lazy load templates, so your visitor will have to download the whole package on its first visit. Once Server side rendering comes, this will feel less of a problem, as the user will already see the app, while its downloading the logic in the background.

A Meteor loading screen

On a modern internet connection a Meteor app takes ~2-3 to load, on a slow mobile connection it might take longer, so having a nice loading screen, makes it feel will feel shorter 🙂 I can recommend using the meteorhacks:inject-initial package with the following approach:

// inject a css file, to style the loading screen
Inject.rawHead('loadingScripts', '  <link class="inject-loading-container" rel="stylesheet" href="/my-pre-loading-styles-from-the-public-folder.css">');

// inject HTML into the body, to make up the screen
Inject.rawBody('loadingBody', '  <div class="inject-loading-container">'+ "\n" +
                                '    <h1>'+ "\n" +
                                '      Loading...'+ "\n" +
                                '    </h1>'+ "\n" +
                                '  </div>');

/**
Moves all javascripts to the end of the body, so we can inject the loading screen
*/
Inject.rawModHtml('moveScriptsToBottom', function(html) {
    // get all scripts
    var scripts = html.match(/<script type="text\/javascript" src.*"><\/script>\n/g);

    // if found
    if(!_.isEmpty(scripts)) {
        // remove all scripts
        html = html.replace(/<script type="text\/javascript" src.*"><\/script>\n/g, '');
        // add scripts to the bottom
        html = html.replace(/<\/body>/, scripts.join('') + '\n</body>');
        return html.replace(/[\n]+/g,"\n").replace(/ +/g,' ');

    // otherwise pass the raw html through
    } else {
        return html.replace(/[\n]+/g,"\n").replace(/ +/g,' ');
    }
});

This should let you add any HTML and CSS prior to the loading of your app. In you apps code, you just need to put then the following to make sure the loading CSS and HTMl gets removed:

Meteor.startup(function() {

    // remove the loading box and css file
    $('.inject-loading-container').remove();

});

I hope you find this post helpful.