Yepnope js multiple files loading - yepnope

I have a list of js files:
1.js
2.js
3.js
4.js
5.js
6.js
etc
I want to load it on order, from 1 to 6.
If I do it this way:
yepnope({
load: '1.js',
complete: function() {
next();
},
});
function next(){
yepnope({
load: '2.js',
complete: function() {
next2();
},
});
}
I will be coding ridicules much codes.
Does anyone have an solution?

https://github.com/SlexAxton/yepnope.js/issues/10#issuecomment-722029
yepnope does enforce execution order. It will download all of the js files at the same time (to speed things up) but it will execute them in the order you provide
yepnope(['1.js','2.js','3.js','4.js','5.js','6.js']);

Related

Meteor.js: Using server.call when testing with Chimp

I'm having an issue triggering method calls while writing feature tests. I'm not actually given an error in the chimp terminal log, but the server.call line is where the failure is highlighted. I believe this might be related to the folder structure of the app (which I've loosely based on Letterpress) or the order in which the call is defined and then triggered. When I move the method call out to my main.js file (in the root folder of the app), it works without a problem.
hooks.js path: /app/tests/cucumber/features/support/hooks.js
(function(){
module.exports = function() {
this.Before(function() {
console.log("server calling");
server.call("fixtures/resetUsers"); //test stops here
});
};
})();
fixtures.js /app/packages/fixtures/fixtures.js
(function(){
'use strict';
Meteor.methods({
"fixtures/resetUsers": function() {
Meteor.users.remove({});
}
});
})();
package.js /app/packages/fixtures/packages.js
Package.describe({
name: 'forum:fixtures',
version: '0.0.1',
summary: '',
debugOnly: true
});
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('ecmascript');
api.addFiles('fixtures.js', 'server');
});
Note: I originally didn't have the fixtures folder wrapped in the packages folder (it still didn't work then) but came across this post by #Xolv.io, the developers of Chimp.js who advised to do so.
with the new chimp, you can just use:
server.execute(function() {
// code you put here will run on the server
});
Check this repository for examples:
https://github.com/xolvio/automated-testing-best-practices/
In your sample repo, if you define a meteor method, 'something', you can call as server.call('something').
If you have a standard method definition (not even a meteor method), say something2=function(){}, with xolvio:backdoor, you can server.execute('something2'). ( calling chimp with --ddp switch)

Sometimes Meteor.users.findOne(username:'john') returns undefined?

I'm not sure why this code works once in a while and fails other times:
var u = Meteor.users.findOne(username:'john');
console.log(u);
When I go to my page for the first time, sometimes the console.log(u) shows some results. But if I press refresh, console.log(u) shows undefined. I can't consistently reproduce one issue or the other. It seems pretty random when i get undefined or a collection. What's wrong with my code? How do I consistently get a collection for the variable u?
Like Christian Fritz said in comment on your question, it's probably a matter of collection not being fully loaded when your code is executed. If you use iron:router, you can use subscribe or waitOn as described there: http://iron-meteor.github.io/iron-router/#the-waiton-option so the page is loaded only when the collections are ready (meaning they are fully loaded).
You can also put it in a helper or use a Tracker Autorun to detect when your entry is available and then do whatever you want to do with it.
Edit: A sample for iron:router below
// myproject.jsx
var Cars = new Mongo.Collection('cars');
if(Meteor.isServer)
{
Meteor.publish("myCollections", function () {
return Meteor.users.find();
});
Meteor.publish("anotherCollection", function(){
return Cars.find();
});
}
//lib/router.js
Router.route('/my-page', {
name: 'myPage',
layoutTemplate: 'myPage',
waitOn: function() {
'use strict';
return [Meteor.subscribe('myCollection'),Meteor.subscribe('anotherCollection')];
},
data: function() {
'use strict';
return Collection.findOne();
}
});

Meteor performance: not sure if publication is causing the lag

My Meteor app runs slowly in the beginning for about ten seconds, and then becomes fast again. I am trying to improve the performance but having troubles to find the real cause.
I thought the problem was that I am publishing all the course information like following:
if (Meteor.isServer) {
Meteor.publish("courses", function() {
return Courses.find();
});
}
I tried using Kadira to monitor exactly what's happening. However, looking at the result, I am starting to think maybe it's not the real problem.
If it only takes 292ms for pubsub response time, it shouldn't feel that laggy but I cannot think of any other reason why the app would be so slow in the beginning and become fast again. Can an expert point me to the redirection?
UPDATE:
I could improve the duration of lagginess in the beginning by making the following changes:
in /server/publications.js
if (Meteor.isServer) {
Meteor.publish("courses", function() {
// since we only need these two fields for the search bar's autocomplete feature
return Courses.find({}, {fields: {'catalog':1, 'titleLong':1}});
});
Meteor.publish("courseCatalog", function(catalog) {
// publish specific information only when needed
return Courses.find({"catalog": catalog});
});
}
and in router.js I made changes accordingly so I subscribe based on specific pages. But there's still some lag in the beginning and I wonder if I can make more optimizations, and what is the real cause of the slowness in the beginning.
UPDATE2:
I followed the suggestion and made changes like below:
Session.set('coursesReady', false); on startup.
and in router:
Router.route('/', function () {
Meteor.subscribe("courses", function(err) {
if (!err) {
console.log("course data is ready")
Session.set('coursesReady', true);
}
});
....
and in /lib/helpers.js which returns data for typeahead library
if (Meteor.isClient) {
Template.registerHelper("course_data", function() {
console.log("course_data helper is called");
if (Session.get('coursesReady')) {
var courses = Courses.find().fetch();
return [
{
name: 'course-info1',
valueKey: 'titleLong',
local: function() {
return Courses.find().fetch();
},
template: 'Course'
},
But now the problem is that when the helper function is called, the data is never ready. The console print:
Q: How do I ensure that the helper function is called only after the data is ready, OR called again when the data is ready? Since Session is reactive, shouldn't it be called again automatically?
I can't check this right now, but I believe your issue might be that the course_data helper is being run multiple times before all 1000+ documents in the subscription are ready, causing the typeahead package to re-run some expensive calculations. Try something like this:
/client/views/global/helpers.js
Template.registerHelper("course_data", function() {
if (!Session.get('coursesReady')) return [];
return [ //...
/client/subscriptions.js
Meteor.subscribe("courses", function(error) {
if (!error) Session.set('coursesReady', true);
});
Update:
Really, Meteor's new features this.subscribe() and Template.instance().subscriptionsReady() are ideal for this. Session isn't really the right choice, but it should still be reactively updating (not sure why it isn't for you). Try instead making the following changes to /client/views/navwithsearch.js (and main, though ideally both templates should share a single search template):
Template.NavWithSearch.onCreated(function() {
this.subscribe('courses');
});
Template.NavWithSearch.onRendered(function() {
this.autorun(function() {
if (Template.instance().subscriptionsReady()) {
Meteor.typeahead.inject();
}
});
});
The idea is to tie the lifecycle of the subscription to the view that will actually be using that subscription. This should delay the typeahead injection until the subscription is completely ready.

How to pause Iron Router template rendering until all data is available?

Current common Iron Router pattern is to display a loading template while waiting for data to be available. But I would prefer simply to wait on the previous rendered template/data context until data is available and then trigger rerendering. Data is quickly available, so that short flicker of loading template is worse than a short delay user will experience after a link click.
Does this pattern work for you?
Router.route('/', {
name: 'nameOfTemplate',
data: function() { return CollectionName.find({title: 'nameOfMongoDBQuery'}); },
waitOn: function() { return Meteor.subscribe('nameOfSubscription'); } // waits until resources arrive before rendering page
});
You'll want to specify an explicit action function like so:
action: function() {
if (this.ready()) {
this.render();
}
}
This will just not render anything until the data is around.

meteor.js - onReady callback for multiple subscriptions

I'm in a situation where I need to have the full data from several subscriptions before my app can run properly. In a jQuery/Backbone.js context I would do something like this :
var sub1 = Meteor.subscribe('foo'),
sub2 = Meteor.subscribe('bar');
$.when(sub1, sub2, function(){
// do things
});
but I think this is not the Meteor way... (?) I could do something like this
Meteor.subscribe('foo', function(){
Meteor.subscribe('bar', function(){
// do things
});
});
but this quickly gets messy. There is probably some kind of helper/pattern for doing this and I just don't know it...
NB - I am using the outstanding iron-router, and have also tried this :
this.route('baz', {
// code ...
'before' : [
function(){
this.subscribe('foo').wait();
},
function(){
this.subscribe('bar').wait();
}
],
// more code ..
});
but this doesn't seem to prevent downstream code from running, and so doesn't solve my problem...
It turns out the old way isn't working. This one does though. I'm using it for my callback bin at http://sa.gy
this.route('baz', {
before: function(){
this.subscribe('foo').wait();
this.subscribe('bar').wait();
}
});

Resources