Meteor JS javascript files in main.* still don't load correctly. Best practices for load order?

Question

For the past 2 weeks I've been building a Meteor project and I would like some thoughts on load order from people who've used and struggled with Meteor.

Take this template:

http://bootstraptaste.com/free-one-page-bootstrap-template-amoeba/

All the important javascript files are referenced at the bottom of index.html. If you try to port this over to a Meteor project, good luck getting all the effects and animations to work, especially those in main.js

• Simply leaving the script tags at the bottom means a ton of the javascript and jQuery animations won't work because in Meteor it's entirely possible for the JS files to load before the DOM is loaded in its entirety. And this breaks lots of things.

• With Meteor, any file named main.* will be loaded after everything else.

NOTE that this appears to only mean that main.* starts loading after everything else. It doesn't say anything about when files finish loading. The scripts in main.js still don't work.

If I put all the script tags into their own main.html and then attach it to index.html as a template, the animations still don't work.

• I've tried

  Template.layout.created = function() { $('head').append(''); }

and this doesn't work as well.

• Using Meteor.startup( func ) is incredibly unreliable because even though "On a client, the function will run as soon as the DOM is ready," Meteor's definition of "DOM ready" does NOT equal "after everything in the DOM is loaded." So the function still can run after the DOM is not entirely loaded.

Anyway, anyone else have major issues like this with Meteor? And any best practices or work-arounds?

Answer 1

Typically you don't want to be using script tags in Meteor. Simply add the .js files to your project and they will load themselves. Standard practice is to put jQuery plugins and so on in a lib folder. Meteor loads stuff in lib folders first.

The way to think of these things in Meteor is different to other frameworks. Once you have put stuff like skrollr.min.js etc. into the project then you can call on it anywhere. The same deal applies to css in case you are using link tags.

As for doing something after the DOM is loaded you are looking for

Template.myTemplate.rendered = function ( ) { ... }

This is called once after the DOM has been rendered for the first time. .created happens at the point of the template being loaded and so the DOM won't be available yet.

Without looking into the example template you linked too extensively it looks like you would want to put the login in main.js into a rendered callback for the appropriate template.

So if you were trying to recreate that page in the live demo I would put all the html inside a template, having all the css and js resources in your project, remove all the link and script tags and add the main.js stuff to rendered.