Loading External Javascript libraries- SOLVED

help
1

Hi all,

I’ve got this Admin theme. It comes with several JS libraries. I’ve tried almost 2 days to get the JS libraries working correctly.

I’ve tried several ways to include multiple JS libraries in my meteor app but none seem to work fully.

I’ve tried the following -

  1. Included all JS external libraries in client/compatibility folder
  2. Add JS libraries via template.my_template.onRendered in my template file by adding script element, etc.

Now, I’m back to storing all files in client/compatibility folder. All JS files are loaded correctly in the meteor app. My chrome inspector doesn’t throw any error, yet the features are not working properly.

Would someone be able to explain why the JS libraries are not working as expected?

Thank you.

1 Like
2

Even if these files are in client/compatibility/, they are still going to be loaded following Meteor’s documented ordering, particularly referencing step 5:

Files are then loaded in alphabetical order of the entire path

The (rather kludgy) workaround is to prefix each file such that the required order is preserved.

00file2.js
01file1.js

May be worth trying.

3

I usually check atmosphere, copy some other wrapped 3rd party script package and replace internals with that external JS I need.

It really cannot be said any better way when you did not provided any useful info about that JS itself.

Or you can place it in /public and lazy load for example using dochead when needed.

4

hi.
I’m in your same situation.

I ported like 10 themes to meteor, and I think this is one of the worst part of this platform. It’s a nightmare.

There are several approaches possible:

  1. If they don’t interact with the server, put them in the client folder and hope that they will work

  2. If they interact with the server, check if any package exist first

  3. If it doesn’t exist, consider creating yours, it’s not that difficult

  4. Or use Webpack, or any kind of third party loader, to load them from the public folder. This has the bonus of speeding up your site, since loading is async and you can put the files on a CDN (you can’t do it if they reside in the client folder)

  5. Another big pitfall is that most libraries are not reactive friendly. Latency compensation is a new concept, and it is radically different from the rest. Sometimes is better to switch to another library.

Think charts for example. Some libraries are not efficient in drawing charts, so making them reactive will put an heavy strain on the client, making the site slow. It’s better to ditch the original library, which might look good, but doesn’t work good, for a better solution.

In the past I arrived to offer 75$ per hour to find someone to help me, but nobody could. I had to learn it the hacker way, by pulling my hair. I don’t want anyone else to feel this pain so I’m writing a book on the topic, because theming for meteor is too painful, and I think that for an app having a good look is as important as being useful. PM me if you are looking for some help, I could trade it for some proofreading.

Please MDG, if you read this, consider making theming easier :smile:

1 Like
5

Hi robfallows,

I have named my js files by this order -

01-example.js
02-example.js
03-example.js

Tried putting them in client/compatibility or client/lib but neither really worked.

Has it got to do with the global/local namespacing of each file I wonder?

6

Hi shock,

I have yet to check the packages in atmosphere because I’m afraid that they might not compatible.

Oh, do you mean storing the files in public folder and calling them in the tag?

7

Hi muaddib,

Thanks for your reply.

  1. I tried this and it doesn’t work fully
  2. What does interacting with server mean?
  3. I have yet to try this!
  4. Webpack? Is this the one - https://webpack.github.io/?
  5. Yes, I am more than happy to proofread to trade for some help. Pulled out most of my hair by now. Will PM you.
8

Ok my solution was relatively simple.

In case some people are trying to port over themes over to Meteor, here is what I did -

  1. All the JS libraries went into the client/compatibility folder.
  2. All the JS function calls went into the Template.mytemplate.onRendered(function({}); file.

Works perfectly!

4 Likes
9

@maxho beware that using onRendered might call the functions more times than needed.

10

  1. A carousel with static images doesn’t need to talk with the server, a google maps view might need to talk with the server

  2. yes, search on the forum for more infos

11

I see. Thanks!

What should I consider if onrendered might call functions more than necessary?

12

@muaddib I get what you mean about onRendered loading twice now.

The JS codes work the first time round. The first time I visit the page that runs Template.mytemplate.onRendered function, the JS codes work perfectly.

But when I click to revisit the same page, the JS codes break.

I attempted to put the same JS codes within the Meteor.startup function, the codes don’t run correctly.

13

It’s working for now after I wrapped all the JS function calls in Meteor.startup() and included Meteor.setTimeout() to allow all the DOM elements to be loaded before calling the JS functions.

14

@muaddib Hi, I definitely agree with you. I’ve tried also to port some theme into Meteor but with no real success but real great pain :slight_smile:
Hope your book will help. I’ll be a customer / beta reader :wink:

Keep going
Vincent
PS : facilitate this process can even open a “market theme for meteor”…